/* Small additions for the content update (what-is block, hero sub-line, FAQ blocks, definition lines, facts table). */
.hm-copy h1 .h1-sub { display: block; margin-top: 14px; font-size: clamp(17px, .9vw + 13px, 23px); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: #3a4a5a; }

/* What is Yantra24x7? */
.wi-sec { background: #fff; }
.wi { display: grid; grid-template-columns: minmax(240px, .8fr) 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.wi-l h2 { margin-top: 10px; }
.wi-p { margin: 0; max-width: 68ch; font-size: var(--fs-lead); line-height: 1.75; color: var(--mute); }

.plt-more { display: inline-block; margin-left: 4px; font-weight: 700; color: #c25e00; white-space: nowrap; }
.ba-head p strong, .ws-head p strong { color: var(--ink); }
.sbs .sbq-l h2.sbq-t { margin: 0; font-size: clamp(26px, 3vw, 38px) !important; line-height: 1.15 !important; font-weight: 800; letter-spacing: -.03em !important; color: #fafaf8; max-width: 14ch; }

/* generic "plain definition" line used under a first mention */
.defn { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--mute); }
.defn b { color: var(--ink); }

/* visible FAQ block on light pages */
.faq-sec { background: #fff; }
.faq-w { display: grid; grid-template-columns: minmax(240px, .8fr) 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq-w h2 { margin: 10px 0 0; }
.faq-l p { margin: 14px 0 0; max-width: 40ch; color: var(--mute); }
.faq-r details { border-top: 1px solid var(--line); }
.faq-r details:last-child { border-bottom: 1px solid var(--line); }
.faq-r summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.faq-r summary::-webkit-details-marker { display: none; }
.faq-r summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff3e3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e56f06' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.faq-r details[open] summary::after { transform: rotate(45deg); }
.faq-r summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; }
.faq-r details p { margin: 0 0 20px; max-width: 60ch; font-size: 15px; line-height: 1.7; color: var(--mute); }

/* facts table (Contact > About) */
.facts { width: 100%; max-width: 760px; margin-top: 18px; border-collapse: collapse; font-size: 15px; }
.facts th, .facts td { padding: 11px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.facts th { width: 34%; font-weight: 700; color: var(--ink); }
.facts td { color: #3a4a5a; }

/* data table: protocol meanings, problem -> module */
.dt-wrap { margin-top: 22px; overflow-x: auto; }
.dt { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.dt th, .dt td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dt th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #7a8794; font-weight: 700; }
.dt td:first-child { font-weight: 700; color: var(--ink); }

.last-up { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #8a97a6; }

@media (max-width: 800px) { .wi, .faq-w { grid-template-columns: 1fr; } .faq-r summary { font-size: 16px; } }
.alt-bg { background: #fdf8f1; }
.defn b { color: var(--ink); }

/* hero headline shown under the H1 on inner pages */
.hero-line { margin: 14px 0 0; font-size: clamp(18px, .8vw + 14px, 23px); line-height: 1.3; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }

/* Products: product group headings and module titles (modules are H3 under their product H2) */
.pg-head { padding: var(--sec) 0 0; }
.pg-head h2 { max-width: 760px; }
.pg-head p { margin: 12px 0 0; max-width: 62ch; color: var(--mute); font-size: var(--fs-lead); line-height: 1.65; }
.pg-head + .pd { padding-top: clamp(32px, 3vw, 48px); }
.pd .pd-copy .pd-t { position: relative; z-index: 1; margin: 22px 0 0; font-size: clamp(24px, 1.4vw + 16px, 32px) !important; line-height: 1.15 !important; font-weight: 800; letter-spacing: -.025em; max-width: 520px; }
.pd-p a, .dt a { color: #c25e00; font-weight: 700; }

h1 .h1-sub { display: block; margin-top: 12px; font-size: clamp(17px, .9vw + 13px, 24px); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: #3a4a5a; }
.g-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.gv-d { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--mute); }

.bq { margin: 16px 0 4px; font-size: 13px !important; line-height: 1.2; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #c25e00; }
.mnote-h { margin: 26px 0 0; font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.mnote-h + .mnote { margin-top: 6px; }
.count-date { margin-left: 8px; font-size: 13px; font-weight: 600; opacity: .8; }

/* Contact */
.mform-head .mf-h { margin: 4px 0 0; max-width: none; font-size: 26px !important; line-height: 1.15 !important; font-weight: 800; letter-spacing: -.02em !important; color: #fff; }
@media (max-width: 560px) { .mform-head .mf-h { font-size: 22px !important; } }
.c-cta { margin-top: 18px; }
.c-trust-p { margin: 8px 0 0; font-size: var(--fs-lead); color: var(--mute); }
.c-trust-p b { color: var(--ink); }
.steps-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 560px; }
.steps-l li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; color: #3a4a5a; }
.steps-l b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 14px; font-weight: 800; }
.defn a { color: #c25e00; font-weight: 700; }

/* v2: IoT-led copy */
.iot-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0 8px; padding: 0; list-style: none; }
.iot-3 li { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e6eaef; }
.iot-3 b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.iot-3 span { font-size: 14px; line-height: 1.6; color: var(--mute); }
@media (max-width: 800px) { .iot-3 { grid-template-columns: 1fr; } }
.wi-ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.6; color: #3a4a5a; }
.wi-ul li::marker { color: #f7861e; }
.wi-ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute); }
.wi-ol b { color: var(--ink); }
.gl-h3b { margin: 28px 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.ws-d b { color: var(--ink); }
.rs-next .wi-ul { margin-top: 14px; }
.rs-next h2 { margin: 0; }
.yf-about { max-width: 46ch; }

/* IoT control-room look: shared header row, pipeline, node strip, spec panel */
:root { --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --ink-d: #121c24; }
.nx3, .why2 { position: relative; padding: clamp(60px, 7vw, 100px) 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.sec-head h2 { margin: 10px 0 0; }
.sec-head p { margin: 14px 0 0; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--mute); }

/* pipeline (dark) */
.nx3 { overflow: clip; color: #fff; background: radial-gradient(50% 70% at 85% 0%, rgba(247,134,30,.2), transparent 65%), radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 24px 24px, var(--ink-d); }
.nx3 .eyebrow { color: #ffb45c; }
.nx3 h2 { color: #fff; }
.nx3 .sec-head p { color: rgba(255,255,255,.7); }
.pipe { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 60px 0 0; padding: 0; list-style: none; }
.pipe::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px); }
.pipe::after { content: ""; position: absolute; top: 26px; left: 12.5%; width: 90px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, transparent, #ffb45c); box-shadow: 0 0 18px 2px rgba(247,134,30,.7); animation: pk 4.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes pk { 0% { left: 12.5%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(87.5% - 90px); opacity: 0; } }
.pipe li { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; padding: 0 clamp(10px, 1.6vw, 24px); text-align: center; }
.nx-node { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #1b2a35; color: #ffb45c; box-shadow: inset 0 0 0 1px rgba(255,180,92,.45), 0 0 0 6px var(--ink-d), 0 16px 28px -14px rgba(247,134,30,.55); }
.nx-node::after { content: ""; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px var(--ink-d), 0 0 12px 2px rgba(61,220,132,.7); animation: led 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes led { 50% { opacity: .35; } }
.nx-tag { margin-top: 22px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffb45c; }
.pipe h3 { margin: 10px 0 0; font-size: clamp(18px, .5vw + 15px, 21px); font-weight: 800; letter-spacing: -.015em; color: #fff; }
.pipe p { margin: 8px 0 0; max-width: 27ch; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.66); }

/* node strip (light) */
.why2 { background: #fdf8f1; }
.strip { display: grid; margin: 40px 0 0; padding: 0; list-style: none; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #e6eaef; overflow: hidden; }
.strip.s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.strip li { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px 24px 26px; transition: background .3s; }
.strip li + li::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: #e6eaef; }
.strip li:hover { background: #fffaf3; }
.pc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pc-top em { font-family: var(--mono); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a97a6; }
.pc-top i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff3e3; color: #d96a00; font-style: normal; }
.strip h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; letter-spacing: -.012em; color: var(--ink); }
.strip p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mute); }

/* spec panel (dark, terminal feel) */
.spec { margin-top: 16px; padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px) clamp(10px, 1.4vw, 18px); border-radius: 22px; color: #fff; background: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--ink-d); box-shadow: 0 36px 56px -40px rgba(16,33,47,.75); }
.spec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-bottom: 18px; }
.spec-head h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(20px, .8vw + 16px, 26px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.spec-head h3 i { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.18), 0 0 12px rgba(61,220,132,.8); animation: led 2.2s ease-in-out infinite; }
.spec-link { font-size: 14px; font-weight: 700; color: #ffb45c; text-decoration: none; }
.spec-link:hover { text-decoration: underline; }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px clamp(18px, 3vw, 40px); margin: 0; }
.spec-grid > div { padding: 12px 0 16px 16px; border-left: 2px solid rgba(255,180,92,.4); }
.spec-grid .wide { grid-column: 1 / -1; }
.spec-grid dt { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffb45c; }
.spec-grid dd { margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.88); }
.spec-grid a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,180,92,.6); text-underline-offset: 3px; }
.spec-grid a:hover { color: #ffb45c; }

@media (max-width: 1100px) {
  .strip.s5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip.s5 li:nth-child(4)::before { display: none; }
  .strip.s5 li:nth-child(n+4) { border-top: 1px solid #e6eaef; }
}
@media (max-width: 900px) {
  .pipe { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .pipe::before { left: 28px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px); }
  .pipe::after { display: none; }
  .pipe li { grid-template-columns: 58px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 20px; padding: 0; }
  .nx-node { grid-row: span 3; }
  .nx-tag { margin-top: 4px; }
  .pipe p { max-width: 44ch; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .strip.s5 { grid-template-columns: 1fr; }
  .strip li::before { display: none !important; }
  .strip li + li { border-top: 1px solid #e6eaef; }
  .spec-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pipe::after, .nx-node::after, .spec-head h3 i { animation: none !important; } .pipe::after { opacity: 0; } }

/* light theme for the IoT sections (no dark panels) */
.nx3 { color: var(--ink); background: radial-gradient(50% 70% at 88% 0%, rgba(247,134,30,.1), transparent 65%), radial-gradient(rgba(16,33,47,.1) 1px, transparent 1.4px) 0 0 / 24px 24px, #fff; }
.nx3 .eyebrow { color: #e56f06; }
.nx3 h2 { color: var(--ink); }
.nx3 .sec-head p { color: var(--mute); }
.pipe::before { background: repeating-linear-gradient(90deg, rgba(16,33,47,.28) 0 6px, transparent 6px 12px); }
.nx-node { background: #fff; color: #e56f06; box-shadow: inset 0 0 0 1px #f3c48c, 0 0 0 6px #fff, 0 14px 26px -14px rgba(247,134,30,.55); }
.nx-node::after { box-shadow: 0 0 0 3px #fff, 0 0 10px 2px rgba(61,220,132,.6); }
.nx-tag { color: #c25e00; }
.pipe h3 { color: var(--ink); }
.pipe p { color: var(--mute); }
.spec { color: var(--ink); background: radial-gradient(rgba(16,33,47,.07) 1px, transparent 1.4px) 0 0 / 22px 22px, #fff; box-shadow: 0 0 0 1px #eadfd0, 0 30px 50px -40px rgba(16,33,47,.35); }
.spec-head h3 { color: var(--ink); }
.spec-head h3 i { box-shadow: 0 0 0 4px rgba(61,220,132,.18), 0 0 10px rgba(61,220,132,.7); }
.spec-link { color: #c25e00; }
.spec-grid > div { border-left-color: #f7b46b; }
.spec-grid dt { color: #c25e00; }
.spec-grid dd { color: #3a4a5a; }
.spec-grid a { color: var(--ink); text-decoration-color: #f7b46b; }
.spec-grid a:hover { color: #c25e00; }
@media (max-width: 900px) { .pipe::before { background: repeating-linear-gradient(180deg, rgba(16,33,47,.28) 0 6px, transparent 6px 12px); } }

/* How does Yantra24x7 work: signal path + step list (light) */
.hw { padding: clamp(60px, 7vw, 100px) 0; background: #fdf8f1; }
.hw-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.hw-l { position: sticky; top: 112px; }
.hw-l h2 { margin: 10px 0 0; }
.hw-l > p { margin: 14px 0 0; max-width: 40ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--mute); }
.hw-flow { display: flex; align-items: center; margin-top: 28px; padding: 22px 20px 18px; border-radius: 22px; background: radial-gradient(rgba(16,33,47,.08) 1px, transparent 1.4px) 0 0 / 20px 20px, #fff; box-shadow: 0 0 0 1px #eadfd0; }
.hw-node { display: grid; justify-items: center; gap: 10px; flex: none; }
.hw-node i { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: #fff; color: #e56f06; box-shadow: inset 0 0 0 1px #f3c48c, 0 12px 22px -14px rgba(247,134,30,.6); }
.hw-node i::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px #fff, 0 0 10px rgba(61,220,132,.6); animation: led 2.2s ease-in-out infinite; }
.hw-node:nth-of-type(2) i::after { animation-delay: .5s; } .hw-node:nth-of-type(3) i::after { animation-delay: 1s; }
.hw-node span { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6a7a8c; }
.hw-wire { position: relative; flex: 1; height: 2px; margin: 0 6px 24px; background: repeating-linear-gradient(90deg, rgba(16,33,47,.28) 0 6px, transparent 6px 12px); overflow: visible; }
.hw-wire::after { content: ""; position: absolute; top: -2px; left: 0; width: 34px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, transparent, #f7861e); box-shadow: 0 0 12px rgba(247,134,30,.7); animation: hwpk 2.6s cubic-bezier(.45,0,.55,1) infinite; }
.hw-wire + .hw-node + .hw-wire::after { animation-delay: .9s; }
@keyframes hwpk { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 34px); opacity: 0; } }
.hw-cta { margin-top: 26px; }
.hw-steps { margin: 0; padding: 0; list-style: none; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #eadfd0; overflow: hidden; }
.hw-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 26px 28px; transition: background .3s; }
.hw-steps li + li { border-top: 1px solid #efe6d8; }
.hw-steps li:hover { background: #fffaf3; }
.hw-n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: #fff3e3; font-family: var(--mono); font-size: 17px; font-weight: 800; letter-spacing: .04em; color: #c25e00; }
.hw-steps h3 { margin: 4px 0 0; font-size: clamp(18px, .5vw + 15px, 21px); font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.hw-steps p { margin: 6px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--mute); }
.hw-steps em { margin-top: 6px; padding: 5px 11px; border-radius: 999px; background: #fff3e3; font-family: var(--mono); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c25e00; white-space: nowrap; }
@media (max-width: 960px) { .hw-in { grid-template-columns: 1fr; } .hw-l { position: static; } .hw-l > p { max-width: 56ch; } }
@media (max-width: 560px) {
  .hw-steps li { grid-template-columns: 48px minmax(0, 1fr); padding: 20px; gap: 14px 16px; }
  .hw-n { width: 48px; height: 48px; font-size: 15px; }
  .hw-steps em { grid-column: 2; justify-self: start; margin-top: 2px; }
  .hw-flow { padding: 18px 12px 14px; } .hw-node i { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .hw-wire::after, .hw-node i::after { animation: none !important; } .hw-wire::after { opacity: 0; } }

/* Solution: centered machine-types header */
.ms-sec .phead { display: grid; justify-items: center; text-align: center; }
.ms-sec .phead h2 { margin-inline: auto; max-width: 18ch; }
.ms-sec .phead p { margin-inline: auto; max-width: 56ch; }

/* Solution: old machine -> gateway -> dashboard story */
.om { padding: clamp(60px, 7vw, 100px) 0; background: #fff; }
.om-head { display: grid; justify-items: center; text-align: center; }
.om-head h2 { margin: 10px auto 0; max-width: 22ch; }
.om-head p { margin: 16px auto 0; max-width: 60ch; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute); }
body .om-sub { margin: clamp(36px, 5vw, 56px) auto 0 !important; max-width: 40ch; text-align: center; font-size: clamp(19px, .6vw + 16px, 24px) !important; line-height: 1.3 !important; letter-spacing: -.015em !important; color: #c25e00; }
.om-flow { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; margin: 28px 0 0; padding: 0; list-style: none; }
.om-st { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 26px; border-radius: 24px; background: #fdf8f1; box-shadow: 0 0 0 1px #eadfd0; }
.om-no { position: absolute; top: 16px; left: 16px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f7861e; font-family: var(--mono); font-size: 14px; font-weight: 800; color: #fff; box-shadow: 0 8px 14px -6px rgba(247,134,30,.7); }
.om-vis { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 168px; margin-bottom: 8px; padding: 22px 14px 18px; border-radius: 18px; background: radial-gradient(rgba(16,33,47,.08) 1px, transparent 1.4px) 0 0 / 18px 18px, #fff; box-shadow: inset 0 0 0 1px #efe6d8; }
.om-chips { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.om-chips li { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: #fff3e3; font-size: 12.5px; font-weight: 700; color: #a85200; white-space: nowrap; }
.om-chips svg { flex: none; color: #e56f06; }
.om-dash { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.om-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #f6f8fb; font-size: 13px; }
.om-row i { width: 9px; height: 9px; border-radius: 50%; }
.om-row i.g { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); } .om-row i.a { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.2); } .om-row i.r { background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.2); }
.om-row b { font-weight: 700; color: var(--ink); } .om-row span { font-size: 12px; font-weight: 700; color: #6a7a8c; }
.om-alert { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; background: #fff3e3; font-size: 12.5px; font-weight: 700; color: #a85200; }
.om-alert svg { flex: none; color: #e56f06; }
.om-dash small { position: absolute; top: 8px; right: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8a97a6; }
.om-st h3 { margin: 4px 0 0; font-size: clamp(18px, .5vw + 15px, 21px); font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.om-st p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mute); }
.om-arrow { position: relative; align-self: center; height: 2px; background: repeating-linear-gradient(90deg, rgba(16,33,47,.3) 0 6px, transparent 6px 12px); }
.om-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; width: 10px; height: 10px; border-top: 2px solid #f7861e; border-right: 2px solid #f7861e; transform: rotate(45deg); }
.om-arrow i { position: absolute; top: -2px; left: 0; width: 20px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, transparent, #f7861e); box-shadow: 0 0 10px rgba(247,134,30,.7); animation: omp 2.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes omp { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 22px); opacity: 0; } }
.om-end { margin: 26px auto 0; padding: 14px 22px; max-width: max-content; border-radius: 999px; background: #fff3e3; font-size: 15px; text-align: center; color: #7a4300; }
.om-end b { color: #c25e00; }
@media (max-width: 960px) {
  .om-flow { grid-template-columns: 1fr; gap: 0; }
  .om-arrow { width: 2px; height: 34px; justify-self: center; background: repeating-linear-gradient(180deg, rgba(16,33,47,.3) 0 6px, transparent 6px 12px); }
  .om-arrow::after { right: -4px; top: auto; bottom: -2px; transform: rotate(135deg); }
  .om-arrow i { display: none; }
  .om-st { max-width: 560px; width: 100%; justify-self: center; }
}
@media (max-width: 480px) { .om-vis { flex-direction: column; gap: 12px; padding-top: 26px; } .om-end { border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .om-arrow i { animation: none !important; opacity: 0; } }

/* make the centered header span the full wrap so it sits on the page centre */
.ms-sec .phead { width: 100%; max-width: none; margin-inline: auto; }
.om-vis { min-height: 216px; }
@media (max-width: 960px) { .om-vis { min-height: 0; } }
body h2.om-sub:not(.yf-h) { font-size: clamp(19px, .6vw + 16px, 24px) !important; line-height: 1.3 !important; letter-spacing: -.015em !important; max-width: 40ch; margin: clamp(32px, 4vw, 48px) auto 0 !important; }

/* ===== video story ===== */
/* Real stock footage + animated overlays. Everything is sized in container units (cqw) so it scales from desktop to phone. */
.cx { padding: clamp(60px, 7vw, 100px) 0 clamp(44px, 5vw, 80px); background: #fdf8f1; }
.cx-head { display: grid; justify-items: center; text-align: center; }
.cx-head h2 { margin: 10px auto 0; max-width: 20ch; }
.cx-head p { margin: 16px auto 0; max-width: 58ch; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute); }
.cx-head .cx-story { margin-top: 18px; padding: 10px 22px; border-radius: 999px; background: #fff3e3; font-size: 16px; color: #7a4300; }
.cx-head .cx-story b { color: #c25e00; }
.vs { position: relative; width: 100%; max-width: 1180px; margin: 36px auto 0; }
.vs-stage { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 30px; background: #1b1a19; cursor: pointer; box-shadow: 0 0 0 1px #eadfd0, 0 50px 80px -56px rgba(247,134,30,.55); isolation: isolate; }
.vs-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0; transition: opacity .9s ease, filter .9s ease, transform 8s ease-out; transform: scale(1.04); }
.vs-v.on { opacity: 1; transform: scale(1.0); }
.vs-stage.halt .vs-v[data-v="1"] { filter: grayscale(1) brightness(.55) contrast(1.05); }
.vs-stage.s2 .vs-v[data-v="2"], .vs-stage.s3 .vs-v[data-v="2"] { filter: brightness(.55) saturate(.8) blur(2px); }
.vs-tint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, rgba(255,160,70,0) 40%, rgba(40,20,5,.35) 100%), linear-gradient(180deg, rgba(25,14,5,.28), rgba(25,14,5,0) 28%, rgba(25,14,5,0) 55%, rgba(25,14,5,.55)); transition: background .6s; }
.vs-stage.s2 .vs-tint, .vs-stage.s3 .vs-tint { background: linear-gradient(180deg, rgba(251,240,225,.2), rgba(251,240,225,.06)), radial-gradient(120% 90% at 50% 40%, rgba(255,160,70,.0) 40%, rgba(40,20,5,.35) 100%); }
.vs-stage > * { z-index: 2; }
.vs-stage > video, .vs-tint { z-index: 0; } .vs-tint { z-index: 1; }
/* step pills */
.vs-acts { position: absolute; left: 2.6cqw; top: 2.2cqw; display: flex; flex-wrap: wrap; gap: .7cqw; margin: 0; padding: 0; list-style: none; z-index: 6; }
.vs-acts button { display: flex; align-items: center; gap: .7cqw; padding: .5cqw 1.3cqw .5cqw .5cqw; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); font: 700 max(11px, 1.15cqw)/1 Inter, system-ui, sans-serif; color: #6a7a8c; cursor: pointer; transition: color .4s, box-shadow .4s; }
.vs-acts i { display: grid; place-items: center; width: max(20px, 2.1cqw); height: max(20px, 2.1cqw); border-radius: 50%; background: #efe6d8; font-style: normal; font-weight: 800; color: #8a97a6; transition: background .4s, color .4s; }
.vs-acts span { white-space: nowrap; }
.vs-acts button.on { color: #c25e00; box-shadow: 0 0 0 2px #f7861e, 0 6px 18px -8px rgba(0,0,0,.45); } .vs-acts button.on i { background: #f7861e; color: #fff; }
.vs-acts button.done i { background: #22c55e; color: #fff; }
.vs-acts button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the clock + the stop */
.vs-clock { position: absolute; right: 2.6cqw; top: 1.8cqw; display: flex; align-items: baseline; gap: .6cqw; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); opacity: 0; transition: opacity .5s; z-index: 6; }
.vs-clock b { font: 800 4.2cqw/1 var(--mono); letter-spacing: -.02em; } .vs-clock span { font: 800 1.5cqw var(--mono); }
.vs-stage.s1:not(.s2) .vs-clock { opacity: 1; } .vs-stage.halt .vs-clock { color: #ff8f8f; }
.vs-halt { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.8); display: grid; justify-items: center; gap: .3cqw; padding: 1.1cqw 2.6cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.94); box-shadow: 0 0 0 .3cqw #e5484d, 0 3cqw 6cqw -2cqw rgba(0,0,0,.6); opacity: 0; transition: opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1); z-index: 5; }
.vs-halt i { position: absolute; left: -1.1cqw; top: -1.1cqw; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 .5cqw rgba(229,72,77,.35); animation: vsblink 1s ease-in-out infinite; }
.vs-halt b { font-size: 2.3cqw; font-weight: 800; letter-spacing: -.02em; color: #b42318; } .vs-halt span { font-size: 1.3cqw; font-weight: 600; color: #5d6b7a; }
@keyframes vsblink { 50% { opacity: .35; transform: scale(.8); } }
.vs-stage.halt:not(.s2) .vs-halt { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* step 2 + 3: the lane  machine signal -> gateway -> one clear message */
.vs-lane { position: absolute; left: 4cqw; right: 4cqw; top: 41%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 1.2cqw; opacity: 0; pointer-events: none; transition: opacity .6s; }
.vs-stage.s2:not(.s3) .vs-lane { opacity: 1; }
.vs-item { position: relative; display: grid; justify-items: center; text-align: center; }
.vs-item > small, .vs-gw > b { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.vs-item > small { top: calc(100% + 1.3cqw); } .vs-gw > b { top: calc(100% + .9cqw); } .vs-gw > small { top: calc(100% + 4.3cqw); }
.vs-clr > small { opacity: 0; transition: opacity .5s; } .vs-stage.clean .vs-clr > small { opacity: 1; }
.vs-item small { font: 700 max(10px, 1.05cqw) var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.vs-bub { display: grid; place-items: center; width: 22cqw; min-height: 12cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.6cqw; text-align: center; background: rgba(255,255,255,.95); font-size: max(12px, 1.5cqw); line-height: 1.35; font-weight: 700; color: #10212f; box-shadow: 0 2cqw 4cqw -1.6cqw rgba(0,0,0,.6); }
.vs-gib .vs-bub { font-family: var(--mono); font-size: max(11px, 1.5cqw); color: #6a7a8c; box-shadow: 0 0 0 .22cqw #cdd6e0, 0 2cqw 4cqw -1.6cqw rgba(0,0,0,.5); animation: vsnoise .5s steps(2) infinite; }
@keyframes vsnoise { 0% { box-shadow: 0 0 0 .22cqw #e5484d, 0 2cqw 4cqw -1.6cqw rgba(0,0,0,.5); } 33% { box-shadow: 0 0 0 .22cqw #3b82f6, 0 2cqw 4cqw -1.6cqw rgba(0,0,0,.5); } 66% { box-shadow: 0 0 0 .22cqw #22c55e, 0 2cqw 4cqw -1.6cqw rgba(0,0,0,.5); } }
.vs-clr .vs-bub { box-shadow: 0 0 0 .3cqw #f7861e, 0 2cqw 4cqw -1.6cqw rgba(247,134,30,.5); opacity: 0; transform: translateX(-1cqw); transition: opacity .5s, transform .5s; }
.vs-stage.clean .vs-clr .vs-bub { opacity: 1; transform: none; }
.vs-w { flex: none; height: auto; color: #ffb45c; transform: rotate(90deg); filter: drop-shadow(0 0 1cqw rgba(247,134,30,.8)); }
.vs-w path { opacity: .2; animation: vswave 1.1s ease-in-out infinite; } .vs-w .a2 { animation-delay: .18s; } .vs-w .a3 { animation-delay: .36s; }
.vs-w.w1 { color: #ffd9a6; } .vs-w.w2 { opacity: 0; transition: opacity .4s; } .vs-stage.clean .vs-w.w2 { opacity: 1; }
@keyframes vswave { 0%, 100% { opacity: .15; } 45% { opacity: 1; } }
.vs-w.w1 { width: 8.5cqw; flex: none; } .vs-w.w2 { width: 8.5cqw; flex: none; }
.vs-plate { position: relative; display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #fbe9d3 75%); box-shadow: 0 0 0 .5cqw #f7861e, 0 0 0 1.4cqw rgba(247,134,30,.28), 0 3cqw 7cqw -2cqw rgba(247,134,30,.9); }
.vs-plate img { width: 9.6cqw; height: auto; transform: translateY(.4cqw); filter: drop-shadow(0 1cqw .8cqw rgba(0,0,0,.35)); }
.vs-plate .r1, .vs-plate .r2 { position: absolute; inset: 0; border-radius: 50%; border: .25cqw solid #f7861e; opacity: 0; animation: vsring 2.4s ease-out infinite; } .vs-plate .r2 { animation-delay: 1.2s; }
@keyframes vsring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
.vs-gw b { font-size: 1.9cqw; font-weight: 800; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
/* step 3: cloud storage */
.vs-store { position: absolute; left: 50%; top: 16%; width: 42cqw; transform: translateX(-50%) translateY(2cqw) scale(.96); padding: 1.3cqw 1.8cqw 1.4cqw; border-radius: 2cqw; background: rgba(255,255,255,.95); box-shadow: 0 4cqw 8cqw -3cqw rgba(0,0,0,.6); opacity: 0; transition: opacity .6s, transform .7s cubic-bezier(.2,.8,.2,1); z-index: 5; }
.vs-stage.s3:not(.s4) .vs-store { opacity: 1; transform: translateX(-50%); }
.vs-sh { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 1.2cqw; }
.vs-cl { display: grid; place-items: center; width: 5.6cqw; height: 4.4cqw; border-radius: 1.4cqw; background: linear-gradient(135deg, #e8f2ff, #d6e8ff); }
.vs-cl svg { width: 4cqw; height: auto; } .vs-sh b { display: block; font-size: 1.9cqw; font-weight: 800; color: #10212f; } .vs-sh small { font-size: 1.2cqw; color: #6a7a8c; }
.vs-store ul { display: grid; gap: .8cqw; margin: 0; padding: 0; list-style: none; }
.vs-store li { display: grid; grid-template-columns: 8cqw 8cqw 1fr; align-items: center; gap: 1cqw; padding: .55cqw 1.1cqw; border-radius: 1.1cqw; background: #f3f6f9; font-size: 1.3cqw; opacity: 0; transform: translateY(-3cqw); }
.vs-stage.s3:not(.s4) .vs-store li { animation: vsdrop .6s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i) * .5s + .5s); }
@keyframes vsdrop { from { opacity: 0; transform: translateY(-3cqw); } to { opacity: 1; transform: none; } }
.vs-store li { border-left: .45cqw solid #cbd5e1; } .vs-store li.bad { border-left-color: #e5484d; background: #fdf1f0; } .vs-store li.mid { border-left-color: #f5a524; } .vs-store li.ok { border-left-color: #22c55e; } .vs-store li span { white-space: nowrap; }
.vs-store li em { font: 700 1.15cqw var(--mono); font-style: normal; color: #c25e00; } .vs-store li b { font-weight: 800; color: #10212f; white-space: nowrap; } .vs-store li span { color: #5d6b7a; }
.vs-ok { display: flex; align-items: center; gap: .8cqw; margin: 1.1cqw 0 0; font-size: 1.5cqw; font-weight: 800; color: #15803d; opacity: 0; transition: opacity .4s 2.2s; }
.vs-ok i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #22c55e; position: relative; } .vs-ok i::after { content: ""; position: absolute; left: .85cqw; top: .45cqw; width: .55cqw; height: 1.1cqw; border: solid #fff; border-width: 0 .3cqw .3cqw 0; transform: rotate(45deg); }
.vs-stage.s3 .vs-ok { opacity: 1; }
/* step 4: the phone and the person */
.vs-phone { position: absolute; right: 4cqw; top: 11%; width: 18.5cqw; transform: translateY(4cqw); opacity: 0; transition: opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1); z-index: 5; }
.vs-stage.s4 .vs-phone { opacity: 1; transform: none; }
.vs-dev { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 18.2; padding: 1.3cqw 1.1cqw 1.2cqw; border: .75cqw solid #14181d; border-radius: 3.6cqw; color: #fff; overflow: hidden;
  background: radial-gradient(75% 42% at 88% 6%, rgba(255,214,160,.95), rgba(255,214,160,0) 70%), radial-gradient(85% 50% at 6% 62%, rgba(240,98,80,.85), rgba(240,98,80,0) 72%), linear-gradient(170deg, #ff9a56 0%, #e65a5c 46%, #5a50c8 100%);
  box-shadow: 0 0 0 .18cqw #3a424c, 0 4cqw 8cqw -2cqw rgba(0,0,0,.7), inset 0 0 0 .1cqw rgba(255,255,255,.25); }
.vs-stage.s4 .vs-dev { animation: vsbuzz .5s linear 1.2s 2; }
@keyframes vsbuzz { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-.5cqw); } 40% { transform: translateX(.5cqw); } 60% { transform: translateX(-.4cqw); } 80% { transform: translateX(.4cqw); } }
.vs-isl { position: absolute; left: 50%; top: .8cqw; width: 5cqw; height: 1.4cqw; margin-left: -2.5cqw; border-radius: 1cqw; background: #0b0d10; z-index: 2; }
.vs-sb { display: flex; justify-content: space-between; align-items: center; padding: .5cqw .9cqw 0 1cqw; font: 700 max(10px, .95cqw)/1 Inter, system-ui, sans-serif; letter-spacing: .01em; }
.vs-sig { display: flex; align-items: flex-end; gap: .2cqw; } .vs-sig i { width: .3cqw; background: #fff; border-radius: .1cqw; } .vs-sig i:nth-child(1) { height: .45cqw; } .vs-sig i:nth-child(2) { height: .65cqw; } .vs-sig i:nth-child(3) { height: .85cqw; } .vs-sig i:nth-child(4) { height: 1.05cqw; }
.vs-sig u { width: 1.5cqw; height: .75cqw; margin-left: .45cqw; border-radius: .22cqw; border: .1cqw solid rgba(255,255,255,.85); background: linear-gradient(90deg, #fff 78%, transparent 78%); }
.vs-lock { display: grid; justify-items: center; margin: 1.5cqw 0 1.6cqw; text-shadow: 0 .2cqw 1.2cqw rgba(0,0,0,.22); }
.vs-lk { width: 1.3cqw; height: 1.3cqw; margin-bottom: .5cqw; opacity: .95; }
.vs-lock small { display: block; font: 600 max(10px, 1.05cqw)/1.2 Inter, system-ui, sans-serif; opacity: .95; } .vs-lock b { display: block; font: 700 4.8cqw/1.05 Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.vs-nstack { display: flex; flex-direction: column; gap: .8cqw; }
.vs-notif { position: relative; padding: .95cqw 1.05cqw; border-radius: 1.8cqw; background: rgba(255,255,255,.88); color: #10212f; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1.2cqw 2.6cqw -1cqw rgba(0,0,0,.45); opacity: 0; transform: translateY(-3cqw) scale(.96); transition: opacity .4s 1.2s, transform .6s 1.2s cubic-bezier(.34,1.56,.64,1); }
.vs-stage.s4 .vs-notif { opacity: 1; transform: none; }
.vs-ni { display: flex; align-items: center; gap: .45cqw; margin-bottom: .55cqw; } .vs-ni em { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 max(9px, .8cqw)/1 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .02em; color: #6a7683; } .vs-ni small { flex: none; font: 600 max(9px, .82cqw)/1 Inter, system-ui, sans-serif; color: #8a97a6; }
.vs-ap { flex: none; display: grid; place-items: center; width: 2cqw; height: 2cqw; border-radius: .55cqw; background: linear-gradient(145deg, #ffa648, #ee6400); box-shadow: inset 0 0 0 .08cqw rgba(255,255,255,.35); font: 800 1.25cqw/1 Inter, system-ui, sans-serif; color: #fff; }
.vs-notif > b { display: block; font-size: max(12px, 1.3cqw); line-height: 1.2; font-weight: 800; white-space: nowrap; } .vs-notif > span { display: block; margin-top: .25cqw; font-size: max(10px, 1.05cqw); line-height: 1.35; color: #3a4a5a; }
.vs-qa { display: flex; gap: .6cqw; margin-top: .85cqw; opacity: 0; transition: opacity .4s 2.4s; } .vs-stage.s4 .vs-qa { opacity: 1; }
.vs-qa u { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .6cqw .3cqw; border-radius: .9cqw; background: rgba(16,33,47,.08); text-align: center; text-decoration: none; font: 700 max(10px, .95cqw)/1 Inter, system-ui, sans-serif; color: #10212f; } .vs-qa u:first-child { background: #f7861e; color: #fff; animation: vstap 1s ease 3.2s 1 both; }
@keyframes vstap { 0%, 100% { transform: scale(1); } 40% { transform: scale(.93); box-shadow: 0 0 0 .5cqw rgba(247,134,30,.35); } }
.vs-ack { display: flex; align-items: center; gap: .7cqw; padding: .75cqw .95cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.88); color: #10212f; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1cqw 2.2cqw -1cqw rgba(0,0,0,.4); opacity: 0; transform: translateY(2cqw); transition: opacity .4s 3.8s, transform .5s 3.8s cubic-bezier(.34,1.56,.64,1); }
.vs-stage.s4 .vs-ack { opacity: 1; transform: none; }
.vs-ack i { flex: none; position: relative; width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #22c55e; } .vs-ack i::after { content: ""; position: absolute; left: .72cqw; top: .36cqw; width: .45cqw; height: .95cqw; border: solid #fff; border-width: 0 .24cqw .24cqw 0; transform: rotate(45deg); }
.vs-ack b { display: block; font-size: max(10.5px, 1.05cqw); color: #15803d; } .vs-ack span { display: block; font-size: max(9.5px, .95cqw); line-height: 1.3; color: #3a4a5a; }
.vs-bt { margin-top: auto; display: flex; justify-content: space-between; padding: 0 .9cqw 1.5cqw; }
.vs-bt span { display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: rgba(20,24,40,.32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .vs-bt svg { width: 1.45cqw; height: 1.45cqw; }
.vs-hi { position: absolute; left: 50%; bottom: .55cqw; width: 5.6cqw; height: .36cqw; margin-left: -2.8cqw; border-radius: 1cqw; background: rgba(255,255,255,.9); }
.vs-back { position: absolute; left: 2.6cqw; bottom: 25%; transform: translateY(2cqw); display: flex; align-items: center; gap: 1cqw; padding: .9cqw 1.9cqw .9cqw 1.2cqw; border-radius: 999px; background: #fff; font-size: 1.5cqw; font-weight: 800; color: #15803d; box-shadow: 0 0 0 .3cqw #22c55e, 0 3cqw 6cqw -2cqw rgba(0,0,0,.6); opacity: 0; transition: opacity .5s 5s, transform .6s 5s; white-space: nowrap; z-index: 5; }
.vs-back i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 .6cqw rgba(34,197,94,.3); }
.vs-stage.s4 .vs-back { opacity: 1; transform: none; }
/* captions, hint, controls */
.vs-ex { position: absolute; right: 2.4cqw; bottom: 1cqw; margin: 0; font: 600 max(9px, .95cqw) var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.7); z-index: 7; }
.vs-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 22cqw; background: linear-gradient(0deg, rgba(20,10,3,.5), rgba(20,10,3,0)); pointer-events: none; z-index: 4; }
.vs-cap p { position: absolute; left: 2.6cqw; right: auto; width: 58cqw; bottom: 3.2cqw; margin: 0; display: grid; gap: .4cqw; justify-items: start; text-align: left; opacity: 0; transform: translateY(1cqw); transition: opacity .5s, transform .5s; }
.vs-stage.s1:not(.s2) .vs-cap p[data-from="1"], .vs-stage.s2:not(.s3) .vs-cap p[data-from="2"], .vs-stage.s3:not(.s4) .vs-cap p[data-from="3"], .vs-stage.s4 .vs-cap p[data-from="4"] { opacity: 1; transform: none; }
.vs-cap b { text-wrap: balance; font-size: max(16px, 2.3cqw); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.8); }
.vs-cap span { font-size: max(12.5px, 1.45cqw); color: rgba(255,255,255,.9); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.vs-ctl { position: absolute; right: 2.2cqw; top: 2.4cqw; display: none; }
.vs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: .45cqw; background: rgba(255,255,255,.2); z-index: 8; } .vs-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f7861e, #ffb45c); }
.vs-fb { display: none; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vs-fb li { display: grid; gap: 6px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #eadfd0; } .vs-fb b { font-size: 18px; color: #c25e00; } .vs-fb span { font-size: 15px; line-height: 1.6; color: var(--mute); }
.vs.fb .vs-fb { display: grid; } .vs.fb .vs-stage { cursor: default; } .vs.fb .vs-stage > *:not(video):not(.vs-tint) { display: none; } .vs.fb .vs-v { opacity: 1; transform: none; } .vs.fb .vs-v[data-v="2"], .vs.fb .vs-v[data-v="3"] { display: none; }
.vs.fb .vs-stage { aspect-ratio: 21 / 9; margin-bottom: 14px; }
@media (max-width: 1000px) { .vs-fb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phone: portrait stage, overlays stack vertically */
@media (max-width: 760px) {
  .vs-stage { aspect-ratio: 3 / 6; border-radius: 22px; }
  .vs-acts { left: 3cqw; top: 3cqw; gap: 1.4cqw; } .vs-acts button { padding: 1cqw 2.6cqw 1cqw 1cqw; font-size: 12px; gap: 1.6cqw; } .vs-acts i { width: 22px; height: 22px; } .vs-acts button:not(.on) span { display: none; } .vs-acts button:not(.on) { padding: 1cqw; }
  .vs-clock { top: 14cqw; right: 4cqw; } .vs-clock b { font-size: 9cqw; } .vs-clock span { font-size: 3.4cqw; }
  .vs-halt { top: 40%; padding: 3cqw 6cqw; border-radius: 4cqw; white-space: nowrap; } .vs-halt b { font-size: 5.6cqw; white-space: nowrap; } .vs-halt span { font-size: 3cqw; } .vs-halt i { width: 5cqw; height: 5cqw; left: -2cqw; top: -2cqw; }
  .vs-lane { flex-direction: column; top: 42%; left: 6cqw; right: 6cqw; gap: .6cqw; }
  .vs-item > small, .vs-gw > b, .vs-gw > small { position: static; transform: none; margin-top: 1.4cqw; } .vs-item { gap: 0; }
  .vs-gw > small { margin-top: .4cqw; }
  .vs-w { transform: rotate(180deg); margin: 1.2cqw 0; width: 10cqw !important; max-width: none; } .vs-w.w1, .vs-w.w2 { height: auto; }
  .vs-bub { width: auto; min-width: 62cqw; max-width: 84cqw; min-height: 0; padding: 2.4cqw 3.4cqw; border-radius: 3.4cqw; font-size: 13px; } .vs-gib .vs-bub { font-size: 12px; } .vs-item small { font-size: 10.5px; }
  .vs-plate { width: 24cqw; height: 24cqw; } .vs-plate img { width: 17.5cqw; } .vs-gw b { font-size: 4.4cqw; }
  .vs-store { width: 88cqw; top: 15%; padding: 3.6cqw; border-radius: 4.6cqw; } .vs-cl { width: 12cqw; height: 9.4cqw; border-radius: 2.6cqw; } .vs-cl svg { width: 8.6cqw; } .vs-sh b { font-size: 4.4cqw; } .vs-sh small { font-size: 3cqw; } .vs-sh { gap: 3cqw; margin-bottom: 3cqw; } .vs-store ul { gap: 1.8cqw; }
  .vs-store li { grid-template-columns: auto 1fr; gap: .6cqw 3cqw; padding: 2.2cqw 3cqw; font-size: 3.5cqw; border-radius: 2.8cqw; } .vs-store li span { grid-column: 1 / -1; font-size: 3.2cqw; } .vs-store li em { font-size: 2.9cqw; } .vs-ok { font-size: 3.6cqw; margin-top: 2.6cqw; } .vs-ok i { width: 5.5cqw; height: 5.5cqw; } .vs-ok i::after { left: 1.9cqw; top: .9cqw; width: 1.3cqw; height: 2.6cqw; border-width: 0 .6cqw .6cqw 0; }
  .vs-phone { right: 11cqw; left: 11cqw; width: auto; top: auto; bottom: 25%; transform: translateY(4cqw); } .vs-stage.s4 .vs-phone { transform: none; }
  .vs-dev { aspect-ratio: auto; padding: 2.6cqw 3cqw 3.6cqw; border-width: 1.5cqw; border-radius: 8cqw; }
  .vs-isl { width: 13cqw; height: 3.4cqw; margin-left: -6.5cqw; top: 1.8cqw; border-radius: 2cqw; } .vs-sb { padding: 1.2cqw 3cqw 0 3.4cqw; font-size: 2.9cqw; }
  .vs-sig i { width: .8cqw; } .vs-sig i:nth-child(1) { height: 1.2cqw; } .vs-sig i:nth-child(2) { height: 1.8cqw; } .vs-sig i:nth-child(3) { height: 2.4cqw; } .vs-sig i:nth-child(4) { height: 3cqw; } .vs-sig u { width: 4.2cqw; height: 2.1cqw; margin-left: 1.2cqw; border-width: .3cqw; border-radius: .6cqw; } .vs-sig { gap: .5cqw; }
  .vs-lock, .vs-bt { display: none; } .vs-hi { width: 24cqw; height: 1.1cqw; margin-left: -12cqw; bottom: 1.6cqw; }
  .vs-nstack { gap: 2.2cqw; margin-top: 3.4cqw; }
  .vs-notif { padding: 3cqw 3.4cqw; border-radius: 5cqw; } .vs-ni { gap: 1.8cqw; margin-bottom: 1.8cqw; } .vs-ni em, .vs-ni small { font-size: 2.7cqw; } .vs-ap { width: 6cqw; height: 6cqw; border-radius: 1.7cqw; font-size: 3.6cqw; }
  .vs-notif > b { font-size: 4.2cqw; } .vs-notif > span { font-size: 3.4cqw; margin-top: .6cqw; } .vs-qa { gap: 1.6cqw; margin-top: 2.4cqw; } .vs-qa u { padding: 2cqw 0; border-radius: 2.4cqw; font-size: 3.2cqw; }
  .vs-ack { padding: 2.4cqw 3cqw; gap: 2.2cqw; border-radius: 4.4cqw; } .vs-ack i { width: 6cqw; height: 6cqw; } .vs-ack i::after { left: 2.1cqw; top: 1cqw; width: 1.3cqw; height: 2.7cqw; border-width: 0 .7cqw .7cqw 0; } .vs-ack b { font-size: 3.7cqw; } .vs-ack span { font-size: 3.3cqw; }
  .vs-back { left: 50%; transform: translateX(-50%) translateY(2cqw); bottom: 18.5%; font-size: 3.3cqw; padding: 2cqw 3.6cqw 2cqw 2.4cqw; gap: 2cqw; } .vs-back i { width: 4.2cqw; height: 4.2cqw; }
  .vs-stage.s4 .vs-back { transform: translateX(-50%); }
  .vs-ex { display: none; }
  .vs-cap { height: 34cqw; } .vs-cap p, .vs-cap p[data-from="4"] { left: 5cqw; right: 5cqw; width: auto; justify-items: center; text-align: center; bottom: 5.5cqw; gap: 1cqw; } .vs-cap b { font-size: 17.5px; } .vs-cap span { font-size: 13px; }
  .vs-bar { height: 1cqw; }
  .vs-fb { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vs-w path, .vs-plate .r1, .vs-plate .r2, .vs-halt i, .vs-gib .vs-bub { animation: none !important; } .vs-w path { opacity: 1; } }

/* ===== online demo ===== */
.od { padding: clamp(60px, 7vw, 108px) 0; background: radial-gradient(90% 70% at 100% 0, #fff2e0 0, rgba(255,242,224,0) 60%), #fff; }
.od-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.5fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.od-l h2 { margin: 10px 0 0; }
.od-sub { margin: 14px 0 0; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; color: #e56f06; }
.od-p { margin: 12px 0 0; max-width: 50ch; font-size: var(--fs-lead, 18px); line-height: 1.7; color: var(--mute); }
.od-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.od-btns .btn { display: inline-flex; align-items: center; gap: 10px; }
.od-call { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #f3c999; color: #c25e00; transition: transform .25s, box-shadow .25s; }
.od-call:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #f7861e, 0 16px 28px -18px rgba(247,134,30,.7); }
.od-call svg { flex: none; width: 38px; height: 38px; padding: 10px; border-radius: 12px; background: #fff3e3; }
.od-call small { display: block; font: 700 10.5px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #9a8a76; } .od-call b { display: block; font-size: 17px; color: #12212f; }
/* stage: route + live window */
.od-stage { display: grid; gap: 18px; }
.od-route { position: relative; display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 10px; }
.od-pt { display: grid; justify-items: center; gap: 2px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #efe3d2, 0 18px 30px -22px rgba(120,70,10,.5); text-align: center; }
.od-pt span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; background: #fff3e3; color: #e56f06; position: relative; }
.od-pt span::after { content: ""; position: absolute; inset: -5px; border-radius: 16px; border: 2px solid #f7861e; opacity: 0; animation: odring 2.6s ease-out infinite; } @keyframes odring { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.25); opacity: 0; } }
.od-pt b { font-size: 15px; color: #12212f; } .od-pt small { font-size: 12px; font-weight: 600; color: #8a7a66; }
.od-arc { width: 100%; height: 60px; overflow: visible; } .od-arc path { fill: none; stroke: #f7861e; stroke-width: 2.4; stroke-dasharray: 5 6; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: odmarch 1.2s linear infinite; } .od-arc circle { fill: #f7861e; filter: drop-shadow(0 0 6px rgba(247,134,30,.7)); }
@keyframes odmarch { to { stroke-dashoffset: -11; } }
.od-lbl { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: #fff7ec; box-shadow: 0 0 0 1px #f3c999; font: 800 10.5px var(--mono, monospace); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #c25e00; white-space: nowrap; }
.od-win { position: relative; padding: 0 0 58px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #eadfd0, 0 40px 70px -46px rgba(247,134,30,.6); overflow: hidden; }
.od-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #fbf4ea; border-bottom: 1px solid #f1e4d2; } .od-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e8dcc9; } .od-bar b { margin-left: 8px; font-size: 13px; color: #5b4a36; }
.od-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #e8f8ef; font: 800 11px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #15803d; } .od-live u { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: odblink 1.2s infinite; } @keyframes odblink { 50% { opacity: .3; } }
.od-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 18px 0; }
.od-m { position: relative; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #fdf8f1; box-shadow: 0 0 0 1px #f1e4d2; } .od-m b { font-size: 15px; } .od-m small { font-size: 12px; font-weight: 700; color: #6a7a8c; }
.od-m > i { position: absolute; right: 12px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); animation: svpulse 1.6s infinite; } .od-m.idle > i { background: #f5a524; box-shadow: 0 0 0 4px rgba(245,165,36,.2); }
.od-m span { height: 7px; margin-top: 4px; border-radius: 9em; background: #efe5d6; overflow: hidden; } .od-m u { display: block; height: 100%; width: var(--w); border-radius: 9em; background: #22c55e; transform-origin: left; animation: odbar 3.6s ease-in-out infinite alternate; } .od-m.idle u { background: #f5a524; }
@keyframes svpulse { 50% { transform: scale(.7); opacity: .55; } }
@keyframes odbar { from { transform: scaleX(.55); } to { transform: none; } }
.od-chart { display: flex; align-items: flex-end; gap: 10px; height: 88px; margin: 18px 18px 0; padding: 0 14px; border-radius: 14px; background: linear-gradient(180deg, #fff7ec, #fff); box-shadow: inset 0 0 0 1px #f6e6cf; } .od-chart u { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #ffb45c, #f7861e); transform-origin: bottom; animation: odgrow 2.8s ease-in-out infinite alternate; } .od-chart u:nth-child(2n) { animation-delay: .4s; } .od-chart u:nth-child(3n) { animation-delay: .9s; }
@keyframes odgrow { from { transform: scaleY(.62); } to { transform: none; } }
.od-who { position: absolute; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #f3c999, 0 12px 22px -14px rgba(120,70,10,.6); }
.od-who .a, .od-who .b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 12px/1 var(--mono, monospace); } .od-who .a { background: #f7861e; color: #fff; } .od-who .b { margin-left: -14px; background: #dcebff; color: #2457b5; box-shadow: 0 0 0 2px #fff; font-size: 10px; } .od-who em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #5b4a36; }
/* steps */
.od-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(34px, 4vw, 56px) 0 0; padding: 0; list-style: none; counter-reset: s; }
.od-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 33px; height: 2px; background: repeating-linear-gradient(90deg, #f3c999 0 7px, transparent 7px 13px); z-index: 0; }
.od-steps li { position: relative; z-index: 1; display: grid; align-content: start; gap: 6px; padding: 18px 22px 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #eadfd0; transition: transform .3s, box-shadow .3s; } .od-steps li:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #f3c999, 0 26px 40px -28px rgba(247,134,30,.55); }
.od-steps b { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; background: #f7861e; color: #fff; font: 800 13px/1 var(--mono, monospace); box-shadow: 0 0 0 6px #fff, 0 0 0 7px #f3c999; }
body .od-steps h3 { margin: 0; font-size: 18px !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: -.015em; color: #12212f; } .od-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mute); } .od-steps a { color: #c25e00; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) { .od-top { grid-template-columns: 1fr; } .od-steps { grid-template-columns: 1fr; } .od-steps::before { display: none; } }
@media (max-width: 520px) { .od-route { grid-template-columns: 1fr; justify-items: center; gap: 0; } .od-pt { width: 100%; max-width: 300px; } .od-arc { display: none; } .od-pt:first-child { order: 1; } .od-lbl { order: 2; position: static; transform: none; margin: 0; } .od-pt:nth-of-type(2) { order: 3; } .od-lbl::before, .od-lbl::after { content: ""; display: block; width: 0; height: 18px; margin: 0 auto; border-left: 2px dashed #f7861e; } .od-lbl::before { margin-bottom: 6px; } .od-lbl::after { margin-top: 6px; } .od-lbl { display: grid; justify-items: center; background: none; box-shadow: none; padding: 0; } .od-bar b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .od-body { grid-template-columns: 1fr; gap: 8px; padding: 14px 14px 0; } .od-chart { margin: 14px 14px 0; height: 70px; } .od-who { right: 10px; } .od-btns .btn { width: 100%; justify-content: center; } .od-call { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .od-arc path, .od-arc circle, .od-pt span::after, .od-m u, .od-chart u, .od-live u, .od-m > i { animation: none !important; } .od-arc circle { display: none; } }

/* ===== rotoplas when/where ===== */
.rw { padding: clamp(60px, 7vw, 108px) 0; background: linear-gradient(180deg, #fffaf3 0, #fff3e3 100%); }
.rw-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.5fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.rw-l h2 { margin: 10px 0 0; }
.rw-p { margin: 18px 0 0; max-width: 52ch; font-size: var(--fs-lead, 18px); line-height: 1.7; color: var(--mute); }
.rw-ch { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; } .rw-ch li { padding: 7px 15px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #f3c999; font-size: 14px; font-weight: 800; color: #c25e00; }
.rw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; } .rw-acts .btn { display: inline-flex; align-items: center; gap: 10px; }
.rw-a { display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #eadfd0; font-size: 15px; font-weight: 700; color: #3a4a5a; transition: transform .25s, box-shadow .25s, color .25s; } .rw-a svg { color: #e56f06; } .rw-a:hover { transform: translateY(-2px); color: #c25e00; box-shadow: 0 0 0 1px #f7861e, 0 16px 26px -18px rgba(247,134,30,.7); }
/* the ticket */
.rw-ticket { position: relative; border-radius: 30px; background: #fff; box-shadow: 0 0 0 1px #f0e0c8, 0 50px 80px -50px rgba(247,134,30,.7); transform: rotate(1.2deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.rw-ticket:hover { transform: rotate(0); }
.rw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 22px 28px 0; } .rw-top b { font-size: 22px; letter-spacing: -.02em; color: #12212f; } .rw-top span { font: 700 11px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: #9a8a76; }
.rw-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 28px 0; }
.rw-days div { display: grid; justify-items: center; padding: 12px 8px 14px; border-radius: 18px; background: #fff7ec; box-shadow: 0 0 0 1px #f6d8b0; animation: rwpop .7s cubic-bezier(.2,.9,.3,1.3) both; } .rw-days div:nth-child(2) { animation-delay: .12s; } .rw-days div:nth-child(3) { animation-delay: .24s; }
@keyframes rwpop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
.rw-days small { font: 800 11px var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #c25e00; } .rw-days b { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.03em; color: #12212f; } .rw-days em { font-style: normal; font-size: 13px; font-weight: 800; color: #8a7a66; }
.rw-map { position: relative; margin: 18px 28px 0; border-radius: 20px; background: #fffdf9; box-shadow: inset 0 0 0 1px #f1e4d2; } .rw-plan { display: block; width: 100%; height: auto; }
.rw-plan .hall { fill: #fffdf9; stroke: #eadfd0; stroke-width: 2; } .rw-plan .st rect { fill: #f4ebdc; } .rw-plan .ours { fill: #f7861e; filter: drop-shadow(0 6px 10px rgba(247,134,30,.45)); } .rw-plan .num { fill: #fff; font: 800 12px Inter, sans-serif; }
.rw-plan .route { fill: none; stroke: #f7861e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 6; animation: rwmarch 1.2s linear infinite; } @keyframes rwmarch { to { stroke-dashoffset: -11; } }
.rw-plan .dot { fill: #f7861e; filter: drop-shadow(0 0 5px rgba(247,134,30,.8)); } .rw-plan .ping { fill: none; stroke: #f7861e; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: rwping 2.2s ease-out infinite; } @keyframes rwping { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
.rw-plan .ent circle { fill: #fff; stroke: #f7861e; stroke-width: 2; } .rw-plan .ent path { fill: none; stroke: #f7861e; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rw-tag { position: absolute; padding: 4px 11px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #f3c999, 0 8px 14px -8px rgba(120,70,10,.5); font: 800 10.5px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #c25e00; white-space: nowrap; } .rw-tag.a { left: 7%; bottom: 3%; } .rw-tag.b { left: 63%; top: 6%; background: #f7861e; color: #fff; box-shadow: 0 8px 16px -8px rgba(247,134,30,.8); }
.rw-note { position: absolute; right: 12px; bottom: 8px; font: 600 10px var(--mono, monospace); letter-spacing: .06em; color: #b8a58c; }
/* the stub */
.rw-tear { position: relative; height: 0; margin: 24px 0 0; border-top: 2px dashed #f0e0c8; } .rw-tear::before, .rw-tear::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: #fff7ee; box-shadow: inset 0 0 0 1px #f0e0c8; } .rw-tear::before { left: -14px; clip-path: inset(0 0 0 50%); } .rw-tear::after { right: -14px; clip-path: inset(0 50% 0 0); }
.rw-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 28px 24px; } .rw-foot small { display: block; font: 700 10.5px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: #9a8a76; } .rw-foot b { display: block; font-size: 17px; line-height: 1.3; color: #12212f; } .rw-foot span { font-size: 14px; color: var(--mute); }
.rw-bn { text-align: right; flex: none; } .rw-bn b { font-size: clamp(44px, 5vw, 64px); line-height: .95; letter-spacing: -.04em; color: #f7861e; }
@media (max-width: 980px) { .rw-in { grid-template-columns: 1fr; } .rw-ticket { transform: none; } }
@media (max-width: 520px) { .rw-top, .rw-days, .rw-foot { padding-left: 18px; padding-right: 18px; } .rw-map { margin-inline: 14px; } .rw-days { gap: 8px; } .rw-tag { font-size: 9px; padding: 3px 8px; } .rw-note { display: none; } .rw-acts .btn, .rw-a { width: 100%; justify-content: center; } .rw-foot b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .rw-days div, .rw-plan .route, .rw-plan .ping { animation: none !important; } .rw-plan .dot { display: none; } .rw-ticket { transition: none; } }

/* ===== careers: centred about blocks ===== */
#what-we-do .wi { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
#what-we-do .wi-l, #what-we-do .wi-r { display: grid; justify-items: center; }
#what-we-do .wi-l h2 { margin-inline: auto; max-width: 22ch; }
#what-we-do .wi-p { margin-inline: auto; max-width: 62ch; }
.k-about .phead { margin-inline: auto; max-width: 780px; display: grid; justify-items: center; text-align: center; }
.k-about .phead h2 { margin-inline: auto; max-width: 20ch; }
.k-about .phead p { margin-inline: auto; max-width: 62ch; }
.k-about .pis .pi { flex-direction: column; align-items: center; text-align: center; }
.k-about .pis .pi > div { display: grid; justify-items: center; }
.k-about .pis .pi p { max-width: 28ch; }
@media (max-width: 900px) { .k-about .pis { justify-items: center; } .k-about .pis .pi { flex-direction: column; } }

/* ===== careers: what we do ===== */
.wd { padding: clamp(60px, 7vw, 104px) 0; background: radial-gradient(70% 60% at 50% 100%, #fff3e3 0, rgba(255,243,227,0) 70%), #fff; }
.wd-head { max-width: 780px; margin-inline: auto; text-align: center; display: grid; justify-items: center; }
.wd-head h2 { margin: 10px auto 0; max-width: 22ch; }
.wd-head p { margin: 16px auto 0; max-width: 62ch; font-size: var(--fs-lead, 18px); line-height: 1.7; color: var(--mute); }
.wd-flow { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, .8fr) 76px minmax(0, .9fr); align-items: center; gap: 0; margin-top: clamp(30px, 4vw, 56px); padding: clamp(20px, 2.6vw, 34px); border-radius: 32px; background: #fffaf3; box-shadow: 0 0 0 1px #f1e4d2, 0 40px 70px -52px rgba(247,134,30,.6); }
.wd-n { display: grid; justify-items: center; gap: 6px; text-align: center; }
.wd-n > b { margin-top: 12px; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.015em; color: #12212f; } .wd-n > small { max-width: 24ch; font-size: 14.5px; line-height: 1.5; color: var(--mute); }
.wd-fig { display: grid; place-items: center; width: 100%; height: clamp(240px, 21vw, 280px); }
/* machines: four real photos */
.wd-ms { grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; max-width: 360px; margin-inline: auto; }
.wd-mc { position: relative; display: grid; justify-items: center; padding: 8px 8px 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #efe3d2; animation: wdfloat 4.6s ease-in-out infinite; } .wd-mc:nth-child(2) { animation-delay: -1.1s; } .wd-mc:nth-child(3) { animation-delay: -2.2s; } .wd-mc:nth-child(4) { animation-delay: -3.3s; }
.wd-mc img { width: 100%; height: auto; aspect-ratio: 1000 / 640; object-fit: contain; } .wd-mc b { margin-top: 2px; font: 800 11px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #8a7a66; }
@keyframes wdfloat { 50% { transform: translateY(-5px); } }
/* waves between the nodes */
.wd-w { justify-self: center; width: 56px; height: auto; color: #f7861e; transform: rotate(90deg); filter: drop-shadow(0 0 8px rgba(247,134,30,.5)); } .wd-w path { opacity: .2; animation: wdwave 1.2s ease-in-out infinite; } .wd-w .a2 { animation-delay: .2s; } .wd-w .a3 { animation-delay: .4s; } @keyframes wdwave { 45% { opacity: 1; } }
/* the box */
.wd-gw .plate { position: relative; display: grid; place-items: center; width: clamp(170px, 16vw, 220px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #fbe9d3 76%); box-shadow: 0 0 0 4px #f7861e, 0 0 0 12px rgba(247,134,30,.22), 0 28px 50px -22px rgba(247,134,30,.9); }
.wd-gw img { width: 74%; height: auto; transform: translateY(3%); filter: drop-shadow(0 10px 8px rgba(0,0,0,.28)); }
.wd-gw .r1, .wd-gw .r2 { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #f7861e; opacity: 0; animation: wdring 2.6s ease-out infinite; } .wd-gw .r2 { animation-delay: 1.3s; } @keyframes wdring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }
/* the phone, light bezel */
.wd-ph .ph { position: relative; display: grid; align-content: start; gap: 8px; width: clamp(150px, 14vw, 190px); padding: 30px 12px 14px; border-radius: 30px; background: #fff; box-shadow: 0 0 0 7px #efe6d8, 0 0 0 8px #dccfb9, 0 30px 50px -24px rgba(120,70,10,.55); }
.wd-ph .isl { position: absolute; left: 50%; top: 9px; width: 46px; height: 11px; margin-left: -23px; border-radius: 9px; background: #e3d8c6; }
.wd-ph .hd { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; } .wd-ph .hd b { font-size: 13px; color: #12212f; } .wd-ph .hd u { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: wdblink 1.2s infinite; } @keyframes wdblink { 50% { opacity: .3; } }
.wd-ph .rw { position: relative; text-align: left; display: grid; gap: 1px; padding: 8px 10px 8px 22px; border-radius: 12px; background: #fdf8f1; box-shadow: 0 0 0 1px #f1e4d2; font-size: 12.5px; font-weight: 800; color: #12212f; } .wd-ph .rw em { font-style: normal; font-size: 11px; font-weight: 700; color: #6a7a8c; }
.wd-ph .rw i { position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); animation: wdpulse 1.6s infinite; } .wd-ph .rw.idle i { background: #f5a524; box-shadow: 0 0 0 3px rgba(245,165,36,.22); } @keyframes wdpulse { 50% { transform: scale(.7); opacity: .6; } }
/* a gentle left-to-right hand-off: each node lights up in turn */
.wd-n .wd-fig { transition: filter .4s; } .wd-n.n1 .wd-fig { animation: wdglow 6s ease-in-out infinite; } .wd-n.n2 .wd-fig { animation: wdglow 6s ease-in-out 2s infinite; } .wd-n.n3 .wd-fig { animation: wdglow 6s ease-in-out 4s infinite; } @keyframes wdglow { 0%, 100% { filter: none; } 15%, 30% { filter: drop-shadow(0 0 22px rgba(247,134,30,.45)); } }
.wd-foot { display: flex; justify-content: center; margin: 22px 0 0; } .wd-foot span { padding: 10px 22px; border-radius: 999px; background: #e8f8ef; box-shadow: 0 0 0 1px #bfe8cf; font-weight: 800; font-size: 15.5px; color: #15803d; }
@media (max-width: 900px) {
  .wd-flow { grid-template-columns: 1fr; gap: 6px; padding: 22px 16px; }
  .wd-w { transform: rotate(180deg); width: 44px; margin: 4px 0; } .wd-fig { height: auto; padding: 4px 0; } .wd-ms { max-width: 300px; } .wd-gw .plate { width: 170px; } .wd-ph .ph { width: 190px; }
}
@media (prefers-reduced-motion: reduce) { .wd-mc, .wd-w path, .wd-gw .r1, .wd-gw .r2, .wd-ph .hd u, .wd-ph .rw i, .wd-n .wd-fig { animation: none !important; } .wd-w path { opacity: 1; } }

/* ===== rotosight: what is rotomolding ===== */
.rmx { padding: clamp(60px, 7vw, 104px) 0; background: #fff; }
.rmx-head { max-width: 800px; margin-inline: auto; text-align: center; display: grid; justify-items: center; }
.rmx-head h2 { margin: 10px auto 0; }
.rmx-head p { margin: 18px auto 0; font-size: var(--fs-lead, 18px); line-height: 1.75; color: var(--mute); }
.rmx-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.rmx-steps > li { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 12px 12px 22px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px #eadfd0; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; animation: rmhi 8s ease-in-out infinite; animation-delay: calc(var(--k) * 2s); }
.rmx-steps > li:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px #f3c999, 0 30px 46px -30px rgba(247,134,30,.6); }
@keyframes rmhi { 0%, 22%, 100% { box-shadow: 0 0 0 1px #eadfd0; } 8%, 16% { box-shadow: 0 0 0 1.5px #f7861e, 0 24px 40px -28px rgba(247,134,30,.6); } }
.rmx-steps > li:not(:last-child)::after { content: "\2192"; position: absolute; right: -23px; top: 66px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #f3c999, 0 8px 14px -8px rgba(247,134,30,.6); color: #f7861e; font-weight: 800; font-size: 15px; animation: rmnudge 2s ease-in-out infinite; } @keyframes rmnudge { 50% { transform: translateX(3px); } }
.rmx-v { height: 150px; border-radius: 18px; background: radial-gradient(100% 120% at 50% 0, #fff3e2, #fdf8f1 72%); box-shadow: inset 0 0 0 1px #f4e6d1; overflow: hidden; } .rmx-v svg { display: block; width: 100%; height: 100%; }
.rmx-t { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 8px; text-align: center; }
.rmx-t b { position: relative; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 4px; border-radius: 50%; background: #f7861e; color: #fff; font: 800 13px/1 var(--mono, monospace); box-shadow: 0 0 0 6px #fff, 0 0 0 7px #f3c999; }
body .rmx-t h3 { margin: 0; font-size: 18px !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: -.015em; color: #12212f; } .rmx-t p { margin: 0; max-width: 26ch; font-size: 15px; line-height: 1.6; color: var(--mute); }
/* 1 powder falls into the mold */
.rmx-v .mold path { fill: #fff; stroke: #cdbba0; stroke-width: 3; stroke-linejoin: round; } .rmx-v .mold .fill { fill: #ffc98a; stroke: none; transform-box: fill-box; transform-origin: bottom; animation: rmfill 4s ease-in-out infinite; } @keyframes rmfill { 0% { transform: scaleY(.08); } 70%, 100% { transform: scaleY(1); } }
.rmx-v .pw { fill: #f7861e; opacity: 0; animation: rmfall 1.8s linear infinite; animation-delay: var(--d); } @keyframes rmfall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateY(52px) translateX(calc(var(--x) * 3px)); opacity: 1; } 100% { transform: translateY(58px); opacity: 0; } }
/* 2 oven heat */
.rmx-v .oven { fill: #fff; stroke: #cdbba0; stroke-width: 3; } .rmx-v .glow { fill: #ffd9a8; animation: rmglow 2.4s ease-in-out infinite; } @keyframes rmglow { 50% { fill: #ffb45c; } } .rmx-v .mini { fill: #fff; stroke: #cdbba0; stroke-width: 2.6; } .rmx-v .knob { fill: #f7861e; }
.rmx-v .hw { fill: none; stroke: #f7861e; stroke-width: 2.6; stroke-linecap: round; opacity: 0; animation: rmheat 2.2s ease-in-out infinite; animation-delay: var(--d); } @keyframes rmheat { 0% { transform: translateY(14px); opacity: 0; } 40% { opacity: .85; } 100% { transform: translateY(-12px); opacity: 0; } }
/* 3 the arm turns the mold */
.rmx-v .piv { fill: #cdbba0; } .rmx-v .armp { stroke: #cdbba0; stroke-width: 5; stroke-linecap: round; }
.rmx-v .orbit { transform-box: view-box; transform-origin: 80px 58px; animation: rmspin 7s linear infinite; } .rmx-v .spin { transform-box: view-box; transform-origin: 80px 95px; animation: rmspin 3.5s linear infinite reverse; }
.rmx-v .m2 { fill: #fff; stroke: #cdbba0; stroke-width: 2.8; } .rmx-v .coat { fill: none; stroke: #f7861e; stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 80; animation: rmcoat 3.5s ease-in-out infinite; } @keyframes rmcoat { 0% { stroke-dashoffset: 80; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes rmspin { to { transform: rotate(360deg); } }
/* 4 the hollow part */
.rmx-v .tank { animation: rmfloat 3.4s ease-in-out infinite; } @keyframes rmfloat { 50% { transform: translateY(-5px); } }
.rmx-v .outer { fill: #ffb45c; stroke: #f7861e; stroke-width: 3; } .rmx-v .inner { fill: #fffdf9; } .rmx-v .rib { stroke: rgba(255,255,255,.55); stroke-width: 3; } .rmx-v .cap { fill: #f7861e; } .rmx-v .hol { fill: #c25e00; font: 800 11px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; }
/* live bar */
.rmx-live { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; padding: 14px 22px; border-radius: 18px; background: #effaf3; box-shadow: 0 0 0 1px #bfe8cf; } .rmx-live b { font-size: 16.5px; color: #15803d; }
.rmx-live .d { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.2); animation: rmblink 1.2s infinite; } @keyframes rmblink { 50% { opacity: .35; } }
.rmx-live .bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; } .rmx-live .bars i { width: 5px; height: 100%; border-radius: 2px; background: #22c55e; transform-origin: bottom; animation: rmbar 1.4s ease-in-out infinite; } .rmx-live .bars i:nth-child(2n) { animation-delay: .25s; } .rmx-live .bars i:nth-child(3n) { animation-delay: .55s; } @keyframes rmbar { 0%, 100% { transform: scaleY(.3); } 50% { transform: none; } }
@media (max-width: 1000px) { .rmx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; } .rmx-steps > li:not(:last-child)::after { display: none; } }
@media (max-width: 560px) { .rmx-steps { grid-template-columns: 1fr; } .rmx-live { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .rmx-steps > li, .rmx-steps > li::after, .rmx-v *, .rmx-live .d, .rmx-live .bars i { animation: none !important; } .rmx-v .mold .fill { transform: none; } .rmx-v .coat { stroke-dashoffset: 0; } }

/* ===== rotosight: centred how-it-works head ===== */
.psec.flow .phead { margin-inline: auto; max-width: 820px; text-align: center; display: grid; justify-items: center; }
.psec.flow .phead h2 { margin-inline: auto; max-width: 20ch; }
.psec.flow .phead p { margin-inline: auto; max-width: 62ch; }

/* ===== piatiq: explainers ===== */
.pqx { padding: clamp(56px, 6vw, 92px) 0; background: #fff; } .pqx.tint { background: linear-gradient(180deg, #fffaf3, #fff3e3); }
.pqx-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.pqx.flip .pqx-tx { order: 2; }
.pqx-tx h2 { margin: 10px 0 0; max-width: 18ch; }
.pqx-tx > p { margin: 16px 0 0; max-width: 52ch; font-size: var(--fs-lead, 18px); line-height: 1.7; color: var(--mute); }
.pqx-pts { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .pqx-pts li { position: relative; padding: 10px 14px 10px 44px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #efe3d2; font-size: 15.5px; font-weight: 700; color: #3a4a5a; }
.pqx-pts li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: #22c55e; } .pqx-pts li::after { content: ""; position: absolute; left: 21px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.pqx-fig { position: relative; padding: 22px 22px 18px; border-radius: 28px; background: radial-gradient(110% 120% at 100% 0, #fff3e2, #fffdf9 62%); box-shadow: 0 0 0 1px #f0e0c8, 0 44px 70px -48px rgba(247,134,30,.6); }
.pqx-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pqx-chart .ax { fill: none; stroke: #cdbba0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pqx-chart .gl { fill: none; stroke: #efe3d2; stroke-width: 1.4; stroke-dasharray: 3 5; }
.pqx-chart .al { fill: #a8957a; font: 700 9.5px var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; }
.pqx-chart .cv { fill: none; stroke: #f7861e; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: pqdraw 5s ease-in-out infinite; } @keyframes pqdraw { 0% { stroke-dashoffset: 520; } 55%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -520; } }
.pqx-chart .pk { fill: #fff; stroke: #f7861e; stroke-width: 3.4; transform-box: fill-box; transform-origin: center; animation: pqpk 1.6s ease-in-out infinite; } @keyframes pqpk { 50% { transform: scale(1.5); } }
.pqx-chart .mv { fill: #f7861e; filter: drop-shadow(0 0 6px rgba(247,134,30,.8)); }
.pqx-chart .tg { fill: #5b4a36; font: 800 11.5px Inter, sans-serif; } .pqx-chart .pkt { fill: #c25e00; }
/* 1: a logger in the mold */
.pqx-mold { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #f3c999; } .pqx-mold svg { width: 62px; height: 36px; } .pqx-mold b { font-size: 13px; color: #c25e00; }
.pqx-mold .mw { fill: #fff; stroke: #cdbba0; stroke-width: 4; } .pqx-mold .chip { fill: #f7861e; } .pqx-mold .wv { fill: none; stroke: #f7861e; stroke-width: 4; stroke-linecap: round; opacity: 0; animation: pqwv 1.6s ease-in-out infinite; } .pqx-mold .w2 { animation-delay: .2s; } .pqx-mold .w3 { animation-delay: .4s; } .pqx-mold .w4 { animation-delay: .6s; } .pqx-mold .w1 { display: none; } @keyframes pqwv { 45% { opacity: 1; } }
/* 2: where to stop */
.pqx-chart .zone { fill: rgba(247,134,30,.1); stroke: #f3c999; stroke-dasharray: 5 5; animation: pqzone 3s ease-in-out infinite; } @keyframes pqzone { 50% { fill: rgba(247,134,30,.2); } }
.pqx-chart .stop { fill: none; stroke: #22c55e; stroke-width: 3; stroke-dasharray: 6 5; } .pqx-chart .st { fill: #15803d; } .pqx-chart .ex { fill: #b45309; font-size: 10.5px; }
.pqx-ok { display: inline-flex; margin-top: 12px; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: #effaf3; box-shadow: 0 0 0 1px #bfe8cf; font-size: 12.5px; font-weight: 800; color: #15803d; } .pqx-ok i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pqbl 1.2s infinite; } @keyframes pqbl { 50% { opacity: .3; } }
/* 3: golden sample vs later cycles */
.pqx-chart .gold { stroke: #22c55e; stroke-width: 5; stroke-dasharray: 520; animation: pqgold 8s ease-in-out infinite; } @keyframes pqgold { 0% { stroke-dashoffset: 520; } 14%, 100% { stroke-dashoffset: 0; } }
.pqx-chart .hot, .pqx-chart .cool, .pqx-chart .long { stroke-width: 3.4; opacity: 0; animation: pqcyc 8s ease-in-out infinite; } .pqx-chart .hot { stroke: #e5484d; animation-delay: 0s; } .pqx-chart .cool { stroke: #f5a524; } .pqx-chart .long { stroke: #8b7be8; }
.pqx-chart .hot { animation-name: pqhot; } .pqx-chart .cool { animation-name: pqcool; } .pqx-chart .long { animation-name: pqlong; }
@keyframes pqhot { 0%, 14% { opacity: 0; stroke-dashoffset: 520; } 24% { opacity: 1; } 34%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes pqcool { 0%, 36% { opacity: 0; stroke-dashoffset: 520; } 46% { opacity: 1; } 56%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes pqlong { 0%, 58% { opacity: 0; stroke-dashoffset: 520; } 68% { opacity: 1; } 78%, 100% { opacity: 1; stroke-dashoffset: 0; } }
.pqx-lg { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .pqx-lg li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #efe3d2; font-size: 12.5px; font-weight: 800; color: #3a4a5a; } .pqx-lg i { width: 18px; height: 4px; border-radius: 2px; } .pqx-lg .g i { background: #22c55e; } .pqx-lg .h i { background: #e5484d; } .pqx-lg .c i { background: #f5a524; } .pqx-lg .l i { background: #8b7be8; }
@media (max-width: 900px) { .pqx-in { grid-template-columns: 1fr; } .pqx.flip .pqx-tx { order: 0; } .pqx-tx h2 { max-width: none; } .pqx-fig { padding: 16px 14px 14px; } .pqx-ok { position: static; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .pqx-chart .cv, .pqx-chart .pk, .pqx-chart .zone, .pqx-mold .wv, .pqx-ok i { animation: none !important; } .pqx-chart .cv { stroke-dashoffset: 0; opacity: 1; } .pqx-chart .mv { display: none; } .pqx-mold .wv { opacity: 1; } }

/* ===== alignment fixes (sweep) ===== */
/* scene footers (RotoSight problem, Solution promise): let long captions wrap instead of being cut off or poking out of the card */
@media (max-width: 1100px) {
  .wsc-ft { flex-wrap: wrap; min-height: 0; row-gap: 6px; }
  .wsc-ft p, .wsc-pulse .wsc-ft p, .wsc .wsc-ft p { white-space: normal !important; flex: 1 1 auto; min-width: 0; }
  .wsc-ft p.z-r { flex: 0 0 auto; }
}
/* Home "at a glance": with the US office row gone, the contact cell fills the gap on wide screens */
@media (min-width: 1001px) { .spec-grid > div:nth-last-child(3) { grid-column: span 2; } }
/* Resources guide cards: polish.css turns every .rs-card into an inline row on phones, squeezing the text. Keep them stacked. */
.rs-card, .rs-card.big { display: grid !important; align-items: start; min-height: 0; }

/* ===== vellayan: 2 badges, 4 cards ===== */
.cred-in { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
.strip.s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .strip.s4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip.s4 li:nth-child(3)::before { display: none; } .strip.s4 li:nth-child(n+3) { border-top: 1px solid #e6eaef; } }
@media (max-width: 640px) { .strip.s4 { grid-template-columns: 1fr; } .cred-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== module tag ===== */
.pd-tag { display: inline-block; align-self: flex-start; margin: 14px 0 8px; padding: 5px 13px; border-radius: 999px; font: 800 12px Inter, sans-serif; letter-spacing: .02em; }
.pd-tag.t-pu { background: #fff0dc; color: #b45309; } .pd-tag.t-tg { background: #e6efff; color: #2457b5; } .pd-tag.t-sb { background: #e5f8ec; color: #15803d; } .pd-tag.t-er { background: #efe9ff; color: #5b3fc4; }

/* ===== gallery films: balanced ===== */
.g-films .g-head { max-width: 780px; margin-inline: auto; text-align: center; display: grid; justify-items: center; }
.g-films .g-head h2 { margin-inline: auto; } .g-films .g-head p { margin-inline: auto; }
.g-films .gvs { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 36px 28px; align-items: stretch; margin-top: clamp(30px, 4vw, 52px); }
.g-films .gv { display: flex; flex-direction: column; }
.g-films .gv.big { grid-row: auto; grid-column: auto; }
.g-films .gv-frame { border-radius: 22px; box-shadow: 0 30px 50px -34px rgba(16,33,47,.55); }
.g-films .gv .gv-play, .g-films .gv.big .gv-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.g-films .gv-t { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 16px 4px 0; }
body .g-films .gv-t h3, body .g-films .gv.big .gv-t h3 { font-size: clamp(18px, 1.35vw, 21px) !important; line-height: 1.3 !important; letter-spacing: -.015em; }
.g-films .gv-t .gv-d { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--mute); }
.g-films .gv-t a { margin-top: auto; padding-top: 12px; }
@media (min-width: 641px) and (max-width: 1099px) { .g-films .gvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-films .gv.big { grid-column: 1 / -1; } }
@media (max-width: 640px) { .g-films .gvs { grid-template-columns: minmax(0, 1fr); gap: 30px; } .g-films .gv.big { grid-column: auto; } }

/* ===== gallery shows+faq merged ===== */
.gs-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.gs-qa { min-width: 0; }
.gs-qa .eyebrow { display: block; }
body .gs .gs-qa h3 { margin: 8px 0 18px; font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.15 !important; letter-spacing: -.025em; font-weight: 800 !important; color: #12212f; }
.gs-acc { display: grid; gap: 12px; }
.gs-acc details { border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #eadfd0; transition: box-shadow .3s, background .3s; }
.gs-acc details[open] { background: linear-gradient(165deg, #fff, #fff7ec); box-shadow: 0 0 0 1.5px #f3c999, 0 28px 44px -34px rgba(247,134,30,.55); }
.gs-acc summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #12212f; }
.gs-acc summary::-webkit-details-marker { display: none; }
.gs-acc summary b { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff0dc; font: 800 13px var(--mono, monospace); color: #c25e00; transition: background .3s, color .3s; } .gs-acc details[open] summary b { background: #f7861e; color: #fff; }
.gs-acc summary span { flex: 1; }
.gs-acc summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff3e3; color: #e56f06; font-size: 20px; font-weight: 700; line-height: 1; transition: transform .3s, background .3s; } .gs-acc details[open] summary::after { transform: rotate(45deg); background: #ffe3c2; }
.gs-acc details p { margin: 0; padding: 0 22px 20px 74px; font-size: 15.5px; line-height: 1.7; color: var(--mute); }
@media (max-width: 900px) { .gs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .gs-acc summary { padding: 15px 14px; font-size: 16px; gap: 12px; } .gs-acc summary b { width: 34px; height: 34px; } .gs-acc details p { padding: 0 16px 16px; font-size: 15px; } }
.gs-next .gs-facts { flex: none; margin-block: 22px 0; gap: 10px; }
.gs-next .gs-btns { padding-top: 24px; margin-top: 0; }
@media (max-width: 900px) { .gs-next .gs-facts { flex: none; } .gs-next .gs-facts li { padding-block: 10px; } }
/* Gallery hero: CTAs on one line, stats evenly spaced */
.g-ctas { margin-top: 30px; gap: 14px 18px; align-items: center; }
.g-ctas .g-jump { margin: 0; min-height: 0; padding: 0 4px 0 0; }
.g-ctas .btn { margin: 0; }
.g-stats { gap: clamp(28px, 4vw, 52px); }
.g-stats li { min-width: 56px; }
@media (max-width: 520px) { .g-ctas { gap: 12px; } .g-ctas .btn { width: 100%; text-align: center; } .g-ctas .g-jump { order: 2; } }

/* ===== mobile type scale ===== */
/* Phones: one smaller type scale for every page (tokens are read by system.css), tighter section rhythm, calmer hero. */
@media (max-width: 560px) {
  .pill { font-size: 10.5px !important; letter-spacing: .06em !important; padding: 6px 12px 6px 10px !important; gap: 8px !important; max-width: 100%; white-space: normal; line-height: 1.3; }
  .hero-line, .h1-sub { font-size: 16px !important; line-height: 1.3 !important; }
  h1 .h1-sub { display: block; margin-top: 6px; }
  .hm-lead, .c-lead, .g-lead, .k-lead, .pr-lead { font-size: var(--fs-lead) !important; line-height: 1.62 !important; }
  .hm-hero-in { padding-block: 24px 36px !important; }
  .hm-cta, .c-cta, .pr-cta, .g-ctas { gap: 10px; }
  .btn { font-size: var(--fs-lead); padding: 12px 20px; }
  .hm-cta .btn { padding: 13px 22px !important; font-size: 14.5px !important; border-radius: 12px !important; }
  .eyebrow { font-size: 10.5px !important; letter-spacing: .12em !important; }
  main p, main li, main dd { overflow-wrap: anywhere; }
  .pd-p, .pd-ul li, .pg-head p { font-size: var(--fs-body) !important; }
  .pd-t { font-size: 20px !important; }
  .pd-n { font-size: 52px !important; }
  .wrap { padding-inline: 16px; }
  .cbn h2 { font-size: 23px !important; }
  .cbn-card h3 { font-size: 17px !important; } .cbn-card li strong { font-size: 14.5px; } .cbn-card li span { font-size: var(--fs-body); }
  .yf-top p, .yf-offices p { font-size: var(--fs-body); }
  /* hero live card */
  .hv-card { padding: 16px 14px 18px; }
  .hv-live { font-size: 10.5px; letter-spacing: .08em; } .hv-top small { font-size: 10px; }
  .hv-main { gap: 12px; margin-top: 14px; }
  .hv-ring { width: 112px; height: 112px; } .hv-ring b { font-size: 26px; } .hv-ring small { font-size: 9.5px; }
  .hv-bars { height: 54px; gap: 6px; }
  .hv-gain { gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; } .hv-gain b { font-size: 24px; } .hv-gain span { font-size: var(--fs-body); }
  .hv-floor { margin-top: 12px; gap: 4px; } .hv-m figcaption b { font-size: 10px; }
  /* example estimate card */
  .qr-f { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qr-o { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 4px 0 0; flex-wrap: wrap; }
  .qr-o small { flex: 1 0 100%; font-size: 9.5px; } .qr-o b { font-size: 26px; } .qr-o span { font-size: 11px; }
  .qr-f input, .qr-f select { height: 40px; font-size: var(--fs-lead); }
  /* trust badges */
  .cb figcaption b { font-size: var(--fs-body); } .cb figcaption span { font-size: 11px; }
  .strip h3, .why2 h3 { font-size: 16px; } .strip p { font-size: var(--fs-body); }
  .spec-grid dd { font-size: var(--fs-body); } .spec-head h3 { font-size: 17px; }
  .rs-card.big h3, body .rs-card.big h2.rs-ct { font-size: 16.5px !important; }
  .faq-r summary, .fqs-acc summary, .gs-acc summary { font-size: 15.5px; }
  .faq-r details p { font-size: var(--fs-body); }
}
@media (max-width: 360px) {
  .hv-ring { width: 100px; height: 100px; }
  .hm-cta .btn, .c-cta .btn { width: 100%; text-align: center; }
}

/* ===== cbn mobile space ===== */
@media (max-width: 1023px) { body .cbn { padding-bottom: var(--sec-banner, 56px); } body .cbn .cap-wrap { display: none; } }
@media (max-width: 1023px) { body .cbn-ct { gap: 2px; margin-top: 18px; } body .cbn-ct li { display: block; line-height: 1.5; } body .cbn-ct a { display: inline; min-height: 0; } body .cbn-ct span { font-size: var(--fs-body); vertical-align: baseline; } }
/* Machine-type cards on phones: smaller read-out so it never covers the machine photo */
@media (max-width: 640px) {
  .ms.msl { padding: 14px 14px 16px; }
  .msl .ms-img { aspect-ratio: 1000 / 620; }
  .msl .ms-img img { width: 56%; height: 82%; top: 8%; left: 0; }
  .msl-hud { top: 4%; right: 0; width: 36%; min-width: 0; padding: 7px 8px 6px; border-radius: 11px; }
  .msl-st { gap: 5px; } .msl-st b { font-size: 10px; } .msl-st small { font-size: 7px; letter-spacing: .08em; }
  .msl-k { margin-top: 5px; font-size: 8px; letter-spacing: .04em; } .msl-v { font-size: 15px; }
  .msl-sp { height: 14px; margin-top: 2px; }
  .msl-gw { left: 2%; bottom: 3%; padding: 3px 8px 3px 3px; gap: 5px; } .msl-gw img { width: 22px !important; } .msl-gw em { font-size: 9.5px; }
  .msl-tl { margin-top: 8px; } .msl-bar { height: 8px; } .msl-ax { font-size: 9px; }
  .msl .ms-b { margin-top: 10px; gap: 8px; } .msl .ms-t, .msl h3 { font-size: 17px !important; }
  .msl-proto { font-size: 10.5px; padding: 3px 9px; }
  .msl p { margin-top: 8px; font-size: var(--fs-body); line-height: 1.55; }
}
/* Machine-type cards, phones: machine photo on top, live read-out BELOW it (nothing overlaps the machine) */
@media (max-width: 640px) {
  body .ms.msl .ms-img { aspect-ratio: auto !important; display: flex !important; flex-direction: column; align-items: center; gap: 10px; }
  body .ms.msl .ms-img::before, body .ms.msl .ms-img::after { display: none !important; }
  body .ms.msl .ms-img > img { position: static !important; width: 74% !important; height: auto !important; max-height: 190px; object-fit: contain; left: auto !important; top: auto !important; }
  body .ms.msl .msl-hud { position: static !important; order: 3; width: 100% !important; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fafafa; box-shadow: inset 0 0 0 1px #ececec; }
  body .ms.msl .msl-st { grid-column: 1 / -1; margin-bottom: 4px; } body .ms.msl .msl-st b { font-size: 11.5px; } body .ms.msl .msl-st small { font-size: 8px; }
  body .ms.msl .msl-k { margin: 0; font-size: 9px; grid-column: 1; grid-row: 2; align-self: end; }
  body .ms.msl .msl-v { font-size: 18px; grid-column: 1; grid-row: 3; }
  body .ms.msl .msl-sp { grid-column: 2; grid-row: 2 / span 2; height: 34px; margin: 0; }
  body .ms.msl .msl-gw { position: relative !important; left: auto !important; bottom: auto !important; order: 2; align-self: flex-start; margin-top: -4px; }
}
@media (max-width: 640px) { body .ms.msl .msl-rip { display: none !important; } }
/* Gallery photo grid on phones: clean tiles. Tag at the bottom-left, "+" at the bottom-right, no big number, no long caption (it shows in the photo viewer) */
@media (max-width: 900px) {
  .gi-n { display: none !important; }
  .gi-cap { left: 10px !important; right: 46px !important; bottom: 10px !important; gap: 0 !important; align-items: end; }
  .gi-cap em { font-size: 9px !important; letter-spacing: .05em !important; padding: 4px 9px !important; line-height: 1.25; max-width: 100%; }
  .gi-cap b { display: none !important; }
  .gi-plus { width: 28px !important; height: 28px !important; right: 10px !important; bottom: 10px !important; transform: none !important; }
  .gi-plus svg { width: 14px; height: 14px; }
  .gframe::after { opacity: .85 !important; background: linear-gradient(180deg, rgba(11,32,54,0) 55%, rgba(11,32,54,.7) 100%) !important; }
}
@media (max-width: 900px) { .gi .gframe { aspect-ratio: 4 / 5 !important; height: auto !important; } .gi .gimg { height: 100% !important; object-fit: cover; } }
/* Phones: a bit more "app" feel. Feature photo on top of the gallery, press feedback on every card and button. */
@media (max-width: 900px) {
}
@media (hover: none) {
  .btn, .cbn-pill, .rs-card, .gs-t, .gv-btn, .gi-btn, .sp-b, .pd-more, .fqs-r, .od-call, .rw-a, .dk-book, .dk-t0, .abt-f, .af-steps > li { transition: transform .18s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
  .btn:active, .cbn-pill:active, .rs-card:active, .gv-btn:active, .gi-btn:active, .sp-b:active, .fqs-r:active, .od-call:active, .rw-a:active, .dk-book:active, .dk-t0:active { transform: scale(.97); }
  .gi, .gv, .abt-f, .af-steps > li, .rs-card { scroll-margin-top: 90px; }
}
@media (max-width: 560px) {
  /* section headings get a short orange rule: quick visual rhythm while scrolling */
  .phead .eyebrow::after, .g-head .eyebrow::after, .gs-head .eyebrow::after, .af-head .eyebrow::after, .abt-head .eyebrow::after, .wd-head .eyebrow::after, .rmx-head .eyebrow::after { content: ""; display: block; width: 28px; height: 3px; margin: 8px auto 0; border-radius: 3px; background: linear-gradient(90deg, #f7861e, #ffb45c); }
  .phead:not([style*="center"]) .eyebrow::after { margin-left: 0; }
}
/* credential badges: 4 across on pages that have four (Solution), 2 centred where there are two (Home) */
.cred-in:has(.cb:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
.cred-in:has(.cb:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
@media (max-width: 900px) {
  .cred-in:has(.cb:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred-in:has(.cb:nth-child(4)) .cb:nth-child(3)::before { display: none; }
  .cred-in:has(.cb:nth-child(4)) .cb:nth-child(n+3) { border-top: 1px solid var(--line, #e6eaef); }
}
@media (max-width: 560px) { .cred-in:has(.cb:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* photos: keep faces in frame (photos are portrait, people are in the upper part) */
.gi .gimg { object-position: 50% 15% !important; }
.gframe { background: #eef1f4; }
@media (max-width: 900px) { .gi .gframe { aspect-ratio: 3 / 4 !important; } }
/* phones: one more step down in text size */
@media (max-width: 560px) {
  .hm-lead, .c-lead, .g-lead, .k-lead, .pr-lead, .phead p, .g-head p, .sp-lead, .gs-head p, .af-head p, .fqs-head p { font-size: var(--fs-body) !important; }
  .pd-p, .pd-ul li, .pg-head p, .sp-d, .ms-tx p { font-size: var(--fs-body) !important; }
  .gi-cap em { font-size: 8.5px !important; padding: 3px 8px !important; }
  .btn, .hm-cta .btn { font-size: var(--fs-body) !important; }
  .hero-line, .h1-sub { font-size: 14.5px !important; }
  .cb figcaption b { font-size: 12px; } .cb figcaption span { font-size: 10.5px; }
  .pill, .eyebrow { font-size: 10px !important; }
  .yf-top li a, .yf-col a { font-size: var(--fs-body); }
}
/* phones: the newer sections (shows card, online demo, ticket, steps, explainers, FAQ) one size smaller */
@media (max-width: 560px) {
  body .gs .gs-next h3 { font-size: 28px !important; }
  .gs-next { padding: 20px 18px; border-radius: 22px; }
  .gs-where { font-size: var(--fs-lead); } .gs-txt { font-size: var(--fs-body); line-height: 1.6; }
  .gs-pill { font-size: 10px; padding: 5px 11px; }
  .gs-facts { gap: 8px; margin-top: 16px; } .gs-facts li { padding: 9px 12px; gap: 11px; } .gs-facts span { width: 34px; height: 34px; border-radius: 10px; }
  .gs-facts small { font-size: 9px; } .gs-facts b { font-size: var(--fs-lead); }
  .gs-btns { gap: 8px; } .gs-btns .btn { font-size: var(--fs-body); padding: 11px 16px; }
  body .gs .gs-qa h3 { font-size: 20px !important; margin-bottom: 12px; }
  .gs-acc summary { font-size: var(--fs-lead); gap: 10px; padding: 13px 12px; } .gs-acc summary b { width: 30px; height: 30px; font-size: 11px; border-radius: 9px; } .gs-acc summary::after { width: 26px; height: 26px; font-size: 18px; }
  .gs-acc details p { font-size: var(--fs-body); padding: 0 14px 14px; }
  .gs-head p { font-size: var(--fs-body) !important; }
  /* event page */
  .od-sub { font-size: 17px; } .od-p { font-size: var(--fs-body); } .od-call b { font-size: 15px; }
  .od-steps h3, body .od-steps h3 { font-size: 15.5px !important; } .od-steps p { font-size: var(--fs-body); }
  .rw-p { font-size: var(--fs-body); } .rw-days b { font-size: 30px; } .rw-top b { font-size: 18px; } .rw-foot b { font-size: var(--fs-lead); } .rw-bn b { font-size: 40px; } .rw-ch li { font-size: 12px; }
  /* contact, careers, rotosight, piatiq */
  .abt-f dd { font-size: 15px; } .abt-head p, .wd-head p, .rmx-head p, .af-head p { font-size: var(--fs-body); }
  body .af-t h3, body .rmx-t h3 { font-size: 15.5px !important; } .af-t p, .rmx-t p { font-size: var(--fs-body); }
  .wd-n > b { font-size: 15.5px; } .wd-n > small { font-size: var(--fs-body); }
  .pqx-tx > p { font-size: var(--fs-body); } .pqx-pts li { font-size: var(--fs-body); padding: 8px 12px 8px 40px; }
  .fqs-acc summary { font-size: var(--fs-lead); } .fqs-acc details p { font-size: var(--fs-body); }
  body .fqs-card h3 { font-size: 19px !important; } .fqs-card > p { font-size: var(--fs-body); } .fqs-r b { font-size: var(--fs-lead); }
  /* products picker */
  .sp-q { font-size: 14.5px; } body .sp .sp-p h3 { font-size: 21px !important; } .sp-d { font-size: var(--fs-body); } .ms-cap .ms-tx p { font-size: var(--fs-body); }
}
/* ===== phones: one button system + calmer hero (all pages) ===== */
@media (max-width: 560px) {
  /* hero (Event + others using .hero) */
  .hero-in { gap: 22px; padding-block: 18px 30px; }
  .hero h1 { margin-top: 14px; font-size: clamp(24px, 7vw, 28px) !important; line-height: 1.12 !important; }
  .hero h1 .h1-sub { font-size: 14.5px !important; line-height: 1.35 !important; margin-top: 4px; font-weight: 700; }
  .hero-line { font-size: var(--fs-lead) !important; line-height: 1.4 !important; margin: 14px 0 0 !important; }
  .hero-lead { margin: 10px 0 18px; font-size: var(--fs-body); line-height: 1.6; max-width: none; }
  .hero .pill { padding: 6px 12px 6px 10px; font-size: 10px; letter-spacing: .05em; line-height: 1.3; }
  .hero-art { max-width: none; margin: 0; }
  .event-card { border-radius: 20px; } .ec-top { padding: 16px 16px; } .ec-name { font-size: 17px !important; } .ec-top small { font-size: 9.5px; }
  /* one button system: full-width, same height, same radius, stacked */
  .hero-cta, .hm-cta, .c-cta, .pr-cta, .g-ctas, .rs-cta, .k-cta, .cx-cta, .ba-cta, .rw-acts, .od-btns, .gs-btns, .cbn-btns, .roi-cta, .s-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .hero-cta .btn, .hm-cta .btn, .c-cta .btn, .pr-cta .btn, .g-ctas .btn, .rs-cta .btn, .k-cta .btn, .ba-cta .btn, .rw-acts .btn, .rw-a, .od-btns .btn, .od-call, .gs-btns .btn, .roi-cta .btn, .s-cta .btn, .hm-cta .btn, .sp-go {
    width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 11px 18px !important; border-radius: 12px !important; font-size: var(--fs-body) !important; line-height: 1.25; box-sizing: border-box;
  }
  .g-ctas .g-jump { justify-content: center; width: 100%; min-height: 40px; }
  .od-call { gap: 10px; justify-content: center; padding: 8px 14px !important; } .od-call b { font-size: var(--fs-lead); } .od-call svg { width: 32px; height: 32px; padding: 8px; }
  .rw-acts .btn svg, .rw-a svg { width: 16px; height: 16px; }
  .rw-ch { gap: 6px; } .rw-ch li { padding: 5px 11px; font-size: 11.5px; }
  .cbn-pill { min-height: 46px; padding: 6px 6px 6px 18px; font-size: var(--fs-body) !important; } .cbn-pill i { width: 34px; height: 34px; font-size: 15px; }
  .qr-cta, .growth .btn { width: 100%; }
  /* sticky dock stays, but a little lower and smaller so it never covers a button */
  .dk-book { height: 46px; font-size: var(--fs-lead); } .dk-t0 { width: 46px; height: 46px; }
  body.has-dock main { padding-bottom: 8px; }
  /* event page sections */
  .rw-ticket { transform: none; }
  .rw-top { padding: 16px 16px 0; } .rw-top span { font-size: 9.5px; letter-spacing: .06em; }
  .rw-days div { padding: 9px 6px 11px; } .rw-days small { font-size: 9.5px; } .rw-days em { font-size: 11.5px; }
}
/* ROI page, phones: smaller donut, bar never sits on top of the form */
@media (max-width: 900px) { .idle { width: min(100%, 220px) !important; margin-block: 6px 0; } .idle-c b { font-size: 34px; } .idle-c small { font-size: 10px; } .idle-c > span { font-size: 11px; } .idle-k { font-size: 10px; padding: 4px 9px; } }
@media (max-width: 560px) {
  .roi-hero { margin-top: 70px; } .roi-hero-in { padding-block: 20px 28px !important; gap: 16px !important; }
  .roi-hero h1 { font-size: clamp(23px, 6.8vw, 27px) !important; margin-top: 12px; }
  .roi-lead { font-size: var(--fs-body) !important; } .roi-hero-copy .hero-line { font-size: var(--fs-lead) !important; }
  .roi-bar { position: sticky; bottom: 78px; top: auto; margin: 0 12px 10px; border-radius: 14px; padding: 8px 12px; z-index: 20; }
  .roi-bar b { font-size: 17px; } .roi-bar a { font-size: 11.5px; }
  .roi-form h2, .roi-res h3 { font-size: 19px !important; }
  .rf label, .rf-l { font-size: 12px; } .rf input, .rf select { font-size: var(--fs-lead); }
}
/* Forms on phones (Event meeting form, Contact form): compact, balanced, 2 short fields per row */
@media (max-width: 560px) {
  .meeting-panel { border-radius: 22px; }
  .mform-head { padding: 14px 16px 14px !important; gap: 8px; }
  .mform-head small { font-size: 9.5px; } .mform-head h3, .mform-head .mf-h { font-size: 18px !important; margin: 2px 0 0; }
  .mprog { height: 4px; margin: 4px 0 0; }
  .mgrid { grid-template-columns: 1fr 1fr !important; gap: 10px 10px !important; padding: 14px 14px 4px !important; }
  .mgrid .fld.wide, .mgrid .fld:nth-child(-n+3), .mgrid .days { grid-column: 1 / -1; }
  .fld { gap: 5px; font-size: 11.5px; }
  .fld .lbl { font-size: 11.5px; }
  .fld input, .fld select, .fld textarea { font-size: var(--fs-body) !important; padding: 9px 10px !important; border-radius: 10px !important; border-width: 1px !important; }
  .fld .in input, .fld .in select { padding-left: 32px !important; }
  .fld .in svg { left: 10px; width: 15px; height: 15px; }
  .fld textarea { min-height: 70px !important; }
  .days legend { font-size: 11.5px; margin-bottom: 5px; }
  .dchips { gap: 6px; } .dchip span { padding: 7px 12px; font-size: 12px; }
  .msubmit { width: calc(100% - 28px) !important; margin: 12px 14px 0 !important; padding: 12px 16px !important; font-size: var(--fs-lead) !important; border-radius: 12px !important; }
  .mmsg, .mfine { font-size: 11.5px; padding-inline: 14px; }
  /* Contact form: name+company and email+phone side by side */
  .c-form .mgrid .fld:nth-child(-n+3) { grid-column: auto; } .c-form .mgrid .fld:nth-child(3) { grid-column: 1 / -1; }
  .c-form textarea { min-height: 84px !important; }
  .c-assure { padding: 10px 14px 16px; gap: 6px 12px; } .c-assure li { font-size: 11.5px; }
}
@media (max-width: 560px) {
  .meeting-panel .mgrid .fld:nth-child(5) { grid-column: 1 / -1; }
  .meeting-panel .mgrid .fld:nth-child(4) { grid-column: 1 / -1; }
  .meeting-panel .mgrid .fld:nth-child(6), .meeting-panel .mgrid .fld:nth-child(7) { grid-column: auto; }
}
@media (max-width: 560px) { .c-form .mgrid .fld:nth-child(6) { grid-column: 1 / -1; } .c-form .mgrid .fld:nth-child(1), .c-form .mgrid .fld:nth-child(2), .c-form .mgrid .fld:nth-child(4), .c-form .mgrid .fld:nth-child(5) { min-width: 0; } .c-form .fld .lbl { white-space: nowrap; } }
/* dropdowns need room: the option list is as wide as its longest option, so selects get a full row on phones */
@media (max-width: 560px) {
  .meeting-panel .mgrid .fld:nth-child(6), .meeting-panel .mgrid .fld:nth-child(7) { grid-column: 1 / -1; }
  .fld select { text-overflow: ellipsis; }
}
/* ===== RotoSight / PiatIQ / Products hero on phones ===== */
@media (max-width: 560px) {
  .phero-in { gap: 22px !important; padding-block: 14px 28px !important; }
  .crumbs { gap: 6px; font-size: 11.5px; align-items: center; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .plogo { margin-top: 14px; } .plogo .blogo-img { height: 38px !important; } .plogo .blogo-ic { width: 40px; height: 40px; } .plogo span { font-size: 28px; }
  .phero h1 { font-size: clamp(22px, 6.6vw, 26px) !important; margin-top: 12px !important; }
  .phero .hero-line { font-size: var(--fs-body) !important; margin: 10px 0 0 !important; }
  .plead { font-size: var(--fs-body) !important; line-height: 1.6 !important; }
  .pcallout { margin-top: 14px; padding: 11px 14px; border-radius: 13px; font-size: var(--fs-body); line-height: 1.55; }
  .pcta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; width: 100%; }
  .pcta .btn, .pband .btn { width: 100%; flex: none; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 11px 18px !important; border-radius: 12px !important; font-size: var(--fs-body) !important; box-sizing: border-box; }
  .pvisual { margin-top: 4px; } .pvisual .bstage { aspect-ratio: 1 / .8; overflow: hidden; border-radius: 22px; }
  .bstage .bnum { font-size: 84px !important; top: 2% !important; right: 2% !important; left: auto !important; opacity: .6; }
  .bstage .hot em { font-size: 10px; padding: 4px 9px; } .pvisual figcaption { font-size: 11.5px; }
}
/* RotoSight "Rebalance the arm" card + the scenes around it, phones */
@media (max-width: 560px) {
  .ra { gap: 18px !important; grid-template-columns: minmax(0, 1fr); }
  .ra-art, .bal { padding: 16px 14px !important; border-radius: 22px !important; }
  .bal-top { gap: 10px; align-items: center; }
  .bal-top b { font-size: 15px !important; line-height: 1.25; }
  .bal-pill { flex: none; white-space: nowrap; padding: 5px 11px !important; font-size: 11px !important; gap: 6px !important; border-radius: 999px !important; height: auto; width: auto; aspect-ratio: auto; }
  .bal-read { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bal-side { grid-template-columns: 44px 1fr auto; font-size: 12px; gap: 10px; } .bal-side b { min-width: 0; font-size: var(--fs-body); }
  .bal-gap { margin: 12px 0 2px; font-size: var(--fs-body); } .bal-gap b { font-size: 22px; } .bal-gap span { font-size: 11px; }
  .ra-art figcaption, .ra figcaption { font-size: 11.5px; }
  .ra-copy h3, .ra h3 { font-size: 17px; } .ra p { font-size: var(--fs-body); }
}
/* ===== RotoSight page: one phone scale for every section ===== */
@media (max-width: 560px) {
  /* section heads */
  .psec, .cs-sec, .rmx { padding-block: 34px !important; }
  .cs-head, .prob-head, .phead { margin-bottom: 0; }
  .cs-head h2, .prob-head h2, .phead h2, .rmx-head h2 { font-size: 21px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; max-width: none !important; }
  .cs-head p, .cs-sub, .prob-head p, .phead p, .rmx-head p { font-size: var(--fs-body) !important; line-height: 1.6 !important; margin-top: 8px !important; }
  .cs-head .eyebrow, .prob-head .eyebrow { font-size: 9.5px !important; letter-spacing: .1em !important; }
  /* problem: scene cards */
  .scenes { gap: 30px !important; margin-top: 22px !important; }
  .sc-art { border-radius: 18px; } .sc-meta h3, .sc h3 { font-size: 15px !important; line-height: 1.25; } .sc-meta p, .sc p { font-size: var(--fs-body) !important; line-height: 1.55; }
  .sc-n { font-size: 11px !important; }
  .pq-cloud { height: 90px !important; } .pturn { font-size: 15px !important; margin-top: 30px !important; } .pturn-ar { height: 36px; margin-top: 12px; }
  /* what RotoSight shows: live panel + numbered list */
  .lw, .lwrap { gap: 16px !important; }
  .lv-head, .lv-foot { font-size: 11px; } .lv-note, .viz-note { font-size: 11.5px !important; }
  .flist li, .flist > * { padding-block: 12px !important; gap: 12px !important; }
  .flist h3 { font-size: 15px !important; margin: 0 0 2px; } .flist p { font-size: var(--fs-body) !important; line-height: 1.55 !important; }
  .flist .cs-no, .flist .pr-n, .flist [class*="-n"] { font-size: 11px !important; width: 34px !important; height: 34px !important; }
  /* choose tiles */
  .cs-tiles { gap: 10px !important; } .cs-tile { padding: 16px 16px 14px !important; border-radius: 18px !important; }
  .cs-tile h3 { font-size: 15px !important; } .cs-tile p { font-size: var(--fs-body) !important; } .cs-go, .cs-tile .cs-go { font-size: var(--fs-body) !important; }
  .cs-no { font-size: 30px !important; } .cs-ic { transform: scale(.85); transform-origin: left top; }
  /* balance / cutoff / pour case studies */
  .bal-cmp, .cmp { gap: 12px !important; } .cmp-t { font-size: var(--fs-lead) !important; } .cmp-why, .cmp p { font-size: var(--fs-body) !important; line-height: 1.55 !important; }
  .cmp-row, .cmp-m { font-size: 12px; } .cmp-m b { font-size: 15px !important; }
  .ra-steps li, .ra-steps > * { gap: 12px; } .ra-steps h3, .ra-steps b { font-size: 15px !important; } .ra-steps p, .ra-steps span { font-size: var(--fs-body) !important; line-height: 1.55 !important; }
  .pour-flow li h3, .pour-flow h3 { font-size: 15px !important; } .pour-flow p { font-size: var(--fs-body) !important; }
  .scr-win { border-radius: 16px; } .scr-bar { font-size: 11px; } .scr-dial { transform: scale(.9); } .scr-msg, .scr-list { font-size: 12px; }
  .pair2 { gap: 10px !important; } .pair2-t { font-size: var(--fs-lead) !important; }
  /* how it works */
  .hs-art { border-radius: 18px; } .hs h3 { font-size: 15.5px !important; } .hs p { font-size: var(--fs-body) !important; line-height: 1.55 !important; } .hs-link { font-size: var(--fs-body) !important; }
  /* green live bar: dot and text on one line */
  .rmx-live { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 11px 14px; } .rmx-live b { font-size: var(--fs-body); flex: 1 1 60%; } .rmx-live .bars { height: 16px; }
  /* FAQ */
  .faq-l h2 { font-size: 21px !important; } .faq-l p { font-size: var(--fs-body); } .faq-r summary { font-size: var(--fs-lead); } .faq-r p { font-size: var(--fs-body); }
}
@media (max-width: 560px) {
  .ra-steps li { grid-template-columns: 34px minmax(0, 1fr) !important; gap: 12px !important; padding: 14px 12px 14px 2px !important; }
  .ra-steps b { width: 34px !important; height: 34px !important; margin-left: 8px !important; font-size: 11px !important; border-width: 1.5px; }
  .ra-steps strong { font-size: 15px !important; } .ra-steps span { font-size: var(--fs-body) !important; line-height: 1.55 !important; margin-top: 3px; }
  /* problem scenes: drop the dead space inside the picture cards */
  .sc-art svg, .sc .sc-art > svg { max-height: 190px; }
  .wsc { min-height: 0 !important; }
}
/* ===== PiatIQ page, phones: step lists + "golden sample feeds every arm / mold / cycle" ===== */
@media (max-width: 560px) {
  .pd-steps li, .pc-steps li { grid-template-columns: 34px minmax(0, 1fr) !important; gap: 12px !important; padding: 14px 12px 14px 2px !important; }
  .pd-steps b, .pc-steps b { width: 34px !important; height: 34px !important; margin-left: 8px !important; font-size: 11px !important; border-width: 1.5px !important; }
  .pd-steps strong, .pc-steps strong { font-size: 15px !important; line-height: 1.3; } .pd-steps span, .pc-steps span { font-size: 12.5px !important; line-height: 1.55 !important; margin-top: 3px; }
  .pd-art figcaption, .pc-art figcaption, .ra-art figcaption { font-size: 11.5px; text-align: center; }
  /* golden sample map: one column, chips wrap instead of being squeezed */
  .lw-map { margin-top: 24px; }
  .lw-mapg { grid-template-columns: 1fr !important; gap: 10px; }
  .lw-gcard { padding: 14px 12px; border-radius: 16px; } .lw-gcard svg { max-width: 190px; }
  .lw-cards { gap: 8px; }
  .lw-card { grid-template-columns: 1fr !important; gap: 8px; padding: 12px 12px; align-items: start; }
  .lw-card h3 { font-size: 13px; }
  .lw-card ul { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .lw-card li { white-space: normal; padding: 6px 8px; font-size: 10px; }
  .lw-card li b { font-size: 12px; }
  .gm-cyc { flex-wrap: wrap; } .gm-cyc i { width: 12px; height: 18px; } .gm-rate { font-size: 11px; }
}
@media (max-width: 560px) {
  .gm-molds { grid-template-columns: minmax(0, 1fr) !important; }
  .gm-molds li, .gm-arms li { grid-template-columns: minmax(0, 1fr) auto !important; min-width: 0; }
  .gm-molds li > span, .gm-molds li > b, .gm-arms li > span, .gm-arms li > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  .gm-molds { grid-template-columns: minmax(0, 1fr) !important; }
  .gm-molds li, .gm-arms li { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; align-items: center; column-gap: 10px; row-gap: 1px; padding: 8px 10px; }
  .gm-molds li > span, .gm-arms li > span { grid-column: 1; grid-row: 1; }
  .gm-molds li > b, .gm-arms li > b { grid-column: 1; grid-row: 2; }
  .gm-molds li > .lw-st, .gm-arms li > .lw-st { grid-column: 2 !important; grid-row: 1 / 3 !important; align-self: center; position: static !important; margin: 0; }
}
@media (max-width: 560px) {
  body .lw-card .gm-molds li { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; gap: 2px !important; }
  body .lw-card .gm-molds li > span, body .lw-card .gm-molds li > b, body .lw-card .gm-molds li > .lw-st { grid-column: 1 !important; grid-row: auto !important; position: static !important; justify-self: start; }
  body .lw-card .gm-molds li > .lw-st { margin-top: 3px; }
  body .lw-card .gm-molds li > b { font-size: 12px; }
}
/* Home "Video in action": clean phone layout, title never sits under the play button */
.vid-head h2 { font-size: var(--fs-h2) !important; } .vid-head p { font-size: var(--fs-lead); }
@media (max-width: 760px) {
  .vid { padding: 44px 0 48px; }
  .vid-head p { margin-top: 8px; max-width: 46ch; }
  .vp-frame { aspect-ratio: 16 / 10; border-radius: 20px; box-shadow: 0 30px 50px -28px rgba(16,33,47,.6); }
  .vp-play { width: 58px; height: 58px; margin: -38px 0 0 -29px; top: 44%; box-shadow: 0 14px 28px -10px rgba(247,134,30,.85); }
  .vp-play svg { width: 20px; height: 20px; margin-left: 3px; }
  .vp-cap { left: 14px; right: 14px; bottom: 12px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .vp-cap b { font-size: 13px; line-height: 1.3; max-width: 90%; }
  .vp-cap em { padding: 3px 9px; font-size: 9.5px; }
  .vp-shade { background: linear-gradient(180deg, rgba(11,32,54,0) 35%, rgba(11,32,54,.78) 100%); }
  .vp-c { display: none; }
  .vp-note { margin-top: 14px; font-size: 12.5px; }
}
@media (max-width: 760px) { .vp-btn .vp-cap { text-align: left; align-items: flex-start; justify-content: flex-end; } .vp-cap b { text-align: left; } }
/* Careers hero on phones: stats in one tidy row, buttons stacked, the picture contained and its tags never clipped */
@media (max-width: 560px) {
  /* Keep the hero fully below the 88px fixed header, with breathing room for the first pill. */
  .k-hero { margin-top: 88px; }
  .k-hero-in { padding-block: 18px 26px !important; gap: 14px !important; }
  .k-copy h1 { font-size: var(--fs-h1) !important; margin-top: 12px; }
  .k-lead { font-size: 13px !important; } .k-copy .hero-line { font-size: 14px !important; margin: 10px 0 0 !important; }
  .k-stats { gap: 0; margin: 18px 0 0; padding: 12px 0; border-block: 1px solid rgba(16,33,47,.1); }
  .k-stats li { flex: 1; } .k-stats li + li { padding-left: 16px; border-left: 1px solid rgba(16,33,47,.1); }
  .k-stats b { font-size: 26px; } .k-stats li:nth-child(2) b { font-size: 19px; padding-top: 7px; } .k-stats span { font-size: 10px; letter-spacing: .1em; margin-top: 4px; }
  .k-cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin-top: 16px; }
  .k-cta .btn { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px !important; font-size: 13.5px !important; padding: 11px 18px !important; }
  .cs-tag { font-size: 10.5px !important; padding: 5px 11px !important; }
  .cs-tag.a { left: 5% !important; bottom: 10% !important; } .cs-tag.b { right: 5% !important; left: auto !important; top: 8% !important; }
  .pl-t { font-size: 11px; }
}
/* Careers hero picture on phones: the plates are stacked closer (the desktop gaps are in fixed px), so the stack reads as one object */
@media (max-width: 900px) {
  .cs { aspect-ratio: 1 / 1.05 !important; width: min(100%, 320px) !important; margin: 4px auto 0 !important; }
  .cs-iso { transform: translateY(40px) rotateX(58deg) rotateZ(-38deg) scale(.72) !important; }
  .in .cs-iso { animation: none !important; }
  .p1 { --z: 0px; } .p2 { --z: 62px; } .p3 { --z: 124px; }
  .in .pl { animation: none !important; }
  .cs-coin { transform: translateZ(196px) rotateZ(38deg) rotateX(-58deg) !important; animation: none !important; }
  .cs-coin .coin3d { left: -34px; top: -34px; width: 68px; height: 68px; }
  .cs-sh { width: 80px; height: 80px; margin: -40px; transform: translateZ(128px); }
  .pl { padding: 14px; gap: 8px; border-radius: 20px; } .pl-t { font-size: 10px; }
  .cs-tag { font-size: 10.5px !important; padding: 5px 11px !important; }
  .cs-tag.a { left: 4% !important; bottom: 10% !important; } .cs-tag.b { right: 4% !important; left: auto !important; top: 8% !important; }
}
@media (max-width: 900px) { .cs { aspect-ratio: 1 / 1.12 !important; } .cs-iso { transform: translateY(78px) rotateX(58deg) rotateZ(-38deg) scale(.7) !important; } .cs-tag.b { top: 14% !important; } .cs-tag.a { bottom: 6% !important; } }