:root{
  /* ===== OBRAS ONSITE LOCKED BRAND PALETTE — per MASTER_BLUEPRINT_v1, one standard =====
     Primary Orange  #ED7D1A  ·  Orange-dark #cf6a12
     Steel Silver    #C0C0C0  ·  Steel #828A91  ·  Silver-light #EEF1F5
     Background      #0F1115 (charcoal)  ·  Navy surfaces #0F2740 / #16385C
     RAG only: Green #2FA84F · Amber #FFC000 · Red #C0392B (status colours — NOT brand accents) */
  --dark:#0f1115; --navy:#0f2740; --navy2:#16385c;
  --gold:#ED7D1A; --gold-d:#cf6a12;   /* OBRAS ONSITE brand orange */
  --green:#2fa84f; --green-d:#1f7a39;
  --red:#c0392b;
  --ink:#1a1d21; --muted:#5a6470; --line:#e3e7ec; --bg:#f5f7fa; --card:#ffffff; --white:#fff;
  --silver:#C0C0C0; --steel:#828a91; --silver-l:#eef1f5;   /* OBRAS ONSITE steel silver per blueprint */
  --radius:14px; --shadow:0 2px 8px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:'Segoe UI',Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 20px;font-weight:700;font-size:15px;cursor:pointer;transition:.15s;font-family:inherit}
.btn-gold{background:var(--gold);color:#1a1400}
.btn-gold:hover{background:var(--gold-d)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-d)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:9px 14px;font-size:14px;border-radius:9px}

/* header */
header.nav{position:sticky;top:0;z-index:50;background:var(--dark);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:90px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:64px;width:auto;max-width:none;flex:none;object-fit:contain;display:block}
.brand-tag{display:none}

/* ===== Division architecture: icons, flagship treatment, QR-in-every-division (OBRAS authority) ===== */
.div-head{display:flex;align-items:flex-start;gap:18px}
.div-head>div:last-child{flex:1}
.div-icon{flex:0 0 auto;width:62px;height:62px;border-radius:15px;background:linear-gradient(135deg,var(--silver-l),#fff);border:1.5px solid var(--silver);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.div-icon svg{width:36px;height:36px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.div-qr{margin-top:13px;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.8px;color:var(--steel);text-transform:uppercase}
.div-qr b{color:var(--gold-d);font-size:15px;line-height:1}
.flagship-div{border-top:4px solid var(--gold)}
.div-flag-badge{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#1a1400;font-weight:800;font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-bottom:16px;box-shadow:0 4px 14px rgba(237,125,26,.3)}
.flagship-div .div-icon{background:linear-gradient(135deg,var(--gold),var(--gold-d));border-color:var(--gold-d)}
.flagship-div .div-icon svg{stroke:#fff}
.adv-tag{display:inline-block;background:rgba(237,125,26,.14);color:var(--gold-d);border:1px solid rgba(237,125,26,.4);font-weight:800;font-size:12px;letter-spacing:.5px;text-transform:uppercase;padding:3px 11px;border-radius:999px;margin-left:12px;vertical-align:middle}
@media(max-width:760px){.div-head{flex-direction:column;gap:12px}}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a{color:#cfd6de;font-weight:600;font-size:15px}
.nav-links a:hover{color:var(--gold)}
.cart-btn{position:relative;background:var(--navy2);color:#fff;border-radius:10px;padding:9px 15px;font-weight:700;cursor:pointer;border:0;font-family:inherit;font-size:14px}
.cart-btn .badge{position:absolute;top:-7px;right:-7px;background:var(--gold);color:#1a1400;border-radius:999px;min-width:20px;height:20px;font-size:12px;display:grid;place-items:center;padding:0 5px;font-weight:800}
/* anchor links clear the sticky header */
html{scroll-padding-top:96px}
/* back-to-top button (injected by nav.js) */
.btt{position:fixed;bottom:22px;right:20px;z-index:60;width:46px;height:46px;border-radius:50%;background:var(--gold);color:#1a1400;border:0;font-size:22px;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}
.btt.show{opacity:1;pointer-events:auto;transform:none}
.btt:hover{background:var(--gold-d)}
@media(prefers-reduced-motion:reduce){.btt{transition:none}}
/* mobile hamburger nav (burger injected by nav.js) */
.nav-burger{display:none}
@media(max-width:760px){
  header.nav .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:9px;cursor:pointer;padding:0;margin-left:auto;order:2;flex:0 0 auto}
  header.nav .nav-burger span{display:block;width:22px;height:2px;margin:0 auto;background:#fff;transition:transform .22s ease,opacity .2s ease;border-radius:2px}
  header.nav.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.nav.nav-open .nav-burger span:nth-child(2){opacity:0}
  header.nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.nav .wrap{flex-wrap:wrap;row-gap:0;height:auto;min-height:64px}
  header.nav .cart-btn,header.nav .wrap>.btn{order:3;margin-left:10px}
  header.nav .nav-links{order:4;width:100%;margin-left:0;display:none;flex-direction:column;gap:0;overflow:visible;white-space:normal;padding:4px 0 8px;border-top:1px solid rgba(255,255,255,.1);margin-top:8px;background:var(--dark)}
  header.nav.nav-open .nav-links{display:flex}
  header.nav .nav-links a{flex:0 0 auto;width:100%;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.07);white-space:normal}
}

/* hero */
.hero{background:radial-gradient(1200px 500px at 70% -10%,#1c426b 0%,var(--navy) 45%,var(--dark) 100%);color:#fff;padding:72px 0 64px}
/* hero gateway check — live product demo (G/A/R) */
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:center}
.hero-copy{min-width:0}
.gw-card{background:#10151d;border:1px solid #283341;border-radius:14px;font-family:Consolas,'SF Mono',ui-monospace,monospace;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden}
.gw-top{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid #283341}
.gw-tt{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--silver)}
.gw-id{font-size:11px;color:#7c8794}
.gw-q{padding:17px 16px;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-weight:800;font-size:24px;color:#fff;line-height:1.08;border-bottom:1px solid #283341}
.gw-rows{list-style:none;margin:0;padding:6px 0}
.gw-rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 16px;font-size:12.5px;color:#8a929e;border-bottom:1px dashed rgba(40,51,65,.6)}
.gw-rows li:last-child{border-bottom:0}
.gw-rows li>span:first-child{transition:color .3s}
.gw-st{font-size:10px;font-weight:700;letter-spacing:.8px;padding:3px 8px;border:1px solid #283341;color:#7c8794;min-width:84px;text-align:center;border-radius:4px;transition:all .3s}
.gw-rows li.ok>span:first-child{color:#eaf0f7}
.gw-rows li.ok .gw-st{color:var(--green);border-color:var(--green);background:rgba(47,168,79,.12)}
.gw-foot{display:flex;align-items:center;gap:12px;padding:15px 16px;border-top:1px solid #283341}
.gw-lamp{width:15px;height:15px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(192,57,43,.6);transition:all .45s;flex:0 0 auto}
.gw-lamp.amber{background:#ffc000;box-shadow:0 0 12px rgba(255,192,0,.5)}
.gw-lamp.green{background:var(--green);box-shadow:0 0 16px rgba(47,168,79,.65)}
.gw-verdict{font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.4px;color:var(--red);transition:color .45s}
.gw-verdict.amber{color:#ffc000}
.gw-verdict.green{color:var(--green)}
.gw-count{margin-left:auto;font-size:10px;color:#7c8794;letter-spacing:.6px;text-transform:uppercase}
.gw-cap{margin-top:14px;color:var(--silver);font-size:12.5px;text-align:center;opacity:.85}
@media(prefers-reduced-motion:reduce){.gw-lamp,.gw-verdict,.gw-st,.gw-rows li>span{transition:none}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:30px}.gw-cap{display:none}}
/* why-obras "written from the deck" statement */
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.why-fact{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.why-fact:last-child{border-bottom:0}
.why-fact .wn{font-weight:800;font-size:32px;color:var(--gold);min-width:74px;line-height:1.1}
.why-fact .wt{color:var(--silver);font-size:15px;padding-top:6px;line-height:1.5}
.why-fact .wt b{color:#fff}
@media(max-width:860px){.why-grid{grid-template-columns:1fr;gap:30px}}
/* operating-layer thesis + impact numbers */
.layer4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;text-align:left}
.layer4 .lcell{background:#141a23;padding:22px 20px}
.layer4 .lcell.us{background:#1d1408;border-top:3px solid var(--gold)}
.layer4 .lname{font-family:Consolas,monospace;font-size:11px;letter-spacing:1px;color:var(--steel);text-transform:uppercase}
.layer4 .lcell.us .lname{color:var(--gold)}
.layer4 .ldoes{font-weight:800;font-size:19px;margin-top:6px;color:#fff}
.libnum{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;margin-top:8px}
.libnum .ln{background:#141a23;padding:22px 18px}
.libnum .ln b{display:block;font-weight:800;font-size:42px;color:var(--gold);line-height:1}
.libnum .ln span{font-family:Consolas,monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--silver);margin-top:9px;display:block}
@media(max-width:760px){.layer4{grid-template-columns:1fr 1fr}.libnum{grid-template-columns:1fr 1fr}}
.hero h1,
.hero .h-was-h1{font-size:48px;line-height:1.08;letter-spacing:-.5px;max-width:720px}
.hero h1 .hl,
.hero .h-was-h1 .hl{color:var(--gold)}
.hero p.sub{font-size:19px;color:#c4cdd8;margin:18px 0 28px;max-width:600px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.trustbar{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;color:#aab6c4;font-size:14px;font-weight:600}
.trustbar span{display:flex;align-items:center;gap:8px}
.tick{color:var(--green);font-weight:900}

/* sections */
section{padding:58px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 36px}
.sec-head .eyebrow{color:var(--gold-d);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:13px}
.sec-head h2,
.sec-head .h-was-h2{font-size:34px;letter-spacing:-.5px;margin:6px 0 10px}
.sec-head p{color:var(--muted);font-size:17px}

/* product grid */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:28px}
.toolbar input{flex:1;min-width:220px;max-width:360px;padding:12px 16px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.15s}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(16,24,40,.16);border-color:rgba(237,125,26,.55)}
/* premium hover - lift + gold glow across every card surface (command-centre feel) */
.pack-card,.lib-card,.who,.cos-disccard,.cos-outcard,.cs-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.pack-card:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(0,0,0,.42),0 0 0 1px rgba(237,125,26,.6)}
.lib-card:hover,.who:hover,.cos-disccard:hover,.cos-outcard:hover,.cs-card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(16,24,40,.16);border-color:rgba(237,125,26,.55)}
@media(prefers-reduced-motion:reduce){.card,.pack-card,.lib-card,.who,.cos-disccard,.cos-outcard,.cs-card{transition:none}}
.card .badge-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.tag{font-size:11px;font-weight:800;letter-spacing:.5px;padding:4px 9px;border-radius:6px;text-transform:uppercase}
.tag.pack{background:var(--gold);color:#1a1400}
.tag.swms{background:#e8f0f9;color:var(--navy2)}
.tag.cat{background:#eef1f4;color:var(--muted)}
.card h3,
.card .h-was-h3{font-size:18px;line-height:1.25;margin-bottom:6px}
.card .code{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.5px}
.card .desc{font-size:14px;color:var(--muted);margin:10px 0 16px;flex:1}
.card .price-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.price{font-size:24px;font-weight:800;color:var(--ink)}
.price small{font-size:13px;color:var(--muted);font-weight:600}

/* featured packs */
.featured{background:#fff}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.pack-card{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(180deg,#16385c,#0f2740);color:#fff;padding:24px;box-shadow:var(--shadow)}
.pack-card .tag.pack{position:absolute;top:16px;right:16px}
.pack-card h3,
.pack-card .h-was-h3{font-size:20px;margin:4px 0 12px;max-width:80%}
.pack-card ul{list-style:none;margin:0 0 16px;font-size:13.5px;color:#cfd9e4}
.pack-card ul li{padding:3px 0 3px 22px;position:relative}
.pack-card ul li:before{content:"\2713";color:var(--gold);position:absolute;left:0;font-weight:900}
.pack-card .price{color:#fff}
.pack-card .price small{color:#9fb0c2}

/* bundles + membership */
.pack-card .bundle-badge{position:absolute;top:16px;right:16px;background:var(--green);color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 10px;border-radius:999px;text-transform:uppercase}
.membership{margin-top:22px;background:linear-gradient(90deg,#111418,#1c426b);color:#fff;border-radius:var(--radius);padding:26px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;border:1px solid rgba(255,255,255,.1)}
.membership .m-info h3,
.membership .m-info .h-was-h3{font-size:22px;margin-bottom:6px}
.membership .m-info h3 .yr,
.membership .m-info .h-was-h3 .yr{color:var(--gold)}
.membership .m-info p{color:#c4cdd8;font-size:15px;max-width:560px}
.membership .m-buy{text-align:right;white-space:nowrap}
.membership .m-buy .price{color:#fff;font-size:30px;display:block;margin-bottom:8px}
.membership .m-buy .price small{color:#9fb0c2;font-size:14px}

/* how it works */
.how{background:var(--navy);color:#fff}
.how .sec-head h2,
.how .sec-head .h-was-h2{color:#fff}.how .sec-head .eyebrow{color:var(--gold)}.how .sec-head p{color:#b9c5d2}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:24px}
.step .n{width:42px;height:42px;border-radius:10px;background:var(--gold);color:#1a1400;font-weight:900;font-size:20px;display:grid;place-items:center;margin-bottom:14px}
.step h4,
.step .h-was-h4{font-size:17px;margin-bottom:6px}.step p{color:#b9c5d2;font-size:14.5px}

/* co-brand band */
.coband{background:linear-gradient(120deg,#0c1830,#0a1424);color:#fff;border-top:3px solid var(--gold,#ED7D1A)}
.coband .wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:space-between}
.coband h2,
.coband .h-was-h2{font-size:28px;max-width:640px}
.coband p{color:#c7cdd6;margin-top:8px;max-width:620px}

/* AI brand-render framed showcase (promo-shot) */
.promo-shot{margin:0;display:block}
.promo-shot img{width:100%;display:block;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);transition:transform .3s ease,box-shadow .3s ease}
.promo-shot:hover img{transform:translateY(-5px);box-shadow:0 34px 78px rgba(0,0,0,.62);border-color:rgba(237,125,26,.5)}
.promo-shot figcaption{margin-top:13px;color:var(--silver,#aab2bd);font-size:13px;letter-spacing:.3px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.promo-shot img{transition:none}.promo-shot:hover img{transform:none}}

/* faq */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-item summary{padding:18px 20px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";color:var(--green-d);font-size:22px;font-weight:800}
.faq-item[open] summary:after{content:"\2013"}
.faq-item p{padding:0 20px 18px;color:var(--muted)}

/* footer */
footer{background:var(--dark);color:#aab6c4;padding:48px 0 30px}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;margin-bottom:28px}
footer img{height:42px;width:auto;margin-bottom:12px}
footer h5,
footer .h-was-h5{color:#fff;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
footer a{display:block;color:#aab6c4;padding:4px 0;font-size:14px}
footer a:hover{color:var(--gold)}
.disclaimer{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;font-size:12.5px;color:#7e8a98;line-height:1.6}

/* showcase carousel */
.carousel{position:relative;max-width:var(--maxw);margin:0 auto;padding:28px 22px 0}
.slides{position:relative;height:230px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;display:flex;align-items:center;gap:28px;padding:34px 40px;color:#fff}
.slide.on{opacity:1}
.slide .s-txt{flex:1}
.slide .s-eyebrow{color:var(--gold);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:12px}
.slide h3,
.slide .h-was-h3{font-size:30px;line-height:1.1;margin:6px 0 8px;letter-spacing:-.5px}
.slide p{color:rgba(255,255,255,.85);font-size:15px;max-width:460px;margin-bottom:14px}
.slide .s-count{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dots b{width:9px;height:9px;border-radius:999px;background:#cdd5de;cursor:pointer;transition:.2s}
.dots b.on{background:var(--navy);width:24px}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:0;width:38px;height:38px;border-radius:999px;font-size:20px;cursor:pointer;z-index:2;color:var(--navy);font-weight:800;box-shadow:var(--shadow)}
.car-btn.prev{left:30px}.car-btn.next{right:30px}
@media(max-width:760px){
  .carousel{padding:18px 10px 0}
  .slides{height:auto;min-height:190px}
  .slide{position:relative;opacity:1;display:none;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 18px}
  .slide.on{display:flex}
  .slide h3,
  .slide .h-was-h3{font-size:21px}
  .slide p{font-size:14px;max-width:none}
  .car-btn{display:none}
  .nav-links a{padding:10px 4px;display:inline-flex;align-items:center}
}

/* card cover (real document page image) */
.card .cover{height:175px;border-radius:10px;margin:-4px 0 14px;position:relative;overflow:hidden;cursor:pointer;background:#eef1f4;border:1px solid var(--line)}
.card .cover .cov-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;background:#fff}
.card .cover .ct{position:absolute;top:10px;left:10px;background:rgba(17,20,24,.85);color:#fff;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 8px;border-radius:6px;z-index:2}
.card .cover.swms .ct{background:rgba(31,122,57,.92)}
.card .cover.pack .ct{background:rgba(224,168,0,.96);color:#1a1400}
.card .cover.system .ct{background:rgba(58,47,107,.92)}
.card .cover .pv{position:absolute;top:10px;right:10px;background:rgba(17,20,24,.72);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:6px;z-index:2}
.card .cover:hover .pv{background:var(--gold);color:#1a1400}
.card-btns{display:flex;gap:8px}
.card-btns .btn{flex:1;justify-content:center}
.btn-outline{background:transparent;border:1.5px solid var(--line);color:var(--navy)}
.btn-outline:hover{border-color:var(--navy)}

/* preview modal */
.pmodal{position:fixed;inset:0;z-index:200;background:#0a0d12;display:none;flex-direction:column;padding:18px}
.pmodal.show{display:flex}
.pm-head{display:flex;align-items:center;gap:14px;color:#fff;padding:6px 4px 12px}
.pm-head h3,
.pm-head .h-was-h3{font-size:17px;flex:1}
.pm-head .x{background:none;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.pm-frame{flex:1;background:#525659;border-radius:10px;overflow:auto;padding:16px}
.pm-frame .pm-page{display:block;max-width:880px;width:100%;margin:0 auto 16px;box-shadow:0 4px 20px rgba(0,0,0,.45);background:#fff}
.pm-frame .pm-note{color:#cfd6de;font-size:13px;text-align:center;padding:6px 0 14px}
.pm-foot{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:12px 4px 2px}
.pm-foot .pm-price{color:#fff;font-size:22px;font-weight:800;margin-right:auto}

/* pack detail page */
.packpage{position:fixed;inset:0;z-index:150;background:var(--bg);overflow:auto;display:none}
.packpage.show{display:block}
.pp-bar{position:sticky;top:0;z-index:2;background:var(--dark);color:#fff;display:flex;align-items:center;gap:16px;padding:14px 22px}
.pp-bar .back{background:var(--navy2);color:#fff;border:0;border-radius:9px;padding:9px 16px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px}
.pp-bar .pp-t{font-weight:800;font-size:16px;flex:1}
.pp-hero{background:linear-gradient(135deg,#16385c,#0f2740);color:#fff;padding:34px 22px}
.pp-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:start}
.pp-hero .eyebrow{color:var(--gold);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:12px}
.pp-hero h2,
.pp-hero .h-was-h2{font-size:32px;margin:6px 0 8px}
.pp-hero p{color:#c4cdd8;max-width:560px}
.pp-hero .pp-buy{text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:18px 18px 20px}
.pp-hero .pp-buy .price{font-size:34px;font-weight:800;display:block;margin-bottom:10px}
.pp-docs{max-width:var(--maxw);margin:0 auto;padding:34px 22px}
.pp-docs h3,
.pp-docs .h-was-h3{font-size:20px;margin-bottom:6px}
.pp-docs .sub{color:var(--muted);margin-bottom:22px}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.doc-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.doc-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(16,24,40,.12)}
.doc-card .dthumb{height:155px;background:#eef1f4;position:relative;overflow:hidden}
.doc-card .dthumb .dimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;background:#fff}
.doc-card .dthumb .pv{position:absolute;top:8px;right:8px;background:rgba(17,20,24,.72);color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;z-index:2}
.doc-card:hover .dthumb .pv{background:var(--gold);color:#1a1400}
.doc-card .dthumb .dn{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(17,20,24,.88));color:#fff;font-weight:700;font-size:12.5px;line-height:1.25;padding:20px 12px 10px;z-index:2}
.doc-card .dmeta{padding:12px 14px;font-size:12px;color:var(--muted);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.doc-card .dmeta .view{color:var(--green-d)}

/* testimonials */
.testi{background:#fff}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.tcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.tcard .stars{color:var(--gold);font-size:16px;letter-spacing:2px;margin-bottom:10px}
.tcard p{font-style:italic;color:var(--ink);margin-bottom:14px}
.tcard .who{font-weight:800;font-size:14px}
.tcard .who span{color:var(--muted);font-weight:600}

/* cart drawer */
.overlay{position:fixed;inset:0;background:rgba(8,12,18,.55);opacity:0;pointer-events:none;transition:.2s;z-index:160}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:-440px;width:420px;max-width:92vw;height:100%;background:#fff;z-index:170;transition:.25s;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.2)}
.drawer.show{right:0}
.drawer .dhead{padding:20px;background:var(--dark);color:#fff;display:flex;justify-content:space-between;align-items:center}
.drawer .dhead h3,
.drawer .dhead .h-was-h3{font-size:18px}
.drawer .close{background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
.drawer .items{flex:1;overflow:auto;padding:14px 20px}
.ci{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.ci .ci-main{flex:1}
.ci h4,
.ci .h-was-h4{font-size:14.5px;margin-bottom:3px}
.ci .ci-code{font-size:12px;color:var(--muted)}
/* Tells the buyer BEFORE checkout whether an item downloads instantly or is
   supplied on enquiry. Most of the catalogue has no Payhip product behind it
   yet, and finding that out only after clicking Checkout reads as broken. */
.ci .ci-flag{display:inline-block;margin-top:4px;font-size:11px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.ci .ci-flag.now{background:#e7f6ec;color:#1f7a39;border:1px solid #b7e2c5}
.ci .ci-flag.enq{background:#fff3e0;color:#a35a00;border:1px solid #f2d0a0}
.ci .ci-price{font-weight:800;white-space:nowrap}
.ci .rm{background:none;border:0;color:var(--red);cursor:pointer;font-size:12px;font-weight:700;padding:4px 0}
.empty{color:var(--muted);text-align:center;padding:40px 10px}
.dfoot{padding:20px;border-top:1px solid var(--line)}
.totrow{display:flex;justify-content:space-between;font-size:20px;font-weight:800;margin-bottom:14px}
.dfoot .btn{width:100%;justify-content:center}
.note{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}

/* Training & RTO unit cards */
.rto-unit{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 16px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow)}
.rto-unit strong{font-size:15px;color:var(--ink);letter-spacing:.4px}
.rto-unit span{font-size:13.5px;color:var(--muted)}
.rto-unit em{color:var(--gold-d);font-style:normal;font-weight:700}
/* VOC category */
.tag.voc{background:var(--navy2);color:#fff}
.cover.voc{background:linear-gradient(135deg,#16385c,#0f2740)}

@media(max-width:760px){
  .hero h1,
  .hero .h-was-h1{font-size:34px}.brand img{height:50px;width:auto;max-width:none;flex:none}.nav .wrap{height:64px;flex-wrap:nowrap;padding-top:8px;padding-bottom:8px;gap:10px}.nav-links{order:3;width:100%;margin-left:0;gap:18px;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}.nav-links a{flex:0 0 auto}.cart-btn{margin-left:auto}
  footer .cols{grid-template-columns:1fr}
  .sec-head h2,
  .sec-head .h-was-h2{font-size:26px}
}

/* ---- platform sections (2026-05-30) ---- */
.sec-sub{font-size:15px;color:var(--muted);margin-top:4px}
.whois-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.who{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.who h4,
.who .h-was-h4{margin:0 0 6px;font-size:18px;color:var(--navy)}
.who p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.why{background:var(--navy);color:#fff}
.why .sec-head h2,
.why .sec-head .h-was-h2{color:#fff}
.why .sec-head .eyebrow{color:var(--gold)}
.why-lead{max-width:880px;margin:0 auto;text-align:center;color:#d5dee8;font-size:19px;line-height:1.65}
.leadgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lead-card a{min-height:24px;display:inline-flex;align-items:center}
.lead-card{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(180deg,#16385c,#0f2740);color:#fff;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.lead-card .lc-tier{color:var(--gold);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:12px}
.lead-card h3,
.lead-card .h-was-h3{margin:6px 0 4px;font-size:21px}
.lead-card .lc-q{color:#aebccd;font-size:13px;font-style:italic;margin:0 0 12px}
.lead-card .lc-list{list-style:none;padding:0;margin:0 0 16px;flex:1}
.lead-card .lc-list li{position:relative;padding-left:20px;margin:5px 0;font-size:13px;color:#dbe5ef}
.lead-card .lc-list li:before{content:"\2713";color:var(--gold);position:absolute;left:0;font-weight:900}
.lead-card .lc-price{font-size:26px;font-weight:800;margin-bottom:12px}
.lead-card.feature{outline:2px solid var(--gold)}
@media(max-width:980px){.leadgrid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.whois-grid{grid-template-columns:1fr 1fr}.leadgrid{grid-template-columns:1fr}}
/* ---- category landing tiles (2026-05-31) ---- */
.cat-tiles-lab{font-weight:800;color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:1px;margin:0 0 10px}
.cat-tiles{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.cat-tile{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px;color:var(--navy);cursor:pointer;font-family:inherit;transition:.15s;box-shadow:var(--shadow)}
.cat-tile:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* ---- document control stamp (2026-05-31) ---- */
.docctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 8px;font-size:11px}
.dc-code{font-family:Consolas,"Courier New",monospace;font-weight:800;color:var(--navy);background:#eef3f8;border:1px solid var(--line);border-radius:5px;padding:2px 7px;letter-spacing:.3px}
.dc-meta{color:var(--muted);font-weight:600;letter-spacing:.2px}

/* ---- Buy by state / library ---- */
.state-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;margin:0 0 26px}
.state-bar-lbl{font-weight:800;color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-right:6px}
.state-chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:800;font-size:14px;color:var(--navy);cursor:pointer;font-family:inherit;transition:.15s;box-shadow:var(--shadow)}
.state-chip:hover{background:#eef3f8}
.state-chip.active{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* 23 Sep 2026 owner ruling 11: available products and coming-soon products are separated by a heading
   that spans the whole grid, so they never read as equally purchasable. */
.lib-group-head{grid-column:1/-1;margin:6px 0 -4px;padding-top:10px;border-top:1px solid var(--line)}
.lib-group-head:first-child{border-top:0;padding-top:0}
.lib-group-head h3,
.lib-group-head .h-was-h3{margin:0;font-size:19px;color:var(--navy);display:flex;align-items:center;gap:9px}
.lib-group-n{font-size:12px;font-weight:800;color:var(--muted);background:rgba(127,127,127,.12);border-radius:999px;padding:3px 9px}
.lib-group-head p{margin:3px 0 0;color:var(--muted);font-size:14px;max-width:70ch}

.lib-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.lib-card.state{border-top:4px solid var(--gold)}
.lib-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.lib-scope{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:5px}
.lib-scope.st{background:var(--gold);color:var(--navy)}
.lib-scope.nat{background:#eef3f8;color:var(--navy);border:1px solid var(--line)}
.lib-badge{font-size:11px;font-weight:700;color:var(--muted)}
.lib-card h3,
.lib-card .h-was-h3{margin:0 0 2px;font-size:20px;color:var(--navy)}
.lib-count{font-size:12px;font-weight:800;color:var(--green);letter-spacing:.3px;margin-bottom:8px}
.lib-tag{color:var(--muted);font-size:14px;margin:0 0 12px;line-height:1.5}
.lib-out{list-style:none;padding:0;margin:0 0 16px;flex:1}
.lib-out li{position:relative;padding-left:20px;margin:6px 0;font-size:13px;color:var(--ink)}
.lib-out li:before{content:"\2713";color:var(--green);position:absolute;left:0;font-weight:900}
.lib-price{font-size:26px;font-weight:800;color:var(--navy);margin-bottom:12px}
.enterprise{margin-top:24px;display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:center;background:linear-gradient(135deg,#16385c,#0f2740);color:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.ent-eyebrow{color:var(--gold);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:12px}
.enterprise h3,
.enterprise .h-was-h3{margin:6px 0 4px;font-size:24px}
.ent-tag{color:#fff;font-weight:700;font-size:16px;margin:0 0 8px}
.ent-desc{color:#cfd9e4;font-size:14px;line-height:1.6;margin:0 0 12px}
.ent-out{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.ent-out li{position:relative;padding-left:20px;font-size:13px;color:#dbe5ef}
.ent-out li:before{content:"\2713";color:var(--gold);position:absolute;left:0;font-weight:900}
.ent-cta{text-align:center}
@media(max-width:760px){.lib-grid{grid-template-columns:1fr}.enterprise{grid-template-columns:1fr}.ent-out{grid-template-columns:1fr}#kitForm{grid-template-columns:1fr!important}#kitForm>*{min-width:0;max-width:100%}}

/* ---- RRP / Launch / Save price display (site-wide) ---- */
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.rrp{color:var(--muted);text-decoration:line-through;font-size:15px;font-weight:600}
.save{background:rgba(237,125,26,.13);color:var(--gold-d);font-weight:800;font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid rgba(237,125,26,.35);white-space:nowrap}
/* ---- Flagship hero cards ---- */
.flagship-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.flag-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#16385c,#0f2740);color:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);overflow:hidden}
.flag-card.hero{outline:2px solid var(--gold)}
.flag-badge{align-self:flex-start;background:var(--gold);color:var(--navy);font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.flag-card h3,
.flag-card .h-was-h3{margin:0 0 8px;font-size:19px;line-height:1.2;color:#fff}
.flag-desc{color:#cfd9e4;font-size:13px;line-height:1.55;margin:0 0 14px}
.flag-incl{list-style:none;padding:0;margin:0 0 14px}
.flag-incl li{position:relative;padding-left:22px;margin:7px 0;font-size:13px;color:#eaf1f8;line-height:1.4}
.flag-incl li:before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:900}
.flag-price{margin-top:auto;margin-bottom:14px;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.flag-price .price{color:#fff;font-size:24px;font-weight:800}
.flag-price .rrp{color:#9fb0c2}
.flag-price .save{background:rgba(255,192,0,.15);color:var(--gold);border-color:transparent}
@media(max-width:980px){.flagship-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flagship-grid{grid-template-columns:1fr}}

/* ---- High-Rise Structural division ---- */
.hr-flag{background:linear-gradient(135deg,#1c426b,#0a1f38);color:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);outline:2px solid var(--gold)}
.hr-flag h3,
.hr-flag .h-was-h3{color:#fff;font-size:25px;margin:8px 0 6px}
.hr-flag p{color:#cfddec;font-size:14px;line-height:1.6;margin:0 0 14px;max-width:780px}
.hr-flag .flag-price{margin-bottom:14px}
.hr-flag .flag-price .price{color:#fff;font-size:26px;font-weight:800}
.hr-flag .flag-price .rrp{color:#b9b2d8}
.hr-flag .flag-price .save{background:rgba(255,192,0,.15);color:var(--gold);border-color:transparent}
.hr-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.hr-badge{background:var(--gold);color:var(--navy);font-weight:800;font-size:11px;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px}

/* ---- Trust assurances (operating-system feel) ---- */
.trust-bar{background:var(--navy);color:#fff}
.trust-bar .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;padding:14px 24px}
.trust-bar span{font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.trust-bar span b{color:var(--gold);margin-right:5px}
.trust-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 4px}
.trust{font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.trust b{color:var(--green);margin-right:3px}
#ppHero .trust{color:#cfd9e4}
#ppHero .trust b{color:var(--gold)}
/* ---- Product imagery (construction photos with graceful fallback) ---- */
.card-photo{width:100%;height:150px;object-fit:cover;border-radius:10px;margin:0 0 14px;display:block;background:#eef3f8}
.pm-note + .trust-row{justify-content:center;margin-bottom:10px}
/* ---- System card status-board header (command-centre widget look) ---- */
.sysboard{background:linear-gradient(135deg,#16385c,#0f2740);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:11px 13px;margin:0 0 14px}
.sysboard-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.sb-live{width:9px;height:9px;border-radius:50%;background:#28c76f;flex:none;box-shadow:0 0 0 3px rgba(40,199,111,.18)}
.sb-name{flex:1;min-width:0;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#dbe5ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-tag{flex:none;font-size:9px;font-weight:800;letter-spacing:1px;color:#9fb0c2;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:2px 6px}
.sysboard-rag{display:flex;gap:6px}
.sb-cell{flex:1;text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:5px 0;border-radius:5px;color:#0f2740}
.sb-cell.g{background:#28c76f}
.sb-cell.a{background:#ffc000}
.sb-cell.r{background:#ea5455;color:#fff}
/* ---- Command centre: five-pillar overview ---- */
.command{background:var(--navy);color:#fff}
.command .sec-head h2,
.command .sec-head .h-was-h2{color:#fff}
.command .sec-head .eyebrow{color:var(--gold)}
.command .sec-head .sec-sub{color:#aebccd}
.pillar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pillar-tile{display:flex;flex-direction:column;background:linear-gradient(180deg,#16385c,#0f2740);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px;text-decoration:none;transition:.15s}
.pillar-tile:hover{border-color:var(--gold);transform:translateY(-3px)}
.pillar-tile.feature{outline:2px solid var(--gold)}
.pt-k{color:var(--gold);font-weight:800;font-size:13.5px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;line-height:1.2}
.pt-q{color:#fff;font-style:italic;font-size:13px;margin:0 0 10px;line-height:1.4}
.pt-in{color:#aebccd;font-size:12px;line-height:1.55;flex:1;margin-bottom:12px}
.pt-go{color:var(--gold);font-weight:800;font-size:12px}
@media(max-width:980px){.pillar-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pillar-grid{grid-template-columns:1fr}}

/* clickable product-card hint + detail "what's included" block */
.lib-pv{color:var(--gold);font-size:12px;font-weight:800;margin:2px 0 12px;letter-spacing:.2px}
.pp-incl{grid-column:1/-1;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.pp-incl h3,
.pp-incl .h-was-h3{margin:0 0 12px;color:var(--navy);font-size:18px}
.pp-incl ul{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.pp-incl li{position:relative;padding-left:22px;font-size:14px;color:var(--ink)}
.pp-incl li:before{content:"\2713";color:var(--green);position:absolute;left:0;font-weight:900}
.pp-incl .pp-note{color:var(--muted);font-size:13px;margin:0}
.pp-qr{margin-top:14px;background:#fff7e6;border:1px solid #f5d98a;border-left:4px solid var(--gold);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--ink);line-height:1.5}
.pp-qr b{color:var(--navy)}
.pp-qr a{color:var(--navy);font-weight:800;text-decoration:underline}
@media(max-width:640px){.pp-incl ul{grid-template-columns:1fr}}
/* ---- Four-level operating system: command boards on the system page ---- */
.sys-intro{grid-column:1/-1;background:var(--navy);color:#fff;border-radius:12px;padding:14px 18px;margin-bottom:4px;font-size:14px;line-height:1.5}
.sys-intro b{color:var(--gold)}
.sys-board{display:inline-block;background:var(--gold);color:var(--navy);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:999px;margin-right:10px}
.sys-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sys-bc{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.sys-bc.l1{border-top-color:var(--gold)}
.sys-bc.l2{border-top-color:var(--navy)}
.sys-bc.l3{border-top-color:var(--green)}
.sys-bc.l4{border-top-color:var(--gold)}
.sbc-h{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--navy);font-size:15px;margin-bottom:10px}
.sbc-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:800;flex:none}
.sys-bc ul{list-style:none;padding:0;margin:0}
.sys-bc li{position:relative;padding-left:16px;margin:7px 0;font-size:13px;color:var(--ink);line-height:1.45}
.sys-bc li:before{content:"\2013";position:absolute;left:0;color:var(--muted)}
@media(max-width:980px){.sys-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sys-grid{grid-template-columns:1fr}}
/* Live Demo nav button */
.nav-links a.nav-demo{background:var(--gold);color:#1a1400;padding:7px 13px;border-radius:8px;font-weight:800;line-height:1}
.nav-links a.nav-demo:hover{background:var(--gold-d);color:#1a1400}

/* Operating System Demo callout (pack page + preview modal) */
.pp-demo{margin-top:12px;background:#eef4fb;border:1px solid #c7d8ea;border-left:4px solid var(--navy);border-radius:10px;padding:11px 14px;font-size:13.5px;color:var(--ink);line-height:1.5}
.pp-demo b{color:var(--navy)}
.pp-demo a{color:var(--navy);font-weight:800;text-decoration:underline}

/* mobile table scroll */
@media(max-width:620px){.gw-act,.v-hist,.cmp{display:block;width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}}

/* ====================================================================
   M4 - CONSISTENT, HIGH-CONTRAST PRICING (2026-06-04)
   One pricing standard site-wide:
     - Current price  = Obras Onsite Gold  (instantly visible on dark cards)
     - RRP / old price = light grey, strikethrough
     - Monthly / "per" = light grey
     - CTA             = gold button (.btn-gold, already standard)
   Light catalogue cards keep their dark price (already high-contrast on white).
   These rules sit last so they win the cascade; selectors match existing
   specificity so no !important is needed. ==================================*/
.flag-price{color:var(--gold);font-size:28px;font-weight:800;line-height:1.15}  /* flagship plain-text number -> gold, headline size */
.flag-price .price{color:var(--gold)}
.hr-flag .flag-price .price{color:var(--gold)}
.flag-card .flag-price .price{color:var(--gold)}
.pack-card .price{color:var(--gold)}
.membership .m-buy .price{color:var(--gold)}
.pp-hero .pp-buy .price{color:var(--gold)}
.lead-card .lc-price{color:var(--gold)}
/* RRP / old price -> light grey strikethrough on dark cards */
.flag-price .rrp{color:#cbd5e1}
.hr-flag .flag-price .rrp{color:#cbd5e1}
.pack-card .rrp{color:#cbd5e1}
.pp-hero .pp-buy .rrp{color:#cbd5e1}
.membership .m-buy .rrp{color:#cbd5e1}
/* monthly / per-unit small text -> light grey on dark cards */
.flag-price small,.flag-price .per{color:#dbe5ef}
.pack-card .price small{color:#dbe5ef}
.membership .m-buy .price small{color:#dbe5ef}
.pp-hero .pp-buy .price small{color:#dbe5ef}
/* mobile: stop stray horizontal scroll without breaking the sticky nav */
html,body{overflow-x:clip}

@media(max-width:860px){.pp-hero .wrap{grid-template-columns:1fr}}
/* ---- product preview gallery (visual proof strip) ---- */
.pp-gallery{background:#0f2740;border-radius:14px;padding:18px 18px 14px;margin:0 0 22px}
.pp-gallery .ppg-head{color:#fff;font-weight:800;font-size:15px;margin-bottom:12px}
.ppg-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.ppg-item{flex:0 0 auto;width:168px;scroll-snap-align:start;cursor:pointer;background:#fff;border-radius:10px;padding:7px 7px 9px;box-shadow:0 6px 16px rgba(0,0,0,.28);transition:transform .15s}
.ppg-item:hover{transform:translateY(-3px)}
.ppg-item img{width:100%;height:118px;object-fit:cover;object-position:top;border-radius:6px;border:1px solid #e4e9ee;display:block;background:#fff}
.ppg-item span{display:block;font-size:11px;font-weight:700;color:#0f2740;margin-top:7px;line-height:1.3;max-height:29px;overflow:hidden}
/* ---- product proof band ---- */
.pp-proof{background:linear-gradient(135deg,#16385c,#0f2740);border-radius:14px;padding:22px;margin:26px 0 6px;color:#fff}
.pp-proof .ppf2-head{font-weight:800;font-size:17px;margin-bottom:14px}
.ppf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ppf-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px;text-decoration:none;color:#fff;display:block;transition:border-color .2s}
.ppf-card:hover{border-color:var(--gold)}
.ppf-card img{width:100%;height:150px;object-fit:cover;object-position:top;border-radius:8px;display:block;background:#fff;margin-bottom:10px}
.ppf-card b{display:block;font-size:14.5px;margin-bottom:4px}
.ppf-card span{color:#b9c6d3;font-size:12.5px;line-height:1.5}
@media(max-width:640px){.ppg-item{width:138px}.ppg-item img{height:98px}}
.pp-proof{grid-column:1/-1}.pp-gallery{grid-column:1/-1}.pp-incl{grid-column:1/-1}
/* ===== QR + Control Room strip - on every product card =====================
   The QR gateway and the Control Room are what separate these documents from a
   template pack, so the strip appears on every card, above the price. ======= */
.qr-strip{
  display:flex; align-items:flex-start; gap:10px;
  margin:14px 0 4px; padding:11px 13px;
  background:rgba(47,168,79,.07);
  border:1px solid rgba(47,168,79,.30);
  border-left:3px solid var(--green,#2fa84f);
  border-radius:9px;
}
.qr-strip-mark{
  flex:none; width:20px; height:20px; margin-top:1px; border-radius:3px;
  background:
    linear-gradient(var(--green,#2fa84f) 0 0) 0 0/7px 7px no-repeat,
    linear-gradient(var(--green,#2fa84f) 0 0) 100% 0/7px 7px no-repeat,
    linear-gradient(var(--green,#2fa84f) 0 0) 0 100%/7px 7px no-repeat,
    linear-gradient(var(--green,#2fa84f) 0 0) 100% 100%/5px 5px no-repeat,
    linear-gradient(var(--green,#2fa84f) 0 0) 55% 50%/5px 5px no-repeat;
}
.qr-strip-txt{ font-size:12.5px; line-height:1.5; color:var(--ink,#1a1d21); }
.qr-strip-txt b{ color:var(--green-d,#1f7a39); font-weight:800; }
.qr-strip-txt a{ color:var(--gold-d,#cf6a12); font-weight:800; text-decoration:underline;
  /* 24px minimum tap target (owner decision 28 Sep). Vertical padding on an INLINE box enlarges the hit
     area without contributing to the line box, so the card height, the grid and the wrapping are unchanged
     and the link looks identical. The QR mark itself is decorative (aria-hidden) and is not touched. */
  padding-block:4px; }
.qr-strip-txt a:hover{ color:var(--gold,#ED7D1A); }

/* The product cards are light, so the strip keeps dark ink on the pale green.
   Only lift the text where a card genuinely sits on a dark ground. */
.card-dark .qr-strip-txt,
[data-dark] .qr-strip-txt{ color:#dfe7ef; }
.card-dark .qr-strip-txt b,
[data-dark] .qr-strip-txt b{ color:#57d07c; }
.card-dark .qr-strip-txt a,
[data-dark] .qr-strip-txt a{ color:var(--gold,#ED7D1A); }


/* ---------------------------------------------------------------------------
   NAV REACHABILITY FIX
   The top nav carries 14 items and measures ~1145px; with the brand and cart it
   needs about 1420px of viewport. The burger only appeared at max-width:760px,
   and body has overflow-x:clip - so between 761px and 1419px the tail of the nav
   was clipped away with no way to reach it. At 1366x768, the most common laptop
   screen, "Control Room" was gone; at 1024px and below, "Site Tools", "QR
   Gateway", "Pricing", "Enterprise" and "Control Room" were all unreachable.
   Pricing being invisible on an iPad is a commercial failure, not a style bug.

   Two changes: tighten the bar so it fits from 1200px up, and show the burger
   below that. The <=760px rules are deliberately untouched - this block starts
   at 761px - so existing mobile behaviour is unchanged.
   --------------------------------------------------------------------------- */
@media(min-width:1200px){
  .nav-links{gap:14px}
  .nav-links a{font-size:14px}
}
@media(min-width:761px) and (max-width:1199px){
  header.nav .wrap{flex-wrap:wrap}
  header.nav .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:40px;background:transparent;
    border:1px solid rgba(255,255,255,.25);border-radius:9px;
    cursor:pointer;padding:0;margin-left:auto;order:2;flex:0 0 auto;
  }
  header.nav .nav-burger span{
    display:block;width:22px;height:2px;margin:0 auto;background:#fff;
    border-radius:2px;transition:transform .22s ease,opacity .2s ease;
  }
  header.nav.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.nav.nav-open .nav-burger span:nth-child(2){opacity:0}
  header.nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.nav .nav-links{
    order:4;width:100%;margin-left:0;display:none;flex-direction:column;gap:0;
    padding:4px 0 8px;margin-top:8px;background:var(--dark);
    border-top:1px solid rgba(255,255,255,.1);
  }
  header.nav.nav-open .nav-links{display:flex}
  header.nav .nav-links a{
    width:100%;padding:12px 4px;font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
}
@media(prefers-reduced-motion:reduce){header.nav .nav-burger span{transition:none}}

/* ---------------------------------------------------------------------------
   READABLE FLOOR
   The smallest text on the site was the miniature RAG board drawn inside the
   product cards: .sb-tag at 9px ("STATUS", 951 of them) and .sb-cell at 9.5px
   ("GO", 2,853 of them), plus .tag at 10px in the role dashboards. This site is
   read outdoors, on a phone, often in a glove - 9px is below what that deserves.
   Raised to 11px, which is the same size the catalogue already uses for document
   codes, so nothing looks out of place. Letter-spacing eased slightly so the
   wider glyphs still fit their cells.
   --------------------------------------------------------------------------- */
.sb-tag{font-size:11px;letter-spacing:.6px;padding:2px 7px}
.sb-cell{font-size:11px;letter-spacing:.3px;padding:5px 2px}
.tag{font-size:11px}

/* LIBRARY GRID CLIP FIX
   .lib-grid was repeat(3,1fr) from 761px up with no step in between. A 1fr
   track floors at min-content, so the three cards demanded 1080px inside a
   902px container and body{overflow-x:clip} silently sliced 178px off the
   right column - the Builder System Bundle card among them. minmax(0,1fr)
   lets the tracks actually shrink; the mid-band drops to two columns so the
   cards stay readable rather than merely un-clipped. */
.lib-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.lib-grid>*{min-width:0}
@media(min-width:761px) and (max-width:1100px){
  .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Same shape, same risk: hard column counts that cannot shrink below their
   content. minmax(0,1fr) is the floor-remover; the counts are unchanged. */
.libnum{grid-template-columns:repeat(4,minmax(0,1fr))}
.whois-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.leadgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.flagship-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pillar-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.sys-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.libnum>*,.whois-grid>*,.leadgrid>*,.flagship-grid>*,.pillar-grid>*,.sys-grid>*{min-width:0}

/* ===========================================================================
   HERO CTA HIERARCHY + THE "CAN WE POUR LEVEL 14?" DEMONSTRATION
   Added 2026-09-02.

   The hero carried eight buttons of identical weight. That is not a menu, it
   is a wall - the visitor reads all eight, picks none, and scrolls. One
   primary, two secondary, and everything else demoted to a quiet text row.
   =========================================================================== */

.btn-hero{padding:14px 24px;font-size:16px}
.hero-more{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-size:13.5px}
.hero-more a{color:#9fb0c2;font-weight:600;border-bottom:1px solid rgba(159,176,194,.32);padding-bottom:2px;transition:.15s;min-height:24px;display:inline-flex;align-items:center}
.hero-more a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* --- the pour demonstration ------------------------------------------------ */
.pour-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:34px;align-items:start}
.pour-card{background:#0d1219;border:1px solid #26313f;border-radius:16px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.45)}
.pour-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;background:#111925;border-bottom:1px solid #26313f;font-family:Consolas,'SF Mono',ui-monospace,monospace}
.pour-tt{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--silver)}
.pour-time{font-size:13px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}

.pour-rows{list-style:none;margin:0;padding:0}
.pour-rows li{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid #1c2531;transition:background .3s}
.pour-rows li.open{background:rgba(192,57,43,.10)}
.pour-rows li.ok{background:rgba(47,168,79,.07)}

/* a small QR glyph so each row reads as a real controlled document */
.pr-qr{flex:0 0 auto;width:26px;height:26px;border-radius:5px;background:
  linear-gradient(#fff,#fff) 0 0/9px 9px no-repeat,
  linear-gradient(#fff,#fff) 17px 0/9px 9px no-repeat,
  linear-gradient(#fff,#fff) 0 17px/9px 9px no-repeat,
  linear-gradient(#fff,#fff) 12px 12px/5px 5px no-repeat,
  linear-gradient(#fff,#fff) 21px 14px/5px 5px no-repeat,
  #10161f;border:1px solid #2c3846}
.pr-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pr-txt b{font-weight:700;font-size:14.5px;color:#fff;line-height:1.25}
.pr-txt i{font-style:normal;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.4px;color:#8fa0b2}
.pour-rows li.open .pr-txt i{color:#ff9b8d}
.pour-rows li.ok .pr-txt i{color:#7fc493}

.pr-st{flex:0 0 auto;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11px;letter-spacing:1.2px;font-weight:700;padding:6px 11px;border-radius:6px}
.pr-st.ok{color:#8fe0a6;background:rgba(47,168,79,.14);border:1px solid rgba(47,168,79,.42)}

.pr-fix{flex:0 0 auto;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:#1a1400;background:var(--gold);border:0;border-radius:8px;padding:9px 15px;transition:.15s}
.pr-fix:hover{background:var(--gold-d)}
.pr-fix:focus-visible{outline:3px solid #fff;outline-offset:2px}

.pour-foot{display:flex;align-items:center;gap:15px;padding:17px 20px;background:#111925}
.pour-lamp{flex:0 0 auto;width:17px;height:17px;border-radius:50%;background:var(--red);box-shadow:0 0 14px rgba(192,57,43,.65);transition:all .45s}
.pour-lamp.green{background:var(--green);box-shadow:0 0 18px rgba(47,168,79,.7)}
.pour-verdict{font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.4px;color:var(--red);transition:color .45s;line-height:1.2}
.pour-verdict.green{color:#41c96a}
.pour-why{font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11.5px;color:#8fa0b2;margin-top:4px}
.pour-count{flex:0 0 auto;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:14px;font-weight:700;color:var(--silver);font-variant-numeric:tabular-nums}

.pour-log{padding:15px 20px;background:rgba(47,168,79,.12);border-top:1px solid rgba(47,168,79,.34)}
.pour-log b{display:block;color:#8fe0a6;font-size:13px;letter-spacing:.4px;text-transform:uppercase}
.pour-log span{display:block;margin-top:5px;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11.5px;color:#a9bccb;line-height:1.6}

.pour-side{display:flex;flex-direction:column;gap:13px}
.pour-step{color:#c3d0dd;font-size:14.5px;line-height:1.55}
.pour-step b{color:var(--gold);margin-right:4px}
.pour-note{margin-top:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:11px;padding:13px 15px;color:#9fb0c2;font-size:12.5px;line-height:1.6}
.pour-note b{color:#fff}

@media(max-width:900px){
  .pour-wrap{grid-template-columns:1fr;gap:24px}
  .pour-rows li{flex-wrap:wrap;gap:10px 12px}
  .pr-txt{flex:1 1 60%}
  .pr-fix{width:100%;justify-content:center}
  .btn-hero{padding:13px 18px;font-size:15px}
}

/* ===========================================================================
   NAVIGATION - the "Systems" menu
   Thirteen top-level links wrapped onto three lines at 1440px; "How It Works"
   was broken across three. The seven division links now sit in one menu, which
   leaves six top-level items on a single row.
   =========================================================================== */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{background:none;border:0;cursor:pointer;font-family:inherit;color:#cfd6de;font-weight:600;font-size:15px;padding:0;display:inline-flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap}
.nav-drop-btn span{font-size:11px;transition:transform .2s}
.nav-drop-btn:hover{color:var(--gold)}
.nav-drop.open .nav-drop-btn{color:var(--gold)}
.nav-drop.open .nav-drop-btn span{transform:rotate(180deg)}
.nav-drop-btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:3px}

.nav-drop-panel{position:absolute;top:calc(100% + 16px);left:-16px;display:none;flex-direction:column;min-width:216px;background:#141922;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:8px;box-shadow:0 20px 48px rgba(0,0,0,.5);z-index:60}
.nav-drop.open .nav-drop-panel{display:flex}
.nav-drop-panel a{display:block;padding:10px 13px;border-radius:8px;font-size:14.5px;font-weight:600;color:#cfd6de;white-space:nowrap}
.nav-drop-panel a:hover{background:rgba(237,125,26,.14);color:var(--gold)}

/* keep the remaining top-level links on one line */
.nav-links{white-space:nowrap}
.nav-links>a{white-space:nowrap}
@media(min-width:901px) and (max-width:1240px){
  .nav-links{gap:18px}
  .nav-links a,.nav-drop-btn{font-size:14px}
}

/* Mobile: the header collapses to a stacked list, so the menu has no business
   being a popover - show it as a labelled block that is always open. */
@media(max-width:900px){
  .nav-drop{display:block;width:100%}
  .nav-drop-btn{display:none}
  .nav-drop-panel{position:static;display:flex;min-width:0;background:none;border:0;padding:0;box-shadow:none}
  .nav-drop-panel a{padding:12px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.07);white-space:normal}
}

/* ===========================================================================
   CAMPAIGN LANDING PAGES  /site-manager /hse /high-rise /residential
                           /concrete /compliance
   Every ad in the pack pointed at one of these and all six were 404.
   One primary CTA, price visible, product shown rather than described.
   =========================================================================== */
.lp{max-width:1080px;margin:0 auto;padding:26px 20px 72px}

.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;
  background:linear-gradient(135deg,#0f2740,#16385c);color:#fff;border-radius:18px;padding:38px 34px}
.lp-hero-copy{min-width:0}
.lp-eyebrow{color:var(--gold);font-weight:800;letter-spacing:2.2px;text-transform:uppercase;font-size:12px}
.lp h1,
.lp .h-was-h1{margin:12px 0 14px;font-size:clamp(28px,4.2vw,42px);line-height:1.1;letter-spacing:-.4px;text-wrap:balance}
.lp-sub{font-size:17px;line-height:1.62;color:#cfdcea;max-width:56ch}
.lp-price{margin-top:20px;font-size:16px;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.17);border-radius:11px;padding:11px 15px;display:inline-block}
.lp-price b{color:var(--gold);font-size:21px}
.lp-price s{color:#8fa3b8}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.lp-btn-quiet{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42)}
.lp-btn-quiet:hover{border-color:var(--gold);color:var(--gold)}
.lp-nocard{margin-top:12px;font-size:12.5px;color:#9fb4c8;line-height:1.55;max-width:52ch}

.lp-shot{margin:0;min-width:0}
.lp-shot img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 50px rgba(0,0,0,.42);background:#fff}
.lp-shot figcaption{margin-top:10px;font-size:11.5px;line-height:1.55;color:#9fb4c8}
.lp-shot figcaption b{color:#ffd9a8}
.lp-shot figcaption a{color:var(--gold);text-decoration:underline}

.lp-sec{margin-top:40px}
.lp-sec>h2,
.lp-sec>.h-was-h2{font-size:26px;line-height:1.2;margin-bottom:18px;letter-spacing:-.3px}

.lp-quote{margin:0;background:var(--card);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;
  padding:22px 26px;font-size:19px;line-height:1.58;color:var(--ink);box-shadow:var(--shadow)}

.lp-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.lp-block{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px 22px}
.lp-block h3,
.lp-block .h-was-h3{font-size:17px;margin-bottom:8px;color:var(--navy2)}
.lp-block p{font-size:14.5px;line-height:1.62;color:#414b57}

.lp-incl{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:8px 20px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:22px 24px}
.lp-incl li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.6;color:#333c47}
.lp-incl li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--green);font-weight:900}

.lp-also{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.lp-also-card{display:flex;flex-direction:column;gap:5px;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:18px 20px;transition:.15s}
.lp-also-card:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-2px)}
.lp-also-card b{font-size:16px;color:var(--navy2)}
.lp-also-p{font-weight:800;color:var(--gold);font-size:15px}
.lp-also-d{font-size:13.5px;color:var(--muted);line-height:1.55}

.lp-close{background:linear-gradient(135deg,#16385c,#0f2740);color:#fff;border-radius:16px;padding:32px 30px}
.lp-close h2,
.lp-close .h-was-h2{font-size:25px;margin-bottom:10px;line-height:1.2}
.lp-close p{color:#cfdcea;font-size:16px;line-height:1.62;max-width:64ch}

.lp-foot{margin-top:34px;font-size:12.5px;line-height:1.7;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}

@media(max-width:860px){
  .lp-hero{grid-template-columns:1fr;gap:24px;padding:28px 22px}
  .lp-shot{order:-1}
  .lp-cta .btn{flex:1 1 100%;justify-content:center}
}

/* the base rule section{padding:58px 0} stacked on top of these, giving ~156px
   of dead space between every landing-page block. */
.lp section,.lp-hero,.lp-sec{padding-top:0;padding-bottom:0}
.lp-hero{padding:38px 34px}
@media(max-width:860px){.lp-hero{padding:28px 22px}}

/* ===========================================================================
   REGRESSION FIX - responsive columns restored.

   The library-grid clip fix earlier in this file re-declared .lib-grid,
   .libnum, .whois-grid, .leadgrid, .flagship-grid, .pillar-grid and .sys-grid
   at their DESKTOP column counts with no media query. Those declarations sit
   after the responsive rules at lines ~378-522, carry the same specificity,
   and therefore won a straight source-order fight at every width.

   Result: on a 375px phone .lib-grid was still three columns, so each library
   card was 98px wide and its contents spilled out of the card. Same for the
   other six.

   Restated here, after the offending rules, with minmax(0,1fr) so the original
   clip fix is kept.
   =========================================================================== */
@media(max-width:980px){
  .leadgrid,.flagship-grid,.pillar-grid,.sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .lib-grid{grid-template-columns:minmax(0,1fr)}
  .leadgrid{grid-template-columns:minmax(0,1fr)}
  .libnum,.whois-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .flagship-grid,.pillar-grid,.sys-grid{grid-template-columns:minmax(0,1fr)}
}

/* ===========================================================================
   THE CONTROL ROOM - hero board, six role views.
   Section 2 of the brief: the Control Room becomes the strongest visual on the
   site, shown once, properly, with role-based views - rather than the same
   dashboard repeated down the page.
   =========================================================================== */
.hero-trust{margin-top:16px;font-size:13.5px;color:#9fb0c2;font-weight:600}

.cr{background:#0d1219;border:1px solid #26313f;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5)}

.cr-top{display:flex;align-items:center;gap:10px;padding:13px 18px;background:#111925;
  border-bottom:1px solid #26313f}
.cr-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:0 0 auto;
  box-shadow:0 0 10px rgba(47,168,79,.7)}
.cr-ttl{font-weight:800;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:#fff}
.cr-proj{margin-left:auto;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--silver);text-align:right}

.cr-roles{display:flex;overflow-x:auto;gap:2px;padding:8px 8px 0;background:#111925;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cr-role{flex:0 0 auto;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:.3px;color:#8fa0b2;background:transparent;border:0;border-bottom:2px solid transparent;
  padding:9px 12px;white-space:nowrap;transition:.15s}
.cr-role:hover{color:#fff}
.cr-role.on{color:var(--gold);border-bottom-color:var(--gold);background:rgba(237,125,26,.08)}
.cr-role:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.cr-scope{padding:13px 18px 0;font-size:13px;line-height:1.55;color:#9fb0c2}

.cr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:#1c2531;margin:13px 18px 0;border:1px solid #1c2531;border-radius:10px;overflow:hidden}
.cr-stat{background:#111925;padding:11px 13px;min-width:0}
.cr-stat b{display:block;font-size:20px;font-weight:800;color:var(--gold);line-height:1.1;
  font-variant-numeric:tabular-nums}
.cr-stat span{display:block;margin-top:3px;font-family:Consolas,'SF Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#8fa0b2}

.cr-rows{list-style:none;margin:13px 0 0;padding:0}
.cr-rows li{display:grid;grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:
  "pil item st" "pil own due";gap:2px 11px;align-items:center;
  padding:11px 18px;border-top:1px solid #1a2230}
.cr-rows li.r{background:rgba(192,57,43,.10)}
.cr-rows li.a{background:rgba(255,192,0,.07)}

.cr-pil{grid-area:pil;align-self:start;font-family:Consolas,'SF Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:#7d8fa2;
  border:1px solid #2a3542;border-radius:4px;padding:3px 5px;text-align:center;margin-top:2px}
.cr-item{grid-area:item;font-size:13.5px;font-weight:600;color:#fff;line-height:1.3;min-width:0}
.cr-own{grid-area:own;font-size:11.5px;color:#8fa0b2;min-width:0}
.cr-due{grid-area:due;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11px;
  color:#8fa0b2;text-align:right;white-space:nowrap}
.cr-st{grid-area:st;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:1px;font-weight:700;padding:4px 8px;border-radius:5px;white-space:nowrap;text-align:center}
.cr-st.g{color:#8fe0a6;background:rgba(47,168,79,.15);border:1px solid rgba(47,168,79,.4)}
.cr-st.a{color:#ffd777;background:rgba(255,192,0,.13);border:1px solid rgba(255,192,0,.4)}
.cr-st.r{color:#ff9b8d;background:rgba(192,57,43,.16);border:1px solid rgba(192,57,43,.5)}

.cr-foot{display:flex;align-items:center;gap:13px;padding:15px 18px;background:#111925;
  border-top:1px solid #26313f}
.cr-lamp{flex:0 0 auto;width:15px;height:15px;border-radius:50%;transition:all .4s}
.cr-lamp.g{background:var(--green);box-shadow:0 0 14px rgba(47,168,79,.65)}
.cr-lamp.a{background:#ffc000;box-shadow:0 0 14px rgba(255,192,0,.55)}
.cr-lamp.r{background:var(--red);box-shadow:0 0 14px rgba(192,57,43,.65)}
.cr-verdict{font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.4px;line-height:1.2}
.cr-verdict.g{color:#41c96a} .cr-verdict.a{color:#ffc000} .cr-verdict.r{color:#ff7d6b}
.cr-why{font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11px;color:#8fa0b2;
  margin-top:4px;overflow:hidden;text-overflow:ellipsis}

@media(max-width:900px){
  .cr-proj{display:none}
  .cr-rows li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"item st" "own due" "pil pil"}
  .cr-pil{justify-self:start;margin-top:4px}
  .cr-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cr-stat b{font-size:17px}
}

/* Section 8 - the five pillars, stated in the hero where the subheadline has
   just promised them. Replaces four generic tiles that repeated the headline
   and led with QR again. */
.hero-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:26px;max-width:620px}
.hp{background:rgba(8,10,14,.55);border:1px solid rgba(255,255,255,.13);border-radius:11px;padding:11px 13px;min-width:0}
.hp b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--gold)}
.hp span{display:block;margin-top:3px;color:#c4cdd8;font-size:12.5px;line-height:1.4}
.hp-one{background:rgba(237,125,26,.13);border-color:rgba(237,125,26,.42)}
.hp-one b{color:#fff}
@media(max-width:900px){.hero-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.hero-pillars{grid-template-columns:minmax(0,1fr)}}

/* Section 9 - the one-glance comparison. Sits above the detailed capability
   table: this strip sells, the table underneath substantiates. */
.vsgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.11);border-radius:13px;overflow:hidden;margin:22px 0 26px;max-width:760px}
.vsgrid>div{padding:12px 16px;font-size:14.5px;line-height:1.4}
.vsgrid .vsold{background:#181c22;color:#93a0ad}
.vsgrid .vsnew{background:#12202e;color:#fff;font-weight:600}
.vsgrid .vshead{font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.3px;
  text-transform:uppercase;font-weight:700;padding-top:11px;padding-bottom:11px}
.vsgrid .vshead.vsold{color:#7d8b99}
.vsgrid .vshead.vsnew{color:var(--gold)}
@media(max-width:520px){.vsgrid>div{padding:10px 12px;font-size:13.5px}}

/* Section 10 - the pricing pathway. The Ultimate Builder OS is the
   destination, not the entry barrier. */
.ladder{list-style:none;counter-reset:lad;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;margin:24px 0 14px;padding:0}
.ladder li{counter-increment:lad;position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:20px 18px 18px;display:flex;flex-direction:column;gap:6px}
.ladder li::before{content:counter(lad);position:absolute;top:-11px;left:18px;width:24px;height:24px;
  border-radius:50%;background:var(--gold);color:#1a1400;font-weight:900;font-size:12.5px;
  display:flex;align-items:center;justify-content:center}
.ladder li.last{border-color:rgba(237,125,26,.55);box-shadow:0 10px 28px rgba(237,125,26,.14)}
.ladder .lk{font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold);font-weight:700}
.ladder b{font-size:16px;line-height:1.25;color:var(--navy2)}
.ladder .lp{font-size:13px;font-weight:700;color:var(--ink)}
.ladder .ld{font-size:13px;line-height:1.55;color:var(--muted)}
.ladder-free{font-size:14.5px;color:var(--muted);margin-bottom:6px}
.ladder-free a{color:var(--gold);font-weight:700;text-decoration:underline}
@media(max-width:980px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ladder{grid-template-columns:minmax(0,1fr)}}

/* The pricing section is centre-aligned, which the ladder inherited: centred
   body copy in a four-card row is hard to scan, and the section's own
   paragraph margins were opening gaps inside each card. */
.ladder,.ladder li{text-align:left}
.ladder li>*{margin:0}
.ladder li{gap:7px;justify-content:flex-start}
.ladder .ld{margin-top:auto;padding-top:4px}
.ladder-free{text-align:center}
/* a base rule was adding 20px padding-left to .lp, indenting every price line */
.ladder li>*{padding-left:0;padding-right:0}
.ladder .ld{padding-top:4px}

/* Section 4 - the free offer, in the footer, on every page. Someone who read
   the whole page and reached the bottom previously had nothing to click. */
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,#16385c,#0f2740);border:1px solid rgba(237,125,26,.35);
  border-radius:14px;padding:20px 24px;margin-bottom:30px}
.foot-cta b{display:block;color:#fff;font-size:17px;line-height:1.3}
.foot-cta span{display:block;color:#b9c6d4;font-size:13.5px;line-height:1.55;margin-top:5px;max-width:62ch}
.foot-cta .btn{white-space:nowrap;flex:0 0 auto}
@media(max-width:640px){.foot-cta{flex-direction:column;align-items:flex-start}.foot-cta .btn{width:100%;justify-content:center}}

/* ===========================================================================
   REGRESSION FIX - the hero grid overflowed on phones after the Control Room
   board went in.

   .cr-roles is six role tabs with white-space:nowrap. It scrolls sideways on
   purpose (overflow-x:auto), but a scroll container still reports its
   min-content as the full 562px of tabs. The mobile rule for .hero-grid was
   grid-template-columns:1fr, and a 1fr track floors at min-content - so the
   single column became 564px inside a 375px viewport and the whole page
   scrolled sideways.

   Same failure as the library grid earlier in this file. minmax(0,1fr) lets
   the track go narrower than its content, and min-width:0 lets the flex and
   grid children actually shrink into it.
   =========================================================================== */
@media(max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.hero-gw{min-width:0}
}
.cr,.cr-roles,.cr-rows,.cr-rows li{min-width:0}
.cr-item,.cr-own{overflow-wrap:anywhere}

/* ===========================================================================
   PRODUCT PROOF BLOCK  (sections 11 + 12)
   Every product page now shows the real interface, a worked scenario and an
   explicit contents list. Product/UI imagery was 10% against a 70% target;
   construction photography was doing work that a screenshot does better.
   =========================================================================== */
.pproof{background:var(--bg);padding:56px 0;border-top:1px solid var(--line)}
.pproof-wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.pproof-kick{color:var(--gold);font-weight:800;letter-spacing:2.2px;text-transform:uppercase;font-size:12px}
.pproof-h2,
.pproof-.h-was-h2{font-size:clamp(23px,3.2vw,31px);line-height:1.18;margin:10px 0 26px;color:var(--ink);
  letter-spacing:-.3px;text-wrap:balance}

.pproof-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}
.pproof-shot{margin:0;min-width:0}
.pproof-shot img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(16,24,40,.16);background:#fff}
.pproof-shot figcaption{margin-top:9px;font-size:12px;line-height:1.55;color:var(--muted)}
.pproof-shot figcaption b{color:var(--ink)}

.pproof-scen{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.pproof-tag{display:inline-block;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:1.3px;text-transform:uppercase;font-weight:700;color:#8a6a2f;
  background:rgba(255,192,0,.16);border:1px solid rgba(255,192,0,.5);border-radius:5px;padding:4px 8px}
.pproof-scen h3,
.pproof-scen .h-was-h3{font-size:17px;line-height:1.3;margin:12px 0 14px;color:var(--navy2)}
.pproof-scen ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.pproof-scen li{font-size:14.5px;line-height:1.6;color:#414b57}
.pproof-scen li b{color:var(--ink)}
.pproof-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.55;color:var(--muted)}

.pproof-inclh{font-size:18px;margin:34px 0 14px;color:var(--ink)}
.pproof-incl{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));
  gap:8px 20px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px 22px;margin:0}
.pproof-incl li{position:relative;padding-left:23px;font-size:14.5px;line-height:1.6;color:#333c47}
.pproof-incl li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--green);font-weight:900}

.pproof-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pproof-ghost{background:transparent;color:var(--navy2);border:1.5px solid var(--navy2)}
.pproof-ghost:hover{background:var(--navy2);color:#fff}

@media(max-width:860px){
  .pproof{padding:40px 0}
  .pproof-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .pproof-cta .btn{flex:1 1 100%;justify-content:center}
}
/* qr-gateway-mobile.png is a portrait phone capture (585x1170). In a ~580px
   column it would render over a metre of screen. Cap the height and let it
   sit centred rather than stretching the section. */
.pproof-shot img{max-height:540px;object-fit:contain;object-position:top center}

/* the 12-month comparison under an annual price - a quiet second line, not a second price */
.pr-vs{display:block;margin-top:2px;font-size:11.5px;opacity:.75;font-weight:400;line-height:1.35}

/* a product taken off sale shows this instead of a cart button */
.soon-note{display:inline-block;font-size:12.5px;font-weight:700;color:#ED7D1A;border:1.5px dashed rgba(237,125,26,.55);border-radius:8px;padding:7px 12px}

.pr-soon{font-size:12.5px;color:#93a3b4;line-height:1.5;margin:8px 0 0}
.coming-soon{color:#ED7D1A;font-size:20px}

/* P7 tap targets — the Systems dropdown was a 20px hit area on a phone.
   Padding grows the target without moving the text or changing the look. */
@media (max-width:900px){
  .nav-links a, .nav-drop > a, .nav-drop > span, .nav-burger{
    min-height:44px; display:inline-flex; align-items:center; padding-top:6px; padding-bottom:6px;
  }
  .cart-link, a[href*="cart"]{ min-height:44px; display:inline-flex; align-items:center }
}

/* P6 layout shift — card images are injected by app.js, so they cannot carry
   width/height in the HTML. Reserving the box by ratio stops the reflow. */
.card img, .pack-card img, .lib-card img, .flag-card img, .pc img, .sw-card img{
  aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: auto; display: block;
}
.pc-hero{ aspect-ratio: 16 / 7 }
.lp-shot img, .promo-shot img{ aspect-ratio: 16 / 9; object-fit: cover }

/* ---- LIB-SWMS jurisdiction selector (5 Sep 2026) -------------------------------
   No jurisdiction is preselected, so the card has three states: nothing chosen
   (no price, no buy control), chosen and purchasable, and chosen but on technical
   hold (Victoria). These styles carry that difference visually. */
.state-chip.held{border-style:dashed;opacity:.9}
.state-chip .chip-flag{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;background:#ED7D1A;color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;vertical-align:1px}
.state-bar.needs-pick .state-chip{animation:bs-pick 1.1s ease-in-out 2}
@keyframes bs-pick{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px);box-shadow:0 6px 16px rgba(237,125,26,.35)}}
@media (prefers-reduced-motion:reduce){.state-bar.needs-pick .state-chip{animation:none;outline:2px solid #ED7D1A;outline-offset:2px}}
.lib-card.unpicked .lib-price,.lib-card.held .lib-price{font-size:15px;line-height:1.45}
.lib-card.unpicked .lib-price .coming-soon,.lib-card.held .lib-price .coming-soon{font-size:15px;font-weight:800}
.lib-hold{margin:2px 0 12px;padding:10px 12px;border-left:3px solid #ED7D1A;background:#fff6ee;color:#5a4632;font-size:13px;line-height:1.5;border-radius:0 6px 6px 0}
.lib-change{display:block;width:100%;margin-top:9px;background:none;border:0;padding:6px 0;color:var(--navy);font-family:inherit;font-size:12.5px;font-weight:800;text-decoration:underline;cursor:pointer;opacity:.75}
.lib-change:hover{opacity:1}
.lib-price .lib-once{font-size:13px;font-weight:700;color:var(--muted,#5a6470);letter-spacing:.2px}

/* ---- D-8 commercial-state control (5 Sep 2026) --------------------------------
   ENQUIRE is a real, deliberate state - not a greyed-out failure. It reads as an
   outlined action next to a solid Add to cart, so a customer can tell the two apart
   at a glance without either looking broken. */
.enq-cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:1.5px solid var(--gold,#ED7D1A);color:var(--gold,#ED7D1A);background:transparent;font-weight:800}
.enq-cta:hover{background:var(--gold,#ED7D1A);color:#0F2740}
.btn.btn-outline.enq-cta{background:transparent}
.pr-save.pr-plain{color:var(--muted,#5a6470);font-weight:700}

/* ---- D-5 homepage reduction (5 Sep 2026) ---------------------------------------
   THE HOMEPAGE ROUTES. THE CATALOGUE EXPLORES. Two new blocks carry that job: the
   commercial ladder (what you can act on today, cheapest first) and the five
   pillars (what the whole system is, routing to the pages that explain each one). */

/* Start here - the commercial ladder */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.rung{display:flex;flex-direction:column;background:var(--card,#fff);border:1px solid var(--line,#e3e9ef);
  border-top:4px solid var(--line,#e3e9ef);border-radius:var(--radius,10px);padding:22px 22px 20px;
  text-decoration:none;box-shadow:var(--shadow);transition:.18s}
.rung:hover{transform:translateY(-3px);border-top-color:var(--gold,#ED7D1A);box-shadow:0 10px 26px rgba(15,39,64,.13)}
.rung-feat{border-top-color:var(--gold,#ED7D1A);background:linear-gradient(180deg,#fffaf5,var(--card,#fff))}
.rung-price{display:inline-block;align-self:flex-start;background:var(--navy,#0F2740);color:#fff;font-weight:800;
  font-size:12.5px;letter-spacing:.4px;padding:4px 11px;border-radius:999px;margin-bottom:12px}
.rung-feat .rung-price{background:var(--gold,#ED7D1A);color:#0F2740}
.rung h3,
.rung .h-was-h3{margin:0 0 8px;font-size:19px;color:var(--navy,#0F2740)}
.rung p{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--ink,#333);flex:1}
.rung-cta{font-weight:800;font-size:13.5px;color:var(--gold,#ED7D1A)}

/* Five pillars */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pillar{display:flex;flex-direction:column;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius,10px);padding:20px 18px;text-decoration:none;transition:.18s}
.pillar:hover{background:rgba(255,255,255,.10);border-color:var(--gold,#ED7D1A);transform:translateY(-3px)}
.pillar h3,
.pillar .h-was-h3{margin:0 0 10px;font-size:17px;color:var(--gold,#ED7D1A)}
.pillar p{margin:0 0 14px;font-size:14px;line-height:1.55;color:#cfd9e4;flex:1}
.pillar-cta{font-weight:800;font-size:13px;color:#fff}
.pillar-foot{margin:22px 0 0;text-align:center;font-size:14px;color:#cfd9e4}
.pillar-foot a{color:var(--gold,#ED7D1A);font-weight:800;text-decoration:none}

/* "see all N ->" under a curated grid */
.see-all{display:block;width:max-content;margin:22px auto 0;padding:13px 26px;border:2px solid var(--gold,#ED7D1A);
  border-radius:8px;color:var(--navy,#0F2740);background:transparent;font-weight:800;font-size:15px;text-decoration:none;transition:.15s}
.see-all:hover{background:var(--gold,#ED7D1A);color:#0F2740}
.see-all-n{color:var(--gold,#ED7D1A)}
.see-all:hover .see-all-n{color:#0F2740}

@media(max-width:1024px){.ladder{grid-template-columns:repeat(2,1fr)}.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ladder,.pillars{grid-template-columns:1fr}.see-all{width:100%;text-align:center}}

/* =============================================================================
   OBRAS UI SYSTEM v1.1 — WORKSPACE / SPACING REVISION  (owner approval 12 Sep 2026)
   Status: IMPLEMENTING (v1.0 above remains CURRENT until the owner promotes v1.1).
   ADDITIVE ONLY: new --ws-* tokens, a vertical "rail" variant of .cr-roles, and the
   shared evidence component (.ev-*). Nothing above this line changed; the public
   site pages do not use these classes. Consumers: owner/index.html (Control Box),
   control-room/project.html (Control Room). Brand tokens and RAG colours untouched.
   ============================================================================= */
:root{
  --ws-side-pad:clamp(12px, 1.6vw, 28px);       /* viewport-safe page margin (Control Box) */
  --ws-side-pad-room:clamp(10px, 1.4vw, 24px);  /* viewport-safe page margin (Control Room) */
  --ws-max:1920px;                              /* cap on very wide screens only — never a fixed canvas */
  --ws-nav-w:236px;                             /* owner rail; 200px at 1200–1365px */
  --ws-action-w:400px;                          /* sticky owner-action panel; 320px at 1200–1399px; in flow below 1200px */
  --ws-gate-col:clamp(340px, 28vw, 420px);      /* Control Room desktop gate column */
  --ws-sheet-w:720px;                           /* sheets / modals */
  --ws-thumb:160px;                             /* evidence thumbnail */
  --ws-touch:44px;                              /* thumb-safe action target */
  --ws-row-pad:14px 18px;
  --ws-card-pad:18px 20px;
  --ws-gap:14px;
  --ws-kv-min:280px;
}
/* ---- owner rail: the same .cr-role buttons, vertical, all areas visible ---- */
.cr-roles.rail{flex-direction:column;overflow:visible;padding:14px 10px 18px;gap:2px;border-right:1px solid #1a2230;align-self:stretch}
.cr-roles.rail .cr-role{white-space:normal;text-align:left;border-bottom:0;border-left:3px solid transparent;padding:10px 12px;font-size:13px;line-height:1.3;border-radius:0 8px 8px 0}
.cr-roles.rail .cr-role.on{border-left-color:var(--gold);border-bottom-color:transparent;background:rgba(237,125,26,.10)}
/* a strip that scrolls must look like it scrolls */
.cr-roles.strip{box-shadow:inset -34px 0 20px -18px rgba(0,0,0,.75)}
.cr-roles.strip::after{content:'scroll \2192';flex:0 0 auto;align-self:center;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.8px;color:#7d8fa2;padding:0 10px}
/* ---- shared evidence component: grid + inspection viewer (BEFORE · DURING · AFTER · RECORD) ---- */
.ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:768px){.ev-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.ev-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ev-card{position:relative;background:#0d1219;border:1px solid #26313f;border-radius:14px;overflow:hidden;cursor:pointer;min-width:0;text-align:left;font:inherit;color:inherit;padding:0}
.ev-card:focus-visible{outline:2px solid var(--gold)}
.ev-card img,.ev-card .ev-noimg{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#05070a}
.ev-card .ev-noimg{display:flex;align-items:center;justify-content:center;color:#5a6470;font-size:12px;border-bottom:1px dashed #26313f;box-sizing:border-box}
.ev-card .ev-ph{position:absolute;top:10px;left:10px;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:10px;letter-spacing:1px;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.25)}
.ev-card .ev-m{padding:10px 12px 12px}
.ev-card .ev-t{font-size:13.5px;font-weight:700;color:#fff;line-height:1.3}
.ev-card .ev-s{font-size:11.5px;color:#8fa0b2;margin-top:4px;line-height:1.45}
.ev-card .ev-s .cr-st{display:inline-block;margin-top:5px}
.ev-viewer{position:fixed;inset:0;z-index:95;background:rgba(3,5,8,.94);display:grid;grid-template-rows:auto minmax(0,1fr);color:#dfe6ee}
.ev-viewer .ev-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 14px;border-bottom:1px solid #1a2230;background:#0d1219}
.ev-viewer .ev-tools button{font:inherit;font-size:13px;font-weight:700;min-height:var(--ws-touch);padding:8px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:#11161b;color:#dfe6ee;cursor:pointer}
.ev-viewer .ev-tools button.on{background:var(--gold);color:#0f1115;border-color:var(--gold)}
.ev-viewer .ev-tools .ev-close{margin-left:auto}
.ev-viewer .ev-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;min-height:0}
@media(min-width:1100px){.ev-viewer .ev-body{grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:minmax(0,1fr)}}
.ev-viewer .ev-stage{display:grid;grid-template-columns:1fr;gap:2px;background:#000;overflow:auto;min-height:0}
.ev-viewer .ev-stage.compare{grid-template-columns:1fr 1fr}
.ev-viewer .ev-stage figure{margin:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:auto;min-width:0}
.ev-viewer .ev-stage img{max-width:100%;max-height:100%;object-fit:contain;display:block;transition:transform .2s}
.ev-viewer .ev-stage.zoom img{max-width:none;max-height:none;width:200%;cursor:zoom-out}
.ev-viewer .ev-stage figcaption{position:absolute;top:10px;left:10px;font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11px;letter-spacing:1px;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.25)}
.ev-viewer .ev-meta{padding:14px 18px;font-size:13px;line-height:1.5;overflow:auto;background:#0d1219;border-left:1px solid #1a2230}
.ev-viewer .ev-meta .k{font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#7d8fa2;margin-top:10px}
.ev-viewer .ev-meta .v{color:#dfe6ee;overflow-wrap:anywhere}
.ev-viewer .ev-meta .hash{font-family:Consolas,'SF Mono',ui-monospace,monospace;font-size:11px;color:#8fe0a6;overflow-wrap:anywhere}

/* the controlled-version line (filled from the registered authority by gen-au-catalogue.js).
   A quiet provenance note under the paragraph it belongs to — deliberately not body copy. */
.ob-ver{display:block;margin:10px 0 0;font-size:12.5px;line-height:1.5;letter-spacing:.01em;
  color:var(--muted,#5b6b7c);font-weight:600}
.ob-ver::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--orange,#ED7D1A);margin-right:7px;vertical-align:1px}
@media (max-width:480px){.ob-ver{font-size:12px}}

/* `footer a{display:block}` is meant for the footer nav columns, but it also caught the links
   inside the running legal prose, so each took a full-width line and stranded the full stop that
   follows it on a line of its own. Links inside prose are inline. */
footer .disclaimer a,footer .obr-copy a,footer p a{display:inline}

/* ---- subscription comparison (owner decision 5 Oct 2026: licensed access) ----------------
   Rendered from commercial-model.js. The Builder Pro card is deliberately the one that stands
   out: it is where complete-library access begins, and the page should say so at a glance. */
.ob-plans-sec{padding-block:8px}
.ob-plans-intro{max-width:760px;color:#475569;line-height:1.65;font-size:15px}
.ob-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0 14px}
.ob-plan{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;
  border:1px solid #d8dfe7;border-radius:12px;padding:20px 18px 18px}
.ob-plan.is-entry{border:2px solid var(--orange,#ED7D1A);box-shadow:0 6px 22px rgba(237,125,26,.14)}
.ob-plan-flag{position:absolute;top:-11px;left:18px;background:var(--orange,#ED7D1A);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.ob-plan h3{margin:2px 0 6px;font-size:18px;color:var(--navy,#0f2740)}
.ob-plan-price{font-size:30px;font-weight:800;color:var(--navy,#0f2740);line-height:1;
  font-variant-numeric:tabular-nums}
.ob-plan-price span{font-size:13px;font-weight:600;color:#5b6b7c;margin-left:3px}
.ob-plan-sum{color:#5b6b7c;font-size:13.5px;line-height:1.55;margin:10px 0 12px}
.ob-plan-lib{font-size:13px;font-weight:700;padding:9px 11px;border-radius:8px;margin-bottom:12px}
.ob-plan-lib.yes{background:#eaf7ee;color:#1b6b36}
.ob-plan-lib.no{background:#f4f6f8;color:#64748b}
.ob-plan-list,.ob-plan-ex{margin:0 0 10px;padding-left:18px;font-size:13px;line-height:1.55;color:#475569}
.ob-plan-ex{color:#94a3b8}
.ob-plan-ex li::marker{content:"\2014  "}
.ob-plan-soon{margin-top:auto;padding-top:10px;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--orange,#ED7D1A)}
.ob-plans-note{background:#fff7ed;border-left:4px solid var(--orange,#ED7D1A);padding:12px 14px;
  border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.6;color:#4a3a28}
.ob-plans-fine{font-size:12.5px;line-height:1.6;color:#64748b;max-width:760px}
.lp-also-sub{line-height:1.2}
@media (max-width:480px){.ob-plan-price{font-size:26px}}

/* ---- Guides & Free Resources (owner decision 5 Oct 2026) --------------------------------
   Deliberately styled APART from the tool cards. These are useful and free, but they are not
   tools and must never be read as part of the Free Tools count. */
.ft-res-sec{margin:34px 0 8px;padding-top:22px;border-top:1px solid #dbe2ea}
.ft-res-sec h2{margin:0 0 6px;font-size:20px;color:var(--navy,#0f2740)}
.ft-res-intro{margin:0 0 16px;color:#5b6b7c;font-size:14px;line-height:1.6;max-width:720px}
.ft-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.ft-res-card{display:block;min-width:0;background:#f7f9fb;border:1px solid #dbe2ea;border-radius:10px;
  padding:14px 15px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.ft-res-card:hover{background:#fff;border-color:var(--orange,#ED7D1A)}
.ft-res-card b{display:block;font-size:14.5px;color:var(--navy,#0f2740);margin-bottom:4px}
.ft-res-card span{display:block;font-size:12.5px;line-height:1.5;color:#5b6b7c}