/* tracio-v2-live.css: the approved stage 2 design applied to the live markup of a migrated page (stage 3).
   A migrated page keeps its own HTML (title, meta, canonical, hreflang, JSON-LD, H1, copy, forms, booking embed and
   every hook the live scripts use) and gets this file after the old stylesheets plus class="v2" on <body>.
   Pages without body.v2 are untouched: every rule here is scoped to body.v2.
   Rules from the design: token colours only; no gradients, glows, shadows or lift on hover; Archivo and Inter;
   sentence case (no caps labels, no label above a heading); no arrow after a link; no generated or stock photos. */

@font-face { font-family: "Inter Variable"; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Variable"; src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---- tokens: the old variables take the design values, so every old component follows ---- */
body.v2 {
  --bg: #0A0F1F; --bg-elev: #111A2E; --surface: #111A2E; --surface-2: #1A2642;
  --border: #334155; --border-soft: #1F2C4D;
  --text: #E2E8F0; --muted: #94A3B8; --muted-2: #94A3B8;
  --accent: #22D3EE; --accent-deep: #06B6D4; --accent-cyan: #22D3EE;
  --accent-2: #22D3EE; --accent-2-deep: #06B6D4; --accent-3: #22D3EE; --accent-3-deep: #06B6D4;
  --radius: 4px; --radius-lg: 4px;
  --shadow: none; --shadow-amber: none; --shadow-lg: none; --ring: 0 0 0 3px #22D3EE;
  --grad-accent: #22D3EE; --glow-cyan: transparent;
  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --v2-display: "Archivo Variable", "Helvetica Neue", Arial, sans-serif;
  --v2-line-ui: #5F6F96;
  font-family: var(--font-sans);
  font-size: 17px; line-height: 1.6;
  background: var(--bg); color: var(--text);
}
body.v2::before, body.v2::after { display: none !important; }

/* ---- motion and decoration off: no glows, gradients, shadows, lift or entrance animations ---- */
body.v2 *, body.v2 *::before, body.v2 *::after { box-shadow: none !important; text-shadow: none !important; }
body.v2 main *, body.v2 .nav *, body.v2 footer * { animation: none !important; }
body.v2 .reveal { opacity: 1 !important; transform: none !important; }
body.v2 .card:hover, body.v2 .btn:hover, body.v2 a:hover { transform: none !important; }
body.v2 [class*="glow"], body.v2 .pul { display: none !important; }

/* ---- type: Archivo headings, Inter text, sentence case everywhere ---- */
body.v2, body.v2 p, body.v2 li, body.v2 td, body.v2 th, body.v2 label, body.v2 input, body.v2 textarea, body.v2 select, body.v2 button { font-family: var(--font-sans); }
body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4 { font-family: var(--v2-display); color: var(--text); letter-spacing: -0.015em; text-wrap: balance; }
body.v2 h1 { font-size: clamp(2.25rem, 2.4vw + 1.2rem, 3.5rem); line-height: 1.08; font-weight: 700; }
body.v2 h2 { font-size: clamp(1.75rem, 1.2vw + 1.2rem, 2.25rem); line-height: 1.17; font-weight: 600; }
body.v2 h3 { font-size: 1.3rem; line-height: 1.36; font-weight: 600; }
body.v2 p, body.v2 li { color: var(--muted); }
body.v2 main p, body.v2 main li { font-size: 1.0625rem; line-height: 1.65; }
body.v2 .lead { color: var(--text); font-size: 1.2rem; line-height: 1.55; }
body.v2 strong, body.v2 b { color: var(--text); }
body.v2 * { text-transform: none !important; }
body.v2 [class*="eyebrow"], body.v2 .tag, body.v2 .lbl, body.v2 .nav-mega-h, body.v2 .nav-tools-label, body.v2 .wc-chips-label, body.v2 footer h4 { letter-spacing: 0 !important; }
/* labels that sit above a heading are not used in the design */
body.v2 main .eyebrow, body.v2 main .aud-eyebrow, body.v2 main [class$="-eyebrow"] { display: none !important; }
/* decorative bars under headings */
body.v2 .section-head h2::after, body.v2 .section-head::after, body.v2 h2::after { display: none !important; }
body.v2 [style*="background-clip"], body.v2 .grad-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--text) !important; }

/* ---- links and buttons: filled cyan for the main action, outline for the rest, no arrows ---- */
body.v2 a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.v2 a:hover { color: #67E8F9; }
body.v2 :focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 3px; }
body.v2 .btn-arrow::after, body.v2 .btn-arrow::before, body.v2 a.arrow::after, body.v2 [class*="-go"]::after { content: none !important; display: none !important; }
body.v2 .btn { border-radius: 4px; font-weight: 600; font-size: 1rem; font-family: var(--font-sans); min-height: 48px; padding: 12px 22px; transition: background .15s; }
body.v2 .btn-primary, body.v2 .ft-btn, body.v2 .nav-cta, body.v2 .lp-btn { background: var(--accent) !important; color: #0A0F1F !important; border: 2px solid var(--accent) !important; }
body.v2 .btn-primary:hover, body.v2 .ft-btn:hover, body.v2 .nav-cta:hover, body.v2 .lp-btn:hover { background: #67E8F9 !important; border-color: #67E8F9 !important; }
body.v2 .btn-ghost, body.v2 .lp-btn-alt, body.v2 .btn-secondary { background: transparent !important; color: var(--accent) !important; border: 2px solid var(--accent) !important; }

/* ---- surfaces: one 1px line, 4px radius, flat fills ---- */
body.v2 .card, body.v2 .faq-item, body.v2 .form, body.v2 .cta-banner, body.v2 .p196-card, body.v2 .lp-card, body.v2 .aud-card,
body.v2 .p15-dl-card, body.v2 .p193-xl-card, body.v2 .stat-item, body.v2 .p172-book, body.v2 .p1783-form, body.v2 .lp-quote-card {
  background: var(--surface) !important; background-image: none !important;
  border: 1px solid var(--border) !important; border-radius: 4px !important;
}
body.v2 .faq-item[open] { background: var(--surface) !important; border-color: var(--border) !important; }
body.v2 .cta-banner { text-align: left; padding: 40px; }
body.v2 .card .icon { display: none; }
body.v2 input, body.v2 textarea, body.v2 select { background: #0A0F1F !important; border: 2px solid var(--v2-line-ui) !important; border-radius: 4px !important; color: var(--text) !important; }
body.v2 input::placeholder, body.v2 textarea::placeholder { color: var(--muted); }

/* ---- no generated or stock imagery: hero photos, operational photos and client logos are not shown ---- */
body.v2 .hero-media, body.v2 .page-banner .hero-media, body.v2 [class*="op-p4-"], body.v2 [class^="op-"],
body.v2 .logowall, body.v2 .logo-tile, body.v2 [data-p15="hero-img"] { display: none !important; }
body.v2 .has-media, body.v2 .page-banner, body.v2 .hero, body.v2 .hm-banner { background: var(--bg) !important; background-image: none !important; }
body.v2 .has-media::before, body.v2 .has-media::after, body.v2 .page-banner::before, body.v2 .page-banner::after, body.v2 .hero::before, body.v2 .hero::after { display: none !important; }

/* ---- hero: left aligned, like the design ---- */
body.v2 .page-banner, body.v2 .hero { text-align: left; padding: 56px 0 48px; }
body.v2 .page-banner .container > *, body.v2 .hero .container > * { margin-left: 0; }
body.v2 .page-banner h1, body.v2 .hero h1 { max-width: 20ch; }
body.v2 .page-banner .lead, body.v2 .hero .lead { margin-left: 0; max-width: 62ch; }
body.v2 .hero-cta { justify-content: flex-start; }
body.v2 .section-head { text-align: left; margin-left: 0; max-width: 66ch; }
body.v2 .section-head .lead { margin-left: 0; }

/* ---- sections: alternate the two navies by position, a 1px rule between them ---- */
body.v2 main > section { background: var(--bg); border-top: 1px solid var(--border-soft); }
body.v2 main > section:nth-of-type(even) { background: #111A2E; }
body.v2 main > section:first-of-type { border-top: 0; }
body.v2 main > section:nth-of-type(even) .card, body.v2 main > section:nth-of-type(even) .faq-item { background: var(--bg) !important; }

/* ---- header: the live markup and hooks, in the design's look ---- */
body.v2 header.nav { background: var(--bg) !important; border-bottom: 1px solid var(--border-soft); backdrop-filter: none !important; }
body.v2 header.nav .nav-links a { color: var(--text); font-weight: 500; }
body.v2 .nav-submenu, body.v2 .nav-mega { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; }
body.v2 .nav-caret { color: var(--muted); }

/* ---- footer ---- */
body.v2 footer.footer { background: var(--bg) !important; border-top: 1px solid var(--border-soft); }
body.v2 footer h4 { font-family: var(--v2-display); font-size: 1rem; color: var(--text); }
body.v2 footer a { color: var(--text); }

/* ---- cookie strip and the phone bars from the live scripts ---- */
body.v2 .cookie-banner { background: var(--surface) !important; border: 1px solid var(--v2-line-ui) !important; border-radius: 4px !important; }
body.v2 .cookie-banner .btn, body.v2 .cookie-banner button { background: transparent !important; color: var(--accent) !important; border: 2px solid var(--accent) !important; border-radius: 4px !important; }
body.v2 .wc-sticky, body.v2 #lp-sticky { background: var(--bg) !important; border-top: 1px solid var(--v2-line-ui) !important; }

/* ---- the booking embed: frame on the other navy, readable fallback ---- */
body.v2 .p172-cal { border: 1px solid var(--border) !important; border-radius: 4px !important; }
body.v2 .v2-fb { font-size: 1rem; color: var(--muted); margin: 12px 0 0; }

/* ---- small print stays at least 16px ---- */
body.v2 small, body.v2 .small, body.v2 .disclaimer, body.v2 .last-updated, body.v2 .p192-small, body.v2 .yt-note, body.v2 .wc-figcaption { font-size: 1rem !important; }

/* ---- one left edge: the old centred narrow blocks line up with the headings ---- */
body.v2 main .container { max-width: var(--container, 1240px) !important; }
body.v2 .wc-steps, body.v2 .wc-steps-note, body.v2 .wc-service, body.v2 .wc-trust, body.v2 .testimonial, body.v2 .wc-qa, body.v2 .faq-list, body.v2 .faq { max-width: 880px; margin-left: 0 !important; margin-right: auto !important; }
body.v2 .wc-steps-note, body.v2 .last-updated { text-align: left !important; }
body.v2 .last-updated { max-width: var(--container, 1240px) !important; margin: 24px auto 0 !important; padding: 0 24px !important; box-sizing: border-box; }
body.v2 .wc-steps li { border-radius: 4px; background: var(--surface); }
body.v2 .wc-steps li::before { background: transparent; border: 1px solid var(--accent); font-weight: 600; }
body.v2 .wc-steps li strong { color: var(--text); }
body.v2 .wc-service, body.v2 .wc-trust { background: var(--surface) !important; border-radius: 4px !important; }
body.v2 .page-banner h1, body.v2 .hero h1 { max-width: 24ch; hyphens: manual; }
body.v2 .ft-all a::after, body.v2 .aud-links a::after, body.v2 .spec-link::after, body.v2 .nav-mega-all a::after { content: none !important; }
/* phone folds (js/p177-mobile.js): the old fold kept the caps label as the closed panel's title and hid the H2;
   the design has no caps label, so the H2 is the title of a closed panel */
@media (max-width: 760px) {
  body.v2 .m177-fold:not(.m177-open) .section-head > h2.m177-fh { display: block !important; }
  body.v2 .m177-fold-btn { border-radius: 4px; background: transparent; border: 1px solid var(--v2-line-ui); }
}

/* ---- the small lead forms (js/p196.js dialog) and the booking request form ---- */
body.v2 .p196-dlg { background: var(--surface) !important; color: var(--text); border: 1px solid var(--v2-line-ui) !important; border-radius: 4px !important; }
body.v2 .p196-dlg::backdrop { background: rgba(10, 15, 31, .8); }
body.v2 .p196-dlg h3 { font-family: var(--v2-display); }
body.v2 .p196-asks button { color: var(--accent); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 1rem; min-height: 44px; }
body.v2 .p196-priv, body.v2 .p196-note { font-size: 1rem !important; }
body.v2 .p196-dlg label, body.v2 .p196-dlg p { font-size: 1rem !important; }

/* ---- 16px floor for text in <main>: inline and table text never drops below 1rem; numbers keep their size ---- */
body.v2 main :is(p, li, a, span, strong, em, b, i, label, td, th, dt, dd, code, small, button, figcaption, cite, time, summary,
  .stat-lbl, .lbl, .cap-num, .pn, .meta, .tag, .tech-tag, .tp-option-tag, .tp-option-note, .proof-chip, .lp-opt, .fee, .wc-chip,
  .tech-chip, .wc-rail-n, .wc-chips-label, .wc-service-by, .p1783-promise, .m177-tap, .m177-teaser, .m177-fold-btn, .fx-btn):not([class*="num"]):not([class*="val"]):not([class*="price"]):not([class*="big"]):not(svg *):not(.fp-demo *):not(pre *):not(pre) { font-size: max(1rem, 1em) !important; }
/* gradient text and number fills become flat cyan */
body.v2 .stat-num, body.v2 .num, body.v2 [class*="grad"] { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }

/* ---- the live RTLS demo (js/floorplan.js on /demo and the home page): same widget, easier to read ----
   flat panels, 4px corners, labels in sentence case at a readable size, no pulse or glow */
body.v2 .fp-demo { border: 1px solid var(--border) !important; border-radius: 4px !important; background: var(--surface) !important; }
body.v2 .fp-canvas-wrap { background: #0A0F1F !important; }
body.v2 .fp-side { background: var(--surface) !important; }
body.v2 .fp-pulse { animation: none !important; box-shadow: none !important; }
body.v2 .fp-controls h3 { font-family: var(--v2-display); font-size: 1.2rem; color: var(--text); }
body.v2 .fp-controls > p { font-size: 1rem !important; color: var(--muted) !important; }
body.v2 .fp-btn { border-radius: 4px !important; background: transparent !important; border: 1px solid var(--v2-line-ui) !important; font-size: .95rem; min-height: 40px; }
body.v2 .fp-btn.active, body.v2 .fp-btn[aria-pressed="true"] { background: var(--accent) !important; border-color: var(--accent) !important; color: #0A0F1F !important; }
body.v2 .fp-btn:hover { transform: none !important; border-color: var(--accent) !important; }
body.v2 .fp-label, body.v2 .fp-stat-lbl, body.v2 .fp-events-title, body.v2 .fp-usecase-tag, body.v2 .fp-kpi-lbl {
  letter-spacing: 0 !important; text-transform: none !important; font-size: .95rem !important; font-weight: 600; color: var(--text) !important; }
body.v2 .fp-stat, body.v2 .fp-kpi { background: #0A0F1F !important; border: 1px solid var(--border) !important; border-radius: 4px !important; }
body.v2 .fp-stat-val { font-family: var(--v2-display); font-size: 1.3rem; }
body.v2 .fp-kpi-hint { font-size: .85rem !important; }
body.v2 .fp-usecase-blurb { font-size: 1rem !important; color: var(--muted) !important; }
body.v2 .fp-usecase-acc { border-radius: 4px !important; background: transparent !important; border-color: var(--v2-line-ui) !important; color: var(--text) !important; font-size: .9rem; }
body.v2 .fp-event { font-size: .9rem !important; }
body.v2 .fp-legend { font-size: .95rem !important; background: transparent !important; }
body.v2 .fp-legend [data-s] { font-size: .9rem !important; }

/* ---- "How to read the demo" and the key under it (/demo) ---- */
body.v2 .v2-howto { margin: 0 0 28px; max-width: 880px; }
body.v2 .v2-howto h2 { margin: 0 0 16px; }
body.v2 .v2-steps { list-style: none; counter-reset: v2s; margin: 0; padding: 0; display: grid; gap: 12px; }
body.v2 .v2-steps li { counter-increment: v2s; position: relative; padding: 0 0 0 48px; color: var(--muted); }
body.v2 .v2-steps li::before { content: counter(v2s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-weight: 600; font-family: var(--v2-display); }
body.v2 .v2-steps strong { color: var(--text); }
body.v2 .v2-key { margin: 32px 0 0; }
body.v2 .v2-key h2 { margin: 0 0 16px; }
body.v2 .v2-key dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
body.v2 .v2-key dl > div { padding: 14px 0; border-top: 1px solid var(--border); }
body.v2 .v2-key dt { color: var(--text); font-weight: 600; margin: 0 0 4px; }
body.v2 .v2-key dd { margin: 0; color: var(--muted); }
body.v2 .v2-key .v2-more { margin: 20px 0 0; }
@media (max-width: 760px) { body.v2 .v2-key dl { grid-template-columns: 1fr; } }

/* ---- figures, tables and two-column text on new stage 3 pages (/demo-guide) ---- */
body.v2 .v2-fig { margin: 8px 0 0; padding: 24px; border: 1px solid var(--border); border-radius: 4px; background: #0A0F1F; }
body.v2 main > section:nth-of-type(even) .v2-fig { background: #0A0F1F; }
body.v2 .v2-fig figcaption { margin: 16px 0 0; color: var(--muted); font-size: 1rem; }
body.v2 .v2-flow { display: block; width: 100%; height: auto; }
body.v2 .v2-flow-tall { display: none; max-width: 358px; margin: 0 auto; }
body.v2 .v2-flow-line { stroke: var(--v2-line-ui); stroke-width: 2; fill: none; }
body.v2 .v2-flow-node rect { fill: #111A2E; stroke: var(--v2-line-ui); stroke-width: 1; }
body.v2 .v2-flow-end rect { stroke: var(--accent); }
body.v2 .v2-flow text { fill: #E2E8F0; font-family: var(--v2-display); font-size: 20px; font-weight: 600; text-anchor: middle; }
body.v2 .v2-flow .v2-flow-sub { fill: #94A3B8; font-family: var(--font-sans); font-size: 16px; font-weight: 400; }
body.v2 .v2-flow .v2-flow-note { fill: #94A3B8; font-family: var(--font-sans); font-size: 16px; font-weight: 400; text-anchor: start; }
body.v2 .v2-flow-walker { fill: var(--accent); offset-rotate: 0deg; }
body.v2 .v2-flow-walker-w { offset-path: path("M112 86 H1008"); animation: v2-walk 6s linear infinite !important; }
body.v2 .v2-flow-walker-t { offset-path: path("M179 52 V492"); animation: v2-walk 6s linear infinite !important; }
@keyframes v2-walk { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { body.v2 .v2-flow-walker { animation: none !important; offset-distance: 50%; } }
@media (max-width: 760px) { body.v2 .v2-flow-wide { display: none; } body.v2 .v2-flow-tall { display: block; } body.v2 .v2-fig { padding: 16px; } }
body.v2 .v2-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; }
body.v2 .v2-table { width: 100%; border-collapse: collapse; min-width: 560px; }
body.v2 .v2-table th, body.v2 .v2-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--border); font-size: 1rem; line-height: 1.55; }
body.v2 .v2-table thead th { border-top: 0; background: #111A2E; color: var(--text); font-weight: 600; }
body.v2 .v2-table tbody th { color: var(--text); font-weight: 600; white-space: nowrap; }
body.v2 .v2-table td { color: var(--muted); }
body.v2 .v2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 1040px; }
body.v2 .v2-two h3 { margin: 0 0 8px; }
body.v2 .v2-links { margin: 24px 0 0; }
@media (max-width: 760px) { body.v2 .v2-two { grid-template-columns: 1fr; gap: 24px; } }
body.v2 .cta-banner > *, body.v2 .cta-banner .p196-asks { margin-left: 0 !important; max-width: 62ch; }
body.v2 .cta-banner .hero-cta { max-width: none; }
@media (max-width: 760px) { body.v2 .v2-table-wrap { border: 0; overflow: visible; } body.v2 .v2-table { min-width: 0; } }

/* ---- rebuilt diagrams (tools/apply-diagrams.py): drawing rules from the stage 2 diagram system ---- */
body.v2 { --text-muted: #94A3B8; --card-line: #334155; --line-ui: #5F6F96; --rule: #1F2C4D; --fs-small: 1rem; --lh-small: 1.55; --s-2: 8px; --s-3: 12px; --s-4: 16px; }
body.v2 .dg { display: block; width: 100%; height: auto; }
body.v2 .dg text { font-family: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; fill: var(--text); font-size: 17px; }
body.v2 .dg .h { font-family: "Archivo Variable", Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 19px; }
body.v2 .dg .hb { font-family: "Archivo Variable", Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 22px; }
body.v2 .dg .m { fill: var(--text-muted); font-size: 16px; }
body.v2 .dg .b { font-weight: 600; }
body.v2 .dg .a { fill: var(--accent); }
body.v2 .dg .n { font-family: "Archivo Variable", Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 600; fill: var(--text-muted); font-size: 16px; }
body.v2 .dg .box { fill: var(--surface); stroke: var(--card-line); stroke-width: 1; }
body.v2 .dg .box2 { fill: var(--surface-2); stroke: var(--card-line); stroke-width: 1; }
body.v2 .dg .ground { fill: var(--bg); }
body.v2 .dg .opt { fill: var(--bg); stroke: var(--line-ui); stroke-width: 1.5; stroke-dasharray: 5 5; }
body.v2 .dg .you { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
body.v2 .dg .ln { fill: none; stroke: var(--line-ui); stroke-width: 1.5; }
body.v2 .dg .ln2 { fill: none; stroke: var(--card-line); stroke-width: 1; }
body.v2 .dg .dash { fill: none; stroke: var(--line-ui); stroke-width: 1.5; stroke-dasharray: 4 5; }
body.v2 .dg .eq { fill: var(--text); }
body.v2 .dg .eqs { fill: none; stroke: var(--text); stroke-width: 1.5; }
body.v2 .dg .eqd { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 3 4; }
body.v2 .dg .node { fill: var(--bg); stroke: var(--line-ui); stroke-width: 1.5; }
body.v2 .dg .gate { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
body.v2 .dg .ac { fill: var(--accent); }
body.v2 .dg .acs { fill: none; stroke: var(--accent); stroke-width: 1.5; }
body.v2 .dg .band { fill: var(--surface-2); }
body.v2 .dg .grid { fill: none; stroke: var(--rule); stroke-width: 1; }
body.v2 .dg .land { fill: var(--surface); stroke: var(--line-ui); stroke-width: 1.5; }

@keyframes dg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dg-walk { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes dg-blink { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  body.v2 .dg-run .dg .draw { stroke-dasharray: 1; animation: dg-draw 1.8s ease-in-out both; }
  body.v2 .dg-run .dg .walk { animation: dg-walk 1.8s ease-in-out both; }
  body.v2 .dg-run .dg .late { animation: dg-blink 2.2s ease-out both; }
}
body.v2 .dg-fig { margin: 0; }
body.v2 .dg-fig .dg-d { display: block; } body.v2 .dg-fig .dg-m { display: none; }
@media (max-width: 767px) { body.v2 .dg-fig .dg-d { display: none; } body.v2 .dg-fig .dg-m { display: block; } }
body.v2 .dg-fig figcaption { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); margin-top: var(--s-3); max-width: 66ch; }
body.v2 .dg-key { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
body.v2 .dg-key li { display: flex; gap: var(--s-3); align-items: center; margin: 0; }
body.v2 .dg-key svg { width: 24px; height: 16px; flex: none; }
body.v2 .dg-key b { color: var(--text); font-weight: 600; }
body.v2 .dg-key .k-eq { fill: var(--text); } body.v2 .dg-key .k-eqd { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 2 2; } body.v2 .dg-key .k-ac { fill: var(--accent); }

body.v2 .dg-run .dg .draw, body.v2 .dg-run .dg .walk, body.v2 .dg-run .dg .late { animation-play-state: running; }
@media (prefers-reduced-motion: no-preference) {
  body.v2 .dg-run .dg .draw { animation: dg-draw 1.8s ease-in-out both !important; }
  body.v2 .dg-run .dg .walk { animation: dg-walk 1.8s ease-in-out both !important; }
  body.v2 .dg-run .dg .late { animation: dg-blink 2.2s ease-out both !important; }
}
/* an amber gradient dot used as decoration on the role pages */
body.v2 [data-sa="5a1cb76d"] { display: none !important; }
/* more generated photos: the p15 photo strips and OG card images used as thumbnails */
body.v2 main .p15-figs, body.v2 main img[src*="/img/og/"], body.v2 main picture:has(img[src*="/img/og/"]) { display: none !important; }
body.v2 .industry-img, body.v2 .arch-badge, body.v2 .bi-node { background: var(--surface) !important; background-image: none !important; }
/* small text the first floor did not reach: plain divs and small headings */
body.v2 main :is(div, h4, h5, h6, caption, .cap-num, .arch-label, .arch-integration, .gl, .card-deliv, .price-ph):not(:has(> *:not(br, a, strong, em, b, span, code))):not([class*="stat-num"]):not([class*="val"]):not(svg *):not(.fp-demo *):not(pre *):not(pre) { font-size: max(1rem, 1em) !important; }
/* hero with its photo hidden: the text takes the full width instead of half */
body.v2 .hero-grid:not(:has(.dg-fig)):not(:has(.hero-visual svg[role="img"])) { grid-template-columns: minmax(0, 1fr) !important; }
body.v2 .hero-grid:not(:has(.dg-fig)):not(:has(.hero-visual svg[role="img"])) > :not(:first-child):not(:has(*:not(picture, img, source))) { display: none !important; }
body.v2 .hero .lead, body.v2 .hero p { max-width: 66ch; }
/* a rebuilt drawing in a hero sits under the text at its own size, never squeezed into a half column */
body.v2 .hero-grid:has(.dg-fig) { grid-template-columns: minmax(0, 1fr) !important; }
body.v2 .hero-visual:has(.dg-fig), body.v2 :has(> .dg-fig) { width: auto !important; max-width: 960px !important; height: auto !important; aspect-ratio: auto !important; transform: none !important; }
body.v2 .dg-fig { max-width: 960px; }
/* drawings keep their 16px text: narrow cards use the phone drawing, article drawings get the full 960px */
body.v2 .industry-img .dg-d { display: none !important; }
body.v2 .industry-img .dg-m { display: block !important; }
@media (min-width: 1000px) { body.v2 .article figure:has(> .dg-fig), body.v2 .article > .dg-fig { width: min(960px, calc(100vw - 48px)) !important; max-width: none !important; } }
@media (min-width: 761px) and (max-width: 1199px) { body.v2 .grid-3:has(.industry-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* the interactive integration stack (js/architecture-stack.js): sentence-case labels, plain code block */
body.v2 [class*="arch-"] { letter-spacing: 0 !important; }
body.v2 .arch-stack pre, body.v2 .arch-stack code, body.v2 .arch-stack pre * { background: transparent !important; font-size: 1rem !important; }
body.v2 .arch-stack pre { background: #0A0F1F !important; border: 1px solid var(--border); border-radius: 4px; }
body.v2 .arch-stack [class*="chip"], body.v2 .arch-stack [class*="tool"] span { border-radius: 4px !important; }
body.v2 .dg-fig.dg-narrow .dg-d { display: none !important; }
body.v2 .dg-fig.dg-narrow .dg-m { display: block !important; }
body.v2 .case-img .dg-d { display: none !important; }
body.v2 .case-img .dg-m { display: block !important; }
@media (min-width: 761px) and (max-width: 1199px) { body.v2 .grid-3:has(.case-card .dg-fig) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { body.v2 .fp-canvas-wrap:has(.dg-fig) { padding: 0 !important; } }
/* home: no client logo wall in the design (the names stay in the page's screen-reader text, which is hidden with it) */
body.v2 .p186-logos { display: none !important; }
body.v2 .ladder-num { font-size: 1rem !important; }
body.v2 .neutrality-band, body.v2 .case-img { background: var(--surface) !important; background-image: none !important; }
body.v2 [class*="-label"], body.v2 [class*="-lbl"], body.v2 [class*="kicker"], body.v2 [class*="overline"] { letter-spacing: 0 !important; }

/* ---- language switcher (stage 3-e): in the footer and, on phones, in the menu; not in the top bar ----
   the top-bar picker stays in the markup because js/main.js and js/p177-mobile.js read it */
body.v2 .announce .lang-switch { display: none !important; }
body.v2 .v2-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--border-soft); width: 100%; }
body.v2 .v2-langs-h { color: var(--text); font-weight: 600; margin-right: 6px; }
body.v2 .v2-langs a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
body.v2 .v2-langs a:hover { color: var(--accent); text-decoration: underline; }
body.v2 .v2-langs a[aria-current="true"] { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
body.v2 .footer-bottom:has(.v2-langs) { flex-wrap: wrap; }
body.v2 .m177-lang-list a[aria-current="true"] { color: var(--accent); font-weight: 600; }
body.v2 .v2-lang-li .m177-lang-h { letter-spacing: 0 !important; text-transform: none !important; font-size: 1rem !important; }
body.v2 .v2-lang-li .m177-lang-list a { border-radius: 4px !important; }
/* decorative avatar dots (testimonial-style rows): flat, no gradient */
body.v2 .av { background: var(--surface-2) !important; background-image: none !important; border: 1px solid var(--border); }