/* ==========================================================================
   SEGsafe — site stylesheet
   Design system inherited from the SEG Web Playbook (SEG Yellow #F5D000 /
   Charcoal #1F1F1F, system fonts, 16px radius). Shared with segcore.co.uk
   and verkadacctv.co.uk. Contrast rule: body-secondary never lighter than
   #464646 on light bands.
   ========================================================================== */

:root{
  --yellow:#F5D000; --yellow-d:#e0bf00; --soft:rgba(245,208,0,.16); --soft2:rgba(245,208,0,.09);
  --charcoal:#1F1F1F; --graphite:#3d3d3d; --lgrey:#D9D9D9; --white:#fff;
  --ink:#1F1F1F; --muted:#464646; --line:#e6e5e1; --bg:#fff; --bg2:#f7f7f4;
  --shadow:0 12px 34px rgba(31,31,31,.12); --shadow-sm:0 4px 16px rgba(31,31,31,.07);
  --radius:16px;

  /* SEG Safe cyan — from the approved "SEG Safe Master Cyan" vector logo.
     --cyan is a block/marker colour (black text on it passes AA).
     --cyan-ink is the darkened tone used whenever cyan has to be TEXT on white. */
  --cyan:#00AEEF; --cyan-d:#0098D1; --cyan-ink:#00607F;
  --cyan-soft:rgba(0,174,239,.12); --cyan-soft2:rgba(0,174,239,.06); --cyan-line:#a8ddf3;
  --slate:#26333F; --slate-2:#eef1f4; --slate-line:#d6dee5;
  --good:#1F5C3A; --good-soft:#eaf3ee; --good-line:#c3ddcd;
  --warn-ink:#7a4a00; --warn-soft:#fdf4e6; --warn-line:#f0dcbb;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.62;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:80px 0;position:relative}
section.tight{padding:52px 0}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.02em;color:var(--charcoal)}
h2.sec{font-size:34px;font-weight:800;margin-bottom:12px;max-width:22ch}
h2.sec.wide{max-width:none}
.lead{color:var(--muted);font-size:18px;max-width:680px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.hly{color:var(--charcoal);background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 96%,transparent 96%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.prose{max-width:72ch}
.prose p{color:var(--muted);font-size:16.5px;margin-bottom:16px}
.prose p strong{color:var(--ink)}
.prose h3{margin:30px 0 10px;font-size:20px}
.prose ul{margin:0 0 18px 20px;color:var(--muted)}
.prose li{margin-bottom:8px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--charcoal);background:var(--yellow);padding:6px 14px;border-radius:6px;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;padding:13px 24px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:.18s;white-space:nowrap;text-align:center}
.btn-primary{background:var(--yellow);color:var(--charcoal)}
.btn-primary:hover{background:var(--yellow-d);transform:translateY(-2px)}
.btn-dark{background:var(--charcoal);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--yellow);padding:10px 16px;border-radius:8px;font-weight:800}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.phero a:focus-visible,.process a:focus-visible,footer a:focus-visible{outline-color:var(--yellow)}

/* topbar */
.topbar{background:var(--yellow);color:var(--charcoal);text-align:center;font-size:13px;font-weight:700;padding:9px 16px}

/* header + dropdown nav */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:21px;color:var(--charcoal);letter-spacing:-.02em;flex:none}
.brand .mark{width:36px;height:36px;border-radius:9px;background:var(--charcoal);display:flex;align-items:center;justify-content:center;flex:none}
.brand .y{color:var(--charcoal);background:var(--yellow);padding:0 6px;border-radius:5px;margin-left:1px}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:-3px}
.menu{display:flex;align-items:center;gap:22px}
.menu>li{list-style:none;position:relative}
.menu a{color:var(--charcoal);font-weight:600;font-size:14.5px;display:inline-block;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{border-bottom-color:var(--yellow)}
.has-sub>button{background:none;border:0;font:inherit;font-weight:600;font-size:14.5px;color:var(--charcoal);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0;border-bottom:2px solid transparent}
.has-sub>button:hover,.has-sub.open>button,.has-sub.current>button{border-bottom-color:var(--yellow)}
.has-sub>button svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.6;fill:none;transition:.18s}
.has-sub.open>button svg{transform:rotate(180deg)}
.sub{display:none;position:absolute;top:100%;left:-16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;min-width:290px;list-style:none;z-index:60}
.has-sub.open .sub{display:block}
.sub li{list-style:none}
.sub a{display:block;padding:10px 14px;border-radius:9px;font-weight:700;font-size:14.5px;border:0}
.sub a:hover{background:var(--bg2);border:0}
.sub a small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:1px}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none}
.phone{font-weight:800;color:var(--charcoal);font-size:15px}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2.5px;background:var(--charcoal);border-radius:2px}

/* ---- the conductor strand: SEGsolar's variant of the group fibre strand ---- */
.strand{position:fixed;left:30px;top:0;bottom:0;width:2px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(128,128,128,.28) 7%,rgba(128,128,128,.28) 93%,transparent)}
.strand i{position:absolute;left:-1px;top:0;width:4px;border-radius:2px;
  background:linear-gradient(180deg,rgba(245,208,0,.35),var(--yellow));height:0;box-shadow:0 0 10px rgba(245,208,0,.45)}
.strand::before,.strand::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;border:2px solid rgba(128,128,128,.38);background:#8a8a8a}
.strand::before{top:26%}
.strand::after{top:68%}
/* The strand is a signature component of the SEG sites -- the playbook's words
   are "never lose it" -- but it was pinned to a fixed 30px from the viewport
   edge and then switched OFF below 1420px, which is wider than most laptops.
   So on the machine Michael actually reviews on it was simply absent. It is now
   anchored to the CONTENT column instead: it sits in the gutter beside the
   1180px wrap and only disappears when that gutter genuinely runs out. */
.strand{left:max(16px, calc((100vw - 1180px) / 2 - 22px))}
@media(max-width:1230px){.strand{display:none}}

/* ---------------------------------------------------------------- dearJoe 1
   The SEG script, the face of the 'Delivering Excellence' wordmark. Licensed
   from JOEBOB graphics on 1 Sep 2026 (order 20251) under their WEBFONT EULA.
   THE LICENCE IS ONE DOMAIN, 10,000 pageviews a month -- see
   static/fonts/LICENCE.txt before copying these files anywhere else.

   font-display:swap so a slow font never blocks the wordmark from appearing,
   and the fallback is a cursive stack rather than the body face, so the line
   still reads as a signature if the file never arrives. */
@font-face{
  font-family:"dearJoe";
  src:url("/fonts/dearjoe1.woff2") format("woff2"),
      url("/fonts/dearjoe1.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Wordmark and short accents ONLY. dearJoe is a handwriting script: it is
   illegible as body copy and unreadable in small caps, so it is never used for
   either. Everything else on this site stays in the system stack. */
.script{font-family:"dearJoe","Segoe Script","Bradley Hand",cursive;
  font-weight:400;letter-spacing:.01em;line-height:1.2}

/* hero */
/* Compressed 1 Sep 2026. Michael: "this part at the top should be compressed as
   i prefer getting straight into cameras images etc." It was 88/100 with a 50px
   h1 and a 32px trust line -- close to a full viewport before a single product
   appeared. Everything below is the same content, tightened, so the first
   camera card is above the fold on a laptop. */
.hero{overflow:hidden;background:var(--charcoal);color:#fff;padding:34px 0 34px}
.hero::before{content:"";position:absolute;top:-32%;right:-8%;width:640px;height:640px;background:radial-gradient(circle,rgba(245,208,0,.22),transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);background-size:36px 36px;pointer-events:none}
/* One column since 1 Sep 2026: the price card that used to sit on the right was
   the camera licence's four terms, which is exactly what the first card of the
   shop below shows -- with an Add to basket the hero copy did not have. Michael
   called it a replica and he was right. */
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;font-size:44px;font-weight:800;max-width:17ch;line-height:1.08}
.hero p{color:#dcdcdc;font-size:17.5px;line-height:1.55;margin:14px 0 22px;max-width:60ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.trust{margin-top:20px;color:#cfcfcf;font-size:13px;font-weight:600}
.trust b{color:var(--yellow)}
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:20px;backdrop-filter:blur(6px)}
.hero-card h2{color:#fff;font-size:17px;margin-bottom:12px}
.hero-card .sub-t{color:#cfcfcf;font-size:13px;margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:#e0e0e0;margin-bottom:5px;font-weight:700}
.field .req{color:var(--yellow);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-left:4px}
.field .opt{color:#767676;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-left:4px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:#fff;font-size:14.5px;color:var(--ink);font-family:inherit}
.hero-card .btn{width:100%;justify-content:center;margin-top:6px}
.reassure{font-size:12px;color:#1F1F1F;margin-top:10px;text-align:center;font-weight:600}
.hero-card .reassure{color:#e0e0e0}
.reassure a{text-decoration:underline;color:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* page hero */
.phero{background:var(--charcoal);color:#fff;padding:56px 0 62px;overflow:hidden}
.phero::before{content:"";position:absolute;top:-40%;right:-6%;width:540px;height:540px;background:radial-gradient(circle,rgba(245,208,0,.18),transparent 62%);pointer-events:none}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;font-size:42px;font-weight:800;max-width:19ch}
.phero p{color:#dadada;font-size:18px;margin-top:16px;max-width:660px}
.phero .hero-cta{margin-top:28px}
.crumbs{font-size:13px;color:#c4c4c4;margin-bottom:18px;font-weight:600}
.crumbs a{color:#c4c4c4;text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:var(--yellow)}
.crumbs span{color:var(--yellow)}

/* proof strip */
.proofsec{padding:0;background:var(--bg2);border-bottom:1px solid var(--line)}
/* auto-fit, not a hard 5: the strip dropped to four items on 1 Sep 2026 and a
   fixed column count left a dead cell on the right. */
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.proof{background:var(--bg2);padding:22px 20px}
.proof b{display:block;font-size:15px;color:var(--charcoal);font-weight:800;letter-spacing:-.01em}
.proof span{display:block;font-size:13px;color:var(--muted);margin-top:3px}

/* grid + cards */
.grid{display:grid;gap:24px}
.cols-5{grid-template-columns:repeat(5,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);transition:.2s;border-top:4px solid transparent;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-top-color:var(--yellow)}
.ico{width:52px;height:52px;border-radius:13px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none}
.ico svg{width:26px;height:26px;stroke:var(--charcoal);fill:none}
.card h3{font-size:19px;margin-bottom:9px}
.card p{color:var(--muted);font-size:14.5px}
.card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.card li{font-size:13.5px;color:var(--ink);padding-left:24px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:3px;background:var(--yellow)}
.card .more{margin-top:18px;font-weight:800;font-size:14px;color:var(--charcoal);display:inline-flex;align-items:center;gap:6px}
.card .more::after{content:"→";transition:.18s}
.card:hover .more::after{transform:translateX(4px)}
.card.plain:hover{transform:none;border-top-color:transparent;box-shadow:var(--shadow-sm)}

/* checks list */
.checks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;margin-top:26px}
.checks li{font-size:15px;color:var(--ink);padding-left:28px;position:relative;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:4px;background:var(--yellow)}
.checks.one{grid-template-columns:1fr}

/* numbered stages */
.stages{list-style:none;margin-top:36px;max-width:860px}
.stages li{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.stages li:last-child{border-bottom:0}
.stages .sn{flex:none;width:38px;height:38px;border-radius:10px;background:var(--yellow);color:var(--charcoal);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.stages h3{font-size:18px;margin-bottom:5px}
.stages p{color:var(--muted);font-size:15px;max-width:64ch}

/* process (dark band) */
.process{background:var(--charcoal);color:#fff}
.process h2,.process h3{color:#fff}
.process .lead{color:#d2d2d2}
.process .eyebrow{background:var(--yellow);color:var(--charcoal)}
.process a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.step{padding:26px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.step .num{width:42px;height:42px;border-radius:11px;background:var(--yellow);color:var(--charcoal);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin-bottom:16px}
.step h3{color:#fff;font-size:17px;margin-bottom:7px}
.step p{color:#d2d2d2;font-size:13.5px}
.dpoints{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px;margin-top:40px}
.dpoint{border-left:3px solid var(--yellow);padding-left:20px}
.dpoint h3{font-size:17.5px;margin-bottom:6px;color:#fff}
.dpoint p{color:#d2d2d2;font-size:14.5px;max-width:58ch}

/* callout */
.callout{border:1px solid var(--line);border-left:5px solid var(--yellow);border-radius:var(--radius);background:var(--bg2);padding:24px 28px;margin-top:30px;max-width:820px}
.callout h3{font-size:17px;margin-bottom:7px}
.callout p{color:var(--muted);font-size:15px}
.callout.warn{border-left-color:var(--charcoal)}
.process .callout{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);border-left-color:var(--yellow)}
.process .callout h3{color:#fff}
.process .callout p{color:#d2d2d2}

/* table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);margin-top:32px}
table.sla{width:100%;border-collapse:collapse;min-width:620px}
table.sla caption{caption-side:top;text-align:left;padding:16px 20px 0;font-size:13px;font-weight:700;color:var(--muted)}
table.sla th,table.sla td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
table.sla thead th{background:var(--charcoal);color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
table.sla tbody th{font-weight:800;color:var(--charcoal);width:26%}
table.sla td{color:var(--muted)}
table.sla tbody tr:last-child th,table.sla tbody tr:last-child td{border-bottom:0}

/* sectors */
.sector-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
.sector{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-align:center;font-weight:700;font-size:15px;color:var(--charcoal);transition:.18s;display:block}
.sector:hover{background:var(--yellow);border-color:var(--yellow);transform:translateY(-3px)}
.sector svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;margin-bottom:10px}
.sector span{display:block;font-weight:600;font-size:12.5px;color:var(--muted);margin-top:4px}
.sector:hover span{color:#3a3a2e}

/* accreditations / group */
.partners{background:var(--bg2)}
.accred{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.accred .chip{background:var(--charcoal);color:#fff;border-radius:12px;padding:14px 18px;font-weight:700;font-size:14px}
.accred .chip em{font-style:normal;color:var(--yellow);font-weight:800;display:block;font-size:15px;letter-spacing:.01em}
.accred .chip small{display:block;font-weight:500;font-size:11.5px;color:#c9c9c9;margin-top:3px}
.gnote{margin-top:24px;color:var(--muted);font-size:15px}
.gnote a{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.gband{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.gbrand{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;box-shadow:var(--shadow-sm);transition:.18s}
.gbrand:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gbrand b{display:block;font-size:21px;font-weight:800;color:var(--charcoal);letter-spacing:-.02em}
.gbrand span{display:block;color:var(--muted);font-size:13.5px;margin-top:6px}
.gbrand.centre{border-top:4px solid var(--yellow)}

/* why / ticks */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 40px;margin-top:36px}
.why{display:flex;gap:16px;align-items:flex-start}
.why .tick{flex:none;width:30px;height:30px;border-radius:7px;background:var(--yellow);display:flex;align-items:center;justify-content:center}
.why .tick svg{width:16px;height:16px;stroke:var(--charcoal);stroke-width:3;fill:none}
.why h3{font-size:17px;margin-bottom:3px}
.why p{color:var(--muted);font-size:14.5px}

/* case studies */
.csgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.cscard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.cscard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cscard .csimg{aspect-ratio:16/10;background:var(--charcoal);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cscard .csimg svg{width:54px;height:54px;stroke:var(--yellow);fill:none;stroke-width:1.4;opacity:.85}
.cscard .csimg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(245,208,0,.16),transparent 60%)}
.cscard .csbody{padding:24px;display:flex;flex-direction:column;flex:1}
.cscard .cskind{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cscard h3{font-size:18px;margin:8px 0 8px}
.cscard p{color:var(--muted);font-size:14.5px;flex:1}
.cscard .more{margin-top:16px;font-weight:800;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.cscard .more::after{content:"→"}

/* FAQ */
.faqsec{background:var(--bg2)}
.faq{max-width:840px;margin-top:32px}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:800;font-size:16px;color:var(--charcoal);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:800;color:var(--charcoal);flex:none;background:var(--yellow);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 22px 20px;color:var(--muted);font-size:15.5px}
.faq .a p{margin-bottom:12px}
.faq .a p:last-child{margin-bottom:0}
.faq .a a{font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* CTA band */
.ctasec{padding:60px 0}
.cta-band{background:var(--yellow);color:var(--charcoal);border-radius:24px;padding:54px;text-align:center}
.cta-band h2{color:var(--charcoal);font-size:32px;margin-bottom:12px;max-width:20ch;margin-left:auto;margin-right:auto}
.cta-band p{color:#3a3320;max-width:620px;margin:0 auto 26px;font-weight:500;font-size:16.5px}
.cta-band .btn{margin:6px}

/* contact + forms */
.contactsec{background:var(--bg2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.cinfo{display:flex;gap:15px;align-items:flex-start}
.cinfo .ico{margin:0;width:46px;height:46px}
.cinfo .ico svg{width:22px;height:22px}
.cinfo b{display:block;color:var(--charcoal);font-size:15px}
.cinfo a,.cinfo span{color:var(--muted);font-size:14.5px}
.cinfo a{text-decoration:underline;text-underline-offset:2px}
form.cform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);position:relative}
form.cform .field label{color:var(--charcoal)}
form.cform .field .req{color:#6b5a00}
form.cform .field input,form.cform .field select,form.cform .field textarea{border:1px solid #cfcdc7;background:#fff}
form.cform textarea{min-height:110px;resize:vertical}
form.cform .btn{width:100%;justify-content:center;margin-top:8px}
form.cform .reassure{color:var(--muted)}
form.cform fieldset{border:0;margin-bottom:26px}
form.cform legend{font-weight:800;font-size:17px;color:var(--charcoal);margin-bottom:16px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
form.cform legend em{font-style:normal;font-weight:500;font-size:13.5px;color:var(--muted)}
form.cform legend .fs{width:26px;height:26px;border-radius:7px;background:var(--yellow);color:var(--charcoal);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
form.cform.big{padding:34px}
.field.upload input[type=file]{padding:10px;background:var(--bg2);font-size:13.5px}
.uhelp{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.uhelp a{text-decoration:underline}

/* calculator */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:30px;margin-top:36px}
.calc .cin{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.calc .field label{color:var(--charcoal)}
.calc .field input,.calc .field select{border:1px solid #cfcdc7}
.calc .out{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.calc .ov{background:var(--bg2);border-radius:12px;padding:18px}
.calc .ov b{display:block;font-size:27px;font-weight:800;color:var(--charcoal);letter-spacing:-.03em;border-bottom:3px solid var(--yellow);padding-bottom:4px;display:inline-block}
.calc .ov span{display:block;font-size:13px;color:var(--muted);margin-top:9px;font-weight:600}
.assump{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.assump h3{font-size:15px;margin-bottom:10px}
.assump ul{margin:0 0 0 18px;color:var(--muted);font-size:14px}
.assump li{margin-bottom:6px}

/* areas / postcodes */
.pcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pcs span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 13px;font-weight:700;font-size:13.5px;color:var(--charcoal)}
.quickans{background:var(--charcoal);color:#fff;border-radius:var(--radius);padding:30px 34px;margin-top:8px}
.quickans h2{color:#fff;font-size:20px;margin-bottom:10px}
.quickans p{color:#dcdcdc;font-size:16.5px;max-width:70ch}

/* insights list */
.artlist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.art{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.art:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.art .kind{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.art h3{font-size:18.5px;margin:9px 0 9px}
.art p{color:var(--muted);font-size:14.5px;flex:1}
.art .more{margin-top:16px;font-weight:800;font-size:14px}
.art .more::after{content:" →"}

/* article body */
.article{max-width:760px}
.article h2{font-size:26px;margin:38px 0 12px}
.article h3{font-size:19px;margin:28px 0 10px}
.article p{color:var(--muted);font-size:17px;margin-bottom:17px}
.article ul,.article ol{margin:0 0 20px 22px;color:var(--muted);font-size:17px}
.article li{margin-bottom:9px}
.article strong{color:var(--ink)}
.article .standfirst{font-size:19px;color:var(--ink);font-weight:500;margin-bottom:26px}

/* 404 */
.notfound{text-align:center;padding:100px 0}
.notfound h1{font-size:64px;margin-bottom:12px}
.notfound p{color:var(--muted);font-size:18px;max-width:520px;margin:0 auto 28px}

/* footer */
footer{background:var(--charcoal);color:#cccccc;padding:60px 0 30px;font-size:14px;position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr .8fr;gap:30px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.13)}
footer h4{color:var(--yellow);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a{color:#cccccc}
footer a:hover{color:#fff;text-decoration:underline}
.foot-brand .brand{margin-bottom:14px}
.foot-brand .brand b{color:#fff}
.foot-brand p{max-width:300px;color:#b8b8b8;font-size:13.5px;margin-bottom:14px}
.foot-addr{font-size:13px!important}
.foot-bottom{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#adadad}
.foot-bottom a{color:#adadad;text-decoration:underline}

@media(max-width:1100px){
  .foot-top{grid-template-columns:repeat(3,1fr)}
  .proofs{grid-template-columns:repeat(3,1fr)}
  .sector-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  section{padding:58px 0}
  .hero{padding:56px 0 70px}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:34px}
  .hero p{font-size:17px}
  .phero h1{font-size:30px}
  .phero p{font-size:16.5px}
  h2.sec{font-size:26px}
  .cols-5,.cols-4,.cols-3,.steps,.calc .cin,.calc .out{grid-template-columns:repeat(2,1fr)}
  .cols-2,.why-grid,.contact-grid,.feature,.dpoints,.checks,.gband,.csgrid,.artlist{grid-template-columns:1fr}
  .cta-band{padding:36px 22px}
  .cta-band h2{font-size:24px}
  .menu,.nav-cta .btn{display:none}
  .nav-cta{gap:10px}
  .brand small{display:none}
  .burger{display:flex}
  .menu.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;padding:18px 24px 24px;gap:6px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 72px);overflow-y:auto;z-index:70}
  .menu.open>li{width:100%}
  .menu.open a,.menu.open .has-sub>button{width:100%;padding:11px 0;border-bottom:1px solid var(--line);justify-content:space-between}
  .menu.open .sub{position:static;display:none;border:0;box-shadow:none;padding:4px 0 10px 12px;min-width:0;left:auto}
  .menu.open .has-sub.open .sub{display:block}
  .menu.open .sub a{border-bottom:0;padding:8px 10px}
  form.cform.big{padding:24px}
  .foot-top{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .cols-5,.cols-4,.cols-3,.steps,.proofs,.sector-grid,.calc .cin,.calc .out{grid-template-columns:1fr}
  .hero h1{font-size:28px}
  .phero h1{font-size:26px}
  .cta-band h2{font-size:22px}
  .notfound h1{font-size:46px}
  .foot-top{grid-template-columns:1fr}
  .stages li{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .strand i{display:none}
}
@media print{
  header,.topbar,.strand,.burger,.nav-cta,footer,.ctasec,form{display:none}
  body{font-size:11pt}
}

/* placeholder marker — content awaiting Director sign-off (see README) */
.ph{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:#3a3320;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.ph::before{content:"!";width:14px;height:14px;border-radius:50%;background:#3a3320;color:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:10px}
.phbar{background:#3a3320;color:var(--yellow);font-size:13px;font-weight:700;text-align:center;padding:9px 16px}
.cscard .csimg .ph{position:absolute;top:12px;left:12px;z-index:2}
.stockbadge{position:absolute;bottom:10px;right:10px;background:rgba(31,31,31,.85);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:5px;z-index:2}

/* highlighter on dark bands must be a full block, or the top of the glyphs
   disappears against the charcoal background */
.hero .hly,.phero .hly,.process .hly,footer .hly{
  background:var(--yellow);color:var(--charcoal);border-radius:5px;padding:.02em .14em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---- light/dark band variants -------------------------------------------
   .steps and .stages appear on both white and charcoal bands. Base styling is
   for light bands; .process (charcoal) overrides follow. Contrast rule: body
   text never lighter than #464646 on light, never darker than #d2d2d2 on dark. */
.step{background:var(--bg2);border:1px solid var(--line)}
.step h3{color:var(--charcoal)}
.step p{color:var(--muted)}
.process .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.process .step h3{color:#fff}
.process .step p{color:#d2d2d2}
.process .stages li{border-bottom-color:rgba(255,255,255,.13)}
.process .stages h3{color:#fff}
.process .stages p{color:#d2d2d2}
.foot-brand .brand,.foot-brand .brand b{color:#fff}
.foot-brand .brand .y{color:var(--charcoal)}

/* ---- technical diagrams --------------------------------------------------
   Hand-authored SVG, drawn for light bands. Responsive by viewBox; the box
   scrolls horizontally on narrow screens rather than shrinking to illegible. */
.dg{margin:36px 0 0;max-width:none}
.dgbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px 20px;overflow-x:auto}
.dgbox svg{display:block;width:100%;min-width:720px;height:auto}
.dg.tall .dgbox svg{min-width:820px}
.dg figcaption{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:76ch}
.dg svg text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.dg svg .dl{font-size:13.5px;font-weight:700;fill:#1F1F1F}
.dg svg .ds{font-size:12.5px;font-weight:500;fill:#464646}
.dg svg .dn{font-size:12.5px;font-weight:800;fill:#F5D000}
.dg svg .dt{font-size:10.5px;font-weight:600;fill:#464646}
.process .dgbox{background:#fff}
.process .dg figcaption{color:#d2d2d2}
@media(max-width:640px){.dgbox{padding:12px}.dg figcaption{font-size:13.5px}}

/* ---- photographs ---------------------------------------------------------
   Every photo component returns nothing when the image has not been supplied,
   so layouts degrade to text rather than to a placeholder box. */
.pbandwrap{display:grid;grid-template-columns:0.85fr 1fr;gap:52px;align-items:center}
.pbandwrap.flip{grid-template-columns:1fr 0.85fr}
.pb-fig{margin:0}
.pb-fig picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pb-fig img{display:block;width:100%;height:auto}
.pb-fig figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5}
.pb-txt .why-grid{grid-template-columns:1fr}
.pstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.psh{margin:0}
.psh picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--charcoal)}
.psh img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.psh figcaption{margin-top:11px;font-size:13.5px;color:var(--muted);line-height:1.5}
.figphoto{margin:32px 0 0}
.figphoto picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.figphoto img{display:block;width:100%;height:auto}
.figphoto figcaption{margin-top:12px;font-size:14px;color:var(--muted);max-width:72ch;line-height:1.55}
.cscard .csimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cscard .csimg picture{position:absolute;inset:0}
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.30}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#1F1F1F 30%,rgba(31,31,31,.72) 62%,rgba(31,31,31,.55) 100%)}
@media(max-width:900px){
  .pbandwrap,.pbandwrap.flip{grid-template-columns:1fr;gap:28px}
  .pstrip{grid-template-columns:1fr}
}
.dghint{display:none}
@media(max-width:760px){
  .dgbox{position:relative;
    background:linear-gradient(90deg,#fff 60%,rgba(255,255,255,0)) left/44px 100% no-repeat,
               linear-gradient(-90deg,#fff 60%,rgba(255,255,255,0)) right/44px 100% no-repeat,
               radial-gradient(farthest-side at 0 50%,rgba(31,31,31,.14),transparent) left/16px 100% no-repeat,
               radial-gradient(farthest-side at 100% 50%,rgba(31,31,31,.14),transparent) right/16px 100% no-repeat,
               #fff;
    background-attachment:local,local,scroll,scroll,local}
  .dghint{display:block;font-weight:700;color:var(--charcoal);margin-bottom:6px}
}


/* ==========================================================================
   SEGsafe additions
   ========================================================================== */

/* brand wordmark: yellow stays the group marker, cyan is the site accent */
.brand .c{color:var(--cyan);font-weight:800}
.foot-brand .brand .c{color:var(--cyan)}
.hlc{color:var(--charcoal);background:linear-gradient(transparent 58%,var(--cyan) 58%,var(--cyan) 96%,transparent 96%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* cyan variants of the shared furniture */
.eyebrow.cy{background:var(--cyan);color:#04222e}
.btn-cyan{background:var(--cyan);color:#04222e}
.btn-cyan:hover{background:var(--cyan-d);transform:translateY(-2px)}
/* LINK INK. This was --cyan-ink (#00607F) all the way from the segsafe fork, so
   every body link and every text link on a yellow-and-charcoal site rendered
   teal. Michael put it plainly: "not the same theme as the page." Yellow text
   on white cannot carry a link (it fails AA by a mile), so the brand-correct
   treatment is the one the wordmark already uses: charcoal type with the yellow
   doing the marking -- here as a thick yellow underline that goes solid
   charcoal on hover. High contrast, unmistakably a link, and on-palette. */
a.tlink{color:var(--charcoal);text-decoration:underline;text-decoration-color:var(--yellow);
  text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700}
a.tlink:hover{text-decoration-color:var(--charcoal)}
.prose a,.callout a,.srclist a,.a a{color:var(--charcoal);text-decoration:underline;
  text-decoration-color:var(--yellow);text-decoration-thickness:2px;
  text-underline-offset:3px;font-weight:600}
.prose a:hover,.callout a:hover,.srclist a:hover,.a a:hover{text-decoration-color:var(--charcoal)}
.prose a:hover,.callout a:hover,.a a:hover{color:var(--charcoal)}

/* honesty band — the "what we will not tell you" section */
.honesty{background:var(--bg2)}
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.hcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;position:relative}
.hcard h3{font-size:18px;margin:14px 0 8px;line-height:1.25}
.hcard p{color:var(--muted);font-size:15.5px;margin:0}
.hcard.no{border-top:4px solid #b23b3b}
.hcard.yes{border-top:4px solid var(--good);background:var(--good-soft);border-color:var(--good-line)}
.hx,.hy{display:inline-flex;width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center}
.hx{background:#f7ecec;color:#8E2323}
.hy{background:#fff;color:var(--good)}
.hx .ico,.hy .ico{width:20px;height:20px;margin:0}
.ico.sm{width:20px;height:20px}
@media(max-width:1080px){.hgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hgrid{grid-template-columns:1fr}}

/* status / warn / note callouts */
.callout.status{background:var(--cyan-soft2);border-color:var(--cyan-line)}
.callout.status h3{color:var(--cyan-ink)}
.callout.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.callout.warn h3{color:var(--warn-ink)}

/* sources block on every regulatory page */
.srcsec{background:var(--bg2);padding:56px 0}
h2.sec.small{font-size:24px}
.srclist{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px}
.srclist li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5}
.srclist li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--cyan)}
@media(max-width:760px){.srclist{grid-template-columns:1fr}}

/* status table: in force / not in force */
.statustable td .st{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px}
.st.on{color:var(--good)}
.st.off{color:#8E2323}
.st .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}

/* incident-flow diagram band */
.flowsec{background:#fff}
.dsvg{width:100%;height:auto;display:block;margin:8px auto 0;max-width:960px}
.dsvg .dl{stroke:var(--line)}
.dsvg .dfill{fill:#fff}
.dsvg .dtxt{fill:var(--charcoal);font-family:inherit}
.dsvg .dsub{fill:var(--muted);font-family:inherit}
.dsvg .dkey{fill:var(--cyan)}
.dcap{color:var(--muted);font-size:15px;max-width:70ch;margin:18px auto 0;text-align:center}
.band-dark .dsvg .dl{stroke:rgba(255,255,255,.28)}
.band-dark .dsvg .dfill{fill:#2a2a2a}
.band-dark .dsvg .dtxt{fill:#fff}
.band-dark .dsvg .dsub{fill:#d6d6d6}

/* two-column compare table (sounder vs app) */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.compare .col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.compare .col h3{font-size:19px;margin-bottom:6px}
.compare .col .sub{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.compare .col ul{list-style:none;margin:0;padding:0}
.compare .col li{position:relative;padding-left:26px;margin-bottom:9px;font-size:15.5px;color:var(--muted)}
.compare .col li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--cyan)}
@media(max-width:760px){.compare{grid-template-columns:1fr}}

/* scenario tiles */
.scen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.scen .s{background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:12px;padding:20px 20px}
.scen .s h3{font-size:17px;margin-bottom:6px}
.scen .s p{color:var(--muted);font-size:15px;margin:0}
@media(max-width:900px){.scen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.scen{grid-template-columns:1fr}}

/* footer legal strip */
.foot-legal{border-top:1px solid rgba(255,255,255,.14);padding:22px 0 4px;margin-top:8px}
.foot-legal p{color:#c9c9c9;font-size:13.5px;line-height:1.6;max-width:98ch;margin:0 0 8px}
.foot-legal b{color:#fff}

/* resource cards */
.rescard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.18s}
.rescard:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.rescard .kind{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:10px}
.rescard h3{font-size:19px;margin-bottom:8px}
.rescard p{color:var(--muted);font-size:15.5px;margin:0}

/* SEGsafe: cyan replaces yellow on dark furniture (yellow stays the group marker) */
.hero::before{background:radial-gradient(circle,rgba(0,174,239,.24),transparent 62%)}
.phero::before{background:radial-gradient(circle,rgba(0,174,239,.20),transparent 62%)}
.trust b{color:var(--yellow)}
.field .req{color:var(--cyan)}
.crumbs a:hover{color:var(--cyan)}
.crumbs span{color:var(--cyan)}
.hero .hlc,.phero .hlc,.process .hlc{background:linear-gradient(transparent 58%,var(--cyan) 58%,var(--cyan) 94%,transparent 94%);color:#04222e;padding:0 .1em}

/* visible placeholder — must be obvious, must never be mistaken for content */
.phold{display:inline-block;background:#fff6d6;border:1px dashed #c9a227;border-radius:8px;padding:3px 10px;
  font-size:14.5px;color:#5a4300;line-height:1.5}
.phold b{color:#3f2f00}
.phold em{font-style:normal;color:#6b5200}

/* --- contrast fixes found by a11y.py ---------------------------------------
   1. cyan is a marker colour, not a text colour: on white the wordmark and any
      cyan text use --cyan-ink (#00607F), which clears 4.5:1.
   2. on dark bands the highlighter must be a SOLID block, not a partial
      gradient, or the tops of the glyphs sit on charcoal and vanish.
   3. diagram captions inside dark bands inherit --muted and must not.
   4. the honeypot label is off-screen but still computed; take it out entirely. */
header .brand .c{color:var(--cyan-ink)}
.hero .hlc,.phero .hlc,.process .hlc,.band-dark .hlc{
  background:var(--cyan);color:#04222e;padding:.04em .18em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.process .dcap,.band-dark .dcap,.process .dsub,.process figure .dcap{color:#d6d6d6}
.hp{opacity:0}
.hp,.hp label,.hp input{color:#1F1F1F;background:#fff}

/* diagram axis labels: readable on light bands and on charcoal */
.dsvg .daxis{fill:var(--muted);font-family:inherit}
.dsvg .daxisline{stroke:var(--line)}
.process .dsvg .daxis,.band-dark .dsvg .daxis{fill:#c9c9c9}
.process .dsvg .daxisline,.band-dark .dsvg .daxisline{stroke:rgba(255,255,255,.3)}
.process .dsvg .dtxt{fill:var(--charcoal)}
.process .dsvg .dsub{fill:var(--muted)}

/* --- the real SEG SAFE logo -------------------------------------------------
   One SVG, two contexts: the mark keeps its own colours, the SAFE wordmark
   inherits currentColor so it is charcoal in the header and white in the footer. */
.brand{display:flex;align-items:center;gap:12px;color:var(--charcoal)}
.brand .logo{height:34px;width:auto;display:block;flex:none}
.brand-strap{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  color:var(--muted);border-left:1px solid var(--line);padding-left:12px;line-height:1}
.foot-logo{color:#fff}
.foot-logo .logo{height:40px}
@media(max-width:1320px){.brand-strap{display:none}}
@media(max-width:900px){.brand .logo{height:30px}}

/* --- photograph bands ------------------------------------------------------ */
.photoband{background:var(--bg2);padding:76px 0}
.pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.photoband.flip .pb-media{order:2}
.pb-media{margin:0}
.pb-media picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.pb-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.pb-media figcaption{color:var(--muted);font-size:13.5px;margin-top:10px}
.pb-points{list-style:none;margin:26px 0 0;padding:0}
.pb-points li{position:relative;padding-left:28px;margin-bottom:14px;color:var(--muted);font-size:16px;line-height:1.6}
.pb-points li b{color:var(--ink)}
.pb-points li::before{content:"";position:absolute;left:0;top:.52em;width:12px;height:12px;border-radius:3px;background:var(--cyan)}
@media(max-width:900px){.pb-grid{grid-template-columns:1fr;gap:28px}.photoband.flip .pb-media{order:0}}

/* ==========================================================================
   SEGsafe v2 — Verkada product presentation
   ========================================================================== */

/* Transparent product renders on a CHARCOAL panel, the same treatment as the
   product cards use. Two bugs fixed at once here on 1 Sep 2026: the Verkada
   renders are white hardware, so on the pale panel this used to be they were
   invisible -- a card with an apparently empty image box; and the tint was
   still SEGsafe's cyan, inherited with the stylesheet and never repainted. */
.renderwrap{position:relative;border-radius:var(--radius);padding:26px;
  background:#111;display:flex;align-items:center;justify-content:center}
.renderwrap picture{display:block;width:100%}
.renderwrap img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
.card.link .renderwrap{padding:18px;margin-bottom:16px}
.card.link .renderwrap img{max-height:150px;width:auto;margin:0 auto}
.band-dark .renderwrap,.process .renderwrap{background:#111}

.prodband{padding:76px 0}
.prodband:nth-of-type(even){background:var(--bg2)}
.prodband .pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.prodband.flip .pb-media{order:2}
@media(max-width:900px){.prodband .pb-grid{grid-template-columns:1fr;gap:30px}.prodband.flip .pb-media{order:0}}

/* product family grid */
.famgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.fam{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0 0 24px;
  overflow:hidden;transition:.18s}
.fam:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.fam-img{background:radial-gradient(circle at 50% 50%,rgba(0,174,239,.14),transparent 68%),var(--bg2);
  padding:22px;display:flex;align-items:center;justify-content:center;min-height:180px}
.fam-img img{max-height:150px;width:auto;max-width:100%;object-fit:contain}
.fam h3{font-size:19px;margin:20px 24px 6px}
.fam p{color:var(--muted);font-size:15.5px;margin:0 24px 12px}
.fam ul{list-style:none;margin:0 24px;padding:0}
.fam li{position:relative;padding-left:20px;font-size:14.5px;color:var(--muted);margin-bottom:6px;line-height:1.5}
.fam li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--cyan)}
.fam .more{display:inline-block;margin:14px 24px 0;font-weight:800;font-size:14.5px;color:var(--cyan-ink)}
@media(max-width:1000px){.famgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.famgrid{grid-template-columns:1fr}}

/* can / cannot grid */
.ccgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.cc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.cc h3{font-size:17.5px;margin:13px 0 8px;line-height:1.3}
.cc p{color:var(--muted);font-size:15px;margin:0}
.cc.yes{border-top:4px solid var(--good)}
.cc.no{border-top:4px solid #b23b3b;background:var(--bg2)}
@media(max-width:1000px){.ccgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ccgrid{grid-template-columns:1fr}}

/* spec table */
.spec td b,.spec th b{color:var(--ink)}
.modelchip{display:inline-block;background:var(--charcoal);color:#fff;border-radius:6px;padding:2px 9px;
  font-family:var(--fm,ui-monospace,Menlo,monospace);font-size:13px;font-weight:700;letter-spacing:.02em;margin-right:6px}
.band-dark .modelchip,.process .modelchip{background:var(--cyan);color:#04222e}

/* case note cards */
.casenotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.casenote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:12px;padding:22px 24px}
.casenote h3{font-size:17.5px;margin-bottom:2px}
.casenote .where{color:var(--cyan-ink);font-size:13.5px;font-weight:700;margin-bottom:10px}
.casenote p{color:var(--muted);font-size:15px;margin:0 0 10px}
.casenote a{font-size:14px;font-weight:700}
@media(max-width:800px){.casenotes{grid-template-columns:1fr}}

/* ==========================================================================
   Photography — the verkadacctv card language, in SEGsafe cyan
   ========================================================================== */

/* inner-page hero with a framed photograph floated beside the copy */
.phero.part .wrap{position:relative;z-index:2;padding-right:480px}
.phero-art{position:absolute;right:max(24px,calc(50% - 566px));top:50%;transform:translateY(-50%);
  width:430px;z-index:1;border-radius:18px;overflow:hidden;margin:0;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 26px 54px rgba(0,0,0,.5)}
.phero-art picture,.phero-art img{display:block;width:100%;height:288px;object-fit:cover}
@media (max-width:1080px){
  .phero.part .wrap{padding-right:0}
  .phero-art{display:none}
}

/* inner-page hero with a full-bleed photograph behind a scrim */
.phero.pbg{position:relative}
.phero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero-bg picture,.phero-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* the scrim has to protect the copy and still let the photograph be a photograph:
   near-opaque under the text, and thin enough on the right that you can see the room */
.phero.pbg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(93deg,rgba(31,31,31,.97) 0%,rgba(31,31,31,.94) 34%,
    rgba(31,31,31,.78) 50%,rgba(31,31,31,.34) 72%,rgba(31,31,31,.22) 100%)}
.phero.pbg .wrap{position:relative;z-index:2}
.phero.pbg{padding:78px 0 84px}
.phero.pbg h1{max-width:16ch}
.phero.pbg p{max-width:520px}
.phero-bg img{filter:saturate(1.05) contrast(1.03)}
@media (max-width:900px){
  /* on a phone the photograph would sit behind the whole column, so it goes flat */
  .phero.pbg::after{background:linear-gradient(180deg,rgba(31,31,31,.93),rgba(31,31,31,.97))}
  .phero.pbg p{max-width:none}
}

/* a framed photograph in prose */
.frame{margin:34px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 16px 34px rgba(31,31,31,.13);background:var(--bg2)}
.frame picture,.frame img{display:block;width:100%;height:auto}
.frame figcaption{padding:13px 18px 15px;font-size:13.5px;color:var(--muted);
  background:#fff;border-top:1px solid var(--line);line-height:1.55}
.process .frame,.sceneband .frame{border-color:rgba(255,255,255,.16)}
.process .frame figcaption,.sceneband .frame figcaption{background:rgba(255,255,255,.05);color:#dcdcdc;
  border-top-color:rgba(255,255,255,.14)}

/* three framed photographs across */
.figrow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.figrow .frame{margin:0}
.figrow .frame picture,.figrow .frame img{height:210px;object-fit:cover}
.figrow .frame figcaption{font-size:13px;padding:12px 15px 14px}
@media (max-width:900px){.figrow{grid-template-columns:1fr;gap:16px}
  .figrow .frame picture,.figrow .frame img{height:200px}}

/* full-bleed photo cards */
.scenegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.scene{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s,box-shadow .22s,border-color .22s}
.scene:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--cyan)}
.scimg{height:200px;overflow:hidden;background:var(--charcoal)}
.scimg picture,.scimg img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .3s}
.scene:hover .scimg img{transform:scale(1.04)}
.scbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.scene h3{font-size:18.5px;margin-bottom:5px}
.scene p{color:var(--muted);font-size:14px;flex:1}
.scuse{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--cyan-ink);
  border-top:1px solid var(--line);padding-top:11px}
/* four cards in a three-column grid leaves an orphan; two-up reads better */
.scenegrid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.scenegrid:has(> :nth-child(4):last-child) .scimg,
.scenegrid:has(> :nth-child(4):last-child) .scimg img{height:250px}
@media (max-width:900px){.scenegrid{grid-template-columns:1fr 1fr;gap:14px}
  .scenegrid:has(> :nth-child(4):last-child) .scimg,
  .scenegrid:has(> :nth-child(4):last-child) .scimg img{height:158px}
  .scimg,.scimg img{height:158px}}
@media (max-width:560px){.scenegrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.scene:hover{transform:none}.scene:hover .scimg img{transform:none}}

/* photograph + copy, dark by default */
.sceneband{background:var(--charcoal);color:#fff;padding:74px 0}
.sceneband.light{background:var(--bg2);color:var(--charcoal)}
.sb-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
.sceneband.flip .sb-grid{grid-template-columns:1.08fr .92fr}
.sceneband.flip .sb-media{order:2}
.sb-media{margin:0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.sceneband.light .sb-media{border-color:var(--line);box-shadow:0 18px 40px rgba(31,31,31,.15)}
.sb-media picture,.sb-media img{display:block;width:100%;height:auto}
.sb-media figcaption{padding:12px 17px 14px;font-size:13px;line-height:1.55;
  background:rgba(255,255,255,.06);color:#dcdcdc;border-top:1px solid rgba(255,255,255,.14)}
.sceneband.light .sb-media figcaption{background:#fff;color:var(--muted);border-top-color:var(--line)}
/* the eyebrow is a filled chip, so it keeps the yellow ground and charcoal ink
   on every background — cyan ink on yellow is 1.68:1 and fails outright */
.sceneband .eyebrow,.sceneband.light .eyebrow{background:var(--yellow);color:var(--charcoal)}
.sceneband h2.sec{color:#fff}
.sceneband.light h2.sec{color:var(--charcoal)}
.sceneband .lead{color:#d8d8d8}
.sceneband.light .lead{color:var(--muted)}
.sceneband .pb-points li{color:#e4e4e4}
.sceneband .pb-points li b{color:#fff}
.sceneband.light .pb-points li{color:var(--muted)}
.sceneband.light .pb-points li b{color:var(--charcoal)}
@media (max-width:900px){
  .sb-grid,.sceneband.flip .sb-grid{grid-template-columns:1fr;gap:28px}
  .sceneband.flip .sb-media{order:0}
  .sceneband{padding:54px 0}
}

/* Between the mobile breakpoint and a comfortable desktop the header has just
   enough room for six items but not enough for their labels, so "Martyn's Law"
   and "Why us" broke onto two lines. Hold them on one line and tighten the gap
   through that band instead. */
.menu > li > a,.menu > li > button{white-space:nowrap}
@media(min-width:901px) and (max-width:1080px){
  .menu{gap:13px}
  .menu > li > a,.menu > li > button{font-size:14.5px}
  .nav-cta{gap:12px}
  .nav-cta .phone{font-size:14px}
}
/* the tightest part of the band: the phone number is the first thing to go,
   because the header button already carries the call to action */
@media(min-width:901px) and (max-width:985px){
  .menu{gap:10px}
  .menu > li > a,.menu > li > button{font-size:13.5px}
  .nav-cta .phone{display:none}
}

/* the tier map is a decision flow and needs more width than the process diagrams */
.dsvg.wide{max-width:1000px}
.dsvg .dkeyfill{fill:#F2FBFE}
.band-dark .dsvg .dkeyfill,.process .dsvg .dkeyfill{fill:#123240}

/* the seventh family closes the grid as a full-width card rather than an orphan
   sitting in a third of a row with dead space beside it */
.fam-wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  align-items:center;padding:0;overflow:hidden}
.fam-wide .fam-img{height:100%;min-height:260px;border-radius:0;margin:0}
.fam-wide .fam-img img{max-height:210px}
.fam-wide .fam-body{padding:30px 34px 32px}
.fam-wide .eyebrow{margin-bottom:14px}
.fam-wide h3{font-size:23px;margin:0 0 8px}
.fam-wide p{margin:0 0 14px;font-size:16px;max-width:52ch}
.fam-wide ul{margin:0}
.fam-wide .more{margin:16px 0 0}
@media(max-width:1000px){
  .fam-wide{grid-template-columns:1fr}
  .fam-wide .fam-img{min-height:0;height:210px}
  .fam-wide .fam-body{padding:24px}
}
/* a photograph in the wide card fills its panel instead of floating in it */
.fam-wide .fam-img.photo{padding:0;background:var(--charcoal)}
.fam-wide .fam-img.photo picture,.fam-wide .fam-img.photo img{width:100%;height:100%;max-height:none;
  object-fit:cover;display:block}
@media(max-width:1000px){.fam-wide .fam-img.photo,.fam-wide .fam-img.photo img{height:210px}}

/* ==========================================================================
   licencerenewals.co.uk — prices, the basket, and the quote gate.
   Everything above this line is the shared SEG design system. Everything below
   is what this site has that its siblings do not: a published price.
   Contrast rule still applies — body-secondary never lighter than #464646.
   ========================================================================== */

/* the wordmark. The domain IS the logo, so it has to hold its own at 20px. */
.logo{display:inline-flex;align-items:baseline;font-weight:800;letter-spacing:-.03em;
  font-size:21px;line-height:1;white-space:nowrap;color:inherit}
.lg-a{opacity:.72}
.lg-b{position:relative;padding:0 .04em;
  background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 97%,transparent 97%)}
.lg-c{font-weight:600;font-size:.62em;opacity:.55;margin-left:.12em}
footer .logo,.process .logo{color:#fff}
footer .lg-a{opacity:.62}
.foot-logo{margin-bottom:14px}

/* --- price cards ---------------------------------------------------------- */
.pladder{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 10px}
/* The compact ladder is the one inside the dark hero card. Tightened with the
   hero on 1 Sep 2026 so four terms and their SKUs fit without pushing the first
   product card below the fold. */
.pladder.compact{gap:9px;margin:0 0 4px}
.pladder.compact .pcard{padding:13px 13px 12px}
.pladder.compact .pcard.best{padding:12px 12px 11px}
.pladder.compact .pterm{font-size:11.5px}
.pladder.compact .pbig{font-size:27px}
.pladder.compact .pyr{font-size:13px}
.pladder.compact .psku{margin-top:8px;font-size:11px}
.pladder.compact .pusd{font-size:11.5px;line-height:1.45}
.pladder.compact .btn{margin-top:10px;padding:9px 12px;font-size:13.5px}
.pladder.compact .ptag{top:-9px;left:12px;font-size:10px;padding:3px 8px}
.pcard{border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px 18px;
  background:#fff;display:flex;flex-direction:column;gap:2px;position:relative;
  box-shadow:var(--shadow-sm)}
.pcard.best{border-color:var(--charcoal);border-width:2px;padding:19px 17px 17px}
.ptag{position:absolute;top:-11px;left:16px;background:var(--yellow);color:var(--charcoal);
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:5px}
.pterm{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pbig{font-size:34px;font-weight:800;letter-spacing:-.035em;color:var(--charcoal);line-height:1.05;margin:4px 0 0}
.pbig.xl{font-size:52px}
.pyr{font-size:14.5px;color:var(--muted);font-weight:600}
.psku{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--charcoal);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.psku.big{font-size:14px;letter-spacing:.06em;color:var(--muted)}
.pusd{font-size:12.5px;color:#6b6b6b}
.pcard .btn{margin-top:14px;justify-content:center;width:100%}
.btn.sm{padding:10px 14px;font-size:14px}
.btn.lg{padding:16px 30px;font-size:16.5px}
.btn.added{background:var(--charcoal);color:#fff}
.btn-text{background:none;border:none;color:var(--muted);font-weight:700;text-decoration:underline;
  padding:13px 6px;font-size:14.5px}
.btn-text:hover{color:var(--ink)}

.phero-price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);max-width:520px;margin-top:26px}
.phero-price .hero-cta{margin-top:18px}

/* the disclosure line. It is small, but it is never grey-on-grey and it is
   never hidden — it is the clause that makes publishing a price safe. */
.pdisc{font-size:13px;line-height:1.55;color:#464646;max-width:76ch;margin-top:14px;
  padding-left:13px;border-left:3px solid var(--yellow)}

.poa-block{border:1px dashed var(--lgrey);border-radius:var(--radius);padding:22px 24px;
  background:var(--bg2);margin:26px 0}
.poa-block h3{font-size:18px;margin-bottom:6px}
.poa-block p{color:var(--muted);max-width:64ch;margin-bottom:14px}

/* --- the price table ------------------------------------------------------ */
table.prices{width:100%;border-collapse:collapse;font-size:15px}
table.prices caption{text-align:left;color:var(--muted);font-size:14.5px;padding-bottom:10px}
table.prices th{text-align:left;font-weight:800;padding:12px 12px;border-bottom:2px solid var(--charcoal);
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;vertical-align:bottom}
table.prices tbody th{text-transform:none;letter-spacing:0;font-size:15.5px;border-bottom:1px solid var(--line);
  padding:13px 12px}
table.prices tbody th a{text-decoration:underline;text-decoration-color:var(--lgrey);text-underline-offset:3px}
table.prices tbody th a:hover{text-decoration-color:var(--charcoal)}
table.prices tbody th small{display:block;font-weight:600;color:#6b6b6b;font-size:12.5px;
  letter-spacing:.02em;margin-top:2px}
table.prices td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.prices td.num,table.prices th.num{text-align:right}
table.prices td b{font-size:16.5px;font-weight:800;display:block}
table.prices td small{display:block;font-size:12px;color:#7a7a7a}
table.prices tbody tr:hover{background:var(--bg2)}
/* A term a family is not sold in. An em dash, greyed -- not a blank cell,
   which reads as a price we forgot to fill in. */
table.prices td.na{color:#9a9a9a;font-weight:600}
.poa-row td.poa-cell{color:#6b6b6b;font-style:italic;text-align:left;font-size:14px}

/* --- the quote gate ------------------------------------------------------- */
.submit-gate{margin-top:30px;padding:24px 26px;background:var(--charcoal);border-radius:var(--radius);color:#fff}
.submit-gate .btn{margin-bottom:14px}
.nopay{color:#dcdcdc;font-size:14.5px;line-height:1.6;max-width:70ch;margin:0}
.nopay b{color:var(--yellow)}
.reassure-box{background:var(--soft2);border:1px solid var(--yellow);border-radius:10px;
  padding:14px 16px;margin-bottom:18px;font-size:14.5px;color:var(--ink);line-height:1.6}
.reassure-box b{font-weight:800}
.opt{font-weight:600;color:#7a7a7a;font-size:12.5px;text-transform:none;letter-spacing:0}

/* --- honesty band --------------------------------------------------------- */
.honesty{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.hitem{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  border-top:4px solid var(--charcoal)}
.hitem h3{font-size:17px;margin-bottom:7px}
.hitem p{color:var(--muted);font-size:15px}

/* --- group band ----------------------------------------------------------- */
/* THE GROUP BAND.
   Michael, 1 Sep: "the verkada cctv segcore and segplc could be better like its
   on verkadacctv.co.uk." Ours was three plain white boxes with a name and half a
   line of text. The playbook's pattern -- and what verkadacctv actually does --
   is three DARK cards on a dark band, each with a bold yellow "if it is X" line
   above the body copy and the domain as the link, with SEG Core centred and
   marked as the company you are already dealing with rather than linked. That
   structure is the point: it tells a reader which of the three to ring, which a
   row of names cannot. The band goes charcoal so the cards have something to sit
   on, and the strand runs behind it as it does on the other dark bands. */
.groupband{background:var(--charcoal);color:#fff}
.groupband .sec,.groupband h2{color:#fff}
.groupband .lead{color:#d6d5d0}
.groupband .band-mark{color:var(--yellow)}
.glinks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.gcard{display:flex;flex-direction:column;color:#fff;background:#262626;border:1px solid #383838;
  border-radius:var(--radius);padding:22px 24px 20px;transition:border-color .18s,transform .18s}
a.gcard:hover{border-color:var(--yellow);transform:translateY(-3px)}
.gcard.here{border-color:var(--yellow);background:#2b2a22}
.gcard b{display:block;font-size:18px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.01em}
.gcard em{display:block;font-style:normal;font-weight:800;font-size:13.5px;color:var(--yellow);
  margin-bottom:12px;line-height:1.35}
.gcard span{color:#c9c8c3;font-size:14.5px;line-height:1.6}
.gcard .gto{margin-top:auto;padding-top:16px;color:var(--yellow);font-weight:800;font-size:14px;
  text-decoration:underline;text-decoration-color:rgba(245,208,0,.45);
  text-decoration-thickness:2px;text-underline-offset:4px}
.gcard.here .gto{text-decoration:none}
a.gcard .gto::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;
  border:2px solid currentColor;border-left:0;border-bottom:0;
  transform:rotate(45deg);vertical-align:1px}

/* --- sources -------------------------------------------------------------- */
.srcbox{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-top:34px}
.srcbox h3{font-size:16px;margin-bottom:10px}
.srcbox ul{margin:0 0 12px 18px;color:var(--muted);font-size:14.5px}
.srcbox li{margin-bottom:5px}
.srcbox a{text-decoration:underline}
.srcbox .small{font-size:13px;color:#5f5f5f;margin:0}
.ph{background:var(--soft);border-bottom:2px dotted var(--yellow-d);padding:0 3px;font-style:italic}

/* --- print: the renewal schedule is meant to be forwarded to a finance team - */
@media print{
  .topbar,header,.strand,footer,.bk-actions,.bk-term .tswitch,.stepper button,.ctasec,.crumbs{display:none!important}
  .stepper{border:none}
  .stepper input{border:none;width:auto;font-size:15px}
  body{font-size:12pt}
  .basket{margin:0}
  a[href]:after{content:""}
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1080px){
  .pladder{grid-template-columns:repeat(2,1fr)}
  .hgrid{grid-template-columns:1fr 1fr}
  .glinks{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pladder{grid-template-columns:1fr}
  .hgrid,.glinks{grid-template-columns:1fr}
  .pbig.xl{font-size:40px}
  .bk-term{flex-direction:column;align-items:flex-start;gap:16px}
  .tswitch{width:100%}
  .tbtn{flex:1;padding:12px 6px;font-size:13.5px}
  table.bktable,table.prices{font-size:14px}
  table.bktable tbody th small{font-size:12px}
  .stepper input{width:48px}
  .bk-actions{flex-direction:column;align-items:stretch}
  .bk-actions .btn{justify-content:center}
}

/* --- contact page --------------------------------------------------------- */
/* The shared .cinfo is a single row on its origin site; here it holds three
   stacked blocks, each an icon beside a label. Without this it overflows at 390px. */
.contactgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.cinfo{display:flex;flex-direction:column;gap:20px;margin-top:26px}
.ci{display:flex;gap:14px;align-items:flex-start;min-width:0}
.ci > div{min-width:0;overflow-wrap:anywhere}
.ci .ico{flex:0 0 46px;margin:0}
.ci b{display:block;color:var(--charcoal);font-size:15.5px;margin-bottom:1px}
.ci a{display:block;color:var(--ink);font-size:16px;font-weight:700;text-decoration:underline;
  text-underline-offset:3px}
.ci span{display:block;color:var(--muted);font-size:14.5px}
@media (max-width:900px){ .contactgrid{grid-template-columns:1fr;gap:34px} }

/* The enquiry card is designed for the dark hero. On the contact page it sits on
   white, so it needs the light treatment or its text is white on white. */
.contactgrid .hero-card{background:var(--bg2);border:1px solid var(--line);backdrop-filter:none;
  box-shadow:var(--shadow-sm)}
.contactgrid .hero-card h2{color:var(--charcoal)}
.contactgrid .hero-card .sub-t{color:var(--muted)}
.contactgrid .hero-card label{color:var(--charcoal)}
.contactgrid .hero-card input,.contactgrid .hero-card select{background:#fff;color:var(--ink);
  border-color:var(--lgrey)}
.contactgrid .hero-card .reassure{color:var(--muted)}
.contactgrid .hero-card .reassure a{color:var(--ink);text-decoration:underline}

/* AA: the dollar-origin figure under each price was 4.29:1 at 12px. */
table.prices td small,table.prices tbody th small{color:#666}
.pusd{color:#666}

/* A component with an explicit display value beats the browser's [hidden] rule,
   so el.hidden silently stops working. This bit the basket: the submit and print
   buttons stayed visible on an empty basket because .bk-actions is display:flex.
   Caught by basket_test.py, which is why that test exists. */
[hidden]{display:none!important}

/* This site's highlight marker is SEG Yellow, like verkadacctv.co.uk and
   segcore.co.uk. The cyan inherited with the stylesheet belongs to SEGsafe. */
.hlc,.hero .hlc,.phero .hlc,.process .hlc,.band-dark .hlc{
  background:var(--yellow);color:var(--charcoal);padding:.04em .18em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* the "lowest yearly cost" flag sits over the card edge, so the card it flags
   needs room above its own label or the two collide */
.pcard.best{padding-top:28px}
.pladder.compact .pcard.best{padding-top:26px}
.ptag{max-width:calc(100% - 32px)}

/* Grid children default to min-width:auto, so the four price cards inside the
   hero card were forcing their column wider than its 0.94fr and squeezing the
   headline into a narrow ribbon. */
.hero .wrap > *{min-width:0}
/* and in the hero the ladder reads better two-up than four-up */
.pladder.compact{grid-template-columns:repeat(2,1fr)}
.ptag{white-space:nowrap}
.pcard.best{padding-top:30px}

/* the breadcrumb's current-page marker is SEGsafe cyan in the shared stylesheet */
.crumbs a:hover,.crumbs span{color:var(--yellow)}

/* table captions sit above the framed table rather than on its top edge */
.tablewrap{padding-top:0}
/* table.bktable had NO base rule of its own -- no width, no cell padding -- so
   the renewal schedule on /submit/ rendered as a squeezed, run-together block
   ("Camera licenceLIC-CAM-5Y-RNW5 years"). It had been like that since the page
   was built; nothing caught it because the markup is valid and the numbers are
   right. Found by eye, 1 Sep 2026. Same treatment as table.prices. */
table.bktable{width:100%;border-collapse:collapse;font-size:15px}
table.bktable th{text-align:left;font-weight:800;padding:12px 12px;
  border-bottom:2px solid var(--charcoal);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--charcoal)}
table.bktable tbody th{text-transform:none;letter-spacing:0;font-size:15.5px;font-weight:700;
  border-bottom:1px solid var(--line)}
table.bktable td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.bktable td.num,table.bktable th.num{text-align:right}
table.bktable .sku{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
table.bktable tfoot th{border-bottom:none;text-transform:none;letter-spacing:0;font-size:15px}
table.bktable tfoot td{border-bottom:none;font-weight:800}
table.bktable tfoot tr.bk-total th,table.bktable tfoot tr.bk-total td{
  border-top:2px solid var(--charcoal);font-size:17px;padding-top:14px}

table.bktable caption,table.prices caption{caption-side:top;padding:16px 12px 10px;
  border-bottom:1px solid var(--line);margin-bottom:0;background:var(--bg2)}

/* ==========================================================================
   THE SHOP
   Product cards with the device, the four terms priced, a quantity and an
   Add to basket — beside a running quote that stays with you as you scroll.
   ========================================================================== */
.shopwrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:34px;align-items:start}
.shopmain{min-width:0}

.prodgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.18s;position:relative}
.prod:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.prod.has{border-color:var(--charcoal)}
.prod-img{display:block;background:#111;padding:20px;text-align:center;line-height:0}
picture{display:contents}
.prod-img img{max-height:172px;width:auto;margin:0 auto;object-fit:contain}
.prod-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;min-width:0}
.prod-in{display:inline-block;align-self:flex-start;background:var(--charcoal);color:var(--yellow);
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;margin-bottom:10px}
.prod-sku{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  font-weight:700;letter-spacing:.05em;color:#666}
.prod h3{font-size:19px;margin:4px 0 6px;letter-spacing:-.02em}
.prod h3 a{color:var(--charcoal)}
.prod h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.prod-unit{font-size:14px;color:var(--muted);margin-bottom:6px}
.prod-unit b{color:var(--ink)}
.prod-blurb{font-size:14px;color:var(--muted);margin-bottom:14px;flex:1}

.prod-terms{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.pterm-btn{background:#fff;border:1.5px solid var(--lgrey);border-radius:9px;padding:8px 4px;
  cursor:pointer;font:inherit;text-align:center;transition:.14s;display:flex;flex-direction:column;gap:2px}
.pterm-btn:hover{border-color:var(--charcoal);background:var(--soft2)}
.pterm-btn.on{background:var(--charcoal);border-color:var(--charcoal)}
.pt-yr{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pt-gbp{font-size:14.5px;font-weight:800;color:var(--charcoal);letter-spacing:-.02em}
.pterm-btn.on .pt-yr{color:#c9c9c9}
.pterm-btn.on .pt-gbp{color:var(--yellow)}
.prod-each{display:block;font-size:12.5px;color:#666;margin-bottom:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.prod-poa{font-size:13.5px;color:var(--muted);background:var(--bg2);border:1px dashed var(--lgrey);
  border-radius:9px;padding:10px 12px;margin-bottom:12px}

.prod-buy{display:flex;gap:10px;align-items:center;margin-top:auto}
.prod-buy .btn{flex:1;justify-content:center;padding:12px 14px;font-size:14.5px}

.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--lgrey);border-radius:9px;
  overflow:hidden;background:#fff;flex-shrink:0}
.stepper button{width:36px;height:42px;border:none;background:#fff;font-size:18px;font-weight:800;
  cursor:pointer;color:var(--charcoal);line-height:1}
.stepper button:hover{background:var(--soft)}
.stepper input{width:46px;height:42px;border:none;border-left:1.5px solid var(--lgrey);
  border-right:1.5px solid var(--lgrey);text-align:center;font-size:15.5px;font-weight:800;
  font-family:inherit;color:var(--charcoal);-moz-appearance:textfield;background:#fff}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper.xs button{width:30px;height:34px;font-size:16px}
.stepper.xs input{width:40px;height:34px;font-size:14px}
.btn.added{background:var(--charcoal);color:#fff}
.btn-text{background:none;border:none;color:var(--muted);font-weight:700;text-decoration:underline;
  padding:6px;font-size:14px;cursor:pointer;font-family:inherit}
.btn-text:hover{color:var(--ink)}
.btn-text.sm{font-size:13px}

/* --- the running quote ---------------------------------------------------- */
.bkpanel{position:sticky;top:calc(var(--hdr,74px) + var(--strip,66px) + 18px)}
.bkp-inner{background:#fff;border:2px solid var(--charcoal);border-radius:var(--radius);
  padding:20px 20px 18px;box-shadow:var(--shadow)}
.bkp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:2px solid var(--charcoal);padding-bottom:12px;margin-bottom:14px}
.bkp-head h2{font-size:19px;margin:0}
.bkp-empty p{font-size:14px;color:var(--muted);margin-bottom:8px}
.bkp-empty .small{font-size:13px}
.bkp-empty a{text-decoration:underline;font-weight:700}
.bkp-lines{list-style:none;margin:0}
.bkp-line{padding:12px 0;border-bottom:1px solid var(--line)}
.bkp-l1{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.bkp-l1 b{font-size:14.5px;line-height:1.35}
.bkp-x{background:none;border:none;color:#8a8a8a;font-size:20px;line-height:1;cursor:pointer;
  padding:0 2px;font-family:inherit}
.bkp-x:hover{color:var(--ink)}
.bkp-l2 .sku{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  color:#666;letter-spacing:.03em}
.bkp-l3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.bkp-lt{font-size:15px;font-weight:800}
.bkp-mixed{background:var(--soft2);border:1px solid var(--yellow);border-radius:9px;
  padding:11px 13px;font-size:13px;line-height:1.55;color:var(--ink);margin-top:14px}
.bkp-foot{margin-top:16px}
.bkp-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:2px solid var(--charcoal);padding-top:14px}
.bkp-total span{font-size:13.5px;color:var(--muted);font-weight:600}
.bkp-total b{font-size:24px;font-weight:800;letter-spacing:-.02em;text-align:right}
.bkp-peryear{display:flex;justify-content:space-between;gap:10px;margin-top:2px;
  font-size:13px;color:var(--muted)}
.bkp-peryear b{font-weight:700}
.bkp-foot .btn{width:100%;justify-content:center;margin-top:14px}
.bkp-nopay{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:12px}
.bkp-nopay b{color:var(--ink)}
.bkp-inner .pdisc{font-size:12px;margin-top:14px}

/* mobile: the quote becomes a bar at the foot of the screen, where a phone
   shopper expects it. The panel itself drops below the grid. */
.bkbar{display:none}
@media (max-width:1080px){
  .shopwrap{grid-template-columns:1fr}
  .bkpanel{position:static;order:-1}
  .bkp-inner{border-width:1px}
}
@media (max-width:760px){
  .prodgrid{grid-template-columns:1fr}
  .prod-img img{max-height:150px}
  .bkpanel{order:0}
  .bkbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--charcoal);color:#fff;padding:12px 16px;gap:12px;
    align-items:center;justify-content:space-between;
    box-shadow:0 -8px 24px rgba(0,0,0,.22)}
  .bkbar div{font-size:14px}
  .bkbar b{color:var(--yellow);font-weight:800}
  .bkbar span{color:#c9c9c9;font-size:12.5px}
  .bkbar .btn{padding:11px 16px;font-size:14px;white-space:nowrap}
  body:has(.bkbar:not([hidden])){padding-bottom:74px}
}

/* print: the schedule is meant to be forwarded to a finance team */
@media print{
  .topbar,header,.strand,footer,.ctasec,.crumbs,.bkbar,.prod-buy,.prod-terms,
  .bkp-foot .btn,.bkp-x,.bkp-l3 .stepper,[data-clear]{display:none!important}
  .shopwrap{grid-template-columns:1fr}
  .prodgrid{display:none}
  .bkpanel{position:static}
  .bkp-inner{border:1px solid #000;box-shadow:none}
  body{font-size:12pt}
  a[href]:after{content:""}
}

/* the selected term chip: the button's own colour has to flip too, not just its
   child spans, or its computed contrast is black-on-charcoal */
.pterm-btn.on{color:#fff}

/* --- two vendors ---------------------------------------------------------- */
.vendorlede{max-width:74ch}
.vendorlede .lead{margin-bottom:10px}
.prodgrid.one{grid-template-columns:minmax(0,460px)}
.bkp-v{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#6b6b6b;margin-bottom:3px}

/* five terms need a tighter chip than four */
.prod-terms.t5{grid-template-columns:repeat(5,1fr);gap:5px}
.prod-terms.t5 .pterm-btn{padding:8px 2px}
.prod-terms.t5 .pt-yr{font-size:10px}
.prod-terms.t5 .pt-gbp{font-size:12.5px}
.prod-terms.t3{grid-template-columns:repeat(3,1fr)}
.prod-terms.t1{grid-template-columns:1fr}

/* the drawn placeholder tiles are landscape and carry their own caption, so they
   fill the product image area rather than being height-capped like a render */
.prod-img img.tile,.phero-art img.tile{width:100%;max-height:none;height:auto}

/* --- the devices a licence covers ---------------------------------------- */
table.models{width:100%;border-collapse:collapse;font-size:15px}
table.models caption{text-align:left;color:var(--muted);font-size:14.5px;padding:16px 14px 12px;
  border-bottom:1px solid var(--line);background:var(--bg2)}
table.models thead th{text-align:left;font-weight:800;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:11px 14px;border-bottom:2px solid var(--charcoal)}
table.models tbody th{text-align:left;padding:14px;border-bottom:1px solid var(--line);
  vertical-align:top;width:30%;font-weight:600}
table.models tbody th b{display:block;font-size:15.5px;font-weight:800;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.01em}
table.models tbody th small{display:block;color:#666;font-size:12.5px;font-weight:600;margin-top:3px}
table.models td{padding:14px;border-bottom:1px solid var(--line);color:var(--muted);
  vertical-align:top;font-size:14.5px;line-height:1.6}
table.models td b{color:var(--ink)}
table.models tbody tr:hover{background:var(--bg2)}
@media (max-width:700px){
  table.models tbody th,table.models td{display:block;width:auto;border-bottom:none;padding:12px 14px 0}
  table.models td{padding-bottom:14px;border-bottom:1px solid var(--line)}
  table.models thead{display:none}
}

/* --- the device finder ---------------------------------------------------- */
.finder{margin-top:8px}
.finder-search{position:relative;margin-bottom:8px}
.finder-search input{width:100%;padding:16px 18px 16px 48px;font-size:17px;font-family:inherit;
  border:2px solid var(--charcoal);border-radius:12px;background:#fff;color:var(--ink);font-weight:600}
.finder-search input::placeholder{color:#8a8a8a;font-weight:500}
.finder-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;
  height:20px;stroke:var(--muted);fill:none;stroke-width:2.2;pointer-events:none}
.finder-count{font-size:14px;color:var(--muted);margin-bottom:20px}
.finder-none{background:var(--bg2);border:1px dashed var(--lgrey);border-radius:var(--radius);
  padding:22px 24px;color:var(--muted)}
.finder-none a{text-decoration:underline;font-weight:700}
.dev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  margin-bottom:10px;display:grid;grid-template-columns:170px 1fr 220px;gap:18px;align-items:center}
.dev .dv-m{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;
  font-size:15.5px;letter-spacing:-.01em}
.dev .dv-m small{display:block;font-family:inherit;font-weight:600;font-size:12.5px;color:#666;
  letter-spacing:0;margin-top:3px}
.dev .dv-d{color:var(--muted);font-size:14.5px;line-height:1.6}
.dev .dv-d b{color:var(--ink)}
.dev .dv-l{text-align:right}
.dev .dv-l a{display:inline-block;font-weight:800;font-size:14.5px;text-decoration:underline;
  text-underline-offset:3px}
.dev .dv-l span{display:block;font-size:12.5px;color:#666;margin-top:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (max-width:900px){
  .dev{grid-template-columns:1fr;gap:8px}
  .dev .dv-l{text-align:left;margin-top:4px}
}

/* a label that only assistive technology reads — the search field's visible cue
   is its placeholder and icon, but it still needs a real label */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* links to the per-term SKU pages — small, but they are what stops those pages
   being orphans that only a search engine could ever reach */
.skulinks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.skulinks span{font-size:13.5px;color:var(--muted);font-weight:600}
.skulinks a{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  font-weight:700;padding:6px 11px;border:1px solid var(--lgrey);border-radius:7px;background:#fff;
  transition:.15s}
.skulinks a:hover{border-color:var(--charcoal);background:var(--soft)}
table.prices td b a{text-decoration:underline;text-decoration-color:var(--lgrey);
  text-underline-offset:3px}
table.prices td b a:hover{text-decoration-color:var(--charcoal)}

/* ==========================================================================
   THE RENEWAL OFFER WHEEL
   ========================================================================== */
.bkp-offer{margin-top:16px;padding:16px;background:var(--charcoal);border-radius:12px;text-align:center}
.bkp-offer b{display:block;color:#fff;font-size:15px;margin-bottom:10px;line-height:1.4}
.bkp-offer .btn{width:100%;justify-content:center;background:var(--yellow);color:var(--charcoal);
  border-color:var(--yellow)}
.bkp-offer .btn:hover{background:var(--yellow-d)}
.bkp-sub,.bkp-disc{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:14px;color:var(--muted);padding-top:10px}
.bkp-sub{border-top:1px solid var(--line)}
.bkp-disc{color:var(--ink);font-weight:700;padding-top:4px}
.bkp-disc b[data-offer-pct]{background:var(--yellow);color:var(--charcoal);font-size:12px;
  padding:2px 7px;border-radius:5px;margin-left:4px}
.bkp-foot .bkp-total{margin-top:10px}
table.bktable tfoot tr.bk-disc th,table.bktable tfoot tr.bk-disc td{border-top:none;padding-top:4px;
  font-weight:800}
table.bktable tfoot tr[data-offer-line] th,table.bktable tfoot tr[data-offer-line] td{
  border-top:none;font-size:14.5px;color:var(--muted);font-weight:600}

/* margin:auto is what centres a modal <dialog>, and the global *{margin:0}
   reset at the top of this file wipes the UA default -- so without this line
   the wheel opens pinned to the top-left corner of the viewport. It did,
   until 31 Aug 2026. */
.wheel{margin:auto;border:none;border-radius:18px;padding:0;max-width:520px;width:calc(100% - 32px);
  box-shadow:0 30px 80px rgba(0,0,0,.4);background:#fff;color:var(--ink)}
.wheel::backdrop{background:rgba(31,31,31,.72)}
.wh-close-form{position:absolute;top:10px;right:10px;margin:0}
.wh-close{background:none;border:none;font-size:28px;line-height:1;color:#8a8a8a;cursor:pointer;
  padding:4px 8px;font-family:inherit}
.wh-close:hover{color:var(--ink)}
.wh-body{padding:30px 30px 26px;text-align:center}
.wh-body h2{font-size:24px;margin-bottom:8px;letter-spacing:-.025em}
.wh-sub{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:44ch;margin:0 auto 20px}
.wh-stage{position:relative;width:230px;height:230px;margin:0 auto 18px}
.wh-svg{width:230px;height:230px;display:block}
.wh-rot{transform-origin:0 0}
.wh-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:22px solid var(--charcoal);z-index:2;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.wh-live{position:absolute;left:-9999px}
.wheel .btn{width:100%;justify-content:center}
.wh-result{margin-top:18px;padding:20px;background:var(--soft2);border:2px solid var(--yellow);
  border-radius:12px}
.wh-lead{display:block;font-size:14px;color:var(--muted);font-weight:600}
.wh-pct{display:block;font-size:42px;font-weight:800;letter-spacing:-.04em;margin:2px 0 8px}
.wh-applied{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.wh-applied b{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.wh-how{margin-top:18px;text-align:left;border-top:1px solid var(--line);padding-top:14px}
.wh-how summary{cursor:pointer;font-weight:700;font-size:14px;padding:4px 0}
.wh-rules{list-style:none;margin:10px 0}
.wh-rules li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.wh-rules b{font-size:14.5px}
.wh-rules span{font-weight:800;font-size:14.5px}
.wh-rules small{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.wh-fair{margin-top:16px;color:var(--muted)}
.wh-fair a,.wh-terms a{text-decoration:underline;font-weight:700}
.wh-terms{margin-top:16px;font-size:12.5px;color:#5f5f5f;line-height:1.6;text-align:left;
  border-top:1px solid var(--line);padding-top:14px}
@media (max-width:520px){
  .wh-body{padding:26px 20px 22px}
  .wh-stage,.wh-svg{width:200px;height:200px}
  .wh-pct{font-size:36px}
}
@media print{ .wheel,.bkp-offer{display:none!important} }

/* A link inside a dark hero inherited the charcoal body colour and vanished
   against the charcoal ground. Latent on every dark band, not just the one
   page that happened to contain a link. */
.phero p a,.phero li a,.process p a,.process li a,.groupband p a,
.hero p a,.cta-band p a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  font-weight:700}
.phero p a:hover,.process p a:hover,.hero p a:hover{color:var(--yellow)}

/* ---------------------------------------------------------------- the offer band
   The renewal offer, on a page that is not the shop. Added 31 Aug 2026: the wheel
   had only one entry point, a button inside the basket panel, which is hidden
   until a priced line has been added -- so the offer was invisible to anyone who
   had not already shopped. The decorative wheel here does NOT carry the rotation
   hook; only the dialog's does. */
.offerband{background:var(--charcoal);color:#fff;padding:64px 0}
.offerband .wrap{display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:center}
/* the base .eyebrow is charcoal ON yellow; overriding only the colour left
   yellow on yellow. Keep the chip, keep the pair. */
.offerband .eyebrow{background:var(--yellow);color:var(--charcoal)}
.offerband h2.sec{color:#fff;max-width:20ch}
.offerband .lead{color:#d6d6d6;max-width:60ch}
.ob-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.ob-steps li{display:flex;align-items:baseline;gap:8px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 15px}
.ob-steps b{color:var(--yellow);font-size:14.5px;font-weight:800}
.ob-steps span{font-size:13px;color:#dcdcdc}
.ob-cta{display:flex;flex-wrap:wrap;gap:12px}
.offerband .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.offerband .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.ob-fine{margin-top:18px;font-size:12.5px;color:#b4b4b4;line-height:1.6;max-width:62ch}
.ob-fine a{color:#fff;text-decoration:underline;font-weight:700}
/* The wheel's alternate segments are charcoal, which vanish against this band and
   leave three floating yellow blades. It sits on a white disc here for the same
   reason it works inside the dialog: the dark segments need something to be dark
   against. The pointer is repeated so it reads as a wheel and not a pie chart. */
.ob-wheel{justify-self:center;position:relative;background:#fff;border-radius:50%;
  padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.ob-wheel .wh-svg{width:250px;height:250px;display:block}
.ob-wheel::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:18px solid var(--charcoal);z-index:2}
@media (max-width:1080px){
  .offerband .wrap{grid-template-columns:1fr;gap:34px}
  .ob-wheel{order:-1}
  .ob-wheel .wh-svg{width:200px;height:200px}
}
@media (max-width:640px){
  .offerband{padding:46px 0}
  .ob-cta .btn{width:100%;justify-content:center}
}

/* The Licences menu carries every family (20 of them), so it opens as two
   columns on desktop. On mobile the menu is a stacked accordion and .sub is
   reset to static, so the grid is switched off there. */
.sub.wide{min-width:470px;display:none;grid-template-columns:1fr 1fr;gap:0 4px;left:auto;right:-16px}
.sub.wide a{padding:8px 12px;font-size:14px}
.has-sub.open .sub.wide{display:grid}
@media (max-width:900px){
  .menu.open .sub.wide{display:none;min-width:0;grid-template-columns:1fr}
  .menu.open .has-sub.open .sub.wide{display:block}
}

/* The price disclosure inside the dark hero card. Michael, 1 Sep 2026: "this
   needs to be in small print". It is still never hidden and never grey-on-grey
   -- it is the clause that makes publishing a converted price safe -- but it is
   sized as a footnote rather than as a claim. */
.hero-card .pdisc{font-size:11.5px;line-height:1.5;color:#bcbcbc;margin-top:12px;
  padding-left:10px;border-left-width:2px}

/* ---------------------------------------------------------------- section strip
   The seven licence sections as one row under the hero, current one flagged in
   yellow. Added 1 Sep 2026 so the whole range is visible from the top of any
   section page without opening a menu. Scrolls sideways on a phone rather than
   wrapping into a block that pushes the products down. */
/* Sticky under the header. On the front page every section is on the page and
   the strip is how you move between them, so it has to still be there when you
   are four sections down. --hdr is the header's own height; the strip parks
   directly beneath it and the basket panel parks beneath the pair. */
.sstrip{background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:var(--hdr,74px);z-index:40}
.sstrip .wrap{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sstrip .wrap::-webkit-scrollbar{display:none}
.sstrip-i{flex:0 0 auto;padding:15px 20px 13px;border-bottom:3px solid transparent;
  text-decoration:none;color:var(--charcoal);white-space:nowrap;transition:.15s}
.sstrip-i b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.sstrip-i span{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.sstrip-i:hover{background:var(--bg2);border-bottom-color:var(--lgrey)}
.sstrip-i.on{border-bottom-color:var(--yellow);background:var(--soft2)}
.sstrip-i.on b{color:var(--charcoal)}
/* the shop starts straight after the strip -- a full section's top padding here
   put the first product card back below the fold */
.sstrip + section{padding-top:26px}
@media(max-width:900px){
  .sstrip .wrap{padding-left:16px;padding-right:16px}
  .sstrip-i{padding:12px 15px 10px}
  .sstrip-i b{font-size:13.5px}
}

/* The shop intro on a section page: a heading and one line, nothing else. The
   full lede is in the page hero above it and repeating it just pushed the first
   product card further down. */
.vendorlede.tight{max-width:70ch;margin-bottom:22px}
.vendorlede.tight .gnote{margin-top:6px}
h2.sec.sm{font-size:26px;letter-spacing:-.02em}
@media(max-width:640px){ h2.sec.sm{font-size:22px} }

/* On a phone the hero stacks, so the price card sits between the headline and
   the products and pushes the first camera card ~600px further down. It is the
   only thing on the page that is purely duplicated: the very next card in the
   shop is the camera licence, with the same four terms, the same prices AND an
   Add to basket. So on small screens the card goes and the shop comes straight
   after the headline. Nothing is lost, and it is the difference between landing
   on a sales pitch and landing on a product. (Scoped to .hero: the contact
   page's .hero-card is a form inside .contactgrid and must stay.) */
@media(max-width:900px){
  .hero{padding:28px 0 26px}
}

/* The wordmark, in its two homes. Sized generously in both: dearJoe is a
   handwriting face and it stops being legible well before a sans-serif does,
   so it never goes below ~26px. */
.wordmark{display:block;color:var(--yellow)}
.foot-mark{font-size:30px;margin:16px 0 4px}
.band-mark{font-size:34px;margin:2px 0 14px;color:var(--charcoal)}
/* Yellow is the wordmark's colour on a DARK ground only. On the white group
   band, --yellow-d against #fff is about 1.9:1 -- unreadable, and a11y.py
   fails it. Charcoal is the on-brand pairing there. */
@media(max-width:640px){
  .foot-mark{font-size:26px}
  .band-mark{font-size:28px}
}

/* The stacked front-page shop: seven grids under one running quote. */
.shopsec{margin-top:46px;scroll-margin-top:calc(var(--hdr,74px) + var(--strip,66px) + 16px)}
.shopsec:first-of-type{margin-top:0}
.shopsec > h2.sec{margin-bottom:2px}
.shopsec > .gnote{margin-bottom:16px;max-width:74ch}
#shop{scroll-margin-top:calc(var(--hdr,74px) + var(--strip,66px) + 16px)}
@media(max-width:900px){
  .shopsec{margin-top:38px;scroll-margin-top:calc(var(--hdr,64px) + var(--strip,58px) + 12px)}
}

/* ------------------------------------------------------- the odd-slot note
   Fills the empty cell an odd-numbered section leaves in the two-column grid.
   Deliberately NOT a product: no image, no price, no button, a flat tinted
   panel with a yellow rule instead of a card shadow. Somebody skimming for
   things to buy should be able to tell in peripheral vision that this is not
   one, and read it only if they want to. */
.prodnote{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  border-top:4px solid var(--yellow);padding:26px 26px 24px;
  display:flex;flex-direction:column;justify-content:center;min-height:220px}
.prodnote .ico{width:26px;height:26px;color:var(--charcoal);margin-bottom:12px}
.prodnote h3{font-size:18px;line-height:1.25;letter-spacing:-.015em;margin-bottom:8px;
  max-width:26ch}
.prodnote p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:42ch}
.prodnote .tlink{margin-top:14px;align-self:flex-start;font-size:14px}
@media(max-width:640px){
  .prodnote{padding:22px 20px;min-height:0}
  .prodnote h3{font-size:16.5px}
}

/* ------------------------------------------------------- the partner lockup
   A statement of status set in the site's own type, NOT Verkada's logo -- see
   the note above lr.logo(). Sized and spaced so the official Partner badge
   artwork can drop straight in once cl. 3.1(ii) approval is in writing. */
.pbadge{display:inline-flex;flex-direction:column;justify-content:center;
  margin-left:14px;padding:5px 11px;border-left:2px solid var(--yellow);line-height:1.1}
.pbadge b{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--charcoal)}
.pbadge span{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
@media(max-width:1180px){ .pbadge{display:none} }

/* THE CROSS-SELL TILE.
   Michael, 1 Sep: "the box looks a bit plain! and not the same theme as the
   page." It was a cream panel with a teal underlined link -- neither colour
   belonged to this site. A cross-sell is also the one thing in the grid that is
   NOT a licence, so making it quieter than the product cards was the wrong
   instinct: it should be the thing your eye lands on in a row of white cards.
   It is now the site's charcoal band shrunk to one cell -- yellow rule, yellow
   icon, white heading and a real yellow button -- which is the same furniture
   as the dark bands further down the page, so it reads as part of the site
   rather than as a stray note. Advice notes keep the pale panel: they are a
   footnote, not an ask, and the contrast between the two is now the point. */
.prodnote.xsell{background:var(--charcoal);border-color:var(--charcoal);
  border-top-color:var(--yellow);justify-content:center;gap:0}
.prodnote.xsell .ico{color:var(--yellow);width:28px;height:28px;margin-bottom:14px}
.prodnote.xsell h3{color:#fff}
.prodnote.xsell p{color:#d6d5d0}
.prodnote.xsell .xgo{margin-top:18px;align-self:flex-start;padding:12px 20px;font-size:14.5px}
.prodnote.xsell .xgo::after{content:"";display:inline-block;width:8px;height:8px;
  margin-left:9px;border:2px solid currentColor;border-left:0;border-bottom:0;
  transform:rotate(45deg);vertical-align:1px}
@media(max-width:640px){ .prodnote.xsell .xgo{width:100%;text-align:center} }