/* ==========================================================
   YourPhoneSystem.com  |  VoiceSaver Cloud PBX by PEC Telecom
   Plain CSS, no build step. Edit tokens in :root to restyle.
   ========================================================== */
:root {
  --ink: #132A4C;          /* deep navy: headings, dark bands */
  --blue: #2B5EA7;         /* PEC logo blue: links, accents */
  --blue-deep: #1F477F;
  --mist: #EEF2F7;         /* alternate section background */
  --paper: #FFFFFF;
  --receipt: #FFFDF5;      /* statement paper */
  --amber: #F2A516;        /* primary action */
  --amber-deep: #D98F00;
  --text: #1B2433;
  --muted: #536076;
  --line: #D6DEE9;
  --ok: #1E8A5A;
  --font-head: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
  --wrap: 1160px;
  --r-sm: 6px;
  --r: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 .5em;
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; }
h4 { font-size: 1.05rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; }
p { margin: 0 0 1em; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: #fff; padding: 8px 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 13px 22px; border-radius: var(--r-sm);
  border: 2px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--primary:hover { background: var(--amber-deep); color: var(--ink); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { border-color: #fff; color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.call-link { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: flex; flex-direction: row; align-items: center; gap: 10px; text-decoration: none; line-height: 1; margin-right: auto; }
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--ink); font-stretch: 92%; }
.brand__name span { color: var(--blue); }
.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; order: 2; }
.nav__links > li { position: relative; }
.nav__links a, .nav__links button {
  display: block; padding: 10px 10px; font: 500 .95rem var(--font-body); white-space: nowrap;
  color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: var(--r-sm);
}
.nav__links a:hover, .nav__links button:hover { color: var(--blue); }
.nav__links a[aria-current="page"] { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.nav__links button::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.submenu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px;
  list-style: none; margin: 0; padding: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 30px rgba(19,42,76,.12);
}
.has-sub.open .submenu { display: block; }
@media (hover: hover) and (min-width: 1061px) { .has-sub:hover .submenu, .has-sub:focus-within .submenu { display: block; } }
.nav__cta { display: flex; align-items: center; gap: 16px; order: 3; }
.nav__cta .btn { white-space: nowrap; }
@media (max-width: 1420px) { .nav__cta .call-link { display: none; } }
.nav__cta .btn { padding: 10px 16px; font-size: .92rem; }
.nav__toggle { display: none; background: none; border: 2px solid var(--ink); border-radius: var(--r-sm); padding: 8px 10px; font: 600 .9rem var(--font-body); color: var(--ink); cursor: pointer; }

@media (max-width: 1060px) {
  .nav { flex-wrap: wrap; }
  .nav__toggle { display: block; }
  .nav__cta .call-link { display: none; }
  .nav__links { display: none; order: 5; width: 100%; flex-direction: column; align-items: stretch; padding: 8px 0 16px; }
  .nav.open .nav__links { display: flex; }
  .nav__links a, .nav__links button { padding: 12px 4px; width: 100%; text-align: left; border-bottom: 1px solid var(--mist); }
  .submenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 16px; }
  .nav__links a, .nav__links button { white-space: normal; }
}
@media (max-width: 560px) { .nav__cta .btn { display: none; } }

/* ---------- Sections ---------- */
.band { padding: 80px 0; }
.band--mist { background: var(--mist); }
.band--ink { background: var(--ink); color: #DCE5F2; }
.band--ink h2, .band--ink h3 { color: #fff; }
.band--ink a:not(.btn) { color: #fff; }
.band--tight { padding: 56px 0; }
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.band--ink .section-head p { color: #B9C7DC; }

.page-head { padding: 64px 0 48px; background: var(--mist); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-bottom: 0; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Hero + statement ---------- */
.hero { padding: 72px 0 88px; background: linear-gradient(180deg, var(--mist) 0%, #fff 100%); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.hero h1 { max-width: 16ch; }
.hero__points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; }
.hero__points li { padding-left: 28px; position: relative; }
.hero__points li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 48px; } }

.statement-slot { position: relative; padding-top: 14px; }
.statement-slot::before { /* the printer slot */
  content: ""; position: absolute; top: 0; left: -14px; right: -14px; height: 14px;
  background: var(--ink); border-radius: 8px; z-index: 2;
}
.statement {
  position: relative; z-index: 1;
  background: var(--receipt);
  font-family: var(--font-mono); font-size: .9rem; color: #2A3445;
  padding: 26px 26px 34px;
  box-shadow: 0 18px 40px rgba(19,42,76,.16);
  --tooth: 10px;
  -webkit-mask: radial-gradient(var(--tooth) at 50% 100%, #0000 98%, #000) 50% / calc(var(--tooth) * 2) 100%;
          mask: radial-gradient(var(--tooth) at 50% 100%, #0000 98%, #000) 50% / calc(var(--tooth) * 2) 100%;
  transform-origin: top center;
  animation: print 1.6s cubic-bezier(.3,.7,.3,1) .2s both;
}
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-24px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@media (prefers-reduced-motion: reduce) { .statement { animation: none; } }
.statement__head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #B7C0CE; padding-bottom: 12px; margin-bottom: 12px; }
.statement__head b { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.statement__lines { list-style: none; margin: 0; padding: 0; }
.statement__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.statement__lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.statement__lines .free { color: var(--ok); font-weight: 600; }
.statement__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 2px solid var(--ink); margin-top: 12px; padding-top: 14px; }
.statement__total strong { font-family: var(--font-head); font-size: 2.3rem; color: var(--ink); font-stretch: 90%; }
.statement__note { margin: 10px 0 0; font-size: .74rem; color: var(--muted); }

/* ---------- Partner strip ---------- */
.partners { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
.partners__row { display: flex; align-items: center; gap: 20px 48px; flex-wrap: wrap; }
.partners__label { font-weight: 600; color: var(--muted); margin: 0; }
.partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 44px; list-style: none; margin: 0; padding: 0; }
.partner-logos img { height: 34px; width: auto; }
.partner-name { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); }

/* ---------- Ruled lists (instead of card grids) ---------- */
.ruled { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.ruled > li { border-top: 1px solid var(--line); padding: 22px 0 18px; }
.ruled h3 { margin-bottom: 6px; }
.ruled p { color: var(--muted); margin: 0; }
.ruled--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ruled, .ruled--3 { grid-template-columns: 1fr; } }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { padding-left: 30px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 14px; height: 8px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }
.checks--2 { grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 600px) { .checks--2 { grid-template-columns: 1fr; } }

/* Numbered steps: only used where content is truly a sequence */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps li { counter-increment: step; position: relative; padding-top: 56px; }
.steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font: 700 1.05rem var(--font-head);
}
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 52px; right: -20px; height: 2px; background: var(--line); }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--muted); margin: 0; }
.steps--6 { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
.steps--6 li:nth-child(3n)::after { display: none; }
@media (max-width: 900px) { .steps, .steps--6 { grid-template-columns: 1fr; } .steps li::after { display: none; } }

/* ---------- Industry links ---------- */
.industry { border-top: 4px solid var(--blue); padding-top: 20px; }
.industry p { color: var(--muted); }
.industry a.more { font-weight: 600; }

/* ---------- Phones ---------- */
.phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.phones--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .phones, .phones--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .phones, .phones--3 { grid-template-columns: 1fr; } }
.phone { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: var(--r); padding: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .15s; }
.phone:hover { border-color: var(--blue); color: inherit; }
.phone__img { height: 170px; display: grid; place-items: center; margin-bottom: 16px; }
.phone__img img { max-height: 170px; width: auto; object-fit: contain; }
.phone h3 { font-size: 1.08rem; margin-bottom: 4px; }
.phone p { margin: 0; color: var(--muted); font-size: .92rem; }
.phone .tag { margin-top: 10px; font-size: .85rem; color: var(--blue); font-weight: 600; }
.series { margin: 56px 0 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.series h2 { margin: 0; font-size: 1.6rem; }
.series p { margin: 0; color: var(--muted); }

.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 36%; color: var(--ink); font-weight: 600; }
.spec tr:nth-child(odd) { background: var(--mist); }
.product { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.product__img { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 32px; display: grid; place-items: center; min-height: 320px; }
.product__img img { max-height: 300px; width: auto; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }
.pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); margin-top: 56px; padding-top: 20px; flex-wrap: wrap; }

/* ---------- Pricing ---------- */
.price-card { background: #fff; border: 2px solid var(--ink); border-radius: var(--r); padding: 36px; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.price strong { font-family: var(--font-head); font-size: clamp(3.4rem, 7vw, 4.6rem); color: var(--ink); line-height: 1; font-stretch: 88%; }
.price span { color: var(--muted); font-size: 1.1rem; }
.fine { font-size: .85rem; color: var(--muted); }

/* ---------- Compare table ---------- */
.compare { width: 100%; border-collapse: collapse; background: #fff; }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 700; }
.compare td:first-child { font-weight: 600; color: var(--ink); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }

/* ---------- Callout ---------- */
.callout { border-left: 4px solid var(--amber); background: #FFF7E6; padding: 18px 22px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 24px 0; }
.callout p:last-child { margin: 0; }

/* ---------- Diagram ---------- */
.diagram { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; overflow-x: auto; }
.diagram svg { min-width: 640px; width: 100%; height: auto; }

/* ---------- FAQ ---------- */
.faq-group { margin-bottom: 48px; }
.faq-group h2 { font-size: 1.5rem; margin-bottom: 8px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-weight: 600; color: var(--ink); font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 1.6rem var(--font-body); color: var(--blue); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 18px; color: var(--muted); max-width: 72ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Proof / testimonials ---------- */
.orgs { list-style: none; margin: 0; padding: 0; }
.orgs li { border-top: 1px solid var(--line); padding: 16px 0; }
.orgs strong { color: var(--ink); display: block; }
.orgs span { color: var(--muted); font-size: .95rem; }
.quote { border-left: 4px solid var(--blue); padding: 4px 0 4px 20px; margin: 0; }
.quote p { font-size: 1.1rem; color: var(--ink); }
.quote cite { font-style: normal; color: var(--muted); font-size: .92rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; }
.form label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; color: var(--ink); }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid #B9C4D4; border-radius: var(--r-sm);
  font: 400 1rem var(--font-body); color: var(--text); background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); outline: 3px solid rgba(43,94,167,.2); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.req { color: #B42318; }
.form-status { margin: 0; font-size: .95rem; min-height: 1.4em; }
.form-status.error { color: #B42318; }
.form-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 32px; }
.band--mist .form-panel { border-color: transparent; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .choice-grid, .choice-grid--2 { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: block; padding: 10px 12px; border: 1.5px solid #B9C4D4; border-radius: var(--r-sm); font-weight: 500; font-size: .95rem; cursor: pointer; text-align: center; }
.choice input:checked + span { border-color: var(--blue); background: #E9F0FA; color: var(--blue-deep); }
.choice input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-weight: 600; font-size: .95rem; margin-bottom: 8px; color: var(--ink); padding: 0; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { border-top: 1px solid var(--line); padding: 16px 0; }
.contact-list strong { display: block; color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: #DCE5F2; padding: 64px 0; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band__grid { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-band p { margin: 0; max-width: 56ch; }
.cta-band .call-link { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: #0E2140; color: #B9C7DC; padding: 56px 0 28px; font-size: .95rem; }
.site-footer a { color: #DCE5F2; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__grid h4 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__name span { color: #8FB4E8; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 70ch; }
.wrap.prose > .callout { max-width: 76ch; }

/* ---------- Icons, figures, photos ---------- */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; flex: none; }
.ico--lg { width: 48px; height: 48px; padding: 11px; border-radius: 12px; background: var(--mist); color: var(--blue); margin-bottom: 14px; display: block; vertical-align: 0; }
.band--mist .ico--lg { background: #fff; }
.band--ink .ico--lg { background: rgba(255,255,255,.1); color: var(--amber); }
.ico--xl { width: 96px; height: 96px; padding: 22px; border-radius: 50%; background: var(--mist); color: var(--blue); margin-bottom: 24px; display: block; }
.ruled > li > .ico--lg { margin-top: 4px; }

.fig { margin: 0; }
.fig + .fig { margin-top: 32px; }
.diagram { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.band--mist .diagram { border-color: transparent; }
.diagram img { width: 100%; height: auto; }
@media (max-width: 700px) { .diagram img { min-width: 620px; } .fig--small .diagram img { min-width: 520px; } }
.fig figcaption, .photo figcaption { font-size: .9rem; color: var(--muted); margin-top: 10px; max-width: 70ch; }
.band--ink .fig figcaption { color: #B9C7DC; }
@media (max-width: 700px) { .diagram { padding: 12px; } .fig figcaption::before { content: "Swipe to see the whole diagram. "; font-weight: 600; } }
.fig--inline { margin: 14px 0 6px; }
.fig--inline .diagram { padding: 12px; }

.photo { margin: 0; }
.photo img { width: 100%; border-radius: var(--r); object-fit: cover; }
.photo--frame img { background: #fff; border: 1px solid var(--line); padding: 16px; object-fit: contain; }

.logo-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.logo-wall li { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); height: 92px; display: grid; place-items: center; padding: 12px; }
.logo-wall img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
.logo-wall--strip { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 900px) { .logo-wall, .logo-wall--strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-wall, .logo-wall--strip { grid-template-columns: repeat(2, 1fr); } }

.map { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--mist); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.page-head--art .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.page-head--art .page-head__art img { width: 100%; border-radius: var(--r); }
.page-head__art .ico--xl { margin: 0 auto; width: 160px; height: 160px; padding: 36px; background: #fff; }
@media (max-width: 900px) { .page-head--art .wrap { grid-template-columns: 1fr; } .page-head__art { max-width: 420px; } }

.equip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 700px) { .equip { grid-template-columns: 1fr; } }
.equip > div { background: #fff; border-radius: var(--r); padding: 22px; text-align: center; }
.equip .equip__img { height: 130px; display: grid; place-items: center; margin-bottom: 12px; }
.equip .equip__img img { max-height: 130px; width: auto; }
.equip .equip__img .ico--xl { width: 110px; height: 110px; padding: 26px; margin: 0; }
.equip h3 { margin-bottom: 4px; }
.equip p { margin: 0; color: var(--muted); font-size: .95rem; }

.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.split--flip { grid-template-columns: 1.15fr .85fr; }
.split--flip > :first-child { order: 2; }
@media (max-width: 900px) { .split, .split--flip { grid-template-columns: 1fr; gap: 28px; } .split--flip > :first-child { order: 0; } }
.split + .split { margin-top: 72px; }

.compare td .ico { color: var(--blue); margin-right: 10px; }
.contact-list .ico { color: var(--blue); margin-right: 8px; }
.faq-group h2 { display: flex; align-items: center; gap: 12px; }
.faq-group h2 .ico--lg { margin: 0; width: 42px; height: 42px; padding: 9px; }
.step-ico { color: var(--blue); }
.industry .ico--lg { margin-bottom: 16px; }
.next-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.next-steps li { display: flex; gap: 14px; align-items: flex-start; }
.next-steps .ico--lg { margin: 0; width: 44px; height: 44px; padding: 10px; }

.thumb { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin: 4px 0 16px; }
.thumb:hover { border-color: var(--blue); }
.thumb img { width: 100%; height: auto; }
.ruled .partner-name { display: none; }
.split > *, .grid-2 > *, .grid-3 > *, .hero__grid > *, .page-head--art .wrap > *, .fig { min-width: 0; }

/* ---------- Industry cards ---------- */
.ind-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ind-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .ind-grid, .ind-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ind-grid, .ind-grid--3 { grid-template-columns: 1fr; } }
.ind-card { display: flex; flex-direction: column; height: 100%; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.ind-card:hover { border-color: var(--blue); color: var(--text); transform: translateY(-2px); }
.ind-card strong { color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.ind-card span { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.ind-card .ico--lg { width: 44px; height: 44px; padding: 10px; margin-bottom: 12px; }
.band--mist .ind-card { border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .ind-card { transition: none; } .ind-card:hover { transform: none; } }

/* two-column industries menu */
.submenu--wide { min-width: 520px; display: none; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.has-sub.open .submenu--wide { display: grid; }
@media (hover: hover) and (min-width: 1061px) { .has-sub:hover .submenu--wide, .has-sub:focus-within .submenu--wide { display: grid; } }
.submenu--wide .submenu__all { grid-column: 1 / -1; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.submenu--wide .submenu__all a { font-weight: 600; color: var(--blue); }
.submenu a { padding: 8px 10px; font-size: .92rem; }
@media (max-width: 1060px) { .submenu--wide { min-width: 0; grid-template-columns: 1fr; } }
.footer__title { font-family: var(--font-head); color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 12px; letter-spacing: 0; font-stretch: 100%; }

.nav__links button.is-active { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }

.brand__mark { width: 40px; height: 40px; flex: none; display: block; }
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.02em; font-stretch: 90%; color: var(--ink); }
.brand__name span { color: var(--blue); }
.footer__logo { margin: 0 0 16px; }
.footer__logo .brand__name { color: #fff; }
.footer__logo .brand__name span { color: #8FB4E8; }
@media (max-width: 400px) { .brand__name { font-size: 1.3rem; } .brand__mark { width: 34px; height: 34px; } }

.partner-logo { display: block; max-width: 100%; }
.partner-logos li { display: flex; align-items: center; }

/* ---------- Hero headline ---------- */
.hero__grid { grid-template-columns: 1.05fr .95fr; gap: 48px; }
.hero__title { font-family: 'Bricolage Grotesque', var(--font-head); font-weight: 800; font-stretch: 100%;
  font-size: clamp(2.5rem, 5.2vw, 4.1rem); line-height: 1.04; letter-spacing: -0.025em; max-width: 14ch; }
.hl { position: relative; white-space: nowrap; color: var(--blue); z-index: 0; }
.hl::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: .04em; height: .34em; z-index: -1;
  background: var(--amber); border-radius: .2em; transform: rotate(-1.5deg) scaleX(0); transform-origin: left center;
  animation: marker .7s cubic-bezier(.3,.8,.3,1) .5s forwards; opacity: .85; }
@keyframes marker { to { transform: rotate(-1.5deg) scaleX(1); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Hero benefits animation (8 scenes, 32s loop, repeats forever) ---------- */
.stage { position: relative; width: 100%; max-width: 500px; margin-left: auto; --t: 32s; }
.stage__glow { position: absolute; inset: -40px -60px -20px -40px; border-radius: 50%; z-index: 0; background: radial-gradient(closest-side, #D3E1F5, rgba(238,242,247,0)); }
.stage__device { position: relative; z-index: 1; background: var(--ink); border-radius: 26px; padding: 12px; box-shadow: 0 30px 60px rgba(19,42,76,.28); }
.stage__bar { display: flex; align-items: center; padding: 6px 10px 12px; }
.stage__brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: .92rem; }
.stage__brand b { font-weight: 600; }
.stage__screen { position: relative; height: 430px; background: #F7F9FC; border-radius: 16px; overflow: hidden; }
.scene { position: absolute; inset: 0; padding: 24px 22px 18px; display: flex; flex-direction: column; opacity: 0; animation: var(--t) linear infinite; }
.scene__title { margin: 0; font-family: 'Bricolage Grotesque', var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--ink); letter-spacing: -0.02em; }
.scene__sub { margin: 6px 0 14px; color: var(--muted); font-size: .93rem; }
.stage .ico { width: 20px; height: 20px; }
.stage svg.ch { display: block; overflow: visible; }
.stage svg.ch--mini { overflow: hidden; border-radius: 50%; background: #EAF0FA; margin-bottom: 2px; }
.stage [class*="ch__"], .stage .m-happy, .stage .m-sad, .stage .m-talk { transform-box: view-box; }
.ch__eyes { transform-origin: 60px 66px !important; }

/* characters: always-on life */
.ch__eyes { transform-origin: 60px 68px; animation: blink 4.2s infinite; }
.ch--worker .ch__eyes { animation-delay: -1.3s; } .ch--rep .ch__eyes { animation-delay: -2.1s; } .ch--tech .ch__eyes { animation-delay: -.7s; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.ch__head { transform-origin: 60px 100px; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.ch__arm { transform-origin: 92px 128px; }
.ch--rep .ch__arm, .ch--worker .ch__arm { animation: wave .9s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
.m-talk { transform-origin: 60px 86px; animation: talk .32s ease-in-out infinite alternate; }
@keyframes talk { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes vis1 { 0% { opacity: 0; transform: translateY(12px); } 0.625%, 11.75% { opacity: 1; transform: none; } 12.5%, 100% { opacity: 0; transform: translateY(-12px); } }
.scene--1 { animation-name: vis1; }
@keyframes vis2 { 0%, 12.5% { opacity: 0; transform: translateY(12px); } 13.125%, 24.25% { opacity: 1; transform: none; } 25.0%, 100% { opacity: 0; transform: translateY(-12px); } }
.scene--2 { animation-name: vis2; }
@keyframes vis3 { 0%, 25.0% { opacity: 0; transform: translateY(12px); } 25.625%, 36.75% { opacity: 1; transform: none; } 37.5%, 100% { opacity: 0; transform: translateY(-12px); } }
.scene--3 { animation-name: vis3; }
@keyframes vis4 { 0%, 37.5% { opacity: 0; transform: translateY(12px); } 38.125%, 49.25% { opacity: 1; transform: none; } 50.0%, 100% { opacity: 0; transform: translateY(-12px); } }
.scene--4 { animation-name: vis4; }
@keyframes vis5 { 0%, 50.0% { opacity: 0; transform: translateY(12px); } 50.625%, 61.75% { opacity: 1; transform: none; } 62.5%, 100% { opacity: 0; transform: translateY(-12px); } }
.scene--5 { animation-name: vis5; }
@keyframes vis6 { 0%, 62.5% { opacity: 0; transform: translateY(12px); } 63.125%, 74.25% { opacity: 1; transform: none; } 75.0%, 100% { opacity: 0; transform: translateY(-12px); } }
.scene--6 { animation-name: vis6; }
@keyframes vis7 { 0%, 75.0% { opacity: 0; transform: translateY(12px); } 75.625%, 86.75% { opacity: 1; transform: none; } 87.5%, 100% { opacity: 0; transform: translateY(-12px); } }
.scene--7 { animation-name: vis7; }
@keyframes vis8 { 0%, 87.5% { opacity: 0; transform: translateY(12px); } 88.125%, 99.25% { opacity: 1; transform: none; } 100.0% { opacity: 0; transform: translateY(-12px); } }
.scene--8 { animation-name: vis8; }

.s1 { margin-top: auto; display: grid; grid-template-columns: 118px 1fr; gap: 12px; align-items: end; }
.s1__who { position: relative; }
.s1__sweat { position: absolute; left: 76px; top: 58px; width: 8px; height: 11px; background: #7FB6E8; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0; animation: sweat 1.6s ease-in infinite; }
@keyframes sweat { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(18px); } }
.bill { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px 12px; box-shadow: 0 10px 24px rgba(19,42,76,.12); font-size: .8rem; transform: rotate(1.2deg); }
.bill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #2B5EA7; border-radius: 6px 6px 0 0; }
.bill__head { border-bottom: 1px dashed #C9D3E1; padding-bottom: 8px; margin-bottom: 6px; }
.bill__head b { display: block; color: var(--ink); font-size: .9rem; }
.bill__head small { color: var(--muted); font-size: .72rem; }
.bill__rows { list-style: none; margin: 0; padding: 0; }
.bill__row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; color: #3A4658; font-variant-numeric: tabular-nums; opacity: 0; animation: var(--t) linear infinite; }
.bill__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 7px; opacity: 0; animation: var(--t) linear infinite; animation-name: s1tot; }
.bill__total span { font-weight: 600; color: var(--ink); }
.bill__total b { font-family: var(--font-head); font-size: 1.45rem; color: #B42318; }
.bill__stamp { position: absolute; left: 52%; top: 17%; padding: 6px 14px; border: 4px double #D12A1F; border-radius: 8px; color: #D12A1F; font: 800 1.7rem/1 'Bricolage Grotesque', var(--font-head); letter-spacing: .06em; white-space: nowrap; background: rgba(255,255,255,.55); mix-blend-mode: multiply; opacity: 0; animation: var(--t) linear infinite; animation-name: s1stamp; }
@keyframes s1r0 { 0%, 0.75% { opacity: 0; transform: translateX(-8px); } 1.125%, 100% { opacity: 1; transform: none; } }
.bill__row--1 { animation-name: s1r0; }
@keyframes s1r1 { 0%, 1.375% { opacity: 0; transform: translateX(-8px); } 1.75%, 100% { opacity: 1; transform: none; } }
.bill__row--2 { animation-name: s1r1; }
@keyframes s1r2 { 0%, 2.0% { opacity: 0; transform: translateX(-8px); } 2.375%, 100% { opacity: 1; transform: none; } }
.bill__row--3 { animation-name: s1r2; }
@keyframes s1r3 { 0%, 2.625% { opacity: 0; transform: translateX(-8px); } 3.0%, 100% { opacity: 1; transform: none; } }
.bill__row--4 { animation-name: s1r3; }
@keyframes s1r4 { 0%, 3.25% { opacity: 0; transform: translateX(-8px); } 3.625%, 100% { opacity: 1; transform: none; } }
.bill__row--5 { animation-name: s1r4; }
@keyframes s1r5 { 0%, 3.875% { opacity: 0; transform: translateX(-8px); } 4.25%, 100% { opacity: 1; transform: none; } }
.bill__row--6 { animation-name: s1r5; }
@keyframes s1r6 { 0%, 4.5% { opacity: 0; transform: translateX(-8px); } 4.875%, 100% { opacity: 1; transform: none; } }
.bill__row--7 { animation-name: s1r6; }
@keyframes s1tot { 0%, 5.5% { opacity: 0; transform: translateY(8px) scale(.94); } 6.0%, 100% { opacity: 1; transform: none; } }
@keyframes s1stamp { 0%, 6.875% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.6); } 7.5% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(.92); } 7.875% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1.04); } 8.25%, 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
@keyframes s1shake { 0%, 7.375% { transform: rotate(1.2deg); } 7.5% { transform: rotate(1.2deg) translate(3px, 2px); } 7.625% { transform: rotate(1.2deg) translate(-3px, -1px); } 7.75%, 100% { transform: rotate(1.2deg); } }
.bill { animation: var(--t) linear infinite; animation-name: s1shake; }

.s2p { margin-top: auto; display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: end; }
.s2p__who { position: relative; }
.ch--owner-arm .ch__arm { animation: cheer .5s ease-in-out infinite alternate; }
@keyframes cheer { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
.coin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: #7A5000; font: 800 .85rem/26px var(--font-head); text-align: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); opacity: 0; animation: var(--t) linear infinite; }
.coin--1 { left: 100px; top: 10px; animation-name: s2c1; } .coin--2 { left: 118px; top: 52px; animation-name: s2c2; } .coin--3 { left: 4px; top: 0; animation-name: s2c3; }
.s2p__price { position: relative; background: #fff; border: 2px solid var(--ok); border-radius: 20px; padding: 18px 18px 16px; box-shadow: 0 0 0 5px rgba(30,138,90,.1), 0 14px 30px rgba(19,42,76,.12); text-align: center; margin-bottom: 4px; }
.s2p__old { display: inline-block; position: relative; color: #9A3B2E; font: 700 1rem var(--font-head); animation: var(--t) linear infinite; animation-name: s2old; }
.s2p__old::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; background: #C8412F; }
.s2p__low { display: block; color: var(--muted); font-weight: 600; font-size: .9rem; margin-top: 2px; }
.s2p__big { display: block; font: 800 3.6rem/1 'Bricolage Grotesque', var(--font-head); color: var(--ok); letter-spacing: -0.03em; margin: 2px 0; animation: var(--t) linear infinite; animation-name: s2big; }
.s2p__per { display: block; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.s2p__chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.s2p__chips li { display: inline-flex; align-items: center; gap: 4px; background: #E6F4EC; color: var(--ok); font-weight: 700; font-size: .76rem; border-radius: 999px; padding: 4px 9px; opacity: 0; animation: var(--t) linear infinite; }
.s2p__chips .ico { width: 13px; height: 13px; }
@keyframes s2old { 0%, 14.375% { opacity: 1; } 16.25%, 100% { opacity: .45; } }
@keyframes s2big { 0%, 14.0% { opacity: 0; transform: translateY(-40px) scale(.7); } 15.0% { opacity: 1; transform: translateY(6px) scale(1.08); } 15.625% { transform: translateY(-2px) scale(.98); } 16.125%, 100% { opacity: 1; transform: none; } }
@keyframes s2ch0 { 0%, 16.875% { opacity: 0; transform: translateY(8px) scale(.94); } 17.625%, 100% { opacity: 1; transform: none; } }
.s2p__chips li:nth-child(1) { animation-name: s2ch0; }
@keyframes s2ch1 { 0%, 17.75% { opacity: 0; transform: translateY(8px) scale(.94); } 18.5%, 100% { opacity: 1; transform: none; } }
.s2p__chips li:nth-child(2) { animation-name: s2ch1; }
@keyframes s2ch2 { 0%, 18.625% { opacity: 0; transform: translateY(8px) scale(.94); } 19.375%, 100% { opacity: 1; transform: none; } }
.s2p__chips li:nth-child(3) { animation-name: s2ch2; }
@keyframes s2ch3 { 0%, 19.5% { opacity: 0; transform: translateY(8px) scale(.94); } 20.25%, 100% { opacity: 1; transform: none; } }
.s2p__chips li:nth-child(4) { animation-name: s2ch3; }
@keyframes s2c1 { 0%, 16.0% { opacity: 0; transform: translateY(20px) scale(.6); } 16.625% { opacity: 1; transform: translateY(-6px) scale(1.1); } 17.5%, 100% { opacity: 1; transform: none; } }
@keyframes s2c2 { 0%, 17.0% { opacity: 0; transform: translateY(20px) scale(.6); } 17.625% { opacity: 1; transform: translateY(-6px) scale(1.1); } 18.5%, 100% { opacity: 1; transform: none; } }
@keyframes s2c3 { 0%, 18.0% { opacity: 0; transform: translateY(20px) scale(.6); } 18.625% { opacity: 1; transform: translateY(-6px) scale(1.1); } 19.5%, 100% { opacity: 1; transform: none; } }

.s2 { margin-top: auto; display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: end; }
.s2__who { position: relative; }
.spark { position: absolute; width: 10px; height: 10px; background: var(--amber); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.6s ease-in-out infinite; }
.spark--1 { left: 8px; top: 20px; } .spark--2 { right: 4px; top: 4px; animation-delay: -.5s; width: 14px; height: 14px; } .spark--3 { right: 0; top: 70px; animation-delay: -1s; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.s2__tiles { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s2__tiles li { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px; font-weight: 600; font-size: .82rem; color: var(--ink); opacity: 0; animation: var(--t) linear infinite; }
.s2__tiles li .ico { color: var(--blue); width: 18px; height: 18px; flex: none; }
@keyframes s2t0 { 0%, 13.5% { opacity: 0; transform: translateX(-16px) scale(.9); } 14.25%, 100% { opacity: 1; transform: none; } }
.s2__tiles li:nth-child(1) { animation-name: s2t0; }
@keyframes s2t1 { 0%, 14.375% { opacity: 0; transform: translateX(-16px) scale(.9); } 15.125%, 100% { opacity: 1; transform: none; } }
.s2__tiles li:nth-child(2) { animation-name: s2t1; }
@keyframes s2t2 { 0%, 15.25% { opacity: 0; transform: translateX(-16px) scale(.9); } 16.0%, 100% { opacity: 1; transform: none; } }
.s2__tiles li:nth-child(3) { animation-name: s2t2; }
@keyframes s2t3 { 0%, 16.125% { opacity: 0; transform: translateX(-16px) scale(.9); } 16.875%, 100% { opacity: 1; transform: none; } }
.s2__tiles li:nth-child(4) { animation-name: s2t3; }
@keyframes s2t4 { 0%, 17.0% { opacity: 0; transform: translateX(-16px) scale(.9); } 17.75%, 100% { opacity: 1; transform: none; } }
.s2__tiles li:nth-child(5) { animation-name: s2t4; }
@keyframes s2t5 { 0%, 17.875% { opacity: 0; transform: translateX(-16px) scale(.9); } 18.625%, 100% { opacity: 1; transform: none; } }
.s2__tiles li:nth-child(6) { animation-name: s2t5; }
@keyframes s2t6 { 0%, 18.75% { opacity: 0; transform: translateX(-16px) scale(.9); } 19.5%, 100% { opacity: 1; transform: none; } }
.s2__tiles li:nth-child(7) { animation-name: s2t6; }
@keyframes s2t7 { 0%, 19.625% { opacity: 0; transform: translateX(-16px) scale(.9); } 20.375%, 100% { opacity: 1; transform: none; } }
.s2__tiles li:nth-child(8) { animation-name: s2t7; }

.s3 { position: relative; margin-top: auto; height: 250px; }
.s3__map { position: absolute; inset: 10px 0 20px; width: 100%; height: 220px; }
.s3__line { fill: none; stroke: #9FB6DA; stroke-width: 3; stroke-dasharray: 200; stroke-dashoffset: 200; vector-effect: non-scaling-stroke; animation: var(--t) linear infinite; animation-name: s3draw; }
.s3__dot { fill: none; stroke: var(--amber); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1 400; vector-effect: non-scaling-stroke; animation: packet 2.2s linear infinite; }
.s3__dot--2 { animation-delay: -1.1s; stroke: var(--ok); }
@keyframes packet { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -330; } }
.s3__hub { position: absolute; left: 50%; top: 120px; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 18px; background: var(--ink); color: var(--amber); display: grid; place-items: center; z-index: 2; box-shadow: 0 0 0 0 rgba(43,94,167,.4); animation: hubpulse 2s infinite; }
@keyframes hubpulse { 70% { box-shadow: 0 0 0 16px rgba(43,94,167,0); } 100% { box-shadow: 0 0 0 0 rgba(43,94,167,0); } }
.s3__hub .ico { width: 30px; height: 30px; }
.s3__node { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px 8px; box-shadow: 0 6px 16px rgba(19,42,76,.08); opacity: 0; animation: var(--t) linear infinite; }
.s3__node b { font-size: .8rem; color: var(--ink); } .s3__node small { font-size: .7rem; color: var(--muted); }
.s3__node--a { left: 0; top: 0; animation-name: s3a; } .s3__node--b { right: 0; top: 0; animation-name: s3b; } .s3__node--c { left: 50%; bottom: 0; margin-left: -52px; width: 104px; animation-name: s3c; }
.s3__tag { position: absolute; right: 0; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; background: #E6F4EC; color: var(--ok); font-weight: 700; font-size: .78rem; border-radius: 999px; padding: 6px 10px; opacity: 0; animation: var(--t) linear infinite; animation-name: s3tag; }
.s3__tag .ico { width: 16px; height: 16px; }
@keyframes s3draw { 0%, 38.5% { stroke-dashoffset: 200; } 41.875%, 100% { stroke-dashoffset: 0; } }
@keyframes s3a { 0%, 39.0% { opacity: 0; transform: translateY(8px) scale(.94); } 39.75%, 100% { opacity: 1; transform: none; } }
@keyframes s3b { 0%, 40.0% { opacity: 0; transform: translateY(8px) scale(.94); } 40.75%, 100% { opacity: 1; transform: none; } }
@keyframes s3c { 0%, 41.0% { opacity: 0; transform: translateY(8px) scale(.94); } 41.75%, 100% { opacity: 1; transform: none; } }
@keyframes s3tag { 0%, 44.375% { opacity: 0; transform: translateY(8px) scale(.94); } 45.125%, 100% { opacity: 1; transform: none; } }

.s4 { margin-top: auto; display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: end; }
.s4__who { position: relative; }
.waves { position: absolute; left: 90px; top: 34px; width: 30px; height: 40px; }
.waves i { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; border: 3px solid var(--blue); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: translateY(-50%) rotate(45deg); opacity: 0; animation: sound 1.2s ease-out infinite; }
.waves i:nth-child(2) { animation-delay: .4s; } .waves i:nth-child(3) { animation-delay: .8s; }
@keyframes sound { 0% { opacity: .9; transform: translateY(-50%) rotate(45deg) scale(.6); } 100% { opacity: 0; transform: translate(12px, -50%) rotate(45deg) scale(1.8); } }
.stage .bubble { background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 10px 14px; color: var(--ink); font-size: .92rem; box-shadow: 0 6px 16px rgba(19,42,76,.08); margin-bottom: 10px; }
.s4__rows { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 7px; }
.s4__row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 7px 10px; font-weight: 600; font-size: .92rem; color: var(--ink); animation: var(--t) linear infinite; }
.s4__row i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; font: 800 .85rem var(--font-head); }
.ch--caller .m-happy { opacity: 0; animation: var(--t) linear infinite; animation-name: s4happy; }
.ch--caller .m-talk { animation: talk .32s ease-in-out infinite alternate, var(--t) linear infinite s4talk; }
@keyframes s4happy { 0%, 53.75% { opacity: 0; } 54.125%, 100% { opacity: 1; } }
@keyframes s4talk { 0%, 53.75% { opacity: 1; } 54.125%, 100% { opacity: 0; } }
@keyframes s4r0 { 0%, 52.75% { background: #fff; border-color: var(--line); transform: none; } 53.0%, 54.625% { background: #FFF4DB; border-color: var(--amber); transform: translateX(6px); } 54.875%, 100% { background: #fff; border-color: var(--line); transform: none; } }
.s4__row--1 { animation-name: s4r0; }
@keyframes s4r1 { 0%, 54.875% { background: #fff; border-color: var(--line); transform: none; } 55.125%, 56.75% { background: #FFF4DB; border-color: var(--amber); transform: translateX(6px); } 57.0%, 100% { background: #fff; border-color: var(--line); transform: none; } }
.s4__row--2 { animation-name: s4r1; }
@keyframes s4r2 { 0%, 57.0% { background: #fff; border-color: var(--line); transform: none; } 57.25%, 58.875% { background: #FFF4DB; border-color: var(--amber); transform: translateX(6px); } 59.125%, 100% { background: #fff; border-color: var(--line); transform: none; } }
.s4__row--3 { animation-name: s4r2; }
@keyframes s4r3 { 0%, 59.125% { background: #fff; border-color: var(--line); transform: none; } 59.375%, 61.0% { background: #FFF4DB; border-color: var(--amber); transform: translateX(6px); } 61.25%, 100% { background: #fff; border-color: var(--line); transform: none; } }
.s4__row--4 { animation-name: s4r3; }

.s5 { margin-top: auto; display: grid; gap: 10px; }
.s5__say { justify-self: start; background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 10px 14px; color: var(--ink); font-size: .92rem; box-shadow: 0 6px 16px rgba(19,42,76,.08); opacity: 0; animation: var(--t) linear infinite; animation-name: s5say; }
.s5__flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; }
.s5__who { position: relative; }
.s5__pipe { position: relative; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.s5__pulse { position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: var(--blue); border-radius: 2px; animation: flow 1.1s linear infinite; }
.s5__pipe--2 .s5__pulse { background: var(--ok); }
@keyframes flow { to { left: 100%; } }
.s5__pipe--2 { opacity: 0; animation: var(--t) linear infinite; animation-name: s5pipe2; }
.s5__ai { position: relative; width: 86px; padding: 10px 6px; border-radius: 16px; background: var(--ink); color: #fff; text-align: center; opacity: 0; animation: var(--t) linear infinite; animation-name: s5ai; }
.s5__ai::before { content: ""; position: absolute; inset: -5px; border-radius: 20px; border: 2px solid var(--amber); animation: aiglow 1.4s ease-in-out infinite; }
@keyframes aiglow { 0%, 100% { opacity: .2; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.03); } }
.s5__ai b { display: block; color: var(--amber); font: 800 1.2rem var(--font-head); letter-spacing: .04em; }
.s5__ai small { font-size: .72rem; color: #C9D6EA; line-height: 1.3; } .s5__ai strong { color: #fff; font-size: .82rem; }
.s5__who--rep { opacity: 0; animation: var(--t) linear infinite; animation-name: s5rep; }
.s5__ok { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; background: var(--ok); color: #fff; font-size: .7rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.s5__ok .ico { width: 13px; height: 13px; }
.ch--caller2 .m-happy { opacity: 0; animation: var(--t) linear infinite; animation-name: s5happy; }
.ch--caller2 .m-talk { animation: talk .32s ease-in-out infinite alternate, var(--t) linear infinite s5talk; }
@keyframes s5say { 0%, 63.25% { opacity: 0; transform: translateY(8px) scale(.94); } 64.0%, 100% { opacity: 1; transform: none; } }
@keyframes s5ai { 0%, 66.25% { opacity: 0; transform: translateY(8px) scale(.94); } 67.0%, 100% { opacity: 1; transform: none; } }
@keyframes s5pipe2 { 0%, 68.125% { opacity: 0; transform: translateY(8px) scale(.94); } 68.875%, 100% { opacity: 1; transform: none; } }
@keyframes s5rep { 0%, 69.0% { opacity: 0; transform: translateY(8px) scale(.94); } 69.75%, 100% { opacity: 1; transform: none; } }
@keyframes s5happy { 0%, 67.5% { opacity: 0; } 67.875%, 100% { opacity: 1; } }
@keyframes s5talk { 0%, 67.5% { opacity: 1; } 67.875%, 100% { opacity: 0; } }

.s6 { margin-top: auto; display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: end; }
.s6__col { display: grid; gap: 8px; margin-bottom: 6px; }
.s6__wave { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; color: var(--blue); }
.s6__wave small { color: var(--muted); font-size: .78rem; margin-left: auto; }
.s6__bars { display: flex; align-items: center; gap: 4px; height: 26px; }
.s6__bars i { width: 4px; border-radius: 2px; background: var(--blue); height: 30%; animation: wv 1s ease-in-out infinite; }
.s6__bars i:nth-child(3n) { animation-delay: -.3s; } .s6__bars i:nth-child(3n+1) { animation-delay: -.6s; } .s6__bars i:nth-child(4n) { animation-delay: -.8s; }
@keyframes wv { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.s6__ai { justify-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); opacity: 0; animation: var(--t) linear infinite; animation-name: s6ai; }
.s6__ai span { background: var(--ink); color: var(--amber); font: 800 .75rem var(--font-head); padding: 3px 7px; border-radius: 6px; animation: aiglow 1.4s ease-in-out infinite; }
.s6__mail { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 20px rgba(19,42,76,.08); opacity: 0; animation: var(--t) linear infinite; animation-name: s6m; }
.s6__head { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink); margin-bottom: 6px; }
.s6__head .ico { color: var(--blue); }
.s6__text { margin: 0; color: var(--ink); font-size: .9rem; line-height: 1.45; clip-path: inset(0 100% 0 0); animation: var(--t) linear infinite; animation-name: s6t; }
@keyframes s6ai { 0%, 76.875% { opacity: 0; transform: translateY(8px) scale(.94); } 77.625%, 100% { opacity: 1; transform: none; } }
@keyframes s6m { 0%, 78.5% { opacity: 0; transform: translateY(8px) scale(.94); } 79.25%, 100% { opacity: 1; transform: none; } }
@keyframes s6t { 0%, 79.25% { clip-path: inset(0 100% 0 0); } 84.75%, 100% { clip-path: inset(0 0 0 0); } }

.s7 { position: relative; margin-top: auto; display: grid; grid-template-columns: 1fr 112px; grid-template-rows: auto auto; gap: 10px 8px; align-items: end; }
.s7__row { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.s7__dev, .s7__jack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.s7__dev .ico, .s7__jack .ico { width: 50px; height: 50px; padding: 11px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.s7 small { font-size: .7rem; color: var(--muted); text-align: center; }
.s7__wire { position: relative; height: 30px; }
.s7__half { position: absolute; top: 13px; height: 5px; width: 50%; border-radius: 3px; background: repeating-linear-gradient(90deg, #B87333 0 10px, #D9955A 10px 20px); animation: var(--t) linear infinite; }
.s7__half--l { left: 0; animation-name: s7l; } .s7__half--r { right: 0; animation-name: s7r; }
.s7__cut { position: absolute; top: -8px; left: 50%; font-size: 1.9rem; line-height: 1; color: #C8412F; opacity: 0; animation: var(--t) linear infinite; animation-name: s7cut; }
.s7__new { display: grid; gap: 8px; margin-bottom: 8px; }
.s7__chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: .9rem; opacity: 0; animation: var(--t) linear infinite; }
.s7__ata { background: #FFF4DB; color: #7A5000; animation-name: s7a; } .s7__cloud { background: var(--ink); color: #fff; animation-name: s7b; } .s7__ok { background: #E6F4EC; color: var(--ok); animation-name: s7c; }
.s7__cloud .ico { color: var(--amber); }
.ch--tech .ch__arm { opacity: 0; transform-origin: 92px 128px; animation: var(--t) linear infinite; animation-name: s7thumb; }
@keyframes s7cut { 0%, 89.0% { opacity: 0; transform: translate(-160px, 0) rotate(-20deg); } 90.5% { opacity: 1; transform: translate(-12px, 0) rotate(0); } 91.25% { opacity: 1; transform: translate(-12px, 0) rotate(-12deg); } 92.5%, 100% { opacity: 0; transform: translate(-12px, 14px) rotate(-12deg); } }
@keyframes s7l { 0%, 91.25% { transform: none; opacity: 1; } 92.5%, 100% { transform: translateX(-14px) rotate(-6deg); opacity: .35; } }
@keyframes s7r { 0%, 91.25% { transform: none; opacity: 1; } 92.5%, 100% { transform: translateX(14px) rotate(6deg); opacity: .35; } }
@keyframes s7a { 0%, 92.75% { opacity: 0; transform: translateY(8px) scale(.94); } 93.5%, 100% { opacity: 1; transform: none; } }
@keyframes s7b { 0%, 94.25% { opacity: 0; transform: translateY(8px) scale(.94); } 95.0%, 100% { opacity: 1; transform: none; } }
@keyframes s7c { 0%, 95.75% { opacity: 0; transform: translateY(8px) scale(.94); } 96.5%, 100% { opacity: 1; transform: none; } }
@keyframes s7thumb { 0%, 96.25% { opacity: 0; transform: rotate(40deg); } 97.0% { opacity: 1; transform: rotate(-10deg); } 97.75%, 100% { opacity: 1; transform: rotate(0); } }

.stage__steps { position: relative; z-index: 1; list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.stage__steps li { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; position: relative; }
.stage__steps li::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; animation: var(--t) linear infinite; }
@keyframes st0 { 0% { transform: scaleX(0); } 12.5% { transform: scaleX(1); } 12.51%, 100% { transform: scaleX(0); } }
.stage__steps li:nth-child(1)::after { animation-name: st0; }
@keyframes st1 { 0%, 12.5% { transform: scaleX(0); } 25.0% { transform: scaleX(1); } 25.01%, 100% { transform: scaleX(0); } }
.stage__steps li:nth-child(2)::after { animation-name: st1; }
@keyframes st2 { 0%, 25.0% { transform: scaleX(0); } 37.5% { transform: scaleX(1); } 37.51%, 100% { transform: scaleX(0); } }
.stage__steps li:nth-child(3)::after { animation-name: st2; }
@keyframes st3 { 0%, 37.5% { transform: scaleX(0); } 50.0% { transform: scaleX(1); } 50.01%, 100% { transform: scaleX(0); } }
.stage__steps li:nth-child(4)::after { animation-name: st3; }
@keyframes st4 { 0%, 50.0% { transform: scaleX(0); } 62.5% { transform: scaleX(1); } 62.51%, 100% { transform: scaleX(0); } }
.stage__steps li:nth-child(5)::after { animation-name: st4; }
@keyframes st5 { 0%, 62.5% { transform: scaleX(0); } 75.0% { transform: scaleX(1); } 75.01%, 100% { transform: scaleX(0); } }
.stage__steps li:nth-child(6)::after { animation-name: st5; }
@keyframes st6 { 0%, 75.0% { transform: scaleX(0); } 87.5% { transform: scaleX(1); } 87.51%, 100% { transform: scaleX(0); } }
.stage__steps li:nth-child(7)::after { animation-name: st6; }
@keyframes st7 { 0%, 87.5% { transform: scaleX(0); } 100.0% { transform: scaleX(1); } }
.stage__steps li:nth-child(8)::after { animation-name: st7; }

.stage__static { display: none; }
.stage__pause { position: relative; z-index: 1; display: block; margin: 10px auto 0; background: none; border: 0; color: var(--muted); font: 500 .82rem var(--font-body); text-decoration: underline; cursor: pointer; padding: 8px 12px; min-height: 44px; }
.stage__pause:hover { color: var(--ink); }
.stage.is-paused *, .stage.is-paused *::before, .stage.is-paused *::after, .stage.is-offscreen *, .stage.is-offscreen *::before, .stage.is-offscreen *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .stage__device, .stage__steps, .stage__pause { display: none; }
  .hl::after { animation: none; transform: rotate(-1.5deg) scaleX(1); }
  .stage__static { display: grid; position: relative; z-index: 1; list-style: none; margin: 0; padding: 22px; gap: 10px; background: var(--ink); border-radius: 22px; }
  .stage__static li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 12px 14px; font-weight: 600; color: var(--ink); }
  .stage__static .ico { color: var(--blue); }
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .stage { margin: 8px auto 0; } }
@media (max-width: 460px) {
  .stage__screen { height: 450px; }
  .scene { padding: 20px 14px 14px; }
  .scene__title { font-size: 1.35rem; }
  .s1 { grid-template-columns: 1fr; } .s1__who { display: none; } .bill { font-size: .76rem; }
  .s2p { grid-template-columns: 90px 1fr; } .s2p__who .ch { width: 90px; height: auto; } .coin--1 { left: 64px; } .coin--2 { left: 74px; top: 40px; }
  .s2p__big { font-size: 2.8rem; } .s2p__price { padding: 14px 10px; }
  .s2 { grid-template-columns: 1fr; } .s2__who { display: none; }
  .s2__tiles li { font-size: .82rem; padding: 10px; }
  .s4 { grid-template-columns: 84px 1fr; } .s4__who .ch { width: 84px; height: auto; } .waves { left: 66px; top: 22px; }
  .s5__who .ch { width: 72px; height: auto; } .s5__ai { width: 76px; }
  .s6 { grid-template-columns: 1fr 76px; } .s6__who .ch { width: 76px; height: auto; }
  .s7 { grid-template-columns: 1fr 86px; } .s7__who .ch { width: 86px; height: auto; }
  .s3__node { padding: 5px 8px 6px; } .s3__node b { font-size: .74rem; }
  .s3__tag { right: auto; bottom: auto; left: 50%; top: 4px; margin-left: -68px; font-size: .7rem; padding: 5px 8px; }
}

/* audit form extras */
.choice-grid--list .choice span { text-align: left; padding: 10px 12px; line-height: 1.3; }
.subfield { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 16px; }
#brands[hidden] { display: none; }
details.optional { border-top: 1px solid #C9D3E1; padding-top: 12px; }
details.optional summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 6px 0; }
details.optional[open] { display: grid; gap: 16px; }