/* ── p-oem.css — the OEM page (oem.html) ────────────────────────────────────
   On top of theme.css (tokens) and inner-pages.css (.p6-* blocks). Everything here is
   prefixed .oem-. Hidden start states live only under html.fx-motion, so under
   reduced motion (the owner's machine) or a script failure the page is simply
   finished. The lines (hero + architecture) are drawn by app/p-oem.js.        */

/* ── hero ── */
/* theme.css pads every non-landing main by 96px for the floating nav, and .p6-hero already starts
   128px down for the same reason. theme.css now cancels that itself with main:has(> .p6-hero:first-child);
   this repeats it for browsers without :has(), so the hero never starts 224px down. */
body.s6-body:not(.has-hero) .s6-page > main.oem-main { padding-top: 0; }
.oem-main .s6-h2, .oem-main .p6-hero h1 { text-wrap: balance; }
.oem-hero .s6-wrap { position: relative; z-index: 1; align-items: start; }
.oem-hero .oem-htext { min-width: 0; }
.oem-hero .oem-hicon { display: block; position: relative; }
.oem-note { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font: 600 14px/1.4 var(--font); color: var(--muted); }
.oem-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(247, 183, 68, .18); flex: none; }
.oem-btn { padding: 0 10px 0 20px; gap: 14px; }
.oem-btn .ic { margin-right: 0; transition: transform .2s var(--ease); } .oem-btn .ic svg { width: 15px; height: 15px; }
@media (hover: hover) { .oem-btn:hover .ic { transform: translateX(3px); } }

.oem-hfig { position: relative; margin: clamp(56px, 7.4vw, 108px) 0 0; min-width: 0; }
.oem-hmedia img { transform-origin: 50% 60%; }
html.fx-motion .oem-hmedia img { transform: scale(1.06); transition: transform 1.8s var(--ease); }
html.fx-motion .oem-hfig.in .oem-hmedia img { transform: none; }

/* the socket where the hero line plugs into the photo's top edge (left set by p-oem.js) */
.oem-port { display: none; position: absolute; z-index: 3; top: 0; left: var(--port-x, 30%); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 57, 108, .18), 0 3px 8px -2px rgba(0, 57, 108, .3); }
.oem-hero.has-line .oem-port { display: block; }
.oem-port::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--gold); }
.oem-port::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(247, 183, 68, .95); opacity: 0; pointer-events: none; }
/* the packet (inner-pages.css p6pk, 3.2 s) reaches the socket at ~96 % of its run; the ring answers it */
html.fx-motion .oem-port::before { animation: oem-ring 3.2s var(--ease) 3.07s infinite; }
@keyframes oem-ring { 0% { transform: scale(1); opacity: .95; } 34% { transform: scale(3.6); opacity: 0; } 100% { transform: scale(3.6); opacity: 0; } }
.oem-hline .base { stroke: rgba(0, 57, 108, .2); }

/* floating white cards on photos */
.oem-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-lift); }
.oem-float .ib { width: 40px; height: 40px; border-radius: 12px; background: #EAF1F8; display: grid; place-items: center; flex: none; }
.oem-float .i2 { width: 22px; height: 22px; color: var(--navy); --acc: var(--gold); }
.oem-float b { display: block; font: 700 14.5px/1.25 var(--font); color: var(--ink); }
.oem-float small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--font); color: var(--muted); }
.oem-hfloat { left: -28px; bottom: 30px; }
html.fx-motion .oem-float { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease) .5s, transform .9s var(--ease) .5s; }
html.fx-motion .in > .oem-float, html.fx-motion .in .oem-float { opacity: 1; transform: none; }

/* ── on the record (split) ── */
.oem-record .p6-split { align-items: center; }
.oem-sfig { position: relative; margin: 0; min-width: 0; }
.oem-sfig .p6-split-media { box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; }
.oem-report { right: -26px; bottom: -28px; display: block; width: 264px; padding: 16px 16px 18px; }
.oem-rhead { display: flex; align-items: center; gap: 10px; }
.oem-rhead b { flex: 1; }
.oem-rhead .ib { width: 34px; height: 34px; border-radius: 10px; } .oem-rhead .i2 { width: 19px; height: 19px; }
.oem-rhead .p6-tag { padding: 5px 7px; font-size: 9.5px; }
.oem-report ul { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.oem-report li { display: flex; align-items: center; gap: 9px; font: 600 13.5px/1.3 var(--font); color: var(--text); }
.oem-report li svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #DDF3E6; color: #17803F; }
.oem-signed { position: absolute; top: -11px; right: 18px; padding: 6px 10px 5px; border-radius: 999px; background: var(--gold); color: var(--navy); font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 16px -8px rgba(140, 94, 14, .6); }
.oem-stext { min-width: 0; }
.oem-stext .s6-lede { margin-top: 14px; }
.oem-record .p6-list { margin-top: 24px; gap: 12px; }

/* ── steps: one hairline joins the four numbers ── */
.oem-steps { list-style: none; margin: 0; padding: 0; }
.oem-steps .p6-step::after { content: ""; position: absolute; top: 28px; left: 58px; right: -15px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(0, 57, 108, .18) 40%); transform-origin: 0 50%; }
.oem-steps .p6-step:last-child::after { right: 20px; }
html.fx-motion .oem-steps .p6-step::after { transform: scaleX(0); transition: transform 1.1s var(--ease) calc(var(--d, 0) * 120ms + 250ms); }
html.fx-motion .oem-steps .p6-step.in::after, html.fx-motion .oem-steps .p6-step:not(.rv6)::after { transform: none; }

/* ── the CRM loop (#oem-api): your CRM and Airdoot joined both ways by API, in six steps ──
   One white panel: the diagram (.oem-lstage) with the steps beside it (under it below 1200px). The lines are an SVG
   under the cards (.oem-llines) and the packets and the job's track another over them (.oem-lpk), both drawn by
   app/p-oem.js from the cards' layout boxes. Your side wears the page's violet, Airdoot its navy and gold.
   p-oem.js puts .now on the parts the current step is about and .done on what has happened by then. "Not yet" is a
   quieter colour, never a fade, so every state reads in full; under reduce there are no transitions or pulses, so a
   step's end state is simply there. Phones get the vertical version: your CRM, the link, Airdoot, the live line and
   your dashboard, one under the other. */
.oem-loop {
  display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); grid-template-areas: "stage steps" "nav steps"; grid-template-rows: auto 1fr;
  gap: 18px clamp(24px, 3vw, 44px); padding: clamp(18px, 2.4vw, 32px);
  border-radius: var(--r-panel); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.oem-lstage {
  grid-area: stage; position: relative; min-width: 0; display: grid; row-gap: 12px;
  grid-template-columns: minmax(0, 1fr) clamp(116px, 21%, 156px) minmax(0, 1.16fr);
  grid-template-areas: "hy . hu" "crm api air" "dash live air";
}
.oem-lhd { margin: 0; font: 700 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--cd); }
.oem-lhd.you { grid-area: hy; } .oem-lhd.us { grid-area: hu; color: var(--navy); }
.oem-llines, .oem-lpk { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.oem-llines { z-index: 0; } .oem-lpk { z-index: 3; }
.oem-lnode, .oem-lapi, .oem-llink { position: relative; z-index: 1; min-width: 0; }

/* the lines: two lanes between the CRM and Airdoot (in, and back), the live line to the dashboard */
.oem-loop svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oem-llines .ln { stroke: rgba(0, 57, 108, .26); stroke-width: 1.5; transition: stroke .35s ease, stroke-width .35s ease; }
.oem-llines .hd { stroke: rgba(0, 57, 108, .45); stroke-width: 1.6; transition: stroke .35s ease; }
.oem-llines .halo { stroke: var(--gold); stroke-width: 10; opacity: 0; transition: opacity .35s ease; }
.oem-llines .done .ln { stroke: rgba(0, 57, 108, .6); stroke-width: 1.8; }   /* the link is in place (step 1 on); .now adds the gold halo */
.oem-llines .done .hd { stroke: rgba(0, 57, 108, .75); stroke-width: 1.8; }
.oem-llines .now .ln, .oem-llines .now .hd { stroke: var(--navy); stroke-width: 2; }
.oem-llines .now .halo { opacity: .3; }
.oem-llines .live .ln { stroke: color-mix(in srgb, var(--c) 45%, #fff); stroke-width: 2.4; stroke-dasharray: 0 7; }   /* round dots */
.oem-llines .live.done .ln, .oem-llines .live.done .hd { stroke: var(--c); }
.oem-llines .live.now .ln { stroke-width: 3.2; }
.oem-llines .live .halo { stroke: var(--c); }
html.fx-motion .oem-llines .live.done .ln { animation: oem-flow 1.2s linear infinite; }   /* the dots stream toward your dashboard */
@keyframes oem-flow { to { stroke-dashoffset: -14; } }
/* the job's track between its four stops (over the navy card), and the packets */
.oem-lpk .trk { stroke: rgba(186, 206, 223, .32); stroke-width: 1.5; transition: stroke .35s ease; }
.oem-lpk .trk.done { stroke: var(--gold); }
.oem-lpk circle { fill: var(--gold); stroke: var(--navy); stroke-width: 2; opacity: 0; transition: opacity .15s ease; filter: drop-shadow(0 0 5px rgba(247, 183, 68, .95)); }
.oem-lpk circle.v { fill: var(--c); stroke: #fff; filter: drop-shadow(0 0 5px rgba(139, 92, 246, .8)); }

/* the cards */
.oem-lnode { padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: border-color .35s ease, box-shadow .35s ease; }
.oem-lcrm { grid-area: crm; } .oem-ldash { grid-area: dash; } .oem-lair { grid-area: air; }
.oem-lnode.now:not(.oem-lair) { border-color: color-mix(in srgb, var(--c) 62%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent), 0 20px 36px -24px color-mix(in srgb, var(--c) 75%, transparent); }
.oem-lnh { display: flex; align-items: center; gap: 12px; }
.oem-lnh .gi { --s: 42px; }
.oem-lnh > span:last-child { min-width: 0; }
.oem-lnh b { display: block; font: 700 15px/1.25 var(--font); color: var(--ink); }
.oem-lnh small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--font); color: var(--muted); text-wrap: pretty; }
/* your CRM: the complaint record */
.oem-lrec { margin-top: 12px; padding: 11px 12px 12px; border-radius: 12px; background: #F7F9FC; border: 1px solid var(--line); transition: background .35s ease, border-color .35s ease; }
.oem-lrec.now { background: var(--ct); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.oem-lrk { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oem-lrk .p6-tag { padding: 4px 6px; font-size: 9px; }
.oem-lrt { margin: 8px 0 0; font: 700 14px/1.3 var(--font); color: var(--ink); }
.oem-lkv { margin: 10px 0 0; display: grid; gap: 6px; }
.oem-lkv > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oem-lkv dt { font: 500 12.5px/1.3 var(--font); color: var(--muted); }
.oem-lkv dd { margin: 0; }
.oem-lsv, .oem-ldst { display: inline-block; flex: none; padding: 4px 9px; border-radius: 999px; font: 700 11.5px/1.2 var(--font); white-space: nowrap; background: #EEF2F6; color: var(--muted); transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.oem-lsv.done { background: #DDF3E6; color: #17663A; }
.oem-lkv.now .oem-lsv.done { box-shadow: 0 0 0 3px rgba(23, 128, 63, .16); }
/* the API badge between the two lanes, and the lanes' labels */
.oem-lapi { grid-area: api; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; padding: 0 6px; }
.oem-llab { font: 600 11.5px/1.3 var(--font); color: var(--muted); text-align: center; text-wrap: balance; transition: color .35s ease; }
.oem-llab.now, .oem-llink.now .oem-llab { color: var(--navy); }
.oem-lapi .in { align-self: end; margin-bottom: 21px; } .oem-lapi .out { align-self: start; margin-top: 21px; }
.oem-lbadge { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: 999px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 8px 18px -12px rgba(0, 57, 108, .45); transition: border-color .35s ease, box-shadow .35s ease; }
.oem-lbadge svg { width: 17px; height: 17px; fill: none; stroke: var(--cd); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.oem-lbadge b { font: 700 12.5px/1 var(--mono); letter-spacing: .12em; color: var(--navy); }
.oem-lapi.now .oem-lbadge { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 15%, transparent), 0 8px 18px -12px rgba(0, 57, 108, .45); }
.oem-llink { grid-area: live; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.oem-llink .oem-llab { transform: translateY(-17px); }   /* just above the live line, which runs through this cell's middle */
/* Airdoot: navy, with the job's four stops */
.oem-lair { display: flex; flex-direction: column; padding: 16px 14px 12px; border-color: transparent; color: #D5E1EE; background: radial-gradient(90% 55% at 100% 0%, rgba(10, 74, 133, .95), rgba(10, 74, 133, 0) 70%), var(--navy-deep); }
.oem-lair.now { box-shadow: 0 0 0 4px rgba(247, 183, 68, .32), var(--shadow-lift); }
.oem-lair .oem-lnh b { color: #fff; } .oem-lair .oem-lnh small { color: #A9BDD1; }
.oem-lai { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(186, 206, 223, .18); }
.oem-lai img { width: 34px; height: auto; }
.oem-lrows { flex: 1; list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; align-content: space-evenly; }   /* the four stops share the card's height */
.oem-lr { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 8px; border-radius: 12px; border: 1px solid transparent; transition: background .35s ease, border-color .35s ease; }
.oem-lr .mk { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #0E3A66; border: 1px solid rgba(186, 206, 223, .34); color: #8FB0CF; transition: background .35s ease, border-color .35s ease, color .35s ease; }
.oem-lr .mk svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.oem-lr .tx { min-width: 0; }
.oem-lr b { display: block; font: 700 14px/1.3 var(--font); color: #C9D7E6; transition: color .35s ease; }
.oem-lr small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--font); color: #A9BDD1; }
.oem-lr.done .mk { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.oem-lr.done b { color: #fff; }
.oem-lr.now { background: rgba(255, 255, 255, .07); border-color: rgba(247, 183, 68, .5); }
.oem-lchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.oem-lchips > span { padding: 4px 8px; border-radius: 7px; font: 600 11.5px/1.2 var(--font); color: #A9BDD1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(186, 206, 223, .16); transition: background .35s ease, color .35s ease, border-color .35s ease; }
.oem-lr.done .oem-lchips > span { color: #fff; background: rgba(255, 255, 255, .11); border-color: rgba(186, 206, 223, .26); }
.oem-lchips .sla { display: inline-flex; align-items: center; gap: 6px; }
.oem-lchips .sla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8FB0CF; flex: none; }
.oem-lr.done .oem-lchips .sla { color: var(--gold-60); background: rgba(247, 183, 68, .14); border-color: rgba(247, 183, 68, .45); }
.oem-lr.done .oem-lchips .sla::before { background: var(--gold); }
/* your dashboard: the same job, live */
.oem-ljob { margin-top: 12px; padding: 10px 12px 11px; border-radius: 12px; background: #F7F9FC; border: 1px solid var(--line); }
/* room for two lines in every state: where the card is narrow (1200-1366, 768) the job's name wraps beside the wider
   chips (Received, Assigned) and not beside the others, and the card, the Airdoot card's stops and the lines would
   move 12px mid-play */
.oem-ljob p { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 2.6em; margin: 0; font: 600 13px/1.3 var(--font); color: var(--ink); }
.oem-ldst.done { background: var(--ct); color: var(--cd); }
.oem-lfoot { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.oem-lseg { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.oem-lseg i { height: 5px; border-radius: 3px; background: var(--line); transition: background .35s ease; }
.oem-lseg i.done { background: var(--c); }
.oem-llive { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oem-llive::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #B8C4D2; }
.oem-llive.done { color: #17663A; } .oem-llive.done::before { background: #22A55A; box-shadow: 0 0 0 3px rgba(34, 165, 90, .18); }

/* the pulses (motion only): a ring round the badge and round the stop being worked on; the SLA dot and the live
   dot breathe once they are on */
html.fx-motion :is(.oem-lapi.now .oem-lbadge, .oem-lr.now .mk)::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 1.5px solid var(--gold); pointer-events: none; animation: oem-ping 1.8s var(--ease) infinite; }
html.fx-motion .oem-lapi.now .oem-lbadge::after { border-color: var(--c); --ping: 1.22; }
@keyframes oem-ping { 0% { transform: scale(1); opacity: .95; } 70%, 100% { transform: scale(var(--ping, 1.55)); opacity: 0; } }
html.fx-motion :is(.oem-lr.done .oem-lchips .sla, .oem-llive.done)::before { animation: oem-breathe 1.6s ease-in-out infinite; }
@keyframes oem-breathe { 50% { opacity: .35; } }
html.fx-reduce .oem-loop *, html.fx-reduce .oem-loop *::before, html.fx-reduce .oem-loop *::after { transition: none !important; }

/* the steps: each a button (number, name, one sentence); the current one wears the gold number */
.oem-lsteps { grid-area: steps; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.oem-lsteps::before { content: ""; position: absolute; left: 28px; top: 30px; bottom: 30px; width: 1px; background: var(--line); }   /* joins the numbers */
.oem-lsb { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; width: 100%; padding: 10px 14px 11px 11px; border-radius: 14px; border: 1px solid transparent; background: none; color: inherit; text-align: left; cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.oem-lsb .n { grid-row: 1 / span 2; position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--mono); letter-spacing: .04em; background: #EEF3F8; color: var(--navy); box-shadow: 0 0 0 4px #fff; transition: background .3s ease, color .3s ease; }
.oem-lsb b { padding-top: 1px; font: 700 15px/1.3 var(--font); color: var(--ink); }
.oem-lsb .t { margin-top: 3px; font: 500 13.5px/1.5 var(--font); color: var(--muted); text-wrap: pretty; }
.oem-lsb.done .n { background: var(--ct); color: var(--cd); }
.oem-lsb[aria-current="step"] { background: var(--ct); border-color: color-mix(in srgb, var(--c) 42%, transparent); }
.oem-lsb[aria-current="step"] .n { background: var(--gold); color: var(--navy); box-shadow: 0 0 0 4px var(--ct); }
@media (hover: hover) { .oem-lsb:not([aria-current]):hover { background: #F5F7FA; } }
.oem-loop button:focus-visible { outline: 2px solid var(--navy) !important; outline-offset: 2px; }
/* the caption: on screen only on phones with motion, where the list is a row of numbers (aria-hidden: .oem-lsay, a
   polite live region from the start, reads the step out once the visitor picks one) */
.oem-lcap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.oem-lnav { grid-area: nav; align-self: start; display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.oem-lcount { flex: 0 1 auto; min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oem-lcount b { color: var(--navy); font-weight: 700; }
.oem-lnb { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid rgba(0, 57, 108, .18); background: #fff; color: var(--navy); font: 700 14px/1 var(--font); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.oem-lnb svg { width: 16px; height: 16px; }
.oem-lprev svg { transform: rotate(180deg); }
.oem-lnext { padding: 0 16px 0 20px; background: var(--navy); border-color: var(--navy); color: #fff; }
@media (hover: hover) { .oem-lnext:hover { background: var(--navy-2); } .oem-lprev:not([aria-disabled="true"]):hover { background: #F1F5F9; } }
.oem-lprev[aria-disabled="true"] { color: #93A3B5; border-color: var(--line); cursor: default; }

/* below 1200px the steps go under the diagram, three across */
@media (max-width: 1199px) {
  .oem-loop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "steps" "nav"; grid-template-rows: none; }
  .oem-lsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .oem-lsteps::before { display: none; }
  .oem-lsb { height: 100%; }
}
@media (max-width: 900px) { .oem-lsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: the vertical diagram. The lanes run down (in) and up (back) either side of a round API badge. */
@media (max-width: 760px) {
  .oem-loop { padding: 14px; gap: 16px; border-radius: 24px; }
  .oem-lstage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crm" "api" "air" "live" "dash"; row-gap: 0; }
  .oem-lhd { display: none; }
  .oem-lapi { height: 78px; padding: 0; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .oem-lapi .in { justify-self: end; align-self: center; margin: 0 22px 0 0; text-align: right; }
  .oem-lapi .out { justify-self: start; align-self: center; margin: 0 0 0 22px; text-align: left; }
  .oem-llab { max-width: 16ch; }
  .oem-lbadge { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .oem-lbadge svg { display: none; }
  .oem-lbadge b { font-size: 11.5px; letter-spacing: .06em; }
  .oem-llink { height: 58px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .oem-llink .oem-llab { grid-column: 3; justify-self: start; transform: none; margin-left: 4px; }
  .oem-lsteps { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .oem-lsb { height: auto; }
  /* with motion the steps are a row of numbers and the caption under them says the step; under reduce they stay the
     full list (the caption is then read out only) */
  html.fx-motion .oem-loop { grid-template-areas: "stage" "steps" "cap" "nav"; }
  html.fx-motion .oem-lsteps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  html.fx-motion .oem-lsb { display: grid; place-items: center; padding: 2px 0; border: 0; background: none; }
  html.fx-motion .oem-lsb .n { grid-row: auto; width: 40px; height: 40px; font-size: 12.5px; }
  html.fx-motion .oem-lsb[aria-current="step"] .n { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
  html.fx-motion .oem-lsb :is(b, .t) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html.fx-motion .oem-lcap { grid-area: cap; position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; min-height: calc(3 * 1.55em); font: 500 14.5px/1.55 var(--font); color: var(--text); }
  .oem-lcap b { color: var(--ink); font-weight: 700; }
}
/* small phones: the counter drops its "Step" (still read out) so it stays on one line beside "Start again" (at 375
   the full "Step 06 of 06" had 3px to spare); below 360 the row also tightens a little, and the caption keeps room
   for four lines, which two of the steps need at 320 */
@media (max-width: 379px) { .oem-lcount .w { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 359px) {
  .oem-lnav { gap: 6px; }
  .oem-lcount { letter-spacing: .1em; }
  .oem-lnext { padding: 0 14px 0 16px; }
  html.fx-motion .oem-lcap { min-height: calc(4 * 1.55em); }
}

/* ── the architecture panel (navy) ── */
.oem-arch {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-panel);
  padding: clamp(40px, 5.4vw, 80px) clamp(22px, 4.6vw, 72px) clamp(44px, 5.4vw, 80px);
  background:
    radial-gradient(55% 60% at 96% 30%, rgba(10, 74, 133, .95) 0%, rgba(10, 74, 133, 0) 72%),
    radial-gradient(50% 45% at 4% 100%, rgba(0, 57, 108, .95) 0%, rgba(0, 57, 108, 0) 70%),
    radial-gradient(38% 30% at 50% 60%, rgba(247, 183, 68, .09) 0%, rgba(247, 183, 68, 0) 70%),
    var(--navy-deep);
  color: #D5E1EE;
}
.oem-arch::before {   /* blueprint grid, faded toward the edges (as on the landing's navy panel) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(186, 206, 223, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 206, 223, .055) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 80%);
}
.oem-arch .s6-h2 { color: #fff; } .oem-arch .s6-h2 .mut { color: #8FB0CF; }
.oem-arch .s6-lede { color: #A9BDD1; margin-top: 14px; }
.oem-ahead { max-width: 720px; }

.oem-agrid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .74fr) minmax(0, .92fr); gap: clamp(44px, 6.6vw, 110px); align-items: center; margin-top: clamp(36px, 5vw, 60px); }
.oem-alines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.oem-alines path { fill: none; stroke-linecap: round; }
.oem-alines .base { stroke: rgba(186, 206, 223, .3); stroke-width: 1; }
.oem-alines .pk { stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: 44 2000; stroke-dashoffset: 44; opacity: 0; }
html.fx-motion .oem-alines .pk { opacity: 1; animation: oem-pk 3.6s var(--ease-std) infinite; animation-delay: var(--dl, 0s); }
@keyframes oem-pk { 0% { stroke-dashoffset: 44; } 72%, 100% { stroke-dashoffset: -1000; } }

.oem-actors { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; z-index: 1; min-width: 0; }
.oem-actor { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 13px; border-radius: 16px; background: rgba(14, 52, 92, .72); border: 1px solid rgba(186, 206, 223, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.oem-actor .ib, .oem-route .ib { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; flex: none; }
.oem-actor .i2, .oem-route .i2 { width: 21px; height: 21px; color: #fff; --acc: var(--gold); }
.oem-actor b { display: block; font: 700 15.5px/1.25 var(--font); color: #fff; }
.oem-actor small { display: block; margin-top: 3px; font: 500 13px/1.4 var(--font); color: #A9BDD1; }
.oem-actor.you { border-color: rgba(247, 183, 68, .55); background: linear-gradient(rgba(247, 183, 68, .09), rgba(247, 183, 68, .09)), rgba(14, 52, 92, .72); }
.oem-actor em { margin-left: auto; align-self: flex-start; padding: 5px 7px 4px; border-radius: 999px; background: var(--gold); color: var(--navy); font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }

.oem-hub { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.oem-hubico { position: relative; width: clamp(124px, 11vw, 164px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, rgba(247, 183, 68, .2), rgba(247, 183, 68, 0) 72%), #0B3563; border: 1px solid rgba(186, 206, 223, .22);
  box-shadow: 0 0 0 10px rgba(186, 206, 223, .04), 0 0 0 22px rgba(186, 206, 223, .025); }
.oem-hubico img { width: 74%; height: auto; }
html.fx-motion .oem-hubico::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(247, 183, 68, .7); opacity: 0; animation: oem-hub 3.6s var(--ease) infinite; }
@keyframes oem-hub { 0%, 68% { transform: scale(1); opacity: 0; } 74% { opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
.oem-hub b { margin-top: 18px; font: 700 18px/1.25 var(--font); color: #fff; }
.oem-hub small { margin-top: 6px; font: 500 13.5px/1.45 var(--font); color: #A9BDD1; max-width: 22ch; }

.oem-field { position: relative; z-index: 1; min-width: 0; padding: 18px 18px 20px; border-radius: 20px; background: rgba(14, 52, 92, .72); border: 1px solid rgba(186, 206, 223, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.oem-flbl { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #A9BDD1; }
.oem-flbl::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--gold); flex: none; }
.oem-route { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; position: relative; }
.oem-route::before { content: ""; position: absolute; left: 20px; top: 20px; bottom: 20px; width: 1px; background: rgba(186, 206, 223, .3); }
.oem-route li { position: relative; display: flex; align-items: center; gap: 12px; }
.oem-route .ib { position: relative; z-index: 1; background: #123F6E; border: 1px solid rgba(186, 206, 223, .2); }
.oem-route li:last-child .ib { background: var(--gold); border-color: var(--gold); } .oem-route li:last-child .i2 { color: var(--navy); --acc: var(--navy); }
.oem-route b { font: 600 15px/1.3 var(--font); color: #fff; }
/* a parcel running down the route, behind the stops (motion only) */
.oem-route::after { content: ""; display: none; position: absolute; z-index: 0; left: 18px; top: 20px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px rgba(247, 183, 68, .6); }
html.fx-motion .oem-route::after { display: block; animation: oem-run 3.6s var(--ease-std) 1.2s infinite; }
@keyframes oem-run { 0% { top: 20px; opacity: 0; } 8% { opacity: 1; } 78% { top: calc(100% - 24px); opacity: 1; } 86%, 100% { top: calc(100% - 24px); opacity: 0; } }

/* ── coverage ── */
.oem-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.oem-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px); min-width: 0; }
.oem-stats > div + div { border-left: 1px solid var(--line); }
.oem-stats dd { margin: 0; font: 700 clamp(40px, 4.2vw, 62px)/1 var(--font); letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oem-stats dd small { margin-left: 6px; font: 600 clamp(14px, 1.1vw, 17px)/1 var(--font); letter-spacing: 0; color: var(--slate); }
.oem-stats dt { font: 600 14px/1.45 var(--font); color: var(--muted); }
.oem-fh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oem-cnt { padding: 6px 9px; border-radius: 7px; background: #EEF3F8; color: var(--navy); font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.oem-fams .p6-point h3 { margin-top: 6px; }

/* ── ideas ── */
a.oem-idea { color: inherit; text-decoration: none; }
.oem-idea h3 { margin-top: 6px; }
.oem-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font: 700 14.5px/1 var(--font); color: var(--navy); }
.oem-more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
@media (hover: hover) { a.oem-idea:hover .oem-more svg { transform: translateX(3px); } }

/* ── the end of the page: the OEM enquiry (application/views/forms/oem.php, styled by assets/css/forms.css) ── */
.oem-startsec { scroll-margin-top: 96px; }

/* ── widths ── */
@media (max-width: 1180px) {
  .oem-agrid { grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) minmax(0, .9fr); gap: 44px; }
  .oem-actor small { font-size: 12.5px; }
}
@media (max-width: 1100px) {
  .oem-hfloat { left: 14px; bottom: 14px; }
  .oem-report { right: 14px; bottom: -24px; }
  .oem-steps .p6-step:nth-child(2n)::after { right: 20px; }
  .oem-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oem-stats > div:nth-child(3) { border-left: 0; }
  .oem-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .oem-hfig { margin-top: 36px; }
  .oem-record .p6-split { gap: 56px; }
  .oem-agrid { grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .oem-hfloat { left: 10px; bottom: 10px; padding: 10px 12px 10px 10px; }
  .oem-hfloat .ib { width: 34px; height: 34px; }
  .oem-report { position: relative; right: auto; bottom: auto; width: min(270px, 86%); margin: -56px 12px 0 auto; }
  .oem-steps .p6-step::after { right: 20px; }
  .oem-stats > div { padding: 18px 16px; }
  .oem-arch { border-radius: 26px; }
  .oem-actor em { align-self: center; }
}
/* the three "next" ideas stay one row down to 900 (inner-pages.css would leave the third alone in a row of two) */
.oem-main .p6-point p, .oem-actor small, .oem-hub small, .oem-float small { text-wrap: pretty; }
@media (min-width: 901px) and (max-width: 1100px) { .oem-next .p6-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 601px) and (max-width: 900px) { .oem-next .p6-point:last-child { grid-column: 1 / -1; } }

/* calm (app/fx.js): the photo does not settle and its cards fade in where they are; the steps' line still draws, the
   loop's dots still stream, the pings, packets, hub ring and the dot down the route keep going */
html.fx-calm .oem-hmedia img, html.fx-calm .oem-float { transform: none; }