/* ── p-commercial.css — the Commercial page (owner's round two, item 19) ──────────────
   The feature-page pattern (inner-pages.css) in commercial's colour (theme.css [data-f="commercial"]: --c #2F6FEB,
   --c2 #7DB1FF light, --cd #1A4DB5 dark text, --ct #EAF1FF tint): hero, logo band, the six features at a
   glance, one showcase per feature (01 dashboard, 02 SLA clock, 03 signed reports, 04 QR on every asset,
   05 AMC, 06 the system map), and the demo request. The site's type (app/site.css): Newsreader headlines,
   Manrope, JetBrains Mono for data. Gold stays the action colour (buttons) and the "open complaint" state.
   Everything here is scoped to .pc (the <main>) or a .pc-* block.
   Motion: every hidden start state sits behind html.fx-motion, and p-commercial.js adds .in (or steps a
   block through) when it is seen; under reduced motion and ?static=1 the page renders finished.        */

/* the nav is fixed and floats, so the hero supplies the top space itself */
body.s6-body[data-page="commercial"]:not(.has-hero) .s6-page > main { padding-top: 0; }
.pc { --s7-max: 1180px; --pc-ok: #17663A; --pc-ok-bg: #DDF3E6; }   /* the feature pages' narrower column (inner-pages.css) */
.pc .i2 { display: block; }
/* every section sets its own ground (page or the blue tint, .f-band in the markup), so shell.js's
   alternating bands follow the page's own order */
:where(.pc > section) { background: var(--page); }
.pc .s6-eyebrow { margin: 0; }
.pc .s7-head .s7-lede { max-width: 50ch; }
.pc .s7-dark :is(.s7-h1, .s7-h2) .mut { color: var(--c2); }
.pc .s7-h2 { font-size: clamp(30px, 3.5vw, 50px); }
/* the showcase number in each eyebrow */
.pc .pc-n { font: 600 11px/1 var(--mono); letter-spacing: .04em; padding: 5px 7px 4px; margin-right: 2px; border-radius: 6px; background: var(--ct); color: var(--cd); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); }
.pc .on-dark .pc-n { background: rgba(125, 177, 255, .16); color: var(--c2); box-shadow: inset 0 0 0 1px rgba(125, 177, 255, .3); }

/* the keyboard ring on the light blocks: navy (the site-wide gold ring is under 2:1 on white); navy panels keep the gold */
.pc :is(.pc-lv, .pc-feats a, a.pc-nd, .pc-screen):focus-visible { outline: 2px solid var(--navy) !important; outline-offset: 3px; }

/* a two-column section head: title left, one line right */
.pc-head2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-4) clamp(24px, 5vw, 80px); align-items: end; margin-bottom: var(--s7-head-gap); }
.pc-head2 > div { display: grid; gap: var(--sp-3); }
.pc-head2 .s7-lede { max-width: 40ch; }

/* small shared pieces: the sample chip and the status chips of the mock-ups */
.pc-sample { flex: none; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-30); border-radius: 99px; padding: 6px 9px 5px; white-space: nowrap; }
.pc .c { display: inline-flex; align-items: center; font: 600 11.5px/1 var(--font); font-style: normal; padding: 6px 9px; border-radius: 99px; white-space: nowrap; }
.pc .c.g { background: var(--gold-30); color: var(--gold-ink); }
.pc .c.n { background: var(--ct); color: var(--cd); }
.pc .c.ok { background: var(--pc-ok-bg); color: var(--pc-ok); }
.pc-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-ctas .btn.gold, .pc-more .btn { padding: 0 10px 0 20px; gap: 14px; } :is(.pc-ctas, .pc-more) .btn .ic { margin-right: 0; }

/* ── hero ──────────────────────────────────────────────────────────────── */
.pc-hero { position: relative; overflow-x: clip; padding: calc(var(--s7-top) + clamp(28px, 5vh, 56px)) 0 0;
  background: radial-gradient(52% 62% at 84% 32%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), var(--page); }
.pc-hero-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.pc-gi { display: block; width: max-content; margin-bottom: 18px; } .pc-gi > .gi { --s: clamp(64px, 5.6vw, 86px); }
.pc-hero .s6-eyebrow { display: flex; margin-bottom: 14px; }
.pc-hero .s7-h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.02; }
.pc-hero .s7-h1 .ln { display: block; }
.pc-hero .s7-lede { margin-top: 18px; max-width: 36ch; }
.pc-hero .pc-ctas { margin-top: 28px; }
.pc-hero-fig { position: relative; margin: 0; min-width: 0; padding-bottom: 26px; }
.pc-ph { border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 16 / 11; background: #0B2542;
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c) 80%, transparent), var(--shadow-card); }
.pc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* the two floating cards (sample data): white glass, like the other feature pages' cards on their photos */
.pc-hc { position: absolute; z-index: 2; box-sizing: border-box; border-radius: 18px; color: var(--navy);
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 28px 48px -22px rgba(0, 18, 40, .55), 0 2px 6px rgba(0, 18, 40, .1); }
/* the dashboard card sits over the photo's wall of screens */
.pc-hc-dash { top: -12px; left: clamp(-36px, -2.4vw, -16px); width: 250px; padding: 13px 14px 12px; }
.pc-hc-top { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.pc-hc-top b { font: 400 21px/1 var(--display); letter-spacing: -.01em; color: var(--navy); }
.pc-hc-top span { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.pc-hc-top .pc-sample { margin-left: auto; }
.pc-hc-kp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pc-hc-kp p { margin: 0; padding: 7px 9px 8px; border-radius: 10px; background: var(--ct); }
.pc-hc-kp span { display: block; font: 600 10.5px/1.2 var(--font); color: var(--cd); }
.pc-hc-kp b { display: block; margin-top: 4px; font: 400 22px/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.pc-hc-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.pc-hc-rows li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; font: 600 11.5px/1 var(--font); color: var(--text); }
.pc-hc-rows i { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c) calc(var(--v) * 100%), var(--grey) 0); }
/* the SLA result, at the photo's foot */
.pc-hc-sla { right: clamp(-28px, -2vw, -12px); bottom: 0; display: grid; grid-template-columns: 40px auto auto; gap: 12px; align-items: center; padding: 11px 14px 11px 11px; }
.pc-hc-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; --acc: #FFD487; }
.pc-hc-ic .i2 { width: 22px; height: 22px; }
.pc-hc-sla p { margin: 0; }
.pc-hc-sla p span { display: block; font: 500 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pc-hc-sla p b { display: block; margin-top: 3px; font: 400 25px/1 var(--display); letter-spacing: -.015em; color: var(--navy); white-space: nowrap; }
.pc-hc-sla em { font: 700 11px/1 var(--font); font-style: normal; padding: 7px 10px; border-radius: 99px; background: var(--pc-ok-bg); color: var(--pc-ok); white-space: nowrap; }
/* motion: the cards rise in once, after the photo */
html.fx-motion .pc-hc { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
html.fx-motion .pc-hc-dash { transition-delay: .45s; } html.fx-motion .pc-hc-sla { transition-delay: .8s; }
html.fx-motion .pc-hero-fig.in .pc-hc { opacity: 1; transform: none; }
/* the numbers strip under the hero (the cleared figures only) */
.pc-stats { list-style: none; margin: clamp(36px, 5.5vh, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line-navy); }
.pc-stats li { display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: 18px 22px; }
.pc-stats li:first-child { padding-left: 0; }
.pc-stats li + li { border-left: 1px solid var(--line-navy); }
.pc-stats b { font: 400 clamp(26px, 2.4vw, 34px)/1 var(--display); letter-spacing: -.02em; color: var(--navy); white-space: nowrap; }
.pc-stats span { font: 500 13px/1.35 var(--font); color: var(--muted); }

/* ── the client logos, a band of their own ─────────────────────────────── */
/* the title over the row, so the row has the whole column and the logos can run larger */
.pc-clients-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vh, 20px); }
.pc-clients .pc-clients-h { margin: 0; text-align: center; font: 700 13px/1.5 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); text-wrap: balance; }
/* ten logos in one row, grey until hovered (multiply drops each file's white ground on the page); --k scales
   every mark's base width (--w, in the markup) together */
.pc-logos { --k: 1.2; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; }
.pc-logos li { flex: 0 1 auto; min-width: 0; display: grid; place-items: center; height: 80px; }
.pc-logos img { display: block; width: calc(var(--w) * var(--k)); max-width: 100%; height: auto; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.05); opacity: .8; transition: filter .35s ease, opacity .35s ease, transform .35s var(--ease); }
.pc-logos li:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* ── the six features at a glance ──────────────────────────────────────── */
.pc-feat { padding-top: clamp(28px, 4vh, 48px); }
.pc-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pc-feats li { min-width: 0; }
.pc-feats a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; box-sizing: border-box; padding: 20px 18px 18px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: border-color .3s ease, box-shadow .3s ease, transform .35s var(--ease); }
.pc-feats .gi { --s: 58px; margin: 0 0 12px -2px; }
.pc-feats b { font: 700 16px/1.25 var(--font); letter-spacing: -.005em; color: var(--navy); }
.pc-feats a > span:not(.gi) { font: 500 13px/1.4 var(--font); color: var(--muted); padding-right: 18px; }
.pc-feats .go { position: absolute; right: 16px; bottom: 18px; width: 16px; height: 16px; color: var(--cd); opacity: .5; transition: opacity .3s ease, transform .3s var(--ease); }
.pc-feats a:hover, .pc-feats a:focus-visible { border-color: color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--c) 70%, transparent); }
.pc-feats a:hover .go, .pc-feats a:focus-visible .go { opacity: 1; transform: translateX(3px); }
/* rv6 owns transform while revealing; the tile's own lift comes from the link inside it */
.pc-feats a:hover { transform: translateY(-3px); }

/* ── 01 · the drill-down dashboard ─────────────────────────────────────── */
.pc-drill-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.pc-drill .s7-head { margin-bottom: clamp(18px, 2.6vh, 26px); }
.pc-levels { display: grid; gap: 4px; }
/* each level steps in a little, so the list reads as a drill-down */
.pc-lv { position: relative; overflow: hidden; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: calc(100% - var(--lv) * 14px); margin-left: calc(var(--lv) * 14px);
  padding: 11px 14px; border-radius: 14px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pc-lv:hover { background: rgba(47, 111, 235, .07); }
.pc-lv .k { font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.pc-lv b { font: 700 15px/1.2 var(--font); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-lv .who { font: 500 12.5px/1.2 var(--font); color: var(--muted); white-space: nowrap; }
.pc-lv[aria-selected="true"] { background: var(--card); border-color: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--c) 70%, transparent); }
.pc-lv[aria-selected="true"] .k { color: var(--cd); }
/* while it plays on its own, a blue line fills under the current level */
.pc-lv::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; }
.pc-drill.auto .pc-lv[aria-selected="true"]::after { animation: pc-fill var(--dwell, 3600ms) linear forwards; }
@keyframes pc-fill { to { transform: scaleX(1); } }

.pc-screen { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 57, 108, .06), 0 30px 60px -30px color-mix(in srgb, var(--c) 55%, transparent); }
.pc-screen:focus-visible { outline-offset: 4px; }
.pc-scr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: #FAFBFD; }
/* the path stays on one line: when it runs out of room, p-commercial.js folds the top crumbs into "…" (.far) */
.pc-crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font: 600 12.5px/1.2 var(--font); color: var(--muted); }
.pc-crumbs li { flex: none; }
.pc-crumbs li:not(:first-child)::before { content: "›"; margin: 0 8px; color: var(--mist); }
.pc-crumbs li.off, .pc-crumbs li.far { display: none; }
.pc-crumbs.cut::before { content: "…"; flex: none; color: var(--slate); }
.pc-crumbs li.cur { color: var(--cd); }
.pc-crumbs.tight li.cur { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* every level sits in the same grid cell, so the screen is always as tall as the tallest level and stepping
   through them never moves the page; the others (.off) are only made invisible */
.pc-views { position: relative; flex: 1; display: grid; padding: 20px 22px 18px; }
.pc-v { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; }
.pc-v.off { visibility: hidden; }
html.fx-motion .pc-v { transition: opacity .45s var(--ease) .16s, transform .5s var(--ease) .16s, visibility 0s linear 0s; }
html.fx-motion .pc-v.off { opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.pc-scr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; padding: 11px 18px; border-top: 1px solid var(--line); background: #FAFBFD; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; color: var(--slate); }
.pc-scr-foot b { font: 700 12.5px/1.3 var(--font); letter-spacing: 0; color: var(--cd); }
.pc-seen { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.pc-vt { margin: 0 0 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.pc-vt b { font: 400 28px/1.05 var(--display); letter-spacing: -.015em; color: var(--navy); }
.pc-vt span { font: 500 12.5px/1.2 var(--mono); color: var(--slate); }
.pc-vh { margin: 18px 0 6px; font: 700 13px/1.2 var(--font); color: var(--ink); }
.pc-vh span { margin-left: 6px; font: 500 11px/1 var(--mono); color: var(--slate); }
.pc-kp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pc-kp.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-kp div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px 13px; border-radius: 14px; background: var(--ct); }
.pc-kp span { display: block; font: 600 11.5px/1.25 var(--font); color: var(--cd); }
.pc-kp b { display: block; margin-top: 8px; font: 400 28px/1 var(--display); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.pc-rows { list-style: none; margin: 0; padding: 0; }
.pc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 30%) 84px; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.pc-rows li:first-child { border-top: 0; }
.pc-rows p { margin: 0; min-width: 0; }
.pc-rows b { display: block; font: 700 14px/1.2 var(--font); color: var(--ink); }
.pc-rows p span { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--font); color: var(--muted); }
.pc-rows .bar { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c) calc(var(--v) * 100%), var(--grey) 0); }
.pc-rows .c { justify-self: end; }
.pc-rows li.hot { background: linear-gradient(90deg, var(--ct), transparent); margin: 0 -10px; padding-inline: 10px; border-radius: 10px; border-top-color: transparent; }
.pc-rows li.hot + li { border-top-color: transparent; }
/* the floor, laid out where the units sit */
.pc-plan-map { flex: 1 0 auto; grid-auto-rows: minmax(60px, 1fr); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--c) 30%, transparent);
  background: linear-gradient(rgba(47, 111, 235, .05) 1px, transparent 1px) 0 0 / 100% 22px, var(--page); }
.pc-plan-map span { position: relative; display: flex; align-items: flex-end; min-height: 60px; padding: 10px 10px 9px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font: 600 12px/1.2 var(--font); color: var(--navy); }
.pc-plan-map span::before { content: ""; position: absolute; top: 10px; left: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--c2); }
.pc-plan-map span.hot { background: var(--gold-30); border-color: var(--gold); color: var(--ink); }
.pc-plan-map span.hot::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(247, 183, 68, .3); }
.pc-plan-map span.door { background: none; border: 1.5px dashed rgba(0, 57, 108, .22); color: var(--slate); font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pc-plan-map span.door::before { display: none; }
html.fx-motion .pc-v:not(.off) .pc-plan-map span.hot::before { animation: pc-blink 1.6s ease-in-out infinite; }
@keyframes pc-blink { 50% { box-shadow: 0 0 0 6px rgba(247, 183, 68, 0); } }
.pc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font: 500 11.5px/1 var(--font); color: var(--muted); }
.pc-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--c2); } .pc-key i.g { background: var(--gold); }
.pc-key i:not(:first-child) { margin-left: 10px; }
/* the asset and its history */
.pc-ah { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pc-ah .qr { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--c); color: #fff; --acc: #FFD487; }
.pc-ah .qr .i2 { width: 26px; height: 26px; }
.pc-ah p { margin: 0; min-width: 0; }
.pc-ah b { display: block; font: 400 28px/1.05 var(--display); letter-spacing: -.015em; color: var(--navy); }
.pc-ah p span { display: block; margin-top: 4px; font: 500 12px/1.2 var(--mono); color: var(--slate); }
.pc-hx { list-style: none; margin: 0; padding: 0; }
.pc-hx li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pc-hx li:first-child { border-top: 0; }
.pc-hx .dt { font: 600 11.5px/1.2 var(--mono); color: var(--slate); }
.pc-hx p { margin: 0; min-width: 0; }
.pc-hx b { display: block; font: 700 13.5px/1.25 var(--font); color: var(--ink); }
.pc-hx p span { display: block; margin-top: 3px; font: 500 12px/1.2 var(--font); color: var(--muted); }

/* ── 02 · the SLA clock: the navy panel ────────────────────────────────── */
.pc-sla { padding: var(--s7-sec-sm) 0; }
.pc-panel { position: relative; border-radius: var(--r-panel); overflow: hidden; padding: clamp(36px, 6vh, 64px) clamp(22px, 4.6vw, 64px);
  background: radial-gradient(60% 60% at 92% 8%, color-mix(in srgb, var(--c) 46%, transparent), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(26, 90, 150, .4), transparent 70%), var(--navy); }
.pc-sla-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.pc-sla .s7-head { margin-bottom: clamp(20px, 3vh, 30px); }
.pc-legend { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 12px; }
.pc-legend li { display: grid; grid-template-columns: 30px 88px auto; gap: 12px; align-items: center; }
.pc-legend i { height: 8px; border-radius: 8px; }
.pc-legend .air i { background: var(--c2); box-shadow: 0 0 12px rgba(125, 177, 255, .7); }
.pc-legend .usual i { background: rgba(186, 206, 223, .3); }
.pc-legend b { font: 700 14px/1 var(--font); color: #fff; }
.pc-legend span { font: 500 13px/1 var(--mono); color: var(--mist); }
/* the dial and the ticket share one stage: the ticket overlaps the dial's right side */
.pc-sla-vis { display: grid; grid-template-columns: minmax(0, auto) auto; align-items: center; justify-content: end; gap: clamp(16px, 2.4vw, 32px); }
.pc-clock { position: relative; margin: 0; width: clamp(230px, 20vw, 290px); aspect-ratio: 1; }
.pc-dial { display: block; width: 100%; height: 100%; overflow: visible; }
.pc-dial .trk { fill: none; stroke: rgba(186, 206, 223, .2); stroke-width: 16; }
.pc-dial .tks { fill: none; stroke: rgba(186, 206, 223, .45); stroke-width: 1.4; stroke-linecap: round; }
.pc-dial .tks .mj { stroke: rgba(255, 255, 255, .7); stroke-width: 2; }
.pc-dial .arc { fill: none; stroke: var(--c2); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 18 54; stroke-dashoffset: -6; filter: drop-shadow(0 0 8px rgba(125, 177, 255, .75)); }
.pc-dial text { font: 500 12.5px var(--mono); fill: var(--mist); text-anchor: middle; }
.pc-dial text.hi { fill: #fff; font-weight: 600; }
.pc-dial-c { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; pointer-events: none; }
.pc-dial-c b { font: 400 clamp(38px, 3.6vw, 50px)/1 var(--display); letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.pc-dial-c span { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
html.fx-motion .pc-dial .arc { transition: stroke-dasharray 1.5s var(--ease) .25s; }
html.fx-motion .pc-sla-in:not(.in) .pc-dial .arc { stroke-dasharray: 0 72; }
/* the ticket: one complaint, timed (sample) */
.pc-tk { position: relative; z-index: 2; width: 292px; box-sizing: border-box; padding: 14px 16px 14px; border-radius: 20px;
  background: rgba(255, 255, 255, .96); color: var(--navy); box-shadow: 0 30px 60px -24px rgba(0, 8, 24, .7), 0 2px 6px rgba(0, 8, 24, .2); }
.pc-tk-h { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pc-tk-h .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; --acc: #FFD487; }
.pc-tk-h .ico .i2 { width: 19px; height: 19px; }
.pc-tk-h p { margin: 0; min-width: 0; }
.pc-tk-h b { display: block; font: 700 13.5px/1.2 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-tk-h p span { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--font); color: var(--muted); }
.pc-tk-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.pc-tk-steps li { position: relative; display: grid; grid-template-columns: 42px 12px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; font: 600 12.5px/1.25 var(--font); color: var(--navy); }
.pc-tk-steps time { font: 500 11px/1 var(--mono); color: var(--slate); font-variant-numeric: tabular-nums; }
.pc-tk-steps li::before { content: ""; grid-column: 2; grid-row: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--ct); }
.pc-tk-steps span { grid-column: 3; }
.pc-tk-steps li:not(:last-child)::after { content: ""; position: absolute; left: 54.5px; top: calc(50% + 7px); height: calc(100% - 12px); width: 1px; background: var(--c2); }
.pc-tk-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 10px; margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--line); }
.pc-tk-f span { font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pc-tk-f b { grid-column: 1; font: 400 26px/1 var(--display); letter-spacing: -.02em; color: var(--navy); }
.pc-tk-f em { grid-column: 2; grid-row: 1 / 3; align-self: end; font: 700 11px/1 var(--font); font-style: normal; padding: 7px 10px; border-radius: 99px; background: var(--pc-ok-bg); color: var(--pc-ok); }
/* motion: the timestamps tick in, one by one, then the total */
html.fx-motion .pc-tk-steps li { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 420ms + 700ms); }
html.fx-motion .pc-tk-f { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: 2.5s; }
html.fx-motion .pc-sla-in.in .pc-tk-steps li, html.fx-motion .pc-sla-in.in .pc-tk-f { opacity: 1; transform: none; }

/* ── 03 and 04 · the split showcases: a visual and a short list ────────── */
.pc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.pc-split .s7-head { margin-bottom: clamp(18px, 2.6vh, 26px); }
.pc-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pc-ticks li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: center; font: 600 16px/1.4 var(--font); color: var(--navy); }
.pc-ticks .ck { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--card); color: var(--cd); --acc: var(--c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--c) 70%, transparent); }
.pc-ticks .ck .i2 { width: 19px; height: 19px; }
.pc-qr .pc-ticks .ck { background: var(--ct); box-shadow: none; }

/* the signed report (example layout) */
.pc-rep { margin: 0; min-width: 0; }
.pc-rep-card { position: relative; max-width: 470px; margin-inline: auto; padding: 20px 22px 18px; border-radius: 22px; background: #fff; color: var(--text);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .55), 0 0 0 11px color-mix(in srgb, var(--c) 16%, transparent), 0 40px 70px -34px color-mix(in srgb, var(--c) 70%, transparent); }
.pc-rep-h { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 6px; }
.pc-rep-h img { width: 34px; height: auto; }
.pc-rep-h p { margin: 0; min-width: 0; }
.pc-rep-h b { display: block; font: 400 22px/1.1 var(--display); color: var(--navy); }
.pc-rep-h p span { display: block; margin-top: 4px; font: 600 12.5px/1.2 var(--font); color: var(--muted); }
.pc-rep table { width: 100%; margin-top: 8px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pc-rep th { padding: 10px 0 8px; text-align: left; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.pc-rep td { padding: 10px 0; border-top: 1px solid var(--line); font: 500 13.5px/1.2 var(--font); color: var(--text); }
.pc-rep :is(th, td):not(:first-child) { text-align: right; width: 26%; }
.pc-rep td:not(:first-child) { font: 500 13px/1.2 var(--mono); }
.pc-rep td.af { font-weight: 600; color: var(--cd); }
.pc-rep-sig { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); padding-right: 96px; }
.pc-rep-sig span { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font); color: var(--pc-ok); background: var(--pc-ok-bg); padding: 7px 10px 7px 8px; border-radius: 99px; }
.pc-rep-sig svg { width: 13px; height: 13px; }
.pc-stamp { position: absolute; right: 0; bottom: -2px; padding: 7px 10px 6px; border: 2px solid var(--cd); border-radius: 8px; transform: rotate(-7deg);
  font: 600 12px/1 var(--mono); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--cd); background: rgba(234, 241, 255, .7); }
/* motion: the "after" readings fill in, then the stamp lands */
html.fx-motion .pc-rep td.af, html.fx-motion .pc-rep-sig span { transition: opacity .5s ease; }
html.fx-motion .pc-rep:not(.read) td.af, html.fx-motion .pc-rep:not(.signed) .pc-rep-sig span { opacity: .12; }
html.fx-motion .pc-stamp { transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
html.fx-motion .pc-rep:not(.signed) .pc-stamp { opacity: 0; transform: rotate(-7deg) scale(1.6); }

/* the QR photo and the unit's record on it (sample) */
.pc-qr-fig { position: relative; margin: 0; min-width: 0; padding: 0 0 30px; }
.pc-qr-ph { border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 4 / 3; background: #C9D6E4; box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c) 75%, transparent), var(--shadow-card); }
.pc-qr-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-scan { position: absolute; z-index: 2; left: clamp(-36px, -2.4vw, -16px); bottom: 0; width: 286px; box-sizing: border-box; padding: 13px 14px 14px; border-radius: 18px; color: var(--navy);
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 28px 48px -22px rgba(0, 18, 40, .55), 0 2px 6px rgba(0, 18, 40, .1); }
.pc-scan-h { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pc-scan-h .qr { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; --acc: #FFD487; }
.pc-scan-h .qr .i2 { width: 19px; height: 19px; }
.pc-scan-h p { margin: 0; min-width: 0; }
.pc-scan-h b { display: block; font: 700 13.5px/1.2 var(--font); color: var(--ink); }
.pc-scan-h p span { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--font); color: var(--muted); }
.pc-scan ul { list-style: none; margin: 4px 0 0; padding: 0; }
.pc-scan li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font: 500 12px/1.2 var(--font); color: var(--muted); }
.pc-scan li b { font-weight: 700; color: var(--navy); white-space: nowrap; }
.pc-scan-btn { display: block; margin-top: 11px; padding: 10px 12px; border-radius: 10px; text-align: center; background: var(--gold); color: var(--navy); font: 700 13px/1 var(--font); }
html.fx-motion .pc-qr-fig .pc-scan { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) .35s, transform .9s var(--ease) .35s; }
html.fx-motion .pc-qr-fig.in .pc-scan { opacity: 1; transform: none; }

/* ── 05 · AMC plans ────────────────────────────────────────────────────── */
.pc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pc-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 18px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.pc-plan .t { margin: 0; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cd); }
.pc-plan h3 { margin: 8px 0 0; font: 400 32px/1.05 var(--display); letter-spacing: -.02em; color: var(--navy); }
.pc-plan .for { margin: 6px 0 0; font: 500 14px/1.5 var(--font); color: var(--muted); }
.pc-cover { list-style: none; margin: 18px 0 18px; padding: 0; display: grid; gap: 9px; }
.pc-cover li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; font: 600 14.5px/1.2 var(--font); color: #7C8B9C; }
.pc-cover li .i2, .pc-cover li i { width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; }
.pc-cover li.y { color: var(--navy); }
.pc-cover li.y .i2 { padding: 5px; background: var(--c); color: #fff; }
.pc-cover li i { position: relative; background: var(--grey); }
.pc-cover li i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 11px; height: 2px; border-radius: 2px; background: #A2AEBB; }
.pc-plan .v { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
/* the recommended plan: navy with a blue glow */
.pc-plan.hl { background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%), var(--navy); border-color: var(--navy); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c) 80%, transparent); }
.pc-plan.hl .t { color: var(--c2); } .pc-plan.hl h3 { color: #fff; } .pc-plan.hl .for { color: #A9BDD1; }
.pc-plan.hl .pc-cover li { color: #7F98B2; } .pc-plan.hl .pc-cover li.y { color: #fff; }
.pc-plan.hl .pc-cover li i { background: rgba(255, 255, 255, .1); } .pc-plan.hl .pc-cover li i::after { background: #7F98B2; }
.pc-plan.hl .v { color: var(--c2); border-top-color: rgba(255, 255, 255, .14); }
.pc-badge { position: absolute; top: 18px; right: 18px; font: 700 11px/1 var(--font); padding: 7px 10px; border-radius: 99px; background: var(--gold); color: var(--navy); }
/* beyond AMC: one row */
.pc-more { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; margin-top: 14px; padding: 14px 16px 14px 20px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.pc-more-k { margin: 0; font-size: 10.5px; color: var(--cd); }
.pc-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pc-more li { display: inline-flex; align-items: center; gap: 9px; font: 700 14px/1.2 var(--font); color: var(--navy); }
.pc-more .ib { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--ct); color: var(--cd); --acc: var(--c); }
.pc-more .ib .i2 { width: 18px; height: 18px; }

/* ── 06 · the system map ───────────────────────────────────────────────── */
/* .pc-map is one grid; the list inside it is a subgrid, so the nine parts and the core share its tracks: four
   parts either side of the core and IoT & AI under it. Each label sits on the outer side of its icon, so a line
   never crosses text. p-commercial.js draws the lines. */
.pc-sys { --pc-core: 186px; --pc-ic: 58px; }
.pc-sys .s7-head { margin-inline: auto; }
.pc-map { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--pc-core) + 150px) minmax(0, 1fr); grid-template-rows: repeat(4, auto); gap: 22px 0; align-items: center; max-width: 1000px; margin-inline: auto; }
.pc-map::before {   /* a cool glow under the core */
  content: ""; position: absolute; left: 50%; top: 42%; z-index: -1; width: min(560px, 100%); aspect-ratio: 16 / 10; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 18%, transparent), color-mix(in srgb, var(--c) 5%, transparent) 55%, transparent); }
.pc-map-ln { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pc-map-ln .ln { fill: none; stroke-width: 1.4; transition: stroke-width .3s ease, opacity .3s ease; }
.pc-map-ln .tm { transition: opacity .3s ease; }
.pc-core { position: relative; grid-column: 2; grid-row: 1 / 4; justify-self: center; display: grid; justify-items: center; }
.pc-core img { display: block; width: var(--pc-core); height: var(--pc-core); border-radius: 50%; object-fit: cover;
  filter: drop-shadow(0 24px 30px rgba(0, 30, 70, .35)) drop-shadow(0 0 30px color-mix(in srgb, var(--c) 30%, transparent)); }
.pc-core span { position: relative; margin-top: -18px; padding: 8px 14px 9px; border-radius: 99px; white-space: nowrap; text-align: center;
  background: rgba(255, 255, 255, .94); border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 12px 24px -14px rgba(0, 30, 70, .5);
  font: 700 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.pc-core span b { margin-left: 4px; font: italic 500 19px/1 var(--display); letter-spacing: -.01em; text-transform: none; color: var(--cd); }
.pc-nodes { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; }
.pc-node { min-width: 0; }
.pc-node:nth-child(-n+4) { grid-column: 1; }
.pc-node:nth-child(n+5) { grid-column: 3; }
.pc-node:nth-child(4n+1) { grid-row: 1; } .pc-node:nth-child(4n+2) { grid-row: 2; } .pc-node:nth-child(4n+3) { grid-row: 3; } .pc-node:nth-child(4n) { grid-row: 4; }
.pc-node.iot { grid-column: 2; grid-row: 4; justify-self: center; }
.pc-nd { position: relative; display: grid; grid-template-columns: var(--pc-ic) minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: inherit; border-radius: 14px; }
.pc-node:nth-child(-n+4) .pc-nd { grid-template-columns: minmax(0, 1fr) var(--pc-ic); text-align: right; }
.pc-node:nth-child(-n+4) .gi { order: 2; }
.pc-node.iot .pc-nd { grid-template-columns: var(--pc-ic) auto; }
.pc-nd .gi { --s: var(--pc-ic); }
.pc-nd b { font: 700 15px/1.25 var(--font); letter-spacing: -.005em; color: var(--navy); transition: color .3s ease; }
.pc-nd b em { display: inline-block; margin-left: 6px; padding: 4px 7px 3px; border-radius: 6px; vertical-align: 2px; font: 600 9.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--cd); background: var(--ct); }
a.pc-nd:hover b, a.pc-nd:focus-visible b { color: var(--cd); }
a.pc-nd b::after { content: " →"; opacity: 0; transition: opacity .25s ease; }
a.pc-nd:is(:hover, :focus-visible) b::after { opacity: 1; }
.pc-map.has-hot .ln { opacity: .35; }
.pc-map.has-hot .ln.hot { opacity: 1; stroke-width: 2.2; }
/* motion: the core swells in, the lines grow out of it, the parts rise in (hidden only under motion) */
html.fx-motion .pc-core { opacity: 0; transform: scale(.86); transition: opacity .7s ease, transform 1s var(--ease); }
html.fx-motion .pc-map-ln .ln { stroke-dasharray: 100 100; stroke-dashoffset: -100; transition: stroke-dashoffset 1s var(--ease) calc(220ms + var(--i) * 60ms), stroke-width .3s ease, opacity .3s ease; }
html.fx-motion .pc-map-ln .tm { opacity: 0; transition: opacity .5s ease calc(620ms + var(--i) * 60ms); }
html.fx-motion .pc-node { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .8s var(--ease); transition-delay: calc(380ms + var(--i) * 60ms); }
html.fx-motion .pc-map.in .pc-core { opacity: 1; transform: none; }
html.fx-motion .pc-map.in .pc-map-ln .ln { stroke-dashoffset: 0; }
html.fx-motion .pc-map.in .pc-map-ln .tm { opacity: 1; }
html.fx-motion .pc-map.in .pc-node { opacity: 1; transform: none; }

/* ── #demo: the business enquiry (application/views/forms/enterprise.php; its look is assets/css/forms.css) ── */
/* land the card ~96px from the top, clear of the fixed nav, whatever the section's padding */
.pc-demo { scroll-margin-top: calc(96px - var(--s7-sec)); }

/* ── the sideways rows on phones: one dot per card, the current one long (p-commercial.js adds them, and
   shows them only while the row really scrolls) ── */
.pc-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 8px 0 0; }
.pc-dots[hidden] { display: none; }
.pc-dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(0, 57, 108, .2); transition: width .3s var(--ease), background-color .3s ease; }
.pc-dots i.on { width: 20px; background: var(--cd); }

/* ── widths ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .pc-lv .who { display: none; }
  .pc-lv { grid-template-columns: 50px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .pc-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-badge { position: static; align-self: flex-start; margin: -4px 0 12px; }   /* narrower plans: the badge takes a line of its own */
  .pc-logos { --k: 1; gap: 12px; }
  .pc-logos li { height: 70px; }
  .pc-stats li { padding: 16px 16px; flex-direction: column; gap: 6px; }
  .pc-sla-in { grid-template-columns: minmax(0, 1fr); }
  .pc-sla .s7-head { max-width: 620px; }
  .pc-sla-txt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 32px; }
  .pc-legend { border-top: 0; padding: 0 0 4px; }
  .pc-sla .s7-head { margin-bottom: 0; }
  .pc-sla-vis { justify-content: center; }
}
@media (max-width: 1023px) {
  .pc-drill-in { grid-template-columns: minmax(0, 1fr); }
  .pc-drill .s7-head { max-width: 680px; }
  /* the levels become one row of steps above the screen (long names trim) */
  .pc-levels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .pc-lv { width: auto; margin: 0; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 10px 12px; }
  .pc-map { grid-template-columns: minmax(0, 1fr) calc(var(--pc-core) + 110px) minmax(0, 1fr); }
  .pc-sys { --pc-core: 160px; --pc-ic: 52px; }
  .pc-nd b { font-size: 14px; }
}
@media (max-width: 900px) {
  .pc-hero-in, .pc-head2, .pc-split { grid-template-columns: minmax(0, 1fr); }
  .pc-hero-fig { max-width: 640px; }
  .pc-split-txt { order: -1; }
  .pc-qr-fig, .pc-rep { max-width: 560px; }
  .pc-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; gap: 4px 12px; }
  .pc-logos li { height: 64px; }
  .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .pc-stats li:nth-child(n+3) { border-top: 1px solid var(--line-navy); }
  .pc-more { grid-template-columns: minmax(0, 1fr); }
  .pc-more .btn { justify-self: start; }
}
@media (max-width: 700px) {
  /* the plans scroll sideways inside themselves on phones, so the page stays short; the dots say where you are */
  .pc-plans { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--s7-gutter)); padding: 4px var(--s7-gutter) 10px; scroll-padding-inline: var(--s7-gutter); gap: 10px; }
  .pc-plans::-webkit-scrollbar { display: none; }
  .pc-plans > .pc-plan { flex: 0 0 80%; scroll-snap-align: start; }
  /* the system map on phones: the core on top, the nine parts in a 3 × 3 grid under it, no lines */
  .pc-sys { --pc-core: 150px; --pc-ic: 50px; }
  .pc-map { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 26px; }
  .pc-map::before { top: 18%; }
  .pc-map-ln { display: none; }
  .pc-core { grid-column: 1; grid-row: 1; }
  .pc-nodes { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 20px 8px; }
  .pc-node, .pc-node:nth-child(n), .pc-node.iot { grid-column: auto; grid-row: auto; justify-self: stretch; }
  .pc-nd, .pc-node:nth-child(-n+4) .pc-nd, .pc-node.iot .pc-nd { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .pc-node:nth-child(-n+4) .gi { order: 0; }
  .pc-nd b { font-size: 13px; line-height: 1.3; }
  .pc-nd b em { display: table; margin: 5px auto 0; }
  a.pc-nd b::after { content: none; }
}
@media (max-width: 600px) {
  .pc-hero { padding-top: calc(var(--s7-top) + 22px); }
  .pc-hero .s7-h1 { font-size: clamp(38px, 10.6vw, 46px); }
  .pc-gi { margin-bottom: 12px; } .pc-gi > .gi { --s: 58px; }
  .pc-ctas .btn { flex: 1 1 auto; }
  .pc-ph { aspect-ratio: 4 / 3; border-radius: 22px; }
  .pc-ph img { object-position: 38% 40%; }
  /* the two cards sit under the photo, overlapping its foot */
  .pc-hero-fig { padding-bottom: 0; }
  .pc-hc-dash { top: 10px; left: 10px; width: min(214px, 62%); padding: 10px 11px 10px; border-radius: 14px; }
  .pc-hc-top { margin-bottom: 8px; } .pc-hc-top b { font-size: 18px; } .pc-hc-top span { display: none; }
  .pc-hc-kp p { padding: 6px 8px 7px; } .pc-hc-kp b { font-size: 19px; }
  .pc-hc-rows { display: none; }
  .pc-hc-sla { position: relative; right: auto; bottom: auto; width: max-content; max-width: calc(100% - 24px); margin: -34px 12px 0 auto; }
  .pc-stats li { padding: 14px 0 14px 14px; }
  .pc-stats li:nth-child(odd) { padding-left: 0; }
  .pc-stats b { font-size: 28px; }
  .pc-stats span { font-size: 12.5px; }
  .pc-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pc-feats a { padding: 16px 14px 16px; }
  .pc-feats .gi { --s: 48px; margin-bottom: 8px; }
  .pc-feats b { font-size: 15px; }
  .pc-feats .go { display: none; }
  .pc-feats a > span:not(.gi) { padding-right: 0; font-size: 12.5px; }
  .pc-sla { padding-block: 12px; }
  .pc-sla .s7-wrap { width: calc(100% - 16px); }
  .pc-panel { border-radius: 24px; padding: 32px 20px 26px; }
  .pc-sla-txt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pc-sla-vis { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pc-clock { width: min(260px, 82vw); }
  .pc-tk { width: min(320px, 100%); margin: 6px 0 0; }
  .pc-ticks li { font-size: 15px; }
  .pc-rep-card { padding: 16px 16px 14px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), 0 0 0 7px color-mix(in srgb, var(--c) 16%, transparent), 0 30px 50px -30px color-mix(in srgb, var(--c) 70%, transparent); }
  .pc-rep td { font-size: 13px; }
  .pc-rep-sig { padding-right: 0; }
  .pc-stamp { position: relative; right: auto; bottom: auto; margin-left: auto; }
  .pc-qr-fig { padding-bottom: 0; }
  .pc-scan { position: relative; left: auto; bottom: auto; width: min(280px, calc(100% - 24px)); margin: -56px auto 0 12px; }
  /* the levels: five short steps that always fit (the name is still each tab's label, and it heads the screen) */
  .pc-levels { gap: 4px; }
  .pc-lv { padding: 11px 4px; justify-items: center; text-align: center; }
  .pc-lv::after { left: 8px; right: 8px; }
  .pc-lv .k { font-size: 10px; letter-spacing: .1em; }
  .pc-lv b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pc-scr-top { padding: 11px 14px; }
  .pc-crumbs { font-size: 11.5px; }
  .pc-crumbs li:not(:first-child)::before { margin: 0 5px; }
  .pc-crumbs.cut::before { margin-right: 0; }
  .pc-views { padding: 16px 14px 14px; }
  .pc-scr-foot { padding: 10px 14px; }
  .pc-vt b, .pc-ah b { font-size: 24px; }
  .pc-kp { gap: 6px; } .pc-kp div { padding: 10px 9px 10px; border-radius: 11px; }
  .pc-kp span { font-size: 10.5px; }
  .pc-kp b { font-size: 22px; }
  .pc-rows li { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .pc-rows .bar { display: none; }
  .pc-plan-map { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(52px, 1fr); gap: 6px; padding: 8px; }
  .pc-plan-map span { min-height: 52px; padding: 8px; font-size: 11px; }
  .pc-plan-map span::before { top: 8px; left: 8px; }
  .pc-hx li { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
  .pc-hx .c { padding: 5px 8px; font-size: 11px; }
  .pc-clients .pc-clients-h { font-size: 12px; letter-spacing: .12em; }
  .pc-logos { --k: .84; gap: 6px 10px; }
  .pc-logos li { height: 54px; }
  .pc-more ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .pc-more li { font-size: 13px; }
}
@media (max-width: 380px) {
  .pc-sys { --pc-ic: 44px; }
  .pc-nd b { font-size: 12.5px; }
  .pc-more ul { grid-template-columns: minmax(0, 1fr); }
}

/* calm (app/fx.js): every card, step and node fades in where it is (no rise, no slide, no swell, and the stamp lands
   without its slam); the lines still draw, the dial still fills, the drill's timer bar still runs, the dots still blink */
html.fx-calm :is(.pc-hc, .pc-core, .pc-node) { transform: none; }
html.fx-calm .pc-v.off, html.fx-calm .pc-tk-steps li, html.fx-calm .pc-tk-f, html.fx-calm .pc-qr-fig .pc-scan { transform: none; }
html.fx-calm .pc-rep:not(.signed) .pc-stamp { transform: rotate(-7deg); }

/* ── the .pc-gate lines (hero, AMC); were a <style> in the page ── */
.pc-gate { margin: 16px 0 0; font: 500 14.5px/1.45 var(--font); color: var(--muted); }
.pc-gate a { font-weight: 700; color: var(--cd); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--cd) 35%, transparent); }
.pc-gate a:hover { text-decoration-color: currentColor; }
.pc-gate-amc { margin-top: 14px; text-align: right; }
@media (max-width: 700px) { .pc-gate-amc { text-align: left; } }