/* SigBridge site: the pages under the home page (Plan and install, Managed IT, Business AI, About, the legal pages,
   the not-found page) and the parts every page shares that the home page's stylesheet did not have: the phone menu
   and the current-page mark in the header. Loaded after site.css, whose tokens, type, buttons, header, questions,
   close and footer these pages reuse. Colour: only the brand book (site.css's tokens). */

/* ---------- Header: the current page, and the phone menu ---------- */
.header-nav a[aria-current="page"] { color: var(--blue); }
.menu-btn {
  display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; margin-left: 8px;
  border: 1px solid var(--light-tint); border-radius: 8px; background: var(--white); color: var(--navy);
  font: 600 14px/20px var(--text); cursor: pointer;
}
.menu-btn:hover { border-color: var(--navy); }
.menu-bars { position: relative; width: 16px; height: 2px; border-radius: 1px; background: currentColor; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; border-radius: 1px; background: currentColor; }
.menu-bars::before { top: -5px; }
.menu-bars::after { top: 5px; }
.menu-btn[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-bars::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars::after { top: 0; transform: rotate(-45deg); }
.site-menu { display: none; border-top: 1px solid var(--light-tint); background: var(--white); }
.site-menu.is-open { display: block; }
.site-menu ul { display: grid; padding-block: 8px 16px; }
.site-menu li + li { border-top: 1px solid var(--light); }
.site-menu a { display: flex; align-items: center; min-height: 52px; color: var(--navy); font-family: var(--display); font-size: 18px; line-height: 24px; text-decoration: none; }
.site-menu a[aria-current="page"] { color: var(--blue); }
.site-menu .menu-phone { font-family: var(--text); font-weight: 600; }
@media (max-width: 1099px) {
  .js .menu-btn { display: inline-flex; }
}
@media (min-width: 1100px) {
  .site-menu.is-open { display: none; }
}

/* ---------- The first screen of an inner page: Web Blue, the rings, a photo ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: var(--white); }
.page-hero .rings-hero { width: 1100px; height: 1100px; right: -380px; top: -520px; color: var(--blue); opacity: 0.5; z-index: -1; }
.ph-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: center; padding-block: 72px 96px; }
.ph-copy { grid-column: 1 / span 6; }
.ph-copy.solo { grid-column: 1 / span 8; }
.page-hero h1 { color: var(--white); font-size: clamp(40px, calc(4.4vw + 2px), 60px); line-height: 1.08; letter-spacing: -0.025em; }
.page-hero .lead { margin-top: 24px; max-width: 34em; font-size: 20px; line-height: 32px; color: var(--white); }
.ph-photo { grid-column: 8 / -1; margin: 0; }
.ph-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--rule-dark), 0 32px 64px -24px rgba(0, 5, 71, 0.6); }
.crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 14px; line-height: 20px; color: var(--light-tint); }
.crumb a { color: var(--light-tint); text-underline-offset: 3px; }
.crumb a:hover { color: var(--white); }

/* ---------- Sections ---------- */
.sec { padding-block: var(--section); }
.sec.alt { background: var(--light); }
.sec.tight { padding-block: 88px; }
.sec-head { max-width: 760px; }
.sec-head .intro, .split-copy .intro { margin-top: 16px; font-size: 20px; line-height: 32px; }
.sec-head + * { margin-top: 56px; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: center; }
.split-copy { grid-column: 1 / span 5; }
.split-figure { grid-column: 7 / -1; margin: 0; }
.split.rev .split-copy { grid-column: 8 / -1; grid-row: 1; }
.split.rev .split-figure { grid-column: 1 / span 6; grid-row: 1; }
.split-figure img { width: 100%; border-radius: 16px; }
.split-figure.photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.split-figure.drawing img { border-radius: 16px; box-shadow: 0 24px 48px -24px rgba(0, 5, 71, 0.35); }
.split-copy p + p { margin-top: 16px; }
.split-copy .text { margin-top: 16px; font-size: 18px; line-height: 28px; }

/* "Your part": the customer's few moments, set apart in a quiet box */
.part { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; margin-top: 32px; padding: 20px 22px; border-radius: 12px; background: var(--light); }
.sec.alt .part { background: var(--white); }
.part-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--white); }
.part-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.part h3 { font-size: 18px; line-height: 26px; }
.part p { margin-top: 4px; font-size: 16px; line-height: 25px; }

/* Two side-by-side choices (Own it, Monthly plan) */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.duo-card { padding: 32px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--light-tint); }
.sec:not(.alt) .duo-card { background: var(--light); box-shadow: none; }
.duo-card h3 { font-size: 26px; line-height: 34px; }
.duo-card p { margin-top: 12px; font-size: 17px; line-height: 27px; }
.duo-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; font-weight: 600; }
.duo-note svg { flex: none; width: 22px; height: 22px; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The equipment: the makers' own photos on Gigabyte, plain names */
.eq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gutter); }
.eq-item figure { display: grid; place-items: center; aspect-ratio: 1; margin: 0; padding: 12%; border-radius: 16px; background: var(--light); }
.sec.alt .eq-item figure { background: var(--white); }
.eq-item img { width: 100%; height: 100%; object-fit: contain; }
.eq-item h3 { margin-top: 16px; font-size: 20px; line-height: 28px; }
.eq-item p { margin-top: 6px; font-size: 16px; line-height: 25px; }

/* A list of short points with line icons (the home page's front desk list, reused) */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gutter); }
.points.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start; }
.points .job-icon { grid-row: span 2; }
.points h3 { align-self: center; font-size: 20px; line-height: 28px; }
.points p { font-size: 16px; line-height: 25px; }
.band .points .job-icon { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); color: var(--electric); }
.band .points p { color: var(--light-tint); }

/* Web Blue bands on inner pages */
.band-sec { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--section); }
.band-sec .rings-band { width: 1000px; height: 1000px; left: -520px; bottom: -560px; color: var(--blue); opacity: 0.35; z-index: -1; }
.band .intro, .band .text { color: var(--white); }
.band-phone { display: inline-flex; align-items: center; gap: 16px; margin-top: 32px; color: var(--white); font: 600 32px/40px var(--text); text-decoration: none; white-space: nowrap; }
.band-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.band-phone .care-phone-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.band-meta { margin-top: 24px; color: var(--light-tint); font-size: 15px; line-height: 22px; }

/* The certifications */
.cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.cert-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 24px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--light-tint); }
.sec:not(.alt) .cert-card { background: var(--light); box-shadow: none; }
.cert-card img { width: 72px; height: 72px; }
.cert-card h3 { font-size: 19px; line-height: 26px; }
.cert-note { margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--navy-tint); }

/* The monitoring drawing (the home page's three pieces) on a light panel */
.watch-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: end; padding: 40px 32px; border-radius: 16px; background: var(--navy-tint); box-shadow: 0 0 0 1px var(--rule-dark); }
.watch-flow figure { margin: 0; display: grid; justify-items: center; row-gap: 16px; }
.watch-flow img { width: 100%; max-width: 180px; height: auto; filter: drop-shadow(0 0 16px rgba(48, 197, 255, 0.3)); }
.watch-flow figcaption { padding: 4px 12px; border-radius: 12px; background: var(--white); color: var(--navy); font-size: 13px; line-height: 18px; font-weight: 600; text-align: center; }

/* A big phone number on a light section */
.big-phone { display: inline-flex; align-items: center; gap: 16px; margin-top: 32px; color: var(--navy); font: 600 32px/40px var(--text); text-decoration: none; white-space: nowrap; }
.big-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.big-phone .care-phone-icon { color: var(--white); }
.big-phone .care-phone-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The footer's legal links */
.footer-legal a { color: var(--light-tint); text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--white); }

/* Plain text pages (privacy, terms) */
.legal { padding-block: 72px var(--section); }
.legal-body { max-width: 760px; }
.legal-body h2 { margin-top: 48px; font-size: 28px; line-height: 36px; }
.legal-body h3 { margin-top: 32px; font-size: 20px; line-height: 28px; }
.legal-body p, .legal-body li { margin-top: 12px; font-size: 17px; line-height: 28px; }
.legal-body ul { padding-left: 22px; list-style: disc; }
.legal-body ol { padding-left: 22px; list-style: decimal; }
.legal-date { color: var(--navy-tint); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ph-copy, .ph-copy.solo, .ph-photo, .split-copy, .split-figure, .split.rev .split-copy, .split.rev .split-figure { grid-column: 1 / -1; grid-row: auto; }
  .ph-grid { padding-block: 48px 64px; }
  .ph-photo { max-width: 720px; }
  .split-figure { max-width: 720px; }
  .points.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .duo, .points, .points.three { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sec, .band-sec { padding-block: 64px; }
  .sec.tight { padding-block: 56px; }
  .sec-head + * { margin-top: 36px; }
  .page-hero .lead, .sec-head .intro, .split-copy .intro { font-size: 18px; line-height: 28px; }
  .page-hero .rings-hero { width: 700px; height: 700px; right: -360px; top: -330px; }
  .duo-card { padding: 24px; }
  .duo-card h3 { font-size: 22px; line-height: 30px; }
  .eq-grid { gap: 24px 16px; }
  .eq-item h3 { font-size: 17px; line-height: 24px; }
  .eq-item p { font-size: 15px; line-height: 23px; }
  .watch-flow { grid-template-columns: 1fr; justify-items: center; padding: 28px 20px; }
  .watch-flow img { max-width: 140px; }
  .band-phone, .big-phone { font-size: 26px; line-height: 34px; }
  .menu-btn .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Home: How it works (Scott 2026-10-03) ----------
   The heading above the scene is a small label; each step's headline is the big line, and it changes as the reader
   scrolls from step to step (motion.js already shows only the current step's words). Without motion, the five steps
   read as a list, each with its headline. Sizes keep the pinned frame inside the window at every width. */
.hw-head h2.hw-label { color: var(--electric); font-family: var(--display); font-size: 16px; line-height: 24px; letter-spacing: 0.06em; text-transform: uppercase; }
.hw-words h3 { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; }
html.motion .hw:not(.hw-nofit) .hw-words h3 { font-size: 44px; line-height: 50px; letter-spacing: -0.02em; }
html.motion .hw:not(.hw-nofit) .hw-stages { margin-top: 24px; }
@media (min-width: 900px) and (max-width: 1180px) {
  html.motion .hw:not(.hw-nofit) .hw-words h3 { font-size: 36px; line-height: 42px; }
}
@media (max-width: 899.98px) and (min-height: 500px), (max-aspect-ratio: 1249/1000) and (min-height: 500px) {
  html.motion .hw:not(.hw-nofit) .hw-head { padding-bottom: 12px; }
  html.motion .hw:not(.hw-nofit) .hw-words h3 { font-size: 28px; line-height: 34px; }
}
@media (max-width: 600px) {
  .hw-words h3 { font-size: 26px; line-height: 32px; }
}

/* ---------- Business AI groups, the cyber-insurance checklist (2026-10-04) ---------- */
.group-items { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--light-tint); }
.also-line { margin-top: 40px; padding: 18px 22px; border-radius: 12px; background: var(--light); font-weight: 600; }
.sec.alt .also-line { background: var(--white); }
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 12px; background: var(--light); font-family: var(--display); font-size: 20px; line-height: 28px; }
.checklist svg { flex: none; width: 24px; height: 24px; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eq-note { margin-top: 32px; }
@media (max-width: 600px) {
  .group-items { margin-top: 40px; padding-top: 32px; }
  .checklist li { font-size: 17px; line-height: 24px; padding: 14px 16px; }
}

/* Home opening: a full empty column between the words and the photo, so the paragraph never runs up to the picture
   at laptop widths (Scott 2026-10-04: "image on first section bleeding into words") */
@media (min-width: 1025px) {
  .hero-photo { grid-column: 7 / -1; }
}

/* ---------- Tool rows (2026-10-04): every tool its own section, with its name and its own picture ----------
   Scott: "each widget needs its own sort of section ... right now it just looks like a wall of text". The name plate is
   the name people use when they call us; the picture is a small drawing of what the tool does (tools/vignettes.py). */
.tool-index { background: var(--light); border-bottom: 1px solid var(--light-tint); }
.tool-index .wrap { display: flex; flex-wrap: wrap; gap: 24px 40px; padding-block: 28px; }
.ti-group { display: grid; gap: 10px; }
.ti-group > p { font-family: var(--display); font-size: 15px; color: var(--navy-tint); }
.ti-group ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-group a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--light-tint); color: var(--navy); font-weight: 600; font-size: 14px; text-decoration: none; }
.ti-group a:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.group-head { padding-top: var(--section); }
.group-head .wrap { display: grid; gap: 12px; max-width: calc(760px + 2 * var(--gutter)); margin-inline: 0; }
.group-head .wrap { margin-inline: auto; max-width: calc(var(--measure) + 2 * var(--gutter)); }
.group-head p.gh-intro { max-width: 640px; font-size: 19px; line-height: 30px; color: var(--navy-tint); }
.tool { padding-block: 56px; }
.tool .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: center; }
.tool-copy { grid-column: 1 / span 5; }
.tool-visual { grid-column: 7 / -1; }
.tool.rev .tool-copy { grid-column: 8 / -1; grid-row: 1; }
.tool.rev .tool-visual { grid-column: 1 / span 6; grid-row: 1; }
.tool-name { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-family: var(--display); font-size: 17px; line-height: 24px; }
.tool-name::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); }
.tool h3 { margin-top: 10px; font-size: 34px; line-height: 42px; letter-spacing: -0.015em; }
.tool-copy > p.tool-text { margin-top: 14px; max-width: 34em; font-size: 18px; line-height: 29px; }
.tool-ask { display: inline-block; margin-top: 20px; font-weight: 600; text-underline-offset: 4px; }
.tool-try { margin: 20px 24px 0 0; vertical-align: middle; }  /* the receptionist demo, the row's main action (Scott 2026-10-06) */
.tool-try + .tool-ask { vertical-align: middle; }
.tool + .tool { border-top: 1px solid var(--light); }
.sec-band { background: var(--light); }
.sec-band .tool + .tool { border-top-color: var(--light-tint); }

/* The pictures: a quiet stage, each drawing different */
.tool-visual { position: relative; min-height: 340px; display: grid; place-items: center; padding: 40px; border-radius: 20px; background: var(--light); overflow: hidden; isolation: isolate; }
.sec-band .tool-visual { background: var(--white); }
.vg { width: 100%; max-width: 440px; color: var(--navy); font-size: 14px; line-height: 20px; }
.vg p { margin: 0; }
.vg-k { color: var(--navy-tint); font-size: 12.5px; line-height: 18px; }
.vg-t { font-family: var(--display); font-size: 17px; line-height: 24px; }
.vg-card, .vg-cal, .vg-record, .vg-invoice, .vg-thread, .vg-ledger, .vg-browser, .vg-search, .vg-email, .vg-kb { background: var(--white); border-radius: 14px; box-shadow: 0 1px 0 rgba(0, 5, 71, 0.04), 0 18px 40px -18px rgba(0, 5, 71, 0.35); }
.sec-band .vg-card, .sec-band .vg-cal, .sec-band .vg-record, .sec-band .vg-invoice, .sec-band .vg-thread, .sec-band .vg-ledger, .sec-band .vg-browser, .sec-band .vg-search, .sec-band .vg-email, .sec-band .vg-kb { box-shadow: inset 0 0 0 1px var(--light-tint), 0 18px 40px -22px rgba(0, 5, 71, 0.3); }
.vg-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.vg-dot.ok { background: var(--electric); }
.vg-dot.hot { background: var(--navy); box-shadow: 0 0 0 3px rgba(43, 96, 255, 0.25); }
.vg-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 12.5px; font-weight: 600; }
.vg-btn { display: inline-flex; margin-top: 14px; padding: 8px 14px; border-radius: 8px; background: var(--blue); color: var(--white); font-size: 13px; font-weight: 600; }
.vg-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--light); color: var(--navy); font-size: 11.5px; font-weight: 600; }
/* phones */
.vg-phones { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 0; max-width: 480px; }
.vg-phone-img { width: 100%; max-width: 230px; height: auto; filter: drop-shadow(0 20px 26px rgba(0, 5, 71, 0.25)); }
.vg-call { padding: 18px 18px 16px; margin-left: -24px; }
.vg-steps { display: grid; gap: 8px; margin-top: 12px; }
.vg-steps li { display: flex; align-items: center; gap: 8px; }
/* calendar */
.vg-cal { padding: 16px; }
.vg-cal-head, .vg-cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vg-cal-head span { font-size: 12px; color: var(--navy-tint); text-align: center; }
.vg-cal-grid { margin-top: 8px; }
.vg-cell { height: 38px; border-radius: 8px; background: var(--light); font-size: 11px; line-height: 13px; padding: 5px 6px; color: var(--white); font-weight: 600; }
.vg-cell.on { background: var(--blue); }
/* record */
.vg-record { padding: 18px; }
.vg-person { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--light); }
.vg-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--electric)); }
.vg-timeline { display: grid; gap: 10px; margin-top: 14px; }
.vg-timeline li { display: flex; align-items: center; gap: 10px; }
/* invoice */
.vg-invoice { padding: 20px; max-width: 360px; }
.vg-inv-head { display: flex; align-items: center; gap: 12px; }
.vg-logo-box { width: 36px; height: 36px; border-radius: 8px; background: var(--navy); }
.vg-paid { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--electric); color: var(--navy); font-weight: 700; font-size: 12px; }
.vg-lines { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--light-tint); }
.vg-lines p, .vg-total { display: flex; justify-content: space-between; gap: 12px; }
.vg-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--light-tint); font-weight: 700; }
/* thread */
.vg-thread { padding: 18px; display: grid; gap: 10px; max-width: 380px; }
.vg-bubble { max-width: 85%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--light); }
.vg-bubble.me { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--blue); color: var(--white); }
.vg-thread .vg-chip { justify-self: start; }
/* ledger */
.vg-ledger { padding: 18px; display: grid; gap: 8px; }
.vg-ledger-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.vg-row { display: grid; grid-template-columns: 1fr auto 10px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--light); }
.vg-cat { padding: 2px 8px; border-radius: 6px; background: rgba(43, 96, 255, 0.08); color: var(--blue); font-size: 12px; font-weight: 600; }
/* browser */
.vg-browser { overflow: hidden; }
.vg-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--light); }
.vg-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--light-tint); }
.vg-bar p { margin-left: 10px; padding: 3px 10px; border-radius: 6px; background: var(--white); font-size: 12px; color: var(--navy-tint); }
.vg-site { padding: 22px; background: linear-gradient(160deg, var(--navy), var(--navy-tint)); color: var(--white); }
.vg-site-h { font-family: var(--display); font-size: 22px; line-height: 28px; }
.vg-site-p { margin-top: 6px; color: var(--light-tint); }
.vg-site-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.vg-site-cols span { height: 46px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); }
/* search ad */
.vg-search { padding: 18px; display: grid; gap: 12px; }
.vg-query { padding: 10px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--light-tint); color: var(--navy); }
.vg-ad-h { margin-top: 2px; color: var(--blue); font-family: var(--display); font-size: 17px; line-height: 24px; }
.vg-ad-p { color: var(--navy-tint); }
.vg-ad.dim .vg-ad-h { height: 12px; width: 70%; border-radius: 6px; background: var(--light); }
.vg-ad.dim .vg-ad-p { height: 10px; width: 90%; margin-top: 8px; border-radius: 5px; background: var(--light); }
/* email */
.vg-email { padding: 20px; max-width: 380px; }
.vg-email .vg-t { margin-top: 8px; }
.vg-email-body { display: grid; gap: 7px; margin-top: 14px; }
.vg-email-body span { height: 9px; border-radius: 5px; background: var(--light); }
.vg-email-body span.short { width: 60%; }
/* video */
.vg-video { max-width: 460px; }
.vg-frame { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 5, 71, 0.45); }
.vg-frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vg-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 10px rgba(43, 96, 255, 0.25); }
.vg-play::after { content: ""; position: absolute; left: 26px; top: 21px; border-left: 16px solid var(--white); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.vg-video .vg-k { margin-top: 12px; }
/* knowledge */
.vg-kb { padding: 18px; display: grid; gap: 12px; max-width: 420px; }
.vg-answer { padding: 14px; border-radius: 12px; background: var(--light); display: grid; gap: 6px; }
/* private */
.vg-private { display: grid; justify-items: center; }
.vg-box-svg { width: 100%; max-width: 280px; height: auto; }

/* The sample call: a play button, a progress line, and the transcript that follows along */
.call-demo { margin-top: 24px; padding: 16px; border-radius: 14px; background: var(--navy); color: var(--white); max-width: 460px; }
.call-demo-top { display: flex; align-items: center; gap: 14px; }
.call-play { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--blue); cursor: pointer; position: relative; }
.call-play:hover { background: var(--blue-tint); }
.call-play::after { content: ""; position: absolute; left: 19px; top: 15px; border-left: 14px solid var(--white); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.call-play[aria-pressed="true"]::after { left: 17px; top: 16px; width: 5px; height: 16px; border: 0; background: var(--white); box-shadow: 9px 0 0 var(--white); }
.call-demo-label { font-family: var(--display); font-size: 16px; }
.call-demo-sub { color: var(--light-tint); font-size: 13px; }
.call-bar { height: 4px; margin-top: 14px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.call-bar span { display: block; height: 100%; width: 0; background: var(--electric); }
.call-lines { display: grid; gap: 6px; margin-top: 14px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.call-demo.is-open .call-lines { max-height: 600px; }
.call-lines li { font-size: 14px; line-height: 21px; color: var(--light-tint); }
.call-lines li b { color: var(--white); font-weight: 600; margin-right: 6px; }
.call-lines li.is-now { color: var(--white); }
.call-lines li.is-now b { color: var(--electric); }
.call-toggle { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--electric); font: 600 13px var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .call-lines { transition: none; } }

@media (max-width: 900px) {
  .tool-copy, .tool-visual, .tool.rev .tool-copy, .tool.rev .tool-visual { grid-column: 1 / -1; grid-row: auto; }
  .tool-visual { min-height: 0; padding: 28px 20px; }
  .group-head { padding-top: 72px; }
}
@media (max-width: 600px) {
  .tool { padding-block: 40px; }
  .tool h3 { font-size: 26px; line-height: 32px; }
  .tool-copy > p.tool-text { font-size: 16px; line-height: 26px; }
  .vg-phones { grid-template-columns: 1fr; justify-items: center; }
  .vg-call { margin-left: 0; margin-top: -10px; }
  .tool-index .wrap { gap: 18px; }
}
/* Plan and Install, Managed IT pictures */
.vg-stack { display: grid; justify-items: center; gap: 10px; }
.vg-stack .vg-ap { width: 150px; height: auto; filter: drop-shadow(0 16px 20px rgba(0, 5, 71, 0.2)); }
.vg-unit { width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 5, 71, 0.18)); }
.vg-pair { display: grid; justify-items: center; gap: 12px; }
.vg-pair > img:first-child { width: 190px; height: auto; filter: drop-shadow(0 16px 20px rgba(0, 5, 71, 0.2)); }
.vg-door { display: grid; grid-template-columns: 0.9fr 1.2fr; align-items: center; }
.vg-door > img { width: 100%; max-width: 210px; height: auto; filter: drop-shadow(0 16px 22px rgba(0, 5, 71, 0.22)); }
.vg-access { padding: 16px; margin-left: -10px; display: grid; gap: 10px; }
.vg-row2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vg-row3 { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--light); }
.vg-tag.off { background: var(--navy); color: var(--white); }
.vg-tag.on { background: var(--blue); color: var(--white); }
.vg-phone-screen { display: grid; place-items: center; }
.vg-handset { width: 220px; padding: 26px 18px 22px; border-radius: 32px; background: var(--white); box-shadow: 0 0 0 8px var(--navy), 0 24px 44px -16px rgba(0, 5, 71, 0.5); display: grid; gap: 8px; }
.vg-field { padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--light-tint); color: var(--navy-tint); font-size: 12px; }
.vg-consent { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.vg-consent span { width: 14px; height: 14px; border-radius: 4px; background: var(--blue); }
.vg-tickets { display: grid; gap: 10px; }
.vg-ticket { padding: 14px 16px; display: grid; gap: 4px; }
.vg-watch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 22px 16px; border-radius: 16px; background: var(--navy-tint); }
.vg-watch figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.vg-watch img { width: 100%; max-width: 120px; height: auto; filter: drop-shadow(0 0 14px rgba(48, 197, 255, 0.3)); }
.vg-watch figcaption { padding: 3px 10px; border-radius: 10px; background: var(--white); color: var(--navy); font-size: 11.5px; font-weight: 600; text-align: center; }
.vg-gauge { padding: 18px; display: grid; gap: 12px; }
.vg-ring { display: grid; place-items: center; width: 132px; height: 132px; margin: 4px auto; border-radius: 50%; background: conic-gradient(var(--blue) 0 72%, var(--light) 72% 100%); }
.vg-ring span { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--white); text-align: center; font-size: 11.5px; line-height: 15px; padding: 10px; color: var(--navy-tint); }
.vg-ins { padding: 18px; display: grid; gap: 10px; }
@media (max-width: 600px) {
  .vg-door { grid-template-columns: 1fr; justify-items: center; }
  .vg-access { margin-left: 0; margin-top: -6px; width: 100%; }
  .vg-watch { grid-template-columns: 1fr; }
}

/* the equipment that rides with a tool row, each with its own heading (2026-10-04) */
.tool-parts { margin: 22px 0 4px; display: grid; gap: 0; max-width: 460px; }
.tool-parts li { padding: 14px 0; border-top: 1px solid var(--light-tint); }
.tool-parts li:last-child { border-bottom: 1px solid var(--light-tint); }
.tool-parts h4 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 24px; color: var(--navy); }
.tool-parts p { margin: 0; font-size: 15px; line-height: 22px; }

/* Your Privacy Choices: the opt-out box */
.legal .choice-box { background: var(--light); border-radius: 14px; padding: 20px 24px; margin: 24px 0 8px; }
.legal .choice-box .choice-status { font-weight: 600; margin: 0 0 12px; }
.legal .choice-box p:last-child { margin-bottom: 0; }
.legal .choice-box .btn { white-space: normal; max-width: 100%; text-align: center; }