/* ============================================================
   RX layer — research rails + solution highlights (2026-10-25), loaded after pc.css.
   After the Google Store product pages: a left-aligned head, then a side-scrolling rail
   of cards (visual on top, title + text below) driven by px.js; and a 2×2 grid of
   highlight panels, each a visual with a floating UI card and a centred caption.
   The floating UI cards stand in for the app, so they keep a small radius; the site
   frames around them stay square.
   ============================================================ */
.rx-head { margin-top: clamp(3.5rem, 9vh, 6rem); max-width: 46rem; }
.rx-k { display: block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.rx-head h3, .hx-head h3 {
  font-family: var(--display); font-weight: 620; font-stretch: 118%; font-variation-settings: "wdth" 118;
  font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; color: var(--ink); margin: 0;
}
.rx-head p, .hx-head p { margin-top: 1.1rem; font-size: clamp(1rem, 1.25vw, 1.1rem); max-width: 40rem; }

/* ---------- rail ---------- */
.rx-wrap { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.rx-wrap { container-type: inline-size; }
.px-rail.rx-rail { grid-auto-columns: max(280px, calc(40cqi - 12px)); gap: 20px; }
.rx-card { display: flex; flex-direction: column; }
.rx-vis { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-sunken); }
.rx-vis > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-vis.ink { background: var(--ink); color: var(--bg); }
.rx-vis.blue { background: #dde7f6; }
.rx-card h4, .hx-cap {
  font-family: var(--display); font-weight: 620; font-stretch: 118%; font-variation-settings: "wdth" 118;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.rx-card h4 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.25; margin-top: 1.2rem; }
.rx-card > p { margin-top: .6rem; font-size: .9375rem; line-height: 1.55; max-width: 38ch; }

/* big-number visual */
.rx-big { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; }
.rx-big b { font-family: var(--display); font-weight: 620; font-stretch: 118%; font-variation-settings: "wdth" 118; letter-spacing: -.05em;
  font-size: clamp(3.2rem, 5.5vw, 5.25rem); line-height: .9; white-space: nowrap; }
.rx-vis.ink .rx-big b, .rx-vis.ink .rx-big span { color: var(--bg); }
.rx-big span { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 1rem; opacity: .8; }

/* ---------- floating UI card (stands in for the app) ---------- */
.rx-ui { position: absolute; left: 8%; right: 8%; bottom: 7%; background: #fff; color: var(--ink); border-radius: 14px;
  padding: 14px 16px 16px; box-shadow: 0 18px 40px -18px rgba(16,16,20,.45), 0 0 0 1px rgba(16,16,20,.06); font-family: var(--sans); }
.rx-ui.mid { top: 50%; bottom: auto; transform: translateY(-50%); }
.rx-ui.top { top: 7%; bottom: auto; }
.rx-pill { display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 999px; background: #e3ebf8; color: #1a4fa8;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.rx-pill.warn { background: #f8e6e1; color: #8a2b14; }
.rx-ui .t { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; margin-top: .55rem; }
.rx-ui .s { display: block; font-size: .8125rem; color: rgba(16,16,20,.66); margin-top: .2rem; }
.rx-ui .n { display: block; font-family: var(--display); font-weight: 620; font-stretch: 118%; font-variation-settings: "wdth" 118; letter-spacing: -.04em;
  font-size: 2.4rem; line-height: 1; margin-top: .55rem; }
.rx-rows { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: 6px; }
.rx-rows li { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; line-height: 1.3; padding: .45rem .6rem; border-radius: 8px; background: #f3f3f1; color: var(--ink); }
.rx-rows li em { font-style: normal; margin-left: auto; font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(16,16,20,.6); }
.rx-rows li.hit { background: #f8e6e1; outline: 1.5px solid #c2410c; }
.rx-rows li.hit em { color: #8a2b14; }
.rx-rows li.on { background: #e3ebf8; outline: 1.5px solid #1a5bc4; }
.rx-rows.check li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: #1a5bc4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.rx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .7rem; }
.rx-chips span { padding: .35em .75em; border-radius: 999px; background: #f3f3f1; font-size: .75rem; }
.rx-q { display: flex; gap: 6px; margin-top: .8rem; align-items: center; }
.rx-q i { width: 22px; height: 22px; border-radius: 50%; background: #d9d9d4; }
.rx-q i.me { background: none; border: 1.5px dashed #8a2b14; display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 600; color: #8a2b14; }
.rx-dots { display: inline-flex; gap: 4px; margin-left: .3rem; }
.rx-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }

/* three channels, no shared record */
.rx-cols { position: absolute; inset: 9% 7%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rx-cols > div { background: #fff; border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 0 0 1px rgba(16,16,20,.06); }
.rx-cols b { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.rx-cols i { display: block; height: 8px; border-radius: 4px; background: #e6e6e2; }
.rx-cols i:nth-child(odd) { width: 70%; }
.rx-cols span { margin-top: auto; font-size: .6875rem; color: #8a2b14; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* ============================================================
   Solution highlights: 2×2 panels, visual + centred caption
   ============================================================ */
.hx-head { margin-top: clamp(4rem, 10vh, 7rem); max-width: 48rem; }
.hx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(2rem, 5vh, 3rem); }
.hx-cell { background: #e6edf8; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; }
.hx-vis { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #d3e0f2; }
.hx-vis > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-cap { font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.18; text-align: center; margin: 1.6rem auto 0; max-width: 22ch; text-wrap: balance; }
.hx-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.4rem 0 0; }
.hx-sides div { background: rgba(255,255,255,.6); padding: .8rem .9rem; }
.hx-sides dt { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: #1a4fa8; }
.hx-sides dd { margin: .35rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }

/* the tap-to-row visual: pilot card over IOC row, joined by a line */
.hx-flow { position: absolute; inset: 8% 8%; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.hx-flow .rx-ui { position: relative; left: auto; right: auto; bottom: auto; top: auto; transform: none; }
.hx-flow .link { align-self: center; width: 2px; height: 34px; background: #1a5bc4; position: relative; }
.hx-flow .link::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 8px; height: 8px; border: solid #1a5bc4; border-width: 0 2px 2px 0;
  transform: translateX(-50%) rotate(45deg); }
.hx-flow .link span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--mono);
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: #1a4fa8; }
.rx-p { flex: none; font-family: var(--mono); font-size: .625rem; font-weight: 500; letter-spacing: .06em; padding: .2em .45em; border-radius: 4px; background: #e6e6e2; }
.rx-p.p1 { background: #c2410c; color: #fff; }
.rx-p.p2 { background: #f1d9a8; color: #5c3d00; }

/* status tracker */
.rx-steps { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: 0; }
.rx-steps li { position: relative; padding: 0 0 .7rem 1.5rem; font-size: .8125rem; line-height: 1.3; }
.rx-steps li::before { content: ""; position: absolute; left: 0; top: .15em; width: 11px; height: 11px; border-radius: 50%; background: #1a5bc4; }
.rx-steps li::after { content: ""; position: absolute; left: 5px; top: 1.1em; bottom: 0; width: 1.5px; background: #1a5bc4; }
.rx-steps li:last-child { padding-bottom: 0; }
.rx-steps li:last-child::after { display: none; }
.rx-steps li span { color: rgba(16,16,20,.6); margin-left: .35em; }
.rx-steps li b { font-weight: 600; }
.rx-note { position: absolute; left: 8%; right: 8%; top: 7%; display: flex; gap: .7rem; align-items: center; background: rgba(255,255,255,.94); border-radius: 14px;
  padding: 10px 14px; box-shadow: 0 12px 30px -16px rgba(16,16,20,.5); font-size: .8125rem; line-height: 1.3; }
.rx-note b { display: block; font-weight: 600; }
.rx-note .ic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #1a5bc4; display: grid; place-items: center; }
.rx-note .ic svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 860px) {
  .hx { grid-template-columns: 1fr; }
  .px-rail.rx-rail { grid-auto-columns: max(250px, 82cqi); }
}
@media (max-width: 480px) {
  .hx-sides { grid-template-columns: 1fr; }
  .rx-ui { left: 6%; right: 6%; }
}

/* .px p (px.css / pc.css) would otherwise shrink the captions to body text */
.px.hx .hx-cap { font-family: var(--display); font-weight: 620; font-stretch: 118%; font-variation-settings: "wdth" 118;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.18; letter-spacing: -.02em; color: var(--ink); }
.px.rx-head p, .px.hx-head p { font-size: clamp(1rem, 1.25vw, 1.1rem); }

/* ============================================================
   Google Store pass (2026-10-25): the ECS page runs on g.css, so the rails and highlights
   take its vocabulary — Google Sans regular headlines, rounded cards, no mono labels.
   ============================================================ */
.rx-k { font-family: var(--display); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.rx-head h3, .hx-head h3 { font-family: var(--display); font-weight: 400; font-stretch: normal; font-variation-settings: normal;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.1; letter-spacing: -.015em; }
.rx-head h3 em, .hx-head h3 em { color: var(--ink); }
.rx-card h4, .px.hx .hx-cap { font-family: var(--display); font-weight: 400; font-stretch: normal; font-variation-settings: normal; letter-spacing: -.005em; }
.rx-card h4 { font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.25; }
.rx-card > p { color: var(--ink-2); font-size: 1rem; }
.rx-vis { border-radius: var(--g-r); background: var(--g-card); }
.rx-vis.blue { background: #d3e3fd; }
.rx-vis.ink { background: #1f3b2c; }                   /* deep green ground, like the Pixel Watch "behind pace" card */
.rx-vis.ink .rx-big b, .rx-vis.ink .rx-big span { color: #c4eed0; }
.rx-big b { font-family: var(--display); font-weight: 500; font-stretch: normal; font-variation-settings: normal; letter-spacing: -.03em; }
.rx-big span { font-family: var(--display); letter-spacing: 0; text-transform: none; font-size: 1.05rem; }
.rx-ui { border-radius: 20px; box-shadow: 0 1px 3px rgba(60,64,67,.15), 0 8px 24px rgba(60,64,67,.16); }
.rx-ui .n { font-family: var(--display); font-weight: 500; font-stretch: normal; font-variation-settings: normal; letter-spacing: -.02em; }
.rx-pill, .rx-cols b, .rx-cols span, .rx-rows li em, .hx-flow .link span, .rx-p {
  font-family: var(--display); letter-spacing: 0; text-transform: none; }
.rx-pill { font-size: .75rem; font-weight: 500; background: #e8f0fe; color: #0b57d0; }
.rx-pill.warn { background: #fce8e6; color: #a50e0e; }
.rx-rows li { border-radius: 12px; background: #f1f3f4; }
.rx-rows li em { font-size: .75rem; }
.rx-rows li.on { background: #e8f0fe; outline-color: #0b57d0; }
.rx-rows li.hit { background: #fce8e6; outline-color: #d93025; }
.rx-rows li.hit em { color: #a50e0e; }
.rx-rows.check li::before, .rx-steps li::before, .rx-note .ic { background-color: #0b57d0; }
.rx-steps li::after, .hx-flow .link, .hx-flow .link::after { background-color: #0b57d0; border-color: #0b57d0; }
.rx-chips span { background: #f1f3f4; }
.rx-cols > div { border-radius: 16px; }
.rx-cols b { font-size: .8125rem; }
.rx-cols span { font-size: .75rem; color: #a50e0e; }
.rx-note { border-radius: 20px; }
.px-rail.rx-rail { gap: 24px; }

/* highlights: two big rounded tinted cards per row, centred head like Google Health Premium */
.hx-head { max-width: 52rem; }
.hx { gap: 24px; }
.hx-cell { border-radius: 36px; background: #d3e3fd; padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.25rem); }
.hx-vis { border-radius: 28px; background: #c2d7fb; }
.px.hx .hx-cap { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.2; max-width: 20ch; color: #1f1f1f; }
.hx-sides div { border-radius: 16px; background: rgba(255,255,255,.7); }
.hx-sides dt { font-family: var(--display); font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #0b57d0; }
.hx-sides dd { color: #3c4043; }

/* Rails bleed to both window edges (Google Store): at rest the first card lines up with the text column and the
   next cards run past it to the right edge; scrolled cards slide out under the left edge. */
@property --bleed { syntax: '<length>'; inherits: true; initial-value: 0px; }   /* computed once on .rx-wrap, inherited as px */
main.wrap { container-type: inline-size; container-name: page; }
.rx-wrap { --bleed: max(var(--pad), calc((100cqw - var(--g-max, 1120px)) / 2)); margin-left: calc(-1 * var(--bleed)); margin-right: calc(-1 * var(--bleed)); }
.px-rail.rx-rail { padding-left: var(--bleed); padding-right: var(--bleed); scroll-padding-inline: var(--bleed);
  grid-auto-columns: max(280px, calc((100cqi - 2 * var(--bleed)) * .4 - 14px)); }
.rx-wrap .px-ctl { margin-left: var(--bleed); margin-right: var(--bleed); }
main.wrap { overflow-x: clip; }
@media (max-width: 860px) { .px-rail.rx-rail { grid-auto-columns: max(250px, calc((100cqi - 2 * var(--bleed)) * .82)); } }

/* Height + weight variation (Pixel Watch 5 rail): visuals alternate square and shorter 5:4 frames, top-aligned,
   so the title lines step up and down; titles in Google Sans 500 over regular-weight body text. */
.px-rail.rx-rail { align-items: start; }
.rx-rail .rx-vis { aspect-ratio: 1 / 1; }
.rx-rail .rx-card:nth-child(even) .rx-vis { aspect-ratio: 5 / 4; }
.rx-card h4 { font-weight: 500; font-size: clamp(1.3rem, 1.75vw, 1.6rem); line-height: 1.22; color: #1f1f1f; margin-top: 1.3rem; max-width: 22ch; }
.rx-card > p { font-weight: 400; color: #444746; margin-top: .75rem; }

/* Measured on store.google.com/product/pixel_watch_5 (2026-10-25): Google Sans 500 headers at 60/68 with -1px tracking,
   16/24 500 eyebrows, 24/30 500 card titles, 16/24 400 body in #191c1d, 20px media radius, 24px card gap.
   Applied to every section header on the ECS page, not only the rails. */
.rx-head h3, .hx-head h3, .cgroup-k, main.wrap > .case-title h1 {
  font-weight: 500; letter-spacing: -1px; color: #191c1d; }
.rx-head h3, .hx-head h3, .cgroup-k { font-size: clamp(2.25rem, 5.6vw, 3.75rem); line-height: 1.133; }
.px h3, .px-statement h3, .plate-title, .px.hx .hx-cap { font-weight: 500; letter-spacing: -.01em; color: #191c1d; }
.rx-k { font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: .1px; color: #191c1d; }
.rx-card h4 { font-size: 1.5rem; line-height: 1.25; font-weight: 500; letter-spacing: 0; color: #191c1d; margin-top: 1.25rem; }
.rx-card > p { font-size: 1rem; line-height: 1.5; color: #191c1d; margin-top: .75rem; }
.rx-vis { border-radius: 20px; }
.px-rail.rx-rail { gap: 24px; }

/* ============================================================
   Pixel Watch 5 grid pass (2026-10-26). Re-measured store.google.com/product/pixel_watch_5:
   the page runs on a 12-column bento grid (tokens in g.css). Text, cards and rails sit in 10 columns
   (1156px max, was 1120), section headlines span 8 (920px), wide media and the floating nav span 12 (1392px).
   Rail cards are 4 columns (448px), splits are 7 + 3 columns, every gap is 24px, large media corners are 28px,
   small cards 20px, card surfaces #f9f9f9, body text 16/24. Type tiers: 76/84 centred chapter statements,
   60/68 section heads, 48/56 sub-heads, 32/40 split and panel titles, 24/30 card titles.
   Tinted bands carry 160px above and below. Pre-change copies: _archive/ecs-pre-grid-2026-10-26/.
   ============================================================ */
@media (max-width: 1023.98px) {
  :root { --g-w12: calc(100cqw - 48px); --g-w10: var(--g-w12); --g-w8: var(--g-w12); --g-w7: var(--g-w12); }
}
@media (max-width: 599.98px) {
  :root { --g-w12: calc(100cqw - 32px); }
}
:root { --g-card: #f9f9f9; }
.rx-wrap { --bleed: var(--g-in); }

/* floating nav and the cover panel span the 12-column width */
.hud { width: var(--g-w12); }
.case-cover.ui::before { inset: 0 var(--g-in-wide); border-radius: 28px; }
.ac-cta { margin-left: var(--g-in-wide); margin-right: var(--g-in-wide); border-radius: 28px; }
.ac-foot .cols, .ac-foot .bar > div { max-width: calc(var(--g-w10) + 2 * var(--pad)); }

/* chapter bands: 160px above and below; the chapter title is a 76/84 centred statement */
main.wrap > section.cgroup { padding-top: clamp(5rem, 16vh, 10rem); padding-bottom: clamp(5rem, 16vh, 10rem); }
.cgroup-head > div { max-width: var(--g-w8); }
.cgroup-k { font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 1.105; }
.cgroup-t { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.5; }

/* section heads: 60/68 over 8 columns; sub-heads 48/56; split and panel titles 32/40 */
.rx-head, .hx-head { max-width: var(--g-w8); }
.px-statement h3, .px-left h3 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.167; font-weight: 500; letter-spacing: -.5px; max-width: var(--g-w8); }
.px-split-text h3, .px-quote-cap h3, .px-col h3, .px-collage-side h3, .cgroup .plate-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; font-weight: 500; letter-spacing: 0; }
.px.hx .hx-cap { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; }

/* body text 16/24 everywhere in the case study */
.px p, .px-statement > p, .px-left > p, .px.rx-head p, .px.hx-head p, .px-split-text ul, .px-card > p, .px-icon p,
.px-pair figcaption, .px-panel figcaption, .px-col dd, .px-quote-cap ul, .rx-card > p {
  font-size: 1rem; line-height: 1.5; }
.px.rx-head p, .px.hx-head p, .px-statement > p, .px-left > p { max-width: var(--g-w7); }

/* gaps 24px; card corners 28px for media and panels, 20px for small cards */
.px-band { --px-r: 28px; --px-r-sm: 20px; }
.px-split, .px-split.flip, .px-quote, .px-pair, .px-compare, .px-icons, .px-collage, .hx, .px-rail { gap: 24px; }
.rx-vis { border-radius: 28px; }
.hx-cell { border-radius: 28px; }
.hx-vis { border-radius: 20px; }
.px-icon { border-radius: 20px; }

@media (min-width: 1024px) {
  /* rail cards are 4 columns wide */
  .px-rail.rx-rail { grid-auto-columns: var(--g-w4); }
  /* split: text in 3 columns beside media in 7 */
  .px-split { grid-template-columns: var(--g-w3) var(--g-w7); gap: 24px; }
  .px-split.flip { grid-template-columns: var(--g-w7) var(--g-w3); }
  .px-quote { grid-template-columns: var(--g-w3) var(--g-w7); }
  /* wide media panels break out of the 10 columns to the 12-column width */
  .px-panel { margin-left: calc((var(--g-w10) - var(--g-w12)) / 2); margin-right: calc((var(--g-w10) - var(--g-w12)) / 2); }
  .px-panel figcaption { margin-left: calc((var(--g-w12) - var(--g-w10)) / 2); }
}

/* ============================================================
   Hero (2026-10-26). Bar, copy and chart styles below; the band layout itself is the last block (after Figma node 54:2).
   Earlier history: after the Pixel Watch 5 / Pixel 10 Pro heroes: the project name and section tabs sit in a bar above; a 12-column card (1392px max, 600px tall, 28px corners)
   on the dark ground Google uses (#172222), copy 5 columns wide starting on the content column, a 48/56
   headline about the change, Google's price line (new figure, old struck through, green chip), the call-volume chart where Google puts the price and options (it draws on page load),
   and the product shot bleeding off the right edge. Under it, a #f9f9f9 strip like the Health Premium
   promo, 48px below the card, carries the Microsoft customer story.
   ============================================================ */
main.wrap > .gx-hero { padding-left: var(--g-in-wide); padding-right: var(--g-in-wide); padding-top: 24px; }
/* project bar above the card (Pixel 10 Pro): name 20/26, 48px pill tabs, role on the right */
.gx-bar { display: flex; align-items: center; gap: 12px 24px; padding: 0 22px; margin-bottom: 38px; flex-wrap: wrap; }
.gx-bar h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; color: #191c1d; text-align: left; }
.gx-tabs { display: flex; flex-wrap: wrap; gap: 9px; }
.gx-tabs a { display: inline-flex; align-items: center; height: 48px; padding: 0 16px; border-radius: 999px; background: #eff1f2; color: #191c1d;
  font-family: var(--display); font-size: 1rem; line-height: 1.5; font-weight: 500; text-decoration: none; transition: background .15s; }
.gx-tabs a:hover { background: #e3e5e6; }
.gx-tabs a[aria-current] { background: #d3e3fd; color: #0842a0; }
.gx-who { margin: 0 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.gx-who b { font-family: var(--display); font-size: 1rem; line-height: 1.5; font-weight: 500; color: #191c1d; }
.gx-who span { font-size: .8125rem; line-height: 1.5; color: #444746; }
.gx-head { margin: 0; font-family: var(--display); font-weight: 500; font-size: 3rem; line-height: 1.167; letter-spacing: 0;
  color: #e1e3e4; text-align: left; text-wrap: balance; }
/* Google's price line: the new figure, the old one struck through, a green saving chip */
.gx-price { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gx-price b { font-family: var(--display); font-size: 1.25rem; line-height: 1.3; font-weight: 500; color: #e1e3e4; }
.gx-price s { font-size: 1rem; line-height: 1.5; color: #c4c7c5; }
.gx-save { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 6px; background: #c4eed0; color: #00522c;
  font-family: var(--display); font-size: .75rem; line-height: 1.5; font-weight: 500; }
.gx-save svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gx-note { margin: 10px 0 0; font-size: .75rem; line-height: 1.5; color: #e1e3e4; }
.gx-note + .gx-note { margin-top: 2px; }

.gx-promo { margin-top: 48px; display: flex; align-items: center; gap: 16px; min-height: 101px; box-sizing: border-box;
  padding: 18px 40px; border-radius: 28px; background: #f9f9f9; color: #191c1d; text-decoration: none; }
.gx-promo img { flex: none; width: 72px; height: 48px; object-fit: cover; border-radius: 10px; background: #fff; }
.gx-promo-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gx-promo-t b { font-family: var(--display); font-size: 1.25rem; line-height: 1.3; font-weight: 500; }
.gx-promo-t span { font-size: 1rem; line-height: 1.5; color: #191c1d; }
.gx-promo-go { margin-left: auto; flex: none; font-family: var(--display); font-size: 1rem; line-height: 1.5; font-weight: 500; color: #0b57d0; }
.gx-promo:hover .gx-promo-go { text-decoration: underline; }

/* call-volume chart: fills the copy column; the line draws, then the areas fade in */
.gx-chart { margin: 0; width: 100%; }
.gx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.gx-chart .ecs-chart-area { opacity: 0; transition: opacity 1.2s ease 1.4s; }
.gx-chart.chart-animate .ecs-chart-area { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gx-chart .ecs-chart-area { opacity: 1; transition: none; } }

/* the intro paragraph under the hero: left on the content column, 8 columns wide */
main.wrap > header.case-hero { padding-top: clamp(4rem, 12vh, 7.5rem); text-align: left; }
main.wrap > header.case-hero .lede { margin: 0; max-width: var(--g-w8); text-align: left; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.43; color: #191c1d; }

@media (max-width: 1023.98px) {
  main.wrap > .gx-hero { padding-left: var(--g-in); padding-right: var(--g-in); }
  .gx-bar { padding: 0; margin-bottom: 24px; }
  .gx-who { margin-left: 0; align-items: flex-start; text-align: left; width: 100%; }
      .gx-promo { padding: 18px 24px; flex-wrap: wrap; }
  .gx-promo-go { margin-left: 88px; }
}
@media (max-width: 599.98px) {
    .gx-head { font-size: 2.25rem; line-height: 1.22; }
  .gx-tabs a { height: 40px; padding: 0 14px; font-size: .9375rem; }
  .gx-promo img { display: none; }
  .gx-promo-go { margin-left: 0; }
}
/* the tabs in the project bar jump to sections; keep their tops clear of the sticky nav */
#top, main.wrap > section.cgroup { scroll-margin-top: 76px; }


/* ============================================================
   Hero band (2026-10-26): positions loosely after Figma "2026-portfolio" node 54:2, fitted to the page system.
   A 12-column card (same width as the nav and the strip under it), 28px corners, on the page's sky tint (#eaf1fb).
   The left column starts on the content column and is 5 columns wide: the copy in the page's dark text and type tiers,
   then the chart in a white 28px-corner card in Google's chart style (Google Sans labels, #e1e3e1 grid,
   #7cacf8 before / #0b57d0 after, validated with the dataviz script), 24px below. The desktop +
   phone composite starts one gutter after that column and runs off the card's right edge.
   ============================================================ */
.gx-band { --gx-in: calc((var(--g-w12) - var(--g-w10)) / 2); --gx-w5: calc(var(--g-col) * 5 + 96px);
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: #eaf1fb; }
.gx-band-in { position: relative; padding: 64px 0 64px var(--gx-in); }
.gx-panels { position: relative; z-index: 1; width: var(--gx-w5); display: flex; flex-direction: column; gap: 24px; }
.gx-panel-copy .gx-copy { display: flex; flex-direction: column; align-items: flex-start; }
.gx-panel-copy .gx-head { color: #191c1d; }
.gx-panel-copy .gx-price b { color: #191c1d; }
.gx-panel-copy .gx-price s { color: #444746; }
.gx-panel-copy .gx-note { font-size: .875rem; line-height: 1.43; color: #191c1d; }
.gx-panel-copy .gx-note:first-of-type { margin-top: 12px; }
.gx-panel-chart { padding: 20px 0 0; }   /* the chart sits straight on the tinted hero, lined up with the copy */
.gx-composite { position: absolute; z-index: 0; left: calc(var(--gx-in) + var(--gx-w5) + 48px); top: 64px;
  width: calc(var(--g-w7) * 1.45); max-width: none; height: auto; pointer-events: none; }
.gx-band + .gx-promo { margin-top: 24px; }
@media (max-width: 1023.98px) {
  .gx-band-in { padding: 32px 24px 0; }
  .gx-panels { width: auto; }
  .gx-composite { position: relative; left: auto; top: auto; display: block; width: 150%; margin: 32px 0 -10%; }
}
@media (max-width: 599.98px) {
  .gx-band-in { padding: 28px 16px 0; }
  .gx-panel-chart { padding-top: 14px; }
}

/* ============================================================
   Full-screen hero (2026-10-26, later): the sky band fills the window under the floating nav, edge to edge, with the
   project bar at its top and the composition centred in the rest. Contents load in on page open: bar, headline, price
   line, notes and chart card rise in turn (the chart draws once its card lands), the composite slides in from the right.
   ============================================================ */
main.wrap > .gx-hero { padding-top: 0; }
.gx-band { margin: -64px calc(-1 * var(--g-in-wide)) 0; border-radius: 0; min-height: max(680px, 100svh); display: flex; flex-direction: column;
  padding-top: 88px; box-sizing: border-box; }
.gx-band > .gx-bar { margin: 0 var(--g-in-wide) 0; }
.gx-band .gx-tabs a:not([aria-current]) { background: #fff; }
.gx-band .gx-tabs a:not([aria-current]):hover { background: #f1f3f4; }
.gx-band-in { flex: 1; display: flex; align-items: center; padding: 40px 0 72px var(--g-in); }
.gx-composite { left: calc(var(--g-in) + var(--gx-w5) + 48px); top: 50%; transform: translateY(calc(-50% - 16px)); }

@keyframes gxIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes gxShot { from { opacity: 0; transform: translate(72px, calc(-50% - 16px)); } to { opacity: 1; transform: translateY(calc(-50% - 16px)); } }
.gx-band.is-loading .gx-bar { animation: gxIn .7s cubic-bezier(.2,.7,.2,1) both; }
.gx-band.is-loading .gx-head { animation: gxIn .9s cubic-bezier(.2,.7,.2,1) .12s both; }
.gx-band.is-loading .gx-price { animation: gxIn .8s cubic-bezier(.2,.7,.2,1) .3s both; }
.gx-band.is-loading .gx-note { animation: gxIn .8s cubic-bezier(.2,.7,.2,1) .42s both; }
.gx-band.is-loading .gx-note + .gx-note { animation-delay: .5s; }
.gx-band.is-loading .gx-panel-chart { animation: gxIn .9s cubic-bezier(.2,.7,.2,1) .6s both; }
.gx-band.is-loading .gx-composite { animation: gxShot 1.3s cubic-bezier(.2,.7,.2,1) .3s both; }
@media (prefers-reduced-motion: reduce) { .gx-band.is-loading * { animation: none !important; } }

@media (max-width: 1023.98px) {
  .gx-band { margin: -64px calc(-1 * var(--g-in)) 0; min-height: 0; padding-top: 84px; }
  .gx-band > .gx-bar { margin: 0 var(--g-in); }
  .gx-band-in { display: block; padding: 32px var(--g-in) 0; }
  .gx-composite { left: auto; top: auto; transform: none; }
  @keyframes gxShot { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
}

/* Alignment pass (2026-10-26): one left edge and one top line.
   The project bar sits on the content column (same left and right edges as the copy, not the nav's 12 columns).
   The copy column and the composite are a two-column grid, so the image starts on the headline's top line;
   the grid is centred in the space under the bar. */
.gx-band > .gx-bar { margin: 0 var(--g-in); padding: 0; }
.gx-band-in { display: grid; grid-template-columns: var(--gx-w5) minmax(0, 1fr); column-gap: 48px; align-items: start; align-content: center;
  padding: 48px 0 72px var(--g-in); }
.gx-band-in .gx-composite { position: static; transform: none; width: calc(var(--g-w7) * 1.45); max-width: none; }
@keyframes gxShot { from { opacity: 0; transform: translateX(72px); } to { opacity: 1; transform: none; } }
@media (max-width: 1439.98px) { .gx-who span { display: none; } }
@media (max-width: 1279.98px) { .gx-who { display: none; } }
@media (max-width: 1023.98px) {
  .gx-band-in { display: block; padding: 32px var(--g-in) 0; }
  .gx-band-in .gx-composite { width: 150%; margin: 32px 0 -10%; }
  .gx-who { display: flex; }
}

/* Section heads (2026-10-26): each group's subhead is now its heading (the short labels "Role" etc. live only in the hero tabs);
   balance the lines so a sentence at 76/84 doesn't end on one word. */
.cgroup-k { text-wrap: balance; }

/* About card (2026-10-26): a short product description on the content column, with the Microsoft customer story as its
   footer row under a hairline. The card spans the 12 columns, #f9f9f9, 28px corners, like Google's promo strip. */
.gx-about { margin-top: 24px; border-radius: 28px; background: #f9f9f9; padding: 48px calc((var(--g-w12) - var(--g-w10)) / 2) 32px; }
.gx-about-t { margin: 0; max-width: var(--g-w8); font-family: var(--display); font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.43;
  font-weight: 400; color: #191c1d; text-wrap: pretty; }
.gx-about .gx-promo { margin: 36px 0 0; padding: 24px 0 0; min-height: 0; border-radius: 0; background: none; border-top: 1px solid #e1e3e1; }
@media (max-width: 1023.98px) { .gx-about { padding: 32px 24px 24px; } .gx-about .gx-promo { padding: 20px 0 0; } }
main.wrap > .gx-hero { padding-bottom: clamp(3rem, 8vh, 5rem); }

/* Two teams (2026-10-26), after the Google Store paired cards: two 5-column cards, 24px apart; a 5:4 rounded media
   (28px), then a 24/30 title and a 16/24 line. Team A shows the pilot app on a soft blue ground, Team B a photo. */
.px.tm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.tm-media { aspect-ratio: 5 / 4; border-radius: 28px; overflow: hidden; background: var(--g-card); }
.tm-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-media.tm-app { position: relative; background: linear-gradient(160deg, #e3ecfa 0%, #c9daf5 100%); }
/* the phone screen rises from the bottom edge, cropped like a product peek */
.tm-media.tm-app > img { position: absolute; left: 50%; top: 11%; width: 42%; height: auto; transform: translateX(-50%); object-fit: contain;
  border-radius: 22px; box-shadow: 0 18px 40px -18px rgba(22,48,104,.45), 0 0 0 1px rgba(22,48,104,.08); }
.tm-card h4 { margin: 28px 0 0; font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: #191c1d; }
.px .tm-card p { margin-top: 14px; font-size: 1rem; line-height: 1.5; color: #191c1d; max-width: 46ch; }
@media (max-width: 760px) { .px.tm { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* IOC call queue (2026-10-26): caller and hold time only; the request column is unknown for every call */
.q-head { display: grid; grid-template-columns: 1fr 64px 64px; gap: .6rem; margin: .8rem .6rem 0; font-size: .6875rem; font-weight: 500; color: #444746; }
.q-head span:nth-child(2) { text-align: center; }
.q-head span:last-child { text-align: right; }
.q-rows { margin-top: .45rem; }
.q-rows li { display: grid; grid-template-columns: 1fr 64px 64px; gap: .6rem; }
.q-rows .q-req { justify-self: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed #9aa0a6; color: #5f6368;
  display: grid; place-items: center; font-size: .6875rem; font-weight: 600; line-height: 1; }
.q-rows li em { margin-left: 0; text-align: right; font-variant-numeric: tabular-nums; color: #191c1d; font-weight: 500; }

/* Pilot-side status (2026-10-26): the two things a pilot knows, then dashed steps with no update */
.st-steps { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; }
.st-steps li { position: relative; padding: 0 0 .8rem 1.65rem; font-size: .8125rem; line-height: 1.3; }
.st-steps li::before { content: ""; position: absolute; left: 0; top: .1em; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.st-steps li::after { content: ""; position: absolute; left: 5.5px; top: 1.2em; bottom: .05em; width: 0; border-left: 1.5px solid #0b57d0; }
.st-steps li:last-child { padding-bottom: 0; }
.st-steps li:last-child::after { display: none; }
.st-steps b { font-weight: 600; color: #191c1d; }
.st-steps span { display: block; margin-top: 2px; font-size: .75rem; color: #5f6368; }
.st-steps li.done::before { background: #0b57d0; }
.st-steps li.done:nth-child(2)::after { border-left: 1.5px dashed #9aa0a6; }
.st-steps li.unk::before { border: 1.5px dashed #9aa0a6; background: #fff; }
.st-steps li.unk::after { border-left: 1.5px dashed #9aa0a6; }
.st-steps li.unk b { color: #5f6368; font-weight: 500; }
.st-steps li.unk span { color: #a50e0e; }

/* Unclear processes (2026-10-26): one request, six possible channels/apps (each a question), then the workaround around them */
.uc-chips { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.uc-chips li { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: .4rem .5rem .4rem .6rem; border-radius: 10px;
  background: #f1f3f4; font-size: .6875rem; line-height: 1.2; color: #191c1d; }
.uc-chips li:nth-child(odd) { transform: rotate(-1.2deg); }
.uc-chips li:nth-child(3n) { transform: rotate(1.4deg); }
.uc-chips i { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.2px dashed #9aa0a6; display: grid; place-items: center;
  font-style: normal; font-size: .5625rem; font-weight: 600; color: #5f6368; }
.uc-bypass { position: relative; margin-top: .9rem; padding: .6rem .7rem; border-radius: 12px; border: 1.5px dashed #d93025; background: #fce8e6; }
.uc-bypass .uc-k { display: inline-block; font-size: .625rem; font-weight: 600; letter-spacing: .02em; color: #a50e0e; }
.uc-bypass b { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 600; color: #191c1d; }
.uc-bypass .uc-s { display: block; font-size: .6875rem; color: #a50e0e; }

/* "Missing today" lists (2026-10-26): research findings read as gaps, so the old needs lists carry an empty, struck marker */
.rx-rows.miss li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.4px dashed #d93025; box-sizing: border-box;
  background: linear-gradient(135deg, transparent 45%, #d93025 45%, #d93025 55%, transparent 55%); }

/* Cascade (2026-10-26): one unhandled request ripples into delays and crew misallocation; the line thickens and reddens downline */
.cs-steps { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; }
.cs-steps li { position: relative; padding: 0 0 .7rem 1.6rem; font-size: .8125rem; line-height: 1.3; }
.cs-steps li:last-child { padding-bottom: 0; }
.cs-steps li::before { content: ""; position: absolute; left: 0; top: .1em; width: 12px; height: 12px; border-radius: 50%; background: #f28b82; }
.cs-steps li:nth-child(2)::before { background: #ee675c; }
.cs-steps li:nth-child(3)::before { background: #d93025; }
.cs-steps li:nth-child(4)::before { background: #a50e0e; box-shadow: 0 0 0 4px rgba(217,48,37,.18); }
.cs-steps li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 1.15em; bottom: .05em; width: 2px; background: #f28b82; }
.cs-steps li:nth-child(2)::after { background: #ee675c; }
.cs-steps li:nth-child(3)::after { background: #d93025; }
.cs-steps b { font-weight: 600; color: #191c1d; }
.cs-steps span { display: block; margin-top: 2px; font-size: .75rem; color: #5f6368; }

/* IROPS spike (2026-10-26): a schematic of daily call volume, steady days then a red spike during irregular operations */
.ir-bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: .8rem; padding-top: 14px; }
.ir-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: #c4c7c5; }
.ir-bars i.ir { background: #d93025; }
.ir-bars b { position: absolute; top: 0; left: 60%; font-size: .625rem; font-weight: 600; color: #a50e0e; letter-spacing: .02em; }
.ir-cap { margin-top: .35rem; }

/* Workload by base (2026-10-26): one base backed up, the rest light, and no way to rank or rebalance */
.wl-rows { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: 6px; }
.wl-rows li { display: grid; grid-template-columns: 34px 1fr 56px; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 12px;
  background: #f1f3f4; font-size: .75rem; }
.wl-b { font-weight: 600; color: #191c1d; }
.wl-bar { height: 8px; border-radius: 4px; background: #e1e3e1; overflow: hidden; }
.wl-bar i { display: block; width: var(--w); height: 100%; border-radius: 4px; background: #9aa0a6; }
.wl-rows em { font-style: normal; text-align: right; font-size: .6875rem; color: #5f6368; }
.wl-rows li.hot { background: #fce8e6; outline: 1.5px solid #d93025; }
.wl-rows li.hot .wl-bar i { background: #d93025; }
.wl-rows li.hot em { color: #a50e0e; font-weight: 600; }
.wl-note { display: block; margin-top: .7rem; font-size: .75rem; color: #a50e0e; }

/* Rework loop (2026-10-26): one simple request touched again and again because nothing records what was done */
.rw-rows { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: 5px; }
.rw-rows li { display: flex; align-items: center; gap: .55rem; padding: .38rem .6rem; border-radius: 12px; background: #f1f3f4; font-size: .75rem; color: #191c1d; }
.rw-n { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .625rem; font-weight: 600; color: #5f6368; }
.rw-rows i { margin-left: auto; font-style: normal; font-size: .8125rem; color: #d93025; }
.rw-rows li:nth-child(n+4) { background: #fce8e6; }
.rw-foot { display: block; margin-top: .65rem; font-size: .75rem; font-weight: 600; color: #a50e0e; }

/* Research methods (2026-10-26), after the Google Store phones category grid: a white collage card of six method photos
   (2 × 3, labelled), a tall panel, and a lower panel that starts further down; captions sit under each. */
.px.rm { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; align-items: start;
  margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.rm-fig { margin: 0; }
.rm-collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 28px; background: #fff; }
.rm-tile { position: relative; margin: 0; aspect-ratio: 2 / 3; border-radius: 20px; overflow: hidden; background: var(--g-card); }
.rm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-tile figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92);
  font-family: var(--display); font-size: .6875rem; font-weight: 500; color: #191c1d; white-space: nowrap; }
.rm-media { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--g-card); }
.rm-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-media.rm-app { background: linear-gradient(160deg, #e3ecfa 0%, #c9daf5 100%); }
.rm-media.rm-app > img { inset: auto; left: 50%; top: 9%; width: 62%; height: auto; transform: translateX(-50%); object-fit: contain;
  border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(22,48,104,.45), 0 0 0 1px rgba(22,48,104,.08); }
.rm-low { margin-top: clamp(96px, 14vw, 220px); }   /* drops below the tall panel's top, like the reference */
.rm-fig > figcaption { margin-top: 18px; font-family: var(--display); font-size: 1.125rem; line-height: 1.45; color: #191c1d; max-width: 34ch; text-wrap: pretty; }
@media (max-width: 1023.98px) {
  .px.rm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rm-main { grid-column: 1 / -1; }
  .rm-low { margin-top: 96px; }
}
@media (max-width: 599.98px) {
  .px.rm { grid-template-columns: minmax(0, 1fr); }
  .rm-low { margin-top: 0; }
  .rm-collage { gap: 8px; padding: 10px; }
  .rm-tile figcaption { left: 6px; bottom: 6px; padding: 3px 8px; font-size: .625rem; }
}
/* the methods block spans the 12-column width (the nav's), like the Google Store phones grid */
@media (min-width: 1024px) { .px.rm { margin-left: calc((var(--g-w10) - var(--g-w12)) / 2); margin-right: calc((var(--g-w10) - var(--g-w12)) / 2); gap: 24px 28px; } }

/* Collage intro (2026-10-26): the Live observation tile starts as the whole card, shrinks into its slot, then the rest rise in */
.rm-collage { position: relative; }
.rm-zoom { position: absolute; z-index: 2; left: 14px; top: 14px; width: calc(100% - 28px); height: calc(100% - 28px); aspect-ratio: auto; }
.rm-zoom.is-moving { transition: left 1s cubic-bezier(.2,.7,.2,1), top 1s cubic-bezier(.2,.7,.2,1), width 1s cubic-bezier(.2,.7,.2,1), height 1s cubic-bezier(.2,.7,.2,1); }
.rm-zoom figcaption { transition: font-size 1s; }
.rm-collage.is-pre .rm-tile:not(.rm-zoom) { opacity: 0; transform: translateY(18px); }
.rm-collage.is-in .rm-tile { transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc((var(--i) - 1) * 110ms); }
.rm-collage.is-in .rm-tile:first-child { transition: none; }
@media (max-width: 599.98px) { .rm-zoom { left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); } }
/* team captions under the two team photos: a 24/30 title over a 16/24 line (the old two-team cards' text) */
.rm-fig > figcaption b { display: block; margin-bottom: 10px; font-size: 1.5rem; line-height: 1.25; font-weight: 500; color: #191c1d; }
/* team captions: one sentence each, same style as the collage caption */
/* the methods heading shares the block's 12-column left edge */
@media (min-width: 1024px) { .px-left.rm-head { margin-left: calc((var(--g-w10) - var(--g-w12)) / 2); } }

/* ============================================================
   Recolour (2026-10-26), after store.google.com/category/phones: a white page whose sections fade in and out of soft
   tints with vertical gradients (no hard-edged bands). Role fades into Google's pale blue (#e5f0ff), Priority into a
   pale cream (#f1efd3 → #f9f9f8), Alignment into the neutral #f9f9f9. Cards stay white / #f9f9f9 with 20–28px corners.
   ============================================================ */
main.wrap > section.cgroup[data-tint] { background: var(--gx-band); }
main.wrap > section.cgroup[data-tint="warm"] { --px-tint: #f1f5fe;
  --gx-band: linear-gradient(180deg, #fff 0, #f1f5fe 32%, #f1f5fe 62%, #fff 100%); }
main.wrap > section.cgroup[data-tint="sage"] { --px-tint: #f8f9fa;
  --gx-band: linear-gradient(180deg, #fff 0, #fff 40%, #f5f8fe 68%, #fff 100%); }
main.wrap > section.cgroup[data-tint="sand"] { --px-tint: #f9f9f9;
  --gx-band: linear-gradient(180deg, #fff 0, #f9f9f9 min(360px, 30%), #f9f9f9 calc(100% - min(300px, 25%)), #fff 100%); }
main.wrap > section.cgroup[data-tint="sky"] { --px-tint: #e5f0ff;
  --gx-band: linear-gradient(180deg, #fff 0, #e5f0ff min(520px, 22%), #e5f0ff calc(100% - min(420px, 18%)), #fff 100%); }
/* on the pale-blue Role band, the blue mock grounds step one shade deeper so the white UI cards still read */
section.cgroup[data-tint="warm"] .rx-vis.blue, section.cgroup[data-tint="sky"] .rx-vis.blue { background: #c9dcfb; }
section.cgroup[data-tint="warm"] .rx-vis:not(.blue):not(.ink) { background: #fff; }
/* cards that sat on the warm band (#fff) keep a light edge on the new tints */
section.cgroup .rm-collage { box-shadow: 0 1px 2px rgba(60,64,67,.06); }

/* Role heading (2026-10-26): the section header now sits in the methods intro, left-aligned on the collage's edge */
.px-left.rm-head .rm-title { font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 1.105;
  font-weight: 500; letter-spacing: -1px; color: #191c1d; max-width: var(--g-w8); text-wrap: balance; margin: 0 0 24px; }

/* About card: integration strategy (2026-10-26), brought back from the removed #integration plate as a three-column spec row */
.gx-about-s { margin: 20px 0 0; max-width: var(--g-w8); font-size: 16px; line-height: 24px; color: #444746; }
.gx-int { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gx-int li { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 24px; border-radius: 20px; background: #fff; }
.gx-int .k { font-size: 14px; line-height: 20px; color: #0b57d0; font-weight: 500; }
.gx-int b { font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 500; color: #191c1d; }
.gx-int span:last-child { font-size: 14px; line-height: 20px; color: #444746; }
@media (max-width: 1023.98px) { .gx-int { grid-template-columns: 1fr; gap: 12px; } }

/* Solution panel 1 (2026-10-26): the #how scene plays inside the first panel; "Learn more" opens the full scroll story */
.hx-anim .hx-stage { position: absolute; inset: 0; height: 100%; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.hx-more { align-self: flex-start; margin-top: 16px; padding: 0; border: 0; background: none; color: #0b57d0; font: 500 16px/24px "Google Sans", Roboto, Arial, sans-serif; cursor: pointer; }
.hx-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.hx-more:focus-visible { outline: 2px solid #0b57d0; outline-offset: 3px; border-radius: 4px; }
/* Learn more modal: the full request story */
.hx-dlg { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: 28px;
  background: var(--bg, #fff); color: inherit; overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.hx-dlg::backdrop { background: rgba(32,33,36,.55); }
.hx-dlg[open] { animation: hxIn .35s cubic-bezier(.3,.7,.2,1); }
@keyframes hxIn { from { opacity: 0; transform: translateY(16px); } }
main .cgroup .hx-dlg section.plate { margin: 0; padding: 40px clamp(20px, 5vw, 64px) 48px; border-top: 0; }
.hx-close { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); z-index: 5; }
.hx-close svg { width: 22px; height: 22px; fill: none; stroke: #1f1f1f; stroke-width: 2; stroke-linecap: round; }
.hx-close:focus-visible { outline: 2px solid #0b57d0; outline-offset: 3px; }
html.dlg-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .hx-dlg[open] { animation: none; } }

/* Solution split (2026-10-26): a Pilots block and an IOC block, each a hx-head + up to four quality panels (title + one line) */
.px.hx-head { margin-top: clamp(96px, 12vw, 160px); }
.px.hx-head:first-of-type, .cgroup-head + .px.hx-head { margin-top: 0; }
.px.hx-head h3 { max-width: var(--g-w8); }
.hx-txt { margin: 12px auto 0; max-width: 40ch; text-align: center; font-size: 16px; line-height: 24px; color: #444746; text-wrap: pretty; }

/* Solution, Gemini layout (2026-10-26): after the "Designed for Gemini Intelligence" run on the Pixel 11 Pro page.
   Centered intro + 12-col hero with a floating request bar; per side a centered 60px subhead, a 12-col card with a centered
   caption, 3 + 7 splits (text | card, .flip mirrors), a 2-up 6-col rail and a 10-col promo card. */
#priority-model { --gm-out: calc((var(--g-w10) - var(--g-w12)) / 2); }
#priority-model .gm-intro { max-width: 560px; margin: 24px auto 0; text-align: center; font-size: 16px; line-height: 24px; color: #444746; }
#priority-model .gm-hero, #priority-model .gm-wide { margin-left: var(--gm-out); margin-right: var(--gm-out); }
.gm-hero { position: relative; margin-top: 64px; aspect-ratio: 16 / 7; border-radius: 28px; overflow: hidden; background: #c2d7fb; }
.gm-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-ask { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(560px, 84%); display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 28px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.15), 0 8px 24px rgba(60,64,67,.16);
  font-family: "Google Sans", Roboto, Arial, sans-serif; }
.gm-ask-k { font-size: 14px; line-height: 20px; color: #0b57d0; font-weight: 500; white-space: nowrap; }
.gm-ask-t { flex: 1; min-width: 0; font-size: 18px; line-height: 24px; color: #191c1d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-ask-go { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #d3e3fd; }
.gm-ask-go svg { width: 22px; height: 22px; fill: #0b57d0; }

.gm-sub { max-width: var(--g-w8); margin: 160px auto 40px; text-align: center; font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.133; font-weight: 500; letter-spacing: -.5px; color: #191c1d; text-wrap: balance; }

.gm-media { position: relative; overflow: hidden; border-radius: 28px; background: #e9e8de; }
.gm-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-media.blue { background: #d3e3fd; }
.gm-media.soft { background: #f8f9fa; }
.gm-media.phone > img { object-fit: contain; inset: 8% 0 0; height: 92%; object-position: 50% 0; filter: drop-shadow(0 8px 24px rgba(60,64,67,.18)); }
.gm-media.shot { background: #deeeff; }
.gm-media.shot > img { object-fit: contain; inset: 5%; width: 90%; height: 90%; }
.gm-media.hx-anim .hx-flow { inset: 10% 30%; }

.gm-wide .gm-media { aspect-ratio: 16 / 8; }
.gm-wide figcaption { margin: 28px 0 0; padding: 0 8.5%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.gm-wide figcaption h4 { max-width: 900px; }
.gm-wide figcaption p { max-width: 640px; }
.gm-wide h4, .gm-card h4 { margin: 0; font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; font-weight: 500; color: #191c1d; text-wrap: balance; }
.gm-wide p, .gm-card p, .gm-text p { margin: 12px 0 0; font-size: 16px; line-height: 24px; color: #444746; text-wrap: pretty; }
.gm-wide .hx-more { margin-top: 16px; }

.gm-split { display: grid; grid-template-columns: var(--g-w3) var(--g-w7); gap: 24px; align-items: end; margin-top: 120px; }
.gm-split.flip { grid-template-columns: var(--g-w7) var(--g-w3); }
.gm-split .gm-media { aspect-ratio: 5 / 4; }
.gm-text h3 { margin: 0; font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; font-weight: 500; color: #191c1d; text-wrap: balance; }

.gm-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 1156px; margin: 120px auto 0; }
.gm-card { margin: 0; }
.gm-card .gm-media { aspect-ratio: 4 / 5; }
.gm-card + .gm-card { margin-top: 35%; } /* the right card sits lower, like the Google Store pair */
.gm-card figcaption { margin-top: 24px; max-width: 520px; }
.gm-card h4 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; }
.gm-card .rx-note { top: 7%; }

.gm-promo { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 120px; padding: 40px 64px 40px 40px;
  border-radius: 28px; background: #f3f1e1; }
.gm-promo .gm-media { aspect-ratio: 4 / 3; border-radius: 20px; }

@media (max-width: 1023.98px) {
  .gm-hero { aspect-ratio: 4 / 3; }
  .gm-sub { margin-top: 96px; }
  .gm-split, .gm-split.flip, .gm-rail, .gm-promo { grid-template-columns: 1fr; margin-top: 64px; }
  .gm-split .gm-text, .gm-promo .gm-text { order: 2; }
  .gm-promo { padding: 24px; gap: 24px; }
  .gm-wide .gm-media { aspect-ratio: 4 / 3; }
  .gm-wide figcaption { padding: 0; }
  .gm-media.hx-anim .hx-flow { inset: 8%; }
}

/* Solution panel 1 (2026-10-26): phone playing the pilot prototype flow from Figma (Interview-Kit 857:5479).
   Drawn at the prototype's 393×852 and scaled to the panel; .pf[data-s] sets the screen state */
.hx-anim .pf { position: absolute; inset: 0; }
.pf-phone { position: absolute; left: 50%; top: 50%; box-sizing: content-box; width: 393px; height: 852px; border: 11px solid #1f1f1f; border-radius: 62px; background: #1f1f1f;
  transform-origin: 50% 50%; box-shadow: 0 30px 60px rgba(31,31,31,.18), 0 0 0 1px #3a3a3a inset; }
.pf-screen { position: absolute; inset: 0; overflow: hidden; border-radius: 51px; background: #000; color: #000; font: 17px/1.25 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Google Sans", system-ui, sans-serif; letter-spacing: -.01em; }
.pf-screen * { box-sizing: border-box; }
.pf-ic { display: inline-block; flex: none; width: 26px; height: 26px; border: 2.2px solid #0b5cc0; border-radius: 50%; }
.pf-dash { position: absolute; inset: 0; background: #f2f2f7; padding: 58px 15px 0; transform-origin: 50% 0; transition: transform .45s cubic-bezier(.3,.7,.2,1), border-radius .45s, filter .45s; }
.pf-nav { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 2px; }
.pf-user { background: radial-gradient(circle at 50% 38%, #0b5cc0 0 4px, transparent 5px), radial-gradient(circle at 50% 100%, #0b5cc0 0 8px, transparent 9px); }
.pf-moon { border-radius: 50%; border-right-color: transparent; transform: rotate(-30deg); }
.pf-flying { background: #0b5cc0; color: #fff; font-weight: 600; font-size: 16px; padding: 3px 12px; border-radius: 7px; display: flex; gap: 6px; align-items: center; }
.pf-flying i { font: italic 600 11px/14px Georgia, serif; width: 16px; height: 16px; border: 1.6px solid #fff; border-radius: 50%; text-align: center; }
.pf-seq { margin-top: 16px; height: 46px; border-radius: 12px; background: #dce3ef; color: #0b5cc0; font-size: 17px; display: grid; place-items: center; box-shadow: 0 3px 6px rgba(0,0,0,.12); }
.pf-flt { margin-top: 18px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pf-fr { display: flex; justify-content: space-between; align-items: center; }
.pf-fr > b { font-weight: 600; }
.pf-big b { font-size: 29px; font-weight: 700; letter-spacing: -.02em; }
.pf-big em { font-style: normal; background: #f5a524; color: #fff; font-size: 14px; padding: 2px 30px; border-radius: 4px; }
.pf-times { font-size: 14px; text-align: center; }
.pf-times .r { color: #e2231a; font-size: 18px; font-weight: 700; display: flex; flex-direction: column; }
.pf-times s { color: #8e8e93; font-size: 13px; font-weight: 400; }
.pf-tags { margin-top: 10px; }
.pf-tags span { background: #dce3ef; color: #0b5cc0; font-size: 15px; padding: 4px 10px; border-radius: 6px; }
.pf-dots { display: flex; justify-content: center; gap: 7px; margin: 12px 0 14px; }
.pf-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c7c7cc; }
.pf-dots i.on { background: #1f1f1f; }
.pf-contact { display: flex; gap: 12px; padding: 13px 18px; border-radius: 14px; background: #dce3ef; box-shadow: 0 2px 6px rgba(0,0,0,.1); transition: background .2s, transform .2s; }
.pf-contact b { display: block; color: #0b5cc0; font-weight: 600; }
.pf-contact span { display: block; color: #0b5cc0; font-size: 15px; line-height: 1.35; }
.pf-send { border-radius: 3px; border-width: 0 0 2.2px 2.2px; transform: rotate(-45deg) scale(.7); margin-top: 2px; }
.pf-msgs { list-style: none; margin: 14px 0 0; padding: 0; background: #fff; border-radius: 14px; }
.pf-msgs li { display: flex; align-items: center; height: 56px; padding: 0 16px; border-bottom: 1px solid #e5e5ea; font-size: 17px; }
.pf-msgs b { margin-left: auto; background: #0b5cc0; color: #fff; font-size: 13px; min-width: 21px; height: 21px; border-radius: 11px; display: grid; place-items: center; padding: 0 6px; }
.pf-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: #f2f2f7; border-top: 1px solid #d1d1d6; display: grid; place-items: center; font-size: 15px; }
.pf-toast { position: absolute; left: 15px; right: 15px; top: 106px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px;
  background: #1f1f1f; color: #fff; font-size: 16px; font-weight: 500; opacity: 0; transform: translateY(-14px); transition: opacity .35s, transform .35s; }
.pf-toast i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #34c759; display: grid; place-items: center; font-size: 13px; }
.pf-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s; }
.pf-sheet { position: absolute; left: 0; right: 0; top: 68px; bottom: 0; background: #fff; border-radius: 12px 12px 0 0; overflow: hidden;
  transform: translateY(105%); transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.pf-grab { width: 36px; height: 5px; border-radius: 3px; background: #c7c7cc; margin: 6px auto 0; }
.pf-pages { display: flex; width: 1179px; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.pf-pg { width: 393px; flex: none; padding: 0 16px; }
.pf-hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 46px; }
.pf-hd b { font-weight: 600; }
.pf-l { color: #0b5cc0; }
.pf-cats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.pf-cats li { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 14px; border-radius: 12px; background: #ececec; transition: background .2s; }
.pf-cats .pf-ic { width: 26px; height: 20px; border-radius: 5px; }
.pf-cats .pf-clock, .pf-cats .pf-sick { border-radius: 50%; height: 24px; width: 24px; }
.pf-pg h5 { margin: 12px 0 10px 2px; font: 600 17px/1.2 inherit; font-family: inherit; }
.pf-opts { list-style: none; margin: 0 0 22px; padding: 0; background: #ececec; border-radius: 14px; overflow: hidden; }
.pf-opts li { padding: 11px 16px; border-bottom: 1px solid #d1d1d6; transition: background .2s; }
.pf-opts li:last-child { border-bottom: 0; }
.pf-opts b { display: block; color: #0b5cc0; font-weight: 600; }
.pf-opts span { display: block; color: #0b5cc0; font-size: 15px; margin-top: 3px; }
.pf-note { text-align: center; color: #8e8e93; font-size: 15px; margin: 4px 0 12px; }
.pf-fld { display: flex; align-items: center; height: 48px; padding: 0 16px; border-radius: 14px; background: #ececec; margin-bottom: 16px; }
.pf-fld > span { width: 96px; color: #8e8e93; }
.pf-fld b { font-weight: 400; }
.pf-blue, .pf-in.ph { color: #0b5cc0; }
.pf-in.ph.fx { color: #b0b0b5; }
.pf-in.fx.ph::before, .pf-in.fx:not(.ph)::after { content: ""; display: inline-block; width: 2px; height: 20px; background: #0b5cc0; vertical-align: -4px; margin: 0 1px; animation: pfCaret 1s steps(1) infinite; }
@keyframes pfCaret { 50% { opacity: 0; } }
.pf-btn { height: 48px; border-radius: 12px; background: #ececec; color: #b0b0b5; display: grid; place-items: center; transition: background .3s, color .3s, transform .15s; }
.pf-kb { position: absolute; left: 0; right: 0; bottom: 0; height: 292px; background: #d1d3d9; padding: 8px 3px 0; transform: translateY(100%); transition: transform .4s cubic-bezier(.3,.7,.2,1); }
.pf-kr { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.pf-kr i { font-style: normal; width: 33px; height: 42px; border-radius: 5px; background: #fff; box-shadow: 0 1px 0 #898a8d; display: grid; place-items: center; font-size: 22px; }
.pf-kr i.w { width: 44px; background: #abb0ba; font-size: 16px; }
.pf-kr:nth-child(4) i.w { width: 88px; }
.pf-kr:nth-child(4) i:nth-child(2) { width: 190px; background: #fff; }
.pf-bar { position: absolute; left: 0; right: 0; top: 0; height: 54px; padding: 18px 34px 0 52px; display: flex; justify-content: space-between; font-weight: 600; font-size: 17px; color: #000; transition: color .45s; z-index: 3; }
.pf-sig { display: flex; align-items: flex-end; gap: 2px; padding-bottom: 4px; }
.pf-sig i { width: 3px; background: currentColor; border-radius: 1px; }
.pf-sig i:nth-child(1) { height: 4px; } .pf-sig i:nth-child(2) { height: 6px; } .pf-sig i:nth-child(3) { height: 8px; } .pf-sig i:nth-child(4) { height: 10px; }
.pf-sig em { width: 25px; height: 12px; border-radius: 4px; background: currentColor; margin-left: 8px; }
.pf-tap { position: absolute; z-index: 4; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(31,31,31,.28); border: 2px solid rgba(255,255,255,.9); opacity: 0; pointer-events: none; }
.pf-tap.go { animation: pfTap .45s ease-out; }
@keyframes pfTap { 0% { opacity: 0; transform: scale(1.5); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
.pf .hit { transform: scale(.97); }
.pf-cats li.hit, .pf-opts li.hit { background: #d8d8dc; }
/* states: 1 Contact AA sheet · 2 Hotel / Limo · 3 form + keyboard · 4 filled · 5 back on the dashboard, sent */
.pf:is([data-s="1"],[data-s="2"],[data-s="3"],[data-s="4"]) .pf-dash { transform: translateY(14px) scale(.92); border-radius: 12px; }
.pf:is([data-s="1"],[data-s="2"],[data-s="3"],[data-s="4"]) .pf-dim { opacity: .35; }
.pf:is([data-s="1"],[data-s="2"],[data-s="3"],[data-s="4"]) .pf-bar { color: #fff; }
.pf:is([data-s="1"],[data-s="2"],[data-s="3"],[data-s="4"]) .pf-sheet { transform: none; }
.pf[data-s="2"] .pf-pages { transform: translateX(-393px); }
.pf:is([data-s="3"],[data-s="4"]) .pf-pages { transform: translateX(-786px); }
.pf[data-s="3"] .pf-kb { transform: none; }
.pf[data-s="4"] .pf-btn { background: #0b5cc0; color: #fff; }
.pf[data-s="4"] .pf-in { color: #000; }
.pf[data-s="5"] .pf-toast { opacity: 1; transform: none; }

/* phone icons: line glyphs as masks (redrawn after the prototype, not exported) */
.pf .pf-ic { border: 0; border-radius: 0; transform: none; background: #0b5cc0; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.pf .pf-user { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223.2%22/%3E%3Cpath%20d%3D%22M5.8%2018.6c1.4-2.3%203.6-3.4%206.2-3.4s4.8%201.1%206.2%203.4%22/%3E%3C/svg%3E"); }
.pf .pf-moon { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2014.5A8.5%208.5%200%201%201%209.5%204a7%207%200%200%200%2010.5%2010.5z%22/%3E%3Cpath%20d%3D%22M15%206.5h3.5L15%2010.5h3.5%22/%3E%3C/svg%3E"); }
.pf .pf-send { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%203%203%2010.5l7.5%202.8L13.5%2021z%22/%3E%3Cpath%20d%3D%22m21%203-10.5%2010.3%22/%3E%3C/svg%3E"); }
.pf .pf-bed { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2019V6M21%2019v-5a3%203%200%200%200-3-3H3M3%2015h18%22/%3E%3Crect%20x%3D%225.5%22%20y%3D%227.5%22%20width%3D%225%22%20height%3D%223.5%22%20rx%3D%221%22/%3E%3C/svg%3E"); }
.pf .pf-clock { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cpath%20d%3D%22M11%207.5V12l3%202%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223.5%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); }
.pf .pf-batt { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%227%22%20width%3D%2217%22%20height%3D%2210%22%20rx%3D%222.5%22/%3E%3Cpath%20d%3D%22M22%2010.5v3%22/%3E%3Crect%20x%3D%225%22%20y%3D%229.5%22%20width%3D%226%22%20height%3D%225%22%20rx%3D%221%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); }
.pf .pf-sick { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8.5%2010h1M14.5%2010h1M8.5%2016c2-1.6%205-1.6%207%200%22/%3E%3C/svg%3E"); }
.pf .pf-car { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2213%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M4%2011h16M7.5%2020v-3M16.5%2020v-3%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2214%22%20r%3D%22.8%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2214%22%20r%3D%22.8%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); }
.pf .pf-plane { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2013.5%209%2012l3.5-7h2L13%2012l5.5-.5c1.2%200%201.2%202%200%202L13%2013l1.5%206h-2L9%2014.2l-6.5-.2z%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2218.5%22%20r%3D%223.2%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); }
.pf .pf-cats .pf-ic { width: 28px; height: 28px; }
.pf .pf-contact .pf-send { width: 24px; height: 24px; margin-top: 2px; }
.pf-contact span { font-size: 14.5px; }
.pf .pf-tray { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013.5%205.5%206h13l2.5%207.5V18a1.5%201.5%200%200%201-1.5%201.5h-15A1.5%201.5%200%200%201%203%2018z%22/%3E%3Cpath%20d%3D%22M3%2013.5h5l1.5%202h5l1.5-2h5%22/%3E%3C/svg%3E"); }
.pf .pf-emoji { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8.5%2014.5c1.8%202%205.2%202%207%200%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%22.9%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2210%22%20r%3D%22.9%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); }
.pf .pf-mic { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M5.5%2011a6.5%206.5%200%200%200%2013%200M12%2017.5V21%22/%3E%3C/svg%3E"); }
.pf .pf-msgs li { gap: 12px; }
.pf .pf-msgs .pf-tray { width: 26px; height: 26px; }
.pf .pf-msgs li::after { content: ""; width: 8px; height: 8px; border: solid #c4c4c6; border-width: 2px 2px 0 0; transform: rotate(45deg); margin: 0 4px 0 6px; flex: none; }
.pf .pf-msgs li:not(:has(b))::after { margin-left: auto; }
.pf .pf-msgs li.pf-more::after { display: none; }
.pf-ud { display: inline-block; width: 10px; height: 16px; vertical-align: -2px; margin-left: 3px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%206%203-3%203%203M2%2010l3%203%203-3%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%206%203-3%203%203M2%2010l3%203%203-3%22/%3E%3C/svg%3E") center / contain no-repeat; }
.pf-l i { font-style: normal; font-size: 34px; font-weight: 300; line-height: 0; vertical-align: -4px; margin-right: 4px; }
.pf-kx { display: flex; justify-content: space-between; padding: 6px 22px 0; }
.pf .pf-kx .pf-ic { width: 28px; height: 28px; background: #4a4a4f; }
.pf-home { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #000; }
.pf:is([data-s="1"],[data-s="2"],[data-s="3"],[data-s="4"]) .pf-dash { transform: translateY(56px) scale(.93); }
.pf:is([data-s="1"],[data-s="2"],[data-s="3"],[data-s="4"]) .pf-dim { opacity: .18; }
.pf-times .m { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; }
.pf-times .m::before { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; border-top: 2px dotted #8e8e93; }
.pf-times .m::after { content: ""; position: absolute; right: 8px; top: 6px; width: 7px; height: 7px; border: solid #8e8e93; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.pf-times .m i { position: relative; font-style: normal; background: #fff; padding: 0 6px; }
/* page rules (.px p, .px b, li, .gm-wide p) reach into the phone; reset them so it renders like the prototype */
.pf .pf-screen * { font-family: inherit; max-width: none; text-wrap: wrap; }
.pf .pf-screen li { color: #000; line-height: 1.25; }
.pf .pf-screen p.pf-note { margin: 4px 0 12px; font-size: 15px; line-height: 20px; color: #8e8e93; }
.pf .pf-fld b { font-weight: 400; }
.pf .pf-big b { font-weight: 700; }
.pf .pf-flt b, .pf .pf-hd b, .pf .pf-opts b, .pf .pf-contact b { font-weight: 600; }
/* the page's .px b sets ink on every <b>; restate the phone's own colors */
.pf .pf-screen b { color: #000; }
.pf .pf-contact b, .pf .pf-opts b, .pf b.pf-blue, .pf b.pf-in.ph { color: #0b5cc0; }
.pf .pf-msgs b, .pf .pf-flying b { color: #fff; }
.pf b.pf-in.ph.fx { color: #b0b0b5; }
.pf[data-s="4"] b.pf-in { color: #000; }
@media (max-width: 599px) { .gm-wide .gm-media.hx-anim { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .pf * { transition: none !important; animation: none !important; } }

/* Priority split (2026-10-26): enlarged top-left corner of the ECS Inbox (after the IOC desktop UI); new requests arrive at the top.
   Panel drawn at 400px wide and scaled so it bleeds off the right and bottom of the card */
.ib-box .ib { position: absolute; inset: 0; overflow: hidden; }
.gm-split .gm-media.ib-box { aspect-ratio: 1 / 1; }
.ib-panel { position: absolute; left: 14%; top: 9%; width: 400px; background: #fff; border-radius: 10px; transform-origin: 0 0;
  box-shadow: 0 2px 6px rgba(60,64,67,.12), 0 18px 48px rgba(60,64,67,.16); color: #1f1f1f; font: 13px/1.35 Roboto, Arial, system-ui, sans-serif; }
.ib-panel * { box-sizing: border-box; font-family: inherit; max-width: none; }
.ib-hd { display: flex; align-items: center; gap: 14px; padding: 18px 18px 10px; }
.ib .ib-hd h5 { margin: 0 auto 0 0; font-size: 20px; line-height: 1.2; font-weight: 500; color: #1f1f1f; }
.ib .ib-ic { width: 18px; height: 18px; background: #1f1f1f; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ib .ib-hist { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2012a8.5%208.5%200%201%200%202.5-6%22/%3E%3Cpath%20d%3D%22M3%204v4h4M12%207.5V12l3%202%22/%3E%3C/svg%3E"); }
.ib .ib-gear { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M12%202.5v3M12%2018.5v3M2.5%2012h3M18.5%2012h3M5.3%205.3l2.1%202.1M16.6%2016.6l2.1%202.1M5.3%2018.7l2.1-2.1M16.6%207.4l2.1-2.1%22/%3E%3C/svg%3E"); }
.ib .ib-x { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22/%3E%3C/svg%3E"); }

.ib-tabs { display: flex; align-items: center; gap: 4px; padding: 0 18px; border-bottom: 1px solid #e0e0e0; white-space: nowrap; }
.ib-tabs span { padding: 12px 10px; font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.ib-tabs .ib-add { padding: 6px 12px; margin: 0 6px 6px 0; border: 1.5px solid #0b57d0; border-radius: 16px; color: #0b57d0; font-size: 11px; }
.ib-tabs .on { color: #0b57d0; box-shadow: inset 0 -2px 0 #0b57d0; }
.ib-tabs em, .ib-n em { width: 6px; height: 6px; border-radius: 50%; background: #c5221f; flex: none; }
.ib-unit { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font-size: 12px; border-bottom: 1px solid #e0e0e0; white-space: nowrap; }
.ib-unit i { width: 8px; height: 8px; border: solid #1f1f1f; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-3px); }
.ib-count { padding: 14px 18px 4px; font-size: 13px; font-weight: 500; }
.ib-count b { font-weight: 500; }
.ib-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.ib .ib-r { display: block; padding: 10px 18px 12px; border-bottom: 1px solid #e0e0e0; background: #fff; color: #1f1f1f; transition: background 2.4s ease; }
.ib-t { display: flex; justify-content: space-between; font-size: 14px; }
.ib .ib-t b, .ib .ib-t span { font-weight: 500; color: #1f1f1f; }
.ib-t i { font-style: normal; font-variant-numeric: tabular-nums; }
.ib-n { position: relative; margin-top: 6px; font-size: 11px; }
.ib-n em { position: absolute; left: -10px; top: 5px; }
.ib-m, .ib-d { margin-top: 4px; font-size: 10.5px; color: #444746; }
.ib-m span::before { content: "•"; margin: 0 6px 0 8px; }
.ib-a { margin-top: 4px; font-size: 10.5px; color: #a8710a; }
.ib-a::before { content: "◷ "; }
.ib .ib-r.new { background: #e8f0fe; transition: none; }
.ib .ib-r.in { animation: ibIn .55s cubic-bezier(.3,.7,.2,1); }
@keyframes ibIn { from { margin-top: var(--h, -92px); opacity: 0; } to { margin-top: 0; opacity: 1; } }
.ib-count b.bump { animation: ibBump .5s; display: inline-block; }
@keyframes ibBump { 40% { transform: scale(1.25); color: #0b57d0; } }
@media (prefers-reduced-motion: reduce) { .ib * { animation: none !important; transition: none !important; } }

/* Status card (2026-10-26): RAS message detail phone (shares .pf-phone/.pf-screen/.pf-bar). Top of the phone shows; it runs off the bottom */
.md-box .md { position: absolute; inset: 0; overflow: hidden; }
.md-box .pf-phone { top: 9%; transform-origin: 50% 0; }
.md-screen { background: #f2f2f7; }
.md-screen * { font-family: inherit; max-width: none; }
.md-nav { position: absolute; left: 0; right: 0; top: 0; height: 98px; padding: 50px 16px 0; display: flex; align-items: center; justify-content: space-between;
  background: #f2f2f7; border-bottom: 1px solid #d1d1d6; z-index: 2; }
.md .md-nav b { position: absolute; left: 0; right: 0; text-align: center; top: 60px; font-weight: 600; color: #000; pointer-events: none; }
.md-back { color: #0b5cc0; font-size: 17px; }
.md-back i { font-style: normal; font-size: 36px; font-weight: 300; line-height: 0; vertical-align: -5px; margin-right: 6px; }
.md-ud { display: flex; gap: 22px; padding-right: 6px; }
.md-ud i, .md-det i { width: 12px; height: 12px; border: solid #0b5cc0; border-width: 2px 2px 0 0; transform: rotate(135deg) translate(-3px, 3px); }
.md-ud i.up { transform: rotate(-45deg) translate(-3px, 3px); }
.md-scroll { position: absolute; left: 14px; right: 14px; top: 114px; bottom: 0; overflow: hidden; }
.md-card { background: #fff; border-radius: 14px; padding: 16px 16px 26px; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.md-det { display: flex; align-items: center; gap: 8px; color: #0b5cc0; font-size: 15px; }
.md-det i { width: 8px; height: 8px; border-width: 1.8px 1.8px 0 0; transform: rotate(135deg) translate(-2px, 2px); }
.md .md-card p { margin: 0; color: #000; font-size: 15px; line-height: 20px; max-width: none; }
.md .md-card p.md-id { margin-top: 6px; white-space: nowrap; overflow: hidden; }
.md-log { list-style: none; margin: 0; padding: 0; }
.md .md-log li { padding: 7px 0 6px; border-bottom: 1px solid #d1d1d6; font-size: 15px; line-height: 20px; color: #000; }
.md .md-log li:last-child { border-bottom: 0; }
.md .md-log li.k { font-weight: 500; }
.md-log li span { display: block; color: #8e8e93; font-weight: 400; }
.md .md-card p.md-msg { margin-top: 18px; font-size: 17px; line-height: 22px; }
.md-btn { display: block; margin: 30px 22px 0; height: 38px; border-radius: 12px; background: #ececec; color: #0b5cc0; font-size: 17px; line-height: 38px; text-align: center; }
.md .md-card p.md-fine { margin-top: 8px; text-align: center; font-size: 13px; line-height: 17px; color: #8e8e93; }
.md-box.live .md-log li, .md-box.live .md-msg, .md-box.live .md-btn, .md-box.live .md-fine { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.md-box.live .on { opacity: 1 !important; transform: none !important; }
@media (max-width: 599px) { .gm-card .gm-media.md-box { aspect-ratio: 1 / 1; } }

/* Shared by the IOC help card (2026-10-27): tabs, row chevron, desk header, cursor */
.dk-tabs { display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid #e0e0e0; white-space: nowrap; }
.dk-tabs span { padding: 10px 2px; font-size: 13px; font-weight: 500; }
.dk-tabs .on { color: #0b57d0; box-shadow: inset 0 -2px 0 #0b57d0; }
.dk-chev { margin-left: auto; width: 0; height: 0; border: 5px solid transparent; border-left: 6px solid #1f1f1f; border-right: 0; }
.dk-sh { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px 10px; border-bottom: 1px solid #e0e0e0; }
.cw .dk-sh h5 { margin: 0; font-size: 18px; font-weight: 500; color: #1f1f1f; }
.dk-sh span { display: block; font-size: 10.5px; color: #1f1f1f; white-space: nowrap; }
.dk-cur { position: absolute; left: 70%; top: 96%; width: 18px; height: 24px; z-index: 3; pointer-events: none; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2018%2024%22%3E%3Cpath%20d%3D%22M1%201v19l5-5%203.5%207.5%203-1.4L9%2013.8h7z%22%20fill%3D%22%23000%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat; }

/* IOC help card (2026-10-27): Google Store "Your next step, already handled." pattern. Wide photo, two chat bubbles, then a floating ECS window */
.gm-hero.cw > img { object-position: 30% 50%; }
.cw-stage { position: absolute; inset: 0; }
.cw-chat { position: absolute; right: 6%; top: 9%; width: min(460px, 46%); display: flex; flex-direction: column; gap: 14px; transition: opacity .4s, transform .5s; }
.gm-hero.cw .cw-b { margin: 0; max-width: 100%; padding: 12px 20px; border-radius: 24px; font: 400 18px/26px "Google Sans", Roboto, Arial, sans-serif; color: #1f1f1f;
  background: rgba(255,255,255,.88); box-shadow: 0 2px 10px rgba(0,0,0,.12); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.3,.7,.2,1); }
.gm-hero.cw .cw-b.in { align-self: flex-start; border-bottom-left-radius: 8px; }
.gm-hero.cw .cw-b.out { align-self: flex-end; border-bottom-right-radius: 8px; background: #d3e3fd; color: #041e49; }
.cw.b1 .cw-b.in, .cw.b2 .cw-b.out { opacity: 1; transform: none; }
.cw.win .cw-chat { opacity: 0; transform: translateY(-16px); }
.cw .hit { background: #d3e3fd !important; }
.cw .ib-r { display: block; padding: 10px 18px 12px; border-bottom: 1px solid #e0e0e0; background: #fff; color: #1f1f1f; }
.cw .cw-asg .ib-n em { visibility: hidden; }
.cw .cw-hot { background: #fce8e6; }
.cw .cw-hot .ib-t b, .cw .cw-hot .ib-d { color: #c5221f; }
.cw-rh { display: flex; align-items: flex-start; gap: 12px; }
.cw-rh > div { flex: 1; }
.cw .cw-rh h5 { margin: 0 0 4px; font-size: 20px; font-weight: 500; color: #1f1f1f; }
.cw-rh span { display: block; font-size: 10px; line-height: 14px; }
.cw-st s { text-decoration: none; }
.cw-rq[data-s="0"] .cw-st s + s, .cw-rq[data-s="1"] .cw-st s + s, .cw-rq:not([data-s="0"]):not([data-s="1"]) .cw-st s:first-child { display: none; }
.cw-min { width: 12px; height: 2px; margin-top: 11px; background: #1f1f1f; }
.cw-fc { margin-top: 12px; border: 1px solid #e0e0e0; border-radius: 6px; }
.cw-fh { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid #e0e0e0; }
.cw .cw-fh b { display: block; font-size: 13px; font-weight: 500; color: #1f1f1f; }
.cw-fh span { font-size: 11px; }
.cw-open { width: 14px; height: 12px; border: 1.6px solid #0b57d0; border-top-width: 3px; border-radius: 2px; }
.cw-fd { display: flex; gap: 24px; padding: 12px 16px; }
.cw-fd span { font-size: 8.5px; letter-spacing: .03em; color: #5f6368; }
.cw .cw-fd b { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #1f1f1f; letter-spacing: 0; }
.cw-act { position: relative; margin-top: 12px; }
.cw-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 1px solid #c4c7c5; border-radius: 4px; background: #fff; font-size: 12px; font-weight: 500; color: #1f1f1f; transition: background .2s; }
.cw-btn.pri { background: #0b57d0; border-color: #0b57d0; color: #fff; }
.cw-two { display: none; gap: 12px; } .cw-two .cw-btn { flex: 1; color: #0b57d0; }
.cw-btn.rej { background: #e8f0fe; border-color: #e8f0fe; }
.cw-btn.rej i { border: 5px solid transparent; border-bottom: 6px solid #0b57d0; border-top: 0; }
.cw-dlg { display: none; padding: 20px 20px 18px; border-radius: 12px; background: #f1f3f4; text-align: center; }
.cw .cw-dlg h6 { margin: 0 0 8px; font-size: 15px; font-weight: 500; color: #1f1f1f; }
.cw .cw-dlg p { margin: 0 0 14px; font-size: 11.5px; line-height: 1.45; color: #1f1f1f; }
.cw-dlg div { display: flex; gap: 12px; } .cw-dlg .cw-btn { flex: 1; }
.cw-rq[data-s="1"] .pri, .cw-rq[data-s="2"] .pri, .cw-rq[data-s="3"] .pri { display: none; }
.cw-rq[data-s="1"] [data-k="d1"], .cw-rq[data-s="3"] [data-k="d2"] { display: block; }
.cw-rq[data-s="2"] .cw-two { display: flex; }
.cw .dk-cur { transition: left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1); }
.cw.still .dk-cur, .cw.done .dk-cur { opacity: 0; transition: opacity .4s; }
.cw-replay { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); z-index: 2; }
.cw-replay svg { width: 20px; height: 20px; fill: #1f1f1f; }
.cw-replay:focus-visible { outline: 2px solid #0b57d0; outline-offset: 3px; }
.cw.still .cw-replay { display: none; }
.cw-text { max-width: 620px; margin: 40px auto 0; text-align: center; }
.cw-text h3 { margin: 0 0 16px; font: 500 clamp(28px, 3.2vw, 40px)/1.15 "Google Sans", Roboto, Arial, sans-serif; color: #1f1f1f; letter-spacing: -.01em; }
.cw-text p { margin: 0 auto; font-size: 16px; line-height: 24px; color: #444746; }
@media (max-width: 599px) {
  .gm-hero.cw { aspect-ratio: 4 / 5; }
  .gm-hero.cw > img { object-position: 22% 50%; }
  .cw-chat { left: 5%; right: 5%; width: auto; top: 6%; }
  .gm-hero.cw .cw-b { font-size: 15px; line-height: 21px; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .cw * { transition: none !important; animation: none !important; } }

/* IOC help card, full Desks screen (2026-10-27): 1280x760 mockup of Figma 53:6127, request modal from 58:10135 */
.cw-win { position: absolute; width: 1280px; height: 760px; overflow: hidden; transform-origin: 0 0; background: #fff; border-radius: 14px; color: #1f1f1f;
  font: 13px/1.35 Roboto, Arial, system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.16), 0 30px 80px rgba(0,0,0,.32);
  opacity: 0; translate: 0 24px; transition: opacity .5s, translate .6s cubic-bezier(.3,.7,.2,1); }
.cw.win .cw-win { opacity: 1; translate: 0 0; }
.cw-win * { box-sizing: border-box; font-family: inherit; max-width: none; }
.cw-win svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cw-app { position: absolute; inset: 0; padding-left: 72px; background: #fff; }
.cw-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px;
  border-right: 1px solid #e0e0e0; background: #fff; }
.cw-rail .cw-ri { display: grid; place-items: center; width: 56px; height: 48px; margin-bottom: 6px; }
.cw-rail span { width: 56px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; color: #1f1f1f; border-radius: 8px; text-align: center; }
.cw-rail span.on { background: #e8f0fe; color: #0b57d0; }
.cw-rail .cw-rb { margin-top: auto; }
.cw-rail span:last-child { margin-bottom: 14px; }
.cw-top { display: flex; justify-content: flex-end; gap: 34px; padding: 14px 28px 0; font-size: 12px; white-space: nowrap; }
.cw-top span { display: flex; align-items: center; gap: 6px; } .cw-top svg { width: 17px; height: 17px; }
.cw-title { display: flex; justify-content: space-between; align-items: center; padding: 10px 28px 6px 24px; }
.cw .cw-title h5 { margin: 0; font-size: 18px; font-weight: 500; color: #1f1f1f; }
.cw-adm { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #c4c7c5; border-radius: 4px; font-size: 11.5px; font-weight: 500; }
.cw-adm svg { width: 15px; height: 15px; }
.cw-app .dk-tabs { padding: 0 24px; }
.cw-filt { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; background: #f5f6f7; border-bottom: 1px solid #e0e0e0; white-space: nowrap; }
.cw-filt span { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; font-size: 10px; line-height: 1; color: #1f1f1f; border: 1px solid #c4c7c5; border-radius: 4px; background: #fff; }
.cw-filt b { font-weight: 400; }
.cw-filt .sep { width: 1px; height: 28px; margin: 0 2px; background: #c4c7c5; }
.cw-filt .ph { width: 128px; color: #80868b; overflow: hidden; }
.cw-filt .pos { border-radius: 14px; padding: 0 12px; }
.cw-filt .pos i { width: 0; height: 0; margin-left: 2px; border: 3.5px solid transparent; border-top: 4px solid #1f1f1f; border-bottom: 0; }
.cw-tbl { list-style: none; margin: 10px 0 0 16px; padding: 0; width: 820px; border: 1px solid #e0e0e0; border-radius: 8px 8px 0 0; }
.cw .cw-row { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 16px; border-bottom: 1px solid #e0e0e0; color: #1f1f1f; transition: background .25s; }
.cw .cw-row b { display: block; font-weight: 500; color: #1f1f1f; }
.cw-row span { display: block; font-size: 9.5px; white-space: nowrap; }
.cw-row .c1 { width: 170px; flex: none; } .cw-row .c1 b { font-size: 12.5px; }
.cw-row .c2 { width: 92px; flex: none; display: flex; align-items: center; gap: 4px; font-size: 11.5px; } .cw-row .c2 svg { width: 15px; height: 15px; }
.cw-row .c2 u { font-weight: 500; }
.cw-row .c3 { width: 90px; flex: none; font-size: 10.5px; }
.cw-row .c4 { width: 150px; flex: none; font-size: 8.5px; line-height: 1.3; }
.cw-row .cw-q { color: #188038; font-size: 9px; }
.cw-row .c5 { width: 112px; flex: none; } .cw-row .c6 { width: 96px; flex: none; }
.cw-row .c5 b, .cw-row .c6 b { font-size: 10px; } .cw-row em { font-style: normal; }
.cw .cw-row.sel { background: #e8f0fe; }
.cw .cw-row b.bump { animation: dkBump 1.6s; }
@keyframes dkBump { 0%, 70% { color: #0b57d0; } }
.cw .cw-row b.bump em { display: inline-block; animation: ibBump .5s; }
.cw .hit { background: #d3e3fd !important; }
.cw-side { position: absolute; right: 18px; top: 176px; width: 340px; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(60,64,67,.15), 0 14px 40px rgba(60,64,67,.2); opacity: 0; transform: translateX(30px); transition: opacity .35s, transform .45s cubic-bezier(.3,.7,.2,1); }
.cw-win.side .cw-side { opacity: 1; transform: none; }
.cw-side.swap .ib-list { animation: cwSwap .35s ease; }
@keyframes cwSwap { from { opacity: .2; transform: translateY(6px); } }
.cw .ib-r { display: block; padding: 9px 16px 11px; border-bottom: 1px solid #e0e0e0; background: #fff; color: #1f1f1f; transition: background .4s; }
.cw .cw-asg .ib-n em { visibility: hidden; }
.cw .cw-hot { background: #fce8e6; }
.cw .cw-hot .ib-t b, .cw .cw-hot .ib-d { color: #c5221f; }
.cw-scrim { position: absolute; inset: 0; background: rgba(32,33,36,.32); opacity: 0; transition: opacity .3s; pointer-events: none; }
.cw-win.modal .cw-scrim { opacity: 1; }
.cw-rq { position: absolute; left: 50%; top: 50%; width: 380px; padding: 20px; background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.3);
  opacity: 0; transform: translate(-50%, -46%) scale(.97); transition: opacity .3s, transform .4s cubic-bezier(.3,.7,.2,1); }
.cw-win.modal .cw-rq { opacity: 1; transform: translate(-50%, -50%); }
.cw .dk-cur { width: 22px; height: 29px; background-size: contain !important; }
.gm-hero.cw { aspect-ratio: 16 / 9; }
@media (max-width: 599px) { .gm-hero.cw { aspect-ratio: 4 / 5; } }
.cw-view { position: absolute; inset: 0; }
@media (max-width: 599px) {
  .cw.zoom .cw-view { inset: auto 4% 4% 4%; height: 62%; overflow: hidden; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.16), 0 24px 60px rgba(0,0,0,.3);
    opacity: 0; translate: 0 18px; transition: opacity .5s, translate .6s cubic-bezier(.3,.7,.2,1); }
  .cw.zoom.win .cw-view { opacity: 1; translate: 0 0; }
  .cw.zoom .cw-win { opacity: 1; translate: 0 0; border-radius: 0; box-shadow: none; transition: transform .8s cubic-bezier(.4,0,.2,1); }
}
@media (max-width: 1023.98px) { .gm-card + .gm-card { margin-top: 48px; } }
/* pilot run -> IOC run: the gap the removed "For the IOC" heading used to give */
.gm-rail + .gm-wide { margin-top: 160px; }
@media (max-width: 1023.98px) { .gm-rail + .gm-wide { margin-top: 96px; } }
/* Duty-state card (2026-10-27): stacked dashboard screenshots crossfade; segmented state buttons below the phone */
.gm-media.ds .ds-ph { position: absolute; top: 4%; left: 50%; height: 84%; aspect-ratio: 393 / 852; transform: translateX(-50%); overflow: hidden;
  border-radius: 6px; box-shadow: 0 8px 24px rgba(60,64,67,.18); background: #f2f2f7; }
.gm-media.ds .ds-ph img { position: absolute; top: 0; left: 0; width: 100%; height: auto; inset: 0 auto auto 0; object-fit: initial; opacity: 0; transition: opacity .6s ease; }
.gm-media.ds .ds-ph img.on { opacity: 1; }
.ds-tabs { position: absolute; left: 50%; bottom: 4.5%; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(60,64,67,.16); }
.ds-tabs button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; font: 500 13px/18px "Google Sans", Roboto, Arial, sans-serif; color: #444746; cursor: pointer; white-space: nowrap; }
.ds-tabs button[aria-pressed="true"] { background: #0b57d0; color: #fff; }
.ds-tabs button:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gm-media.ds .ds-ph img { transition: none; } }

/* Solution opener (2026-10-27): Google Store Fitbit Edge "A new relationship with your health." pattern.
   Product eyebrow, big centered headline + paragraph, then three staggered caption-less cards (measured: equal columns,
   left ~0.92 w/h set 9% low, middle 0.66 w/h tallest at the top, right ~0.92 set 34% low) */
#priority-model .sx-head > div { max-width: 1240px; }
.sx-eye { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 500 22px/28px "Google Sans", Roboto, Arial, sans-serif; color: #1f1f1f; }
.sx-eye svg { width: 24px; height: 24px; fill: #0b57d0; stroke: #0b57d0; stroke-width: 1.4; stroke-linejoin: round; }
.sx-eye svg path + path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
#priority-model .sx-head .cgroup-k { font-size: clamp(2.5rem, 4.6vw, 3.75rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.sx-head p { max-width: 960px; margin: 20px auto 0; font-size: 16px; line-height: 24px; color: #444746; text-wrap: balance; }
#priority-model .sx-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin: 64px var(--gm-out) 0; }
.sx-c { position: relative; margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 11 / 12; background: #dde3ea; }
.sx-c:nth-child(1) { margin-top: 9%; }
.sx-c:nth-child(2) { aspect-ratio: 2 / 3; }
.sx-c:nth-child(3) { margin-top: 34%; }
.sx-c > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-c:nth-child(1) > img { object-position: 30% 50%; }
.sx-chat { background: #d8dee6; }
.sx-thread { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 8%; }
.sx-chat .sx-b { margin: 0; max-width: 88%; padding: 14px 20px; border-radius: 24px; font: 500 clamp(15px, 1.35vw, 20px)/1.35 "Google Sans", Roboto, Arial, sans-serif;
  opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .35s, transform .45s cubic-bezier(.3,.7,.2,1); }
.sx-chat .sx-b.me { align-self: flex-end; background: #fff; color: #0b3a6b; border-bottom-right-radius: 8px; }
.sx-chat .sx-b.ecs { align-self: flex-start; background: #0b57d0; color: #fff; border-bottom-left-radius: 8px; }
.sx-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #d3e3fd; opacity: 0; transition: opacity .3s; }
.sx-av svg { width: 20px; height: 20px; fill: #0b57d0; stroke: #0b57d0; stroke-width: 1.4; stroke-linejoin: round; }
.sx-av svg path + path { fill: none; stroke: #d3e3fd; stroke-width: 1.6; stroke-linecap: round; }
.sx-dots { display: none; gap: 5px; margin: -6px 0 0; padding: 12px 16px; border-radius: 18px; background: #fff; align-self: flex-start; }
.sx-dots i { width: 7px; height: 7px; border-radius: 50%; background: #80868b; animation: sxDot 1s infinite; }
.sx-dots i:nth-child(2) { animation-delay: .15s; } .sx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sxDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.sx-chat.s1 .sx-b.me, .sx-chat.s3 .sx-b.ecs { opacity: 1; transform: none; }
.sx-chat.s2 .sx-av, .sx-chat.s3 .sx-av { opacity: 1; }
.sx-chat.s2:not(.s3) .sx-dots { display: flex; }
.sx-chat:not(.s2):not(.s3) .sx-dots { display: none; }
.sx-chat.still .sx-av { opacity: 1; }
.sx-chat .sx-replay { position: absolute; right: 18px; bottom: 18px; }
.sx-chat.still .sx-replay { display: none; }
.sx-row + .gm-wide { margin-top: 120px; }
@media (max-width: 1023.98px) {
  #priority-model .sx-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
  .sx-c { border-radius: 18px; }
  .sx-chat .sx-b { padding: 10px 14px; border-radius: 16px; }
  .sx-av { width: 30px; height: 30px; }
}
@media (max-width: 599px) {
  #priority-model .sx-row { grid-template-columns: 1fr 1fr; }
  .sx-c:nth-child(1) { margin-top: 0; }
  .sx-c:nth-child(2) { aspect-ratio: 11 / 12; margin-top: 18%; }
  .sx-c:nth-child(3) { grid-column: 1 / -1; margin-top: 0; aspect-ratio: 4 / 3; }
  .sx-chat .sx-b { font-size: 16px; }
  .sx-row + .gm-wide { margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .sx-chat * { transition: none !important; animation: none !important; } }

/* Whiter page (2026-10-27), after the Google Store Fitbit Edge page: a white ground; tints only ease in and out over long
   fades (Role into #f1f5fe, Priority stays white with a faint cool wash, no cream), and the hero's blue fades into white
   at its foot instead of ending on an edge. Pre-change: _archive/ecs-pre-grid-2026-10-26/rx-pre-whitebands.css */
.gx-band { background: linear-gradient(180deg, #eaf1fb 0, #eaf1fb 62%, #fff 100%); }

/* ============================================================
   Live hero (2026-10-27): the composite image is replaced by the real screens built in HTML: the IOC desktop
   (Crew Member Lookup with the ECS Inbox docked on the right) and the pilot's phone (On Duty dashboard) in front.
   Stage is 1180 x 720 and scales to the composite's width; .hl-pkt is the request travelling between them.
   ============================================================ */
.gx-composite.hl { position: relative; left: auto; top: auto; transform: none; aspect-ratio: 1180 / 720; height: auto; }
.hl-stage { position: absolute; left: 0; top: 0; width: 1180px; height: 720px; transform-origin: 0 0; }
.hl-desk { position: absolute; left: 190px; top: 40px; width: 990px; height: 600px; display: flex; overflow: hidden; border: 9px solid #1f1f1f; border-radius: 22px;
  background: #f5f6f8; box-shadow: 0 30px 60px -28px rgba(25,28,29,.45); font: 12px/1.35 Roboto, Arial, sans-serif; color: #1f1f1f; }
.hl-desk * { box-sizing: border-box; max-width: none; }
.hl-rail { flex: none; width: 58px; padding-top: 8px; background: #fff; border-right: 1px solid #e3e3e3; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hl-rail span { width: 50px; padding: 5px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8px; color: #444746; border-radius: 8px; }
.hl-rail span i { width: 16px; height: 14px; border: 1.6px solid currentColor; border-radius: 4px; }
.hl-rail span.on { background: #e8f0fe; color: #0b57d0; }
.hl-rail .m { font-size: 18px; color: #444746; }
.hl-main { flex: 1; min-width: 0; padding: 18px 18px 0; }
.hl-top { display: flex; align-items: center; gap: 14px; }
.hl-desk h5 { margin: 0; font: 500 20px/1.2 Roboto, Arial, sans-serif; color: #1f1f1f; white-space: nowrap; }
.hl-search { flex: 1; height: 30px; padding: 0 12px; display: flex; align-items: center; background: #fff; border-radius: 4px; font-size: 11.5px; box-shadow: inset 0 0 0 1px #e3e3e3; white-space: nowrap; }
.hl-search::before { content: "⌕"; margin-right: 8px; font-size: 14px; }
.hl-go { height: 30px; padding: 0 14px; display: flex; align-items: center; background: #1f5fbf; color: #fff; border-radius: 4px; font-size: 11.5px; }
.hl-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.hl-prof { padding: 12px 12px; background: #fff; border-radius: 8px; }
.hl-ph { display: grid; grid-template-columns: 1fr auto; }
.hl-ph b { font: 500 13px/1.3 Roboto, Arial, sans-serif; }
.hl-ph span { grid-column: 1; font-size: 10.5px; }
.hl-ph em { grid-row: 1; grid-column: 2; font-style: normal; font-size: 10px; color: #1f5fbf; }
.hl-prof ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.hl-prof li { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; }
.hl-prof li b { font-weight: 400; text-align: right; white-space: nowrap; }
.hl-cal { min-width: 0; padding: 10px 12px; background: #fff; border-radius: 8px; overflow: hidden; }
.hl-mo { display: flex; align-items: baseline; gap: 10px; }
.hl-mo span { color: #1f5fbf; } .hl-mo b { font: 500 12px/1 Roboto, Arial, sans-serif; } .hl-mo small { font-size: 8.5px; color: #5f6368; }
.hl-tabs { display: flex; gap: 14px; margin: 10px 0 8px; border-bottom: 1px solid #e3e3e3; font-size: 10px; white-space: nowrap; }
.hl-tabs span { padding: 6px 2px; } .hl-tabs .on { color: #1f5fbf; box-shadow: inset 0 -2px #1f5fbf; }
.hl-cal-h, .hl-wk { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hl-cal-h span { padding: 4px 0 6px; text-align: center; font-size: 8.5px; color: #444746; }
.hl-wk { grid-template-rows: 18px 20px 20px; column-gap: 2px; row-gap: 3px; padding-bottom: 6px; border-top: 1px solid #ececec; }
.hl-wk .d { grid-row: 1; text-align: center; font-size: 8.5px; color: #444746; padding-top: 3px; }
.hl-wk .d.t { justify-self: center; align-self: start; margin-top: 2px; padding: 1px 8px; border-radius: 8px; background: #1f5fbf; color: #fff; }
.hl-wk:first-child .d:nth-child(-n+5) { color: #b6b6b6; }
.hl-wk .ev { overflow: hidden; padding: 0 5px; border-radius: 2px; background: var(--c); color: #fff; font: normal 600 8px/20px Roboto, Arial, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.hl-wk .ev.box { background: #fff; color: var(--c); box-shadow: inset 0 0 0 2px var(--c); }
/* the ECS Inbox, docked on the desktop's right edge */
.hl-ib { flex: none; width: 300px; position: relative; border-left: 1px solid #e3e3e3; background: #fff; }
.hl-ib .ib-panel { position: static; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none; font-size: 11px; }
.hl-ib .ib-hd { padding: 14px 14px 8px; } .hl-ib .ib-hd h5 { font-size: 16px; }
.hl-ib .ib-tabs { padding: 0 10px; gap: 0; } .hl-ib .ib-tabs span { padding: 9px 6px; font-size: 10px; } .hl-ib .ib-tabs .ib-add { padding: 4px 8px; font-size: 9px; }
.hl-ib .ib-unit { padding: 9px 14px; font-size: 9.5px; overflow: hidden; }
.hl-ib .ib-count { padding: 10px 14px 2px; font-size: 11px; }
.hl-ib .ib-r { padding: 8px 14px 9px; }
.hl-ib .ib-t { font-size: 11.5px; } .hl-ib .ib-n { font-size: 9.5px; margin-top: 4px; }
.hl-ib .ib-m, .hl-ib .ib-d, .hl-ib .ib-a { font-size: 8.5px; margin-top: 3px; }
.hl-ib .ib-a { color: #a8710a; }
.hl-ib .ib-r.hl-new.new { background: #e8f0fe; }
/* the pilot's phone, in front on the left */
.hl-pf { position: absolute; left: 0; top: 96px; width: 415px; height: 874px; }
.hl-pf .pf-phone { left: 0; top: 0; transform: scale(.7); transform-origin: 0 0; box-shadow: 0 40px 60px -30px rgba(25,28,29,.55); }
.hl-pf .pf-flying.hl-duty { background: #2e9e48; }
.hl-pf .pf-contact.hit { background: #c5d3ea; transform: scale(.98); }
.hl-pf.toast .pf-toast { opacity: 1; transform: none; }
.hl-tap { position: absolute; z-index: 5; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(11,87,208,.28); box-shadow: 0 0 0 2px rgba(255,255,255,.9); opacity: 0; pointer-events: none; }
.hl-tap.hl-bump { animation: hlTap .7s ease-out; }
@keyframes hlTap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.hl-pkt { position: absolute; left: -9px; top: -9px; z-index: 6; width: 18px; height: 18px; border-radius: 50%; background: #0b57d0; box-shadow: 0 0 0 5px rgba(11,87,208,.2), 0 4px 10px rgba(11,87,208,.4); opacity: 0; pointer-events: none; }
.hl-bump { animation: ibBump .5s; display: inline-block; }
.hl-pf b.hl-aa.hl-bump { display: grid; }
@media (prefers-reduced-motion: reduce) { .hl * { animation: none !important; transition: none !important; } }
/* the live composite ends 24px inside the window's right edge, so the docked inbox stays in view */
.gx-band-in .gx-composite.hl { width: calc(100% - 24px); margin: 0; }  /* the grid column already runs to the window edge */
@media (max-width: 1023.98px) { .gx-band-in .gx-composite.hl { width: 100%; margin: 32px 0 0; } }

/* Live hero desktop (2026-10-28): the real Crew Member Lookup screen (images/ecs/hero-cme-desk.svg, the CME shot without its
   inbox rows) at 1280 x 718, scaled into the stage; only the ECS Inbox list is HTML, laid over the screen at the SVG's own
   coordinates (list box x 955-1273, y 183-712 in the source), so the hotel request can arrive. Pre-change: *-pre-cmehero.* */
.hl-desk.hl-cme { left: 140px; top: 26px; width: 1280px; height: 718px; transform: scale(.8125); transform-origin: 0 0;
  display: block; overflow: visible; border: 0; border-radius: 23px; background: none; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55);
  font: 10px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; }
.hl-cme > img { position: absolute; left: 0; top: 0; width: 1280px; height: 718px; display: block; }
.hl-cme .hl-ib { position: absolute; left: 913px; top: 143px; width: 318px; height: 528.7px; overflow: hidden; border: 0; background: #fff; }
.hl-cme .hl-ib::before { content: ""; position: absolute; z-index: 1; right: 0; top: 0; width: 3px; height: 100%; background: #f4f4f4; }
.hl-cme .hl-ib::after { content: ""; position: absolute; z-index: 1; right: .2px; top: 0; width: 2.6px; height: 50%; border-radius: 1.3px; background: #c1c1c1; }
.hl-cme .hl-ib .ib-count { height: 28.5px; padding: 0 14px; font-size: 10px; line-height: 28.5px; font-weight: 500; color: #222; }
.hl-cme .hl-ib .ib-count b { font-weight: 500; }
.hl-cme .hl-ib .ib-list { width: 315px; }
.hl-cme .hl-ib .ib-r { box-sizing: border-box; min-height: 77.6px; padding: 9px 16px 8px 14px; border-top: .8px solid #e4e5e8; border-bottom: 0; background: #fff; color: #222; }
.hl-cme .hl-ib .ib-r:first-child { border-top: 0; }
.hl-cme .hl-ib .ib-r.hl-sick { background: #ffecee; }
.hl-cme .hl-ib .ib-r.hl-new.new { background: #e8f0fe; }
.hl-cme .hl-ib .ib-t { display: flex; justify-content: space-between; font-size: 10px; line-height: 13px; }
.hl-cme .hl-ib .ib-t b, .hl-cme .hl-ib .ib-t span { font-weight: 500; color: #222; }
.hl-cme .hl-ib .ib-n { position: relative; margin-top: 5px; font-size: 8.3px; line-height: 12px; color: #333; white-space: nowrap; overflow: visible; }
.hl-cme .hl-ib .ib-n em { position: absolute; left: -9px; top: 9.7px; width: 4.6px; height: 4.6px; background: #d0021b; }
.hl-cme .hl-ib .ib-m { margin-top: 1.5px; font-size: 8.3px; line-height: 12px; color: #7a7a7a; white-space: nowrap; }
.hl-cme .hl-ib .ib-m span::before { content: "•"; margin: 0 8px 0 9px; color: #7a7a7a; }
.hl-cme .hl-ib .ib-d { margin-top: 4.5px; font-size: 8.3px; line-height: 12px; color: #333; }
.hl-cme .hl-ib .ib-a { margin-top: 4.5px; font-size: 8.3px; line-height: 12px; color: #9a7d0a; }
.hl-cme .hl-ib .ib-a::before { content: "◷ "; }
.hl-cme .hl-ib .ib-r.hl-new .ib-d + .ib-a { margin-top: 1px; }
/* phone smaller and the desktop further right, so the phone only overlaps the nav rail (profile and calendar stay in view) */
.hl-desk.hl-cme { left: 200px; top: 56px; transform: scale(.7656); }
.hl-pf { top: 150px; }
.hl-pf .pf-phone { transform: scale(.62); }
.hl-desk.hl-cme { left: 233px; top: 70px; transform: scale(.74); }

/* ============================================================
   Request camera demo (2026-10-28), after Google's "What's new" product videos: the panel is a camera rig over one wide
   world (2860 x 1160 px) holding the phone, the routing card, the desk's ECS Inbox and the request card. The script moves
   .cam-world with 3D tilts, push-ins and whip pans; .cam-pkt is the request travelling along the two .cam-path curves.
   Pre-change: _archive/ecs-pre-grid-2026-10-26/ecs-pre-camdemo.html
   ============================================================ */
.hx-anim .cam { position: absolute; inset: 0; overflow: hidden; perspective: 1500px; perspective-origin: 50% 45%; }
.cam-world { position: absolute; left: 0; top: 0; width: 2860px; height: 1160px; transform-origin: 0 0; }
.cam-path { position: absolute; left: 0; top: 0; overflow: visible; }
.cam-path path { fill: none; stroke: rgba(225,227,228,.16); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; }
.cam-pkt { position: absolute; left: 0; top: 0; z-index: 5; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; opacity: 0; offset-rotate: 0deg;
  box-shadow: 0 0 0 8px rgba(255,255,255,.14), 0 0 40px 10px rgba(255,255,255,.35); pointer-events: none; }
/* phone */
.hx-anim .pf.cam-pf { position: absolute; inset: auto; left: 92px; top: 140px; width: 415px; height: 874px; }
.hx-anim .cam-pf .pf-phone { left: 0; top: 0; transform: none; }
/* routing card */
.cam-rt { position: absolute; left: 820px; top: 300px; width: 500px; box-sizing: border-box; padding: 34px 34px 30px; border-radius: 36px; background: #2a2b2e;
  box-shadow: inset 0 0 0 1.5px #3c3e41, 0 40px 80px -30px rgba(0,0,0,.8); font-family: var(--display, "Google Sans"), Roboto, Arial, sans-serif; color: #e1e3e4; }
.cam-rt header span { display: block; font-size: 18px; color: #9aa0a6; }
.cam-rt header b { display: block; margin-top: 6px; font-size: 34px; font-weight: 500; line-height: 1.2; }
.cam-rt header small { display: block; margin-top: 6px; font-size: 18px; color: #9aa0a6; }
.rt-req { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 18px 20px; border-radius: 22px; background: #e1e3e4; color: #151618;
  opacity: 0; transform: translateY(-26px) scale(.9); transition: opacity .35s ease, transform .55s cubic-bezier(.3,1.5,.5,1); }
.rt-req i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #151618; }
.rt-req b { display: block; font-size: 22px; font-weight: 500; } .rt-req span { display: block; margin-top: 2px; font-size: 16px; color: #444746; }
.cam-rt.in .rt-req { opacity: 1; transform: none; }
.cam-rt ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.cam-rt li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; border-radius: 18px; background: #1f2022; box-shadow: inset 0 0 0 1.5px transparent;
  transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.cam-rt li b { font-size: 21px; font-weight: 500; } .cam-rt li span { font-size: 16px; color: #9aa0a6; }
.cam-rt li.scan { box-shadow: inset 0 0 0 1.5px #80868b; }
.cam-rt li.hit { background: #e1e3e4; color: #151618; box-shadow: 0 0 40px rgba(255,255,255,.25); } .cam-rt li.hit span { color: #444746; }
/* desk inbox */
.ib.cam-ib { position: absolute; left: 1740px; top: 120px; width: 500px; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -30px rgba(0,0,0,.85); }
.cam-ib .ib-panel { position: static; width: 100%; height: auto; transform: none; border-radius: 0; box-shadow: none; padding-bottom: 6px; }
.cam-ib .ib-r { padding: 14px 20px 16px; } .cam-ib .ib-t { font-size: 16px; } .cam-ib .ib-n { font-size: 13px; } .cam-ib :is(.ib-m, .ib-d, .ib-a) { font-size: 12px; }
.cam-ib .ib-r.hit { background: #d3e3fd; }
/* request card */
.cam-rq { position: absolute; left: 2300px; top: 250px; width: 460px; box-sizing: border-box; padding: 28px; border-radius: 26px; background: #fff; color: #1f1f1f;
  font: 15px/1.4 Roboto, Arial, sans-serif; box-shadow: 0 50px 90px -30px rgba(0,0,0,.85); opacity: 0; transform: translateX(-60px) scale(.92); transform-origin: 0 30%;
  transition: opacity .35s ease, transform .6s cubic-bezier(.3,1.3,.5,1); }
.cam-rq.open { opacity: 1; transform: none; }
.rq-h b { display: block; font-size: 22px; font-weight: 500; } .rq-h span { display: block; margin-top: 4px; font-size: 13px; color: #5f6368; }
.rq-st s { text-decoration: none; } .rq-st s + s, .cam-rq.done .rq-st s:first-child { display: none; } .cam-rq.done .rq-st s + s { display: inline; color: #a8710a; }
.rq-p { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #f1f3f4; } .rq-p b { display: block; font-size: 16px; font-weight: 500; } .rq-p span { font-size: 13px; color: #5f6368; }
.cam-rq dl { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .cam-rq dt { font-size: 12px; color: #5f6368; text-transform: uppercase; letter-spacing: .04em; } .cam-rq dd { margin: 2px 0 0; font-weight: 500; }
.rq-act { margin-top: 22px; } .rq-btn { display: grid; place-items: center; height: 46px; border-radius: 999px; font-weight: 500; box-shadow: inset 0 0 0 1px #c4c7c5; transition: transform .15s ease; }
.rq-btn.pri { background: #0b57d0; color: #fff; box-shadow: none; } .rq-btn.hit { transform: scale(.96); }
.rq-two { display: none; grid-template-columns: 1fr 1fr; gap: 10px; } .cam-rq.done .rq-act > .rq-btn { display: none; } .cam-rq.done .rq-two { display: grid; }
/* IOC cursor */
.cam-cur { position: absolute; left: 1990px; top: 700px; z-index: 6; width: 34px; height: 34px; margin: -3px 0 0 -6px; opacity: 0; pointer-events: none;
  transition: left .9s cubic-bezier(.65,0,.35,1), top .9s cubic-bezier(.65,0,.35,1), opacity .3s ease; }
.cam-cur svg { width: 100%; height: 100%; fill: #1f1f1f; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cam-cur.on { opacity: 1; } .cam-cur.dn svg { animation: camClick .3s ease; }
@keyframes camClick { 50% { transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .cam * { transition: none !important; animation: none !important; } }
.hx-anim .cam-rt :is(li.hit, .rt-req) b { color: #151618; }   /* the page's light heading colour had made these labels vanish on the light fills (2026-11-01) */