/* ============================================================
   MYL Instruments — Page layer  (assets/brand.css)
   Layout + diagram components for the home, products overview
   and the three product pages. Loaded after styles.css and
   animations.css. Diagrams are built natively here (no images),
   left-aligned by default, and each has its own phone layout.
   ============================================================ */

:root {
  --pc-prefcard:  #1f5fe0;
  --pc-capacity:  #6246ea;
  --pc-preceptor: #f07d1d;
  --line: #b9cff2;
  --line-strong: var(--royal);
}

/* ---------- section scaffolding ---------- */
.sec { position: relative; padding: 104px 0; }
.sec.tint { background: rgba(222,236,255,.55); }
.sec.white { background: rgba(255,255,255,.72); }
.sec.navy { background: linear-gradient(160deg, #06152b 0%, var(--navy) 48%, #0f3470 100%); color: #fff; overflow: hidden; }
.sec.navy > .wrap { position: relative; z-index: 2; }
.sec + .sec.tint, .sec.tint + .sec { border-top: 1px solid rgba(185,207,242,.45); }
.sec-tight { padding: 72px 0; }

.shead { max-width: 720px; }
.shead .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.shead .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.shead h2 { font-size: clamp(30px, 4.1vw, 50px); margin-top: 14px; text-wrap: balance; letter-spacing: -.028em; }
.shead p { margin-top: 18px; font-size: 18px; line-height: 1.65; color: var(--body); max-width: 640px; }
.shead p + p { margin-top: 12px; }
.sec.navy .shead h2 { color: #fff; }
.sec.navy .shead .eyebrow { color: var(--sky-soft); }
.sec.navy .shead p { color: rgba(255,255,255,.8); }

/* heading on the left, supporting text on the right */
.hsplit { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px 72px; align-items: end; }
.hsplit .shead { max-width: none; }
.hsplit .side p { font-size: 18px; line-height: 1.68; color: var(--body); }
.hsplit .side p + p { margin-top: 14px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px 80px; align-items: center; }
.split.even { grid-template-columns: 1fr 1fr; }
.split.top { align-items: start; }
.split.rev > :first-child { order: 2; }
.split .sticky { position: sticky; top: calc(var(--nav-h) + 32px); }
.split.numsplit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

.after-head { margin-top: 64px; }

@media (max-width: 960px) {
  .hsplit, .split, .split.even, .split.numsplit { grid-template-columns: 1fr; gap: 28px; }
  .split.rev > :first-child { order: 0; }
  .split .sticky { position: static; }
  .after-head { margin-top: 44px; }
}
@media (max-width: 720px) {
  .sec { padding: 76px 0; }
  .shead p, .hsplit .side p { font-size: 16.5px; }
}

/* ---------- badges (product logos) ---------- */
.plogo { display: block; flex: none; width: var(--s, 56px); height: var(--s, 56px); }
.badge-ring { position: relative; display: grid; place-items: center; width: var(--s, 180px); aspect-ratio: 1; }
.badge-ring::before, .badge-ring::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1px solid var(--line); opacity: .7; }
.badge-ring::after { inset: -32%; opacity: .35; border-style: dashed; }
.badge-ring img { width: 100%; height: 100%; filter: drop-shadow(0 22px 34px rgba(16,52,98,.22)); }

/* ============================================================
   HERO (left-aligned)
   ============================================================ */
.hero3 { position: relative; padding: 88px 0 72px; overflow: hidden; }
.hero3 .wrap { position: relative; z-index: 3; }
.hero3-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px 64px; align-items: center; }
.hero3 .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.hero3 h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -.04em; color: var(--navy); margin-top: 20px; max-width: 13ch; text-wrap: balance; }
.hero3 .lead { margin-top: 24px; font-size: clamp(17px, 1.7vw, 20px); max-width: 560px; }
.hero3 .cta-row { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero3 .visual { position: relative; display: flex; justify-content: center; }
.hero3 .visual img.device { width: 100%; height: auto; max-width: 620px;
  -webkit-mask-image: radial-gradient(ellipse 56% 56% at 50% 52%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 56% 56% at 50% 52%, #000 52%, transparent 100%); }
.hero3.product .hero3-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.hero3.product h1 { max-width: 14ch; }
.hero3 .prod-name { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-head); font-weight: 800;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.hero3 .prod-name .plogo { --s: 42px; }
@media (max-width: 960px) {
  .hero3 { padding: 56px 0 48px; }
  .hero3-grid, .hero3.product .hero3-grid { grid-template-columns: 1fr; }
  .hero3 .visual { justify-content: flex-start; }
  .hero3 .visual img.device { max-width: 380px; }
  .hero3.product .visual { display: none; }
  .hero3 .visual .badge-ring { --s: 118px !important; margin: 26px 0 6px 30px; }
}

/* ---------- numbered product buttons (from the original homepage) ---------- */
.pbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; align-items: start; }
.pbtn { display: flex; align-items: stretch; background: #fff; border: 2px solid var(--border); border-radius: 22px;
  box-shadow: var(--shadow); text-align: left; overflow: hidden; position: relative;
  transition: transform .22s, box-shadow .28s, border-color .22s; }
.pbtn:hover, .pbtn:focus-visible { transform: translateY(-5px); box-shadow: var(--glow-shadow); border-color: var(--royal); }
.pbtn .num { display: flex; align-items: center; justify-content: center; width: 62px; flex: none;
  background: linear-gradient(160deg, var(--royal), var(--sky)); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 30px; }
.pbtn .body { padding: 20px 18px 20px 18px; flex: 1; min-width: 0; }
.pbtn .ttl { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); line-height: 1.2; }
.pbtn .ttl .plogo { --s: 30px; }
.pbtn .ttl .nm { flex: 1; min-width: 0; }
.pbtn .icons { display: flex; align-items: center; gap: 8px; flex: none; }
.pbtn .chev { color: var(--royal); display: flex; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.pbtn .go { width: 30px; height: 30px; border-radius: 50%; background: var(--royal); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(31,95,224,.5); }
.pbtn .desc { font-size: 14.5px; color: var(--body); line-height: 1.6; margin-top: 11px; }
@media (hover: hover) {
  .pbtn .desc { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, margin-top .35s ease; }
  .pbtn:hover .desc, .pbtn:focus-visible .desc { max-height: 240px; opacity: 1; margin-top: 11px; }
  .pbtn:hover .chev, .pbtn:focus-visible .chev { transform: rotate(180deg); }
}
@media (max-width: 960px) { .pbtns { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; } }
@media (hover: none) { .pbtn .chev { display: none; } }

/* ============================================================
   SYSTEM FLOW (home): intelligence -> two levers -> EBITDA
   ============================================================ */
.sysflow { --g: 22px; --lw: 2px; display: grid; grid-template-columns: minmax(0, 1.15fr) 150px minmax(0, 1.2fr) 56px minmax(0, .78fr);
  align-items: stretch; margin-top: 64px; }
.sf-node { position: relative; display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 22px 22px 20px; transition: transform .22s, border-color .22s, box-shadow .28s; }
a.sf-node:hover, a.sf-node:focus-visible { transform: translateY(-3px); border-color: var(--royal); box-shadow: var(--shadow); }
.sf-node .plogo { --s: 52px; }
.sf-node h3 { font-size: 17px; letter-spacing: -.01em; color: var(--navy); line-height: 1.2; }
.sf-node .say { margin-top: 5px; font-size: 14.5px; color: var(--body); line-height: 1.45; }
.sf-node .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--font-head);
  font-weight: 700; font-size: 12.5px; color: var(--royal); }
.sf-node .more svg { transition: transform .2s; }
a.sf-node:hover .more svg { transform: translateX(3px); }
.sf-node .go { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ice-3); color: var(--royal); transition: background .2s, color .2s, transform .2s; }
a.sf-node:hover .go, a.sf-node:focus-visible .go { background: var(--royal); color: #fff; transform: translateX(2px); }
.sf-node h3 { padding-right: 28px; }
.sf-caps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.sf-caps li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--navy-500); }
.sf-caps svg { color: var(--royal); flex: none; }
.sf-tag { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--ice-3); color: var(--royal-700); font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sf-in { align-self: center; }
.sf-levers { display: grid; grid-template-rows: 1fr 1fr; gap: var(--g); }
.sf-out { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: linear-gradient(145deg, var(--navy) 0%, var(--royal-700) 100%); color: #fff; border-radius: 20px; padding: 24px 22px;
  box-shadow: 0 24px 50px -24px rgba(31,95,224,.8); }
.sf-out .ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.sf-out b { font-family: var(--font-head); font-weight: 800; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.015em; line-height: 1.15; }

/* connectors drawn with borders so they stay crisp at any size */
.sf-conn { position: relative; }
.sf-conn::before, .sf-conn::after { content: ""; position: absolute; border: 0 solid var(--line-strong); }
.sf-split::before { left: 0; top: 50%; width: 72%; border-top-width: var(--lw); }
.sf-split::after { left: 72%; right: 0; top: calc((100% - var(--g)) / 4); bottom: calc((100% - var(--g)) / 4);
  border-width: var(--lw) 0 var(--lw) var(--lw); border-radius: 14px 0 0 14px; }
.sf-merge::before { left: 50%; right: 6px; top: 50%; border-top-width: var(--lw); }
.sf-merge::after { left: 0; right: 50%; top: calc((100% - var(--g)) / 4); bottom: calc((100% - var(--g)) / 4);
  border-width: var(--lw) var(--lw) var(--lw) 0; border-radius: 0 14px 14px 0; }
.sf-merge .tip { position: absolute; right: 0; top: 50%; width: 0; height: 0; transform: translateY(calc(-50% + var(--lw) / 2));
  border-left: 8px solid var(--line-strong); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.sf-label { position: absolute; left: 36%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 64%;
  text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 9.5px; line-height: 1.35; letter-spacing: .14em; text-transform: uppercase;
  color: var(--royal); background: #f4f8ff; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--line); z-index: 2; }

@media (max-width: 1080px) and (min-width: 881px) {
  .sysflow { grid-template-columns: minmax(0, 1.1fr) 118px minmax(0, 1.2fr) 44px minmax(0, .85fr); }
  .sf-caps { grid-template-columns: 1fr; }
}
/* phone / tablet: same topology, top-to-bottom */
@media (max-width: 880px) {
  .sysflow { grid-template-columns: 1fr; margin-top: 40px; }
  .sf-conn { height: 56px; }
  .sf-split::before { left: 50%; top: 0; width: 0; height: 50%; border-width: 0 0 0 var(--lw); }
  .sf-split::after { left: 25%; right: 25%; top: 50%; bottom: 0; border-width: var(--lw) var(--lw) 0 var(--lw); border-radius: 14px 14px 0 0; }
  .sf-merge::before { left: 50%; right: auto; top: 50%; bottom: 7px; width: 0; border-width: 0 0 0 var(--lw); }
  .sf-merge::after { left: 25%; right: 25%; top: 0; bottom: 50%; border-width: 0 var(--lw) var(--lw) var(--lw); border-radius: 0 0 14px 14px; }
  .sf-merge .tip { left: 50%; right: auto; top: auto; bottom: 0; transform: translateX(calc(-50% + var(--lw) / 2));
    border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; border-top: 8px solid var(--line-strong); border-bottom: 0; }
  .sf-split { height: 68px; }
  .sf-label { left: 50%; top: 32%; transform: translate(-50%, -50%); max-width: none; white-space: nowrap; font-size: 9px; }
  .sf-levers { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 12px; }
  .sf-levers .sf-node { flex-direction: column; gap: 10px; padding: 16px 14px; }
  .sf-levers .plogo { --s: 40px; }
  .sf-node h3 { font-size: 15.5px; }
  .sf-levers .say { font-size: 13px; }
  .sf-tag { font-size: 10px; letter-spacing: .1em; padding: 4px 9px; }
  .sf-out { flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 18px; }
}
@media (max-width: 380px) { .sf-caps { grid-template-columns: 1fr; } }

/* ============================================================
   TIMELINE (steps joined by a line; vertical on phones)
   ============================================================ */
.tl { --n: 4; --node: 60px; --tlg: 36px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--tlg); list-style: none; margin: 0; padding: 0; }
.tl::before { content: ""; position: absolute; top: calc(var(--node) / 2); left: calc(var(--node) / 2); right: calc((100% - (var(--n) - 1) * var(--tlg)) / var(--n) - var(--node) / 2);
  height: 2px; background: linear-gradient(90deg, var(--line), var(--royal), var(--line)); }
.tl li { position: relative; }
.tl .node { position: relative; z-index: 1; width: var(--node); height: var(--node); margin: 0 auto 0 0; border-radius: 50%;
  background: #fff; border: 2px solid var(--royal); color: var(--royal); display: grid; place-items: center;
  box-shadow: 0 0 0 7px var(--bgc, #f1f6ff); }
.tl .node .n { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 11.5px; display: grid; place-items: center; }
.tl h4 { margin-top: 22px; font-size: 18px; color: var(--navy); letter-spacing: -.015em; }
.tl p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--body); }
.tl .kick { display: block; font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--royal); margin-top: 20px; }
.tl .kick + h4 { margin-top: 6px; }
.sec.tint .tl { --bgc: #e9f2ff; }
.sec:not(.tint) .tl { --bgc: #f5f9ff; }
.tl-loop { --node: 60px; --tlg: 36px; position: relative; margin: 40px calc((100% - (var(--n, 4) - 1) * var(--tlg)) / var(--n, 4) - var(--node) / 2 - 1px) 0 calc(var(--node) / 2 - 1px); height: 46px; border: 2px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; }
.tl-loop::before { content: ""; position: absolute; left: -7px; top: -2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--line); }
.tl-loop span { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px;
  background: var(--bgc-loop, #eef5ff); padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap;
  font-family: var(--font-head); font-size: 14px; color: var(--navy); }
.tl-loop span small { font-family: var(--font-body); font-size: 13px; color: var(--body); }
.tl-loop svg { color: var(--royal); }

@media (max-width: 880px) {
  .tl { grid-template-columns: 1fr; gap: 0; --node: 52px; }
  .tl::before { top: 26px; bottom: 26px; left: calc(var(--node) / 2 - 1px); right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--line), var(--royal), var(--line)); }
  .tl li { display: grid; grid-template-columns: var(--node) 1fr; column-gap: 18px; padding-bottom: 30px; }
  .tl li:last-child { padding-bottom: 0; }
  .tl .node { grid-row: 1 / span 3; }
  .tl h4, .tl .kick { margin-top: 4px; }
  .tl .kick + h4 { margin-top: 4px; }
  .tl h4 { font-size: 17px; }
  .tl-loop { margin: 26px 0 0; height: auto; border: 0; }
  .tl-loop::before { display: none; }
  .tl-loop span { position: static; transform: none; white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    border-radius: 14px; padding: 12px 16px; }
}

/* ============================================================
   EHR vs FULL OR REALITY: what the EHR logs around a turnover
   versus what actually happens inside it
   ============================================================ */
.tracks { margin-top: 56px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px 32px; align-items: center; }
.tracks .lbl b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--navy); }
.tracks .lbl span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.tracks .lbl.real b { color: var(--royal); }
.trk { position: relative; }
.trk-ehr { height: 54px; }
.trk-ehr::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #c3d0e3; }
.trk-ehr i { position: absolute; left: var(--x); top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid #93a6c2; }
.trk-ehr .q { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px dashed #c3d0e3; color: #93a6c2; font-family: var(--font-head); font-weight: 800; font-size: 15px; }
.trk-real { display: flex; gap: 4px; height: 76px; }
.trk-real span { flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--navy-700); background: #e3ecfb; }
.trk-real .case { background: linear-gradient(150deg, var(--royal), #3b78ea); color: #fff; font-size: 19px; font-weight: 800; }
.trk-real span:first-child { border-radius: 14px 0 0 14px; }
.trk-real span:last-child { border-radius: 0 14px 14px 0; }
.trk-real .wait { background: repeating-linear-gradient(135deg, #fde6d1 0 9px, #fbd6b4 9px 18px); color: #b4530d; }
.tov-brace { grid-column: 2; position: relative; height: 50px; margin-top: -8px; }
.tov-brace i { position: absolute; left: var(--a); right: calc(100% - var(--b)); top: 0; height: 16px; border: 2px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
.tov-brace span { position: absolute; top: 24px; left: calc((var(--a) + var(--b)) / 2); transform: translateX(-50%);
  font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--navy-500); }
.tracks .rule { grid-column: 1 / -1; height: 1px; background: var(--border); }
@media (max-width: 880px) {
  .tracks { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .tracks .lbl { margin-top: 10px; }
  .tracks .rule { display: none; }
  .trk-ehr i { left: var(--xm); }
  .trk-real { height: 70px; gap: 3px; }
  .trk-real span { flex-basis: 0; flex-grow: var(--wm); font-size: 11px; padding: 0 3px; letter-spacing: -.01em; }
  .trk-real .case { font-size: 13px; }
  .trk-real span:first-child { border-radius: 10px 0 0 10px; }
  .trk-real span:last-child { border-radius: 0 10px 10px 0; }
  .tov-brace { grid-column: 1; }
  .tov-brace i { left: var(--am); right: calc(100% - var(--bm)); }
  .tov-brace span { left: calc((var(--am) + var(--bm)) / 2); font-size: 11.5px; }
}

/* ============================================================
   LIVE BOARD (real-time coordination)
   ============================================================ */
.board { background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.board-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--navy); }
.board-top .live { display: inline-flex; align-items: center; gap: 8px; color: var(--ok-green); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.board-top .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-green); box-shadow: 0 0 0 4px rgba(31,157,107,.18); animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(31,157,107,.05); } }
.board-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 64px 118px; gap: 14px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); }
.board-row:last-child { border-bottom: 0; }
.board-row .or { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--navy); }
.board-row .bar { height: 12px; border-radius: 999px; background: var(--ice-3); overflow: hidden; }
.board-row .bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--royal), var(--sky)); }
.board-row .t { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--navy); text-align: right; }
.board-row .st { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.st.ok { background: var(--ok-green-soft); color: var(--ok-green); }
.st.late { background: #fdeede; color: #c2560c; }
.st.early { background: var(--ice-3); color: var(--royal-700); }
@media (max-width: 520px) {
  .board-row { grid-template-columns: 46px minmax(0, 1fr) auto; row-gap: 8px; padding: 14px 16px; }
  .board-row .st { grid-column: 2 / -1; justify-self: start; }
  .board-top { padding: 14px 16px; }
}

/* numbered compact list (used beside visuals) */
.nlist { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: n; }
.nlist li { counter-increment: n; position: relative; padding: 18px 0 18px 58px; border-top: 1px solid var(--border); }
.nlist li:last-child { border-bottom: 1px solid var(--border); }
.nlist li::before { content: counter(n); position: absolute; left: 0; top: 18px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 15px; }
.nlist h4 { font-size: 17px; color: var(--navy); }
.nlist p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--body); }

/* ============================================================
   SMALL NATIVE ILLUSTRATIONS
   ============================================================ */
.illo { width: 100%; height: auto; display: block; overflow: visible; }
.illo text { font-family: var(--font-head); }
.illo-cap { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13.5px; color: var(--body); }
.illo-cap i { display: inline-block; width: 22px; height: 3px; border-radius: 2px; margin-right: 8px; vertical-align: 4px; }

/* trays: before -> after */
.trays { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, .72fr); align-items: center; gap: 14px; }
.tray { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); }
.tray .slots { display: grid; grid-template-columns: repeat(var(--c, 6), 1fr); gap: 7px; }
.tray .slots i { aspect-ratio: 1; border-radius: 7px; background: linear-gradient(150deg, var(--royal), var(--sky)); }
.tray .slots i.unused { background: repeating-linear-gradient(135deg, #eef3fb 0 5px, #dfe8f6 5px 10px); }
.trays .to { color: var(--royal); display: grid; place-items: center; }
.result { margin-top: 26px; display: flex; gap: 16px; align-items: flex-start; padding-top: 22px; border-top: 1px solid var(--border); }
.result .k { flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ok-green); padding-top: 3px; }
.result p { font-size: 16.5px; line-height: 1.6; color: var(--navy-700); font-weight: 600; }
@media (max-width: 560px) { .result { flex-direction: column; gap: 8px; } }

/* ============================================================
   LOCAL PRACTICE GAP (Preceptor)
   ============================================================ */
.gapflow { display: flex; flex-direction: column; align-items: stretch; }
.gf-inputs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gf-inputs div { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; font-family: var(--font-head);
  font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); line-height: 1.25; }
.gf-inputs div span { width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); color: var(--royal); display: grid; place-items: center; }
.gf-funnel { height: 44px; margin: 6px 10% 0; border: 2px solid var(--line); border-top: 0; border-radius: 0 0 24px 24px; position: relative; }
.gf-funnel::after { content: ""; position: absolute; left: 50%; bottom: -24px; height: 22px; border-left: 2px solid var(--royal); }
.gf-core { margin-top: 24px; background: var(--navy); color: #fff; border-radius: 20px; padding: 20px 22px; display: flex; gap: 16px; align-items: center; }
.gf-core .ic { flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #ffb877; }
.gf-core b { display: block; font-family: var(--font-head); font-size: 19px; letter-spacing: .02em; text-transform: uppercase; }
.gf-core span { display: block; margin-top: 3px; font-size: 13.5px; color: rgba(255,255,255,.72); }
.gf-drain { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gf-drain div b { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.gf-drain div b svg { color: var(--royal); }
.gf-drain .meter { margin-top: 10px; height: 12px; border-radius: 999px; background: repeating-linear-gradient(135deg, #fbd9bb 0 5px, #fde7d3 5px 10px); overflow: hidden; }
.gf-drain .meter i { display: block; height: 100%; width: 62%; border-radius: inherit; background: linear-gradient(90deg, var(--navy), var(--royal)); }
.gf-lost { margin-top: 24px; font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: .01em; color: var(--navy); text-transform: uppercase; }
.gf-lost em { font-style: normal; color: var(--pc-preceptor); }
@media (max-width: 560px) {
  .gf-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .gf-funnel { margin: 8px 16% 0; }
  .gf-drain { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   STAIRS (Preceptor onboarding path)
   ============================================================ */
.stairs { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; align-items: end; }
.stairs li { position: relative; padding-bottom: calc(var(--i) * 44px); }
.stairs li::after { content: ""; position: absolute; left: 0; right: -22px; bottom: calc(var(--i) * 44px - 16px); height: 3px; border-radius: 2px; background: var(--royal); opacity: calc(.35 + var(--i) * .2); }
.stairs li:last-child::after { right: 0; }
.stairs .tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--royal); }
.stairs .tag i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; letter-spacing: 0; font-size: 13px; }
.stairs .tag svg { color: var(--royal); }
.stairs h4 { margin-top: 14px; font-size: 18px; color: var(--navy); line-height: 1.22; letter-spacing: -.015em; }
.stairs p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.stairs-foot { margin-top: 40px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px 48px; align-items: center;
  padding: 28px 0 0; border-top: 1px solid var(--border); }
.stairs-foot b { font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); color: var(--navy); line-height: 1.2; letter-spacing: -.02em; }
.stairs-foot b em { display: block; font-style: normal; color: var(--royal); }
.stairs-foot p { font-size: 16px; line-height: 1.65; color: var(--body); }
@media (max-width: 880px) {
  .stairs { grid-template-columns: 1fr; margin-top: 40px; gap: 0; border-left: 3px solid var(--line); padding-left: 26px; }
  .stairs li { padding: 0 0 30px; }
  .stairs li::after { display: none; }
  .stairs li::before { content: ""; position: absolute; left: -35px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--royal); }
  .stairs li:last-child { padding-bottom: 0; }
  .stairs-foot { grid-template-columns: 1fr; }
}

/* ============================================================
   BIG NUMBER / STATS
   ============================================================ */
.bignum { font-family: var(--font-head); font-weight: 800; font-size: clamp(88px, 13vw, 176px); line-height: .9; letter-spacing: -.05em;
  background: linear-gradient(160deg, var(--royal), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 60px; }
.stats3 .stat { padding: 6px 32px 6px 0; border-right: 1px solid rgba(255,255,255,.14); }
.stats3 .stat + .stat { padding-left: 36px; }
.stats3 .stat:last-child { border-right: 0; }
.stats3 .num { font-family: var(--font-head); font-weight: 800; font-size: clamp(50px, 6.2vw, 76px); line-height: 1; letter-spacing: -.035em;
  background: linear-gradient(160deg, var(--sky-soft), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats3 .cap { margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.86); max-width: 30ch; }
.stats3 .src { margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.5); line-height: 1.45; }
@media (max-width: 800px) {
  .stats3 { grid-template-columns: 1fr; margin-top: 40px; }
  .stats3 .stat, .stats3 .stat + .stat { padding: 26px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .stats3 .stat:first-child { padding-top: 0; }
  .stats3 .stat:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* pricing statement inside the navy band */
.pay { margin-top: 88px; padding-top: 56px; border-top: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 72px; align-items: end; }
.pay .fees { font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.18; letter-spacing: -.02em;
  background: linear-gradient(160deg, #fff, var(--sky-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pay .sm { margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: rgba(255,255,255,.72); }
.pay .cta-row { margin-top: 26px; }
.btn-white { background: #fff; color: var(--royal); border-color: #fff; }
.btn-white:hover { background: var(--ice); transform: translateY(-2px); }
@media (max-width: 880px) { .pay { grid-template-columns: 1fr; margin-top: 56px; padding-top: 40px; } }

/* ============================================================
   INTELLIGENCE (privacy expanders, install band)
   ============================================================ */
.xlist { list-style: none; margin: 28px 0 0; padding: 0; }
.xlist li { border-top: 1px solid var(--border); padding: 22px 0; }
.xlist li:last-child { border-bottom: 1px solid var(--border); }
.xlist h4 { display: flex; align-items: center; gap: 12px; font-size: 19px; color: var(--navy); letter-spacing: -.015em; }
.xlist h4 svg { color: var(--royal); flex: none; }
.xlist details { margin-top: 10px; padding-left: 34px; }
.xlist summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--royal); }
.xlist summary::-webkit-details-marker { display: none; }
.xlist summary:hover { color: var(--royal-700); }
.xlist .pm { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ice-3); color: var(--royal); transition: transform .25s, background .25s, color .25s; }
.xlist details[open] .pm { transform: rotate(45deg); background: var(--royal); color: #fff; }
.xlist details p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--body); max-width: 60ch; }

.install { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px 72px; align-items: center; }
.install img { width: 100%; filter: drop-shadow(0 34px 44px rgba(16,52,98,.22)); }
.install h3 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.03em; color: var(--navy); }
.install p { margin-top: 16px; font-size: 18px; line-height: 1.66; color: var(--body); }
@media (max-width: 880px) { .install { grid-template-columns: 1fr; } }

/* ============================================================
   IMPACT PAIR / SPLIT FIGURES
   ============================================================ */
.pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: 52px; border-top: 1px solid var(--border); }
.pair > div { padding: 32px 40px 8px 0; display: flex; gap: 18px; align-items: flex-start; }
.pair > div + div { padding-left: 40px; border-left: 1px solid var(--border); }
.pair .ic { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--ice-3); color: var(--royal); }
.pair h3 { font-size: 21px; color: var(--navy); letter-spacing: -.02em; }
.pair p { margin-top: 8px; font-size: 16px; line-height: 1.62; color: var(--body); }
@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; }
  .pair > div, .pair > div + div { padding: 26px 0; border-left: 0; }
  .pair > div + div { border-top: 1px solid var(--border); }
}

/* ============================================================
   PRODUCTS OVERVIEW
   ============================================================ */
.prow { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px 72px; align-items: center; padding: 72px 0; border-top: 1px solid var(--border); }
.prow:first-child { border-top: 0; padding-top: 24px; }
.prow.rev { grid-template-columns: minmax(0, 1fr) 260px; }
.prow.rev .badge-ring { order: 2; }
.prow .badge-ring { --s: 170px; margin: 40px auto; }
.prow .tagl { font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pc, var(--royal)); }
.prow h2 { margin-top: 10px; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.03em; color: var(--navy); }
.prow .desc { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--body); max-width: 62ch; }
.prow .inside { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.prow .inside li { font-size: 13px; font-weight: 600; color: var(--navy-500); background: rgba(255,255,255,.75); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; }
.prow .cta-row { margin-top: 28px; }
@media (max-width: 880px) {
  .prow, .prow.rev { grid-template-columns: 1fr; gap: 20px; padding: 52px 0; }
  .prow.rev .badge-ring { order: 0; }
  .prow .badge-ring { --s: 104px; margin: 24px 0 18px 24px; }
}

.layer { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.layer .plogo { --s: 64px; }
.layer .txt { flex: 1; min-width: 260px; }
.layer h3 { font-size: 22px; color: var(--navy); letter-spacing: -.02em; }
.layer p { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: var(--body); max-width: 64ch; }

/* ============================================================
   PAGE END: CTA + the rest of the suite
   ============================================================ */
.endcap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: center; }
.endcap h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.03em; color: #fff; max-width: 18ch; }
.suite-links { margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 16px 44px; align-items: center; }
.suite-links .k { font-family: var(--font-head); font-weight: 800; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sky-soft); }
.suite-links a { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff; transition: transform .2s; }
.suite-links a .plogo { --s: 38px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.28); }
.suite-links a:hover { transform: translateX(3px); }
@media (max-width: 760px) { .endcap { grid-template-columns: 1fr; } .suite-links { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   NAV: products mega menu with product logos
   ============================================================ */
.dropdown.mega { display: grid; grid-template-columns: repeat(4, 150px); gap: 4px; padding: 14px; min-width: 0; }
.dropdown.mega .drop-link { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 16px 10px 14px; }
.dropdown.mega .drop-link:hover { transform: translateY(-2px); }
.dropdown.mega .plogo { --s: 52px; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.dropdown.mega .drop-link:hover .plogo { transform: scale(1.07); }
.dropdown.mega .drop-title { font-size: 13.5px; line-height: 1.25; }
.dropdown.mega .drop-link.first { border-right: 1px solid var(--border-soft); border-radius: 11px 0 0 11px; }
@media (max-width: 1080px) {
  .nav-links.mobile-open .dropdown.mega { display: flex; flex-direction: column; gap: 0; padding: 0 0 8px 8px; }
  .nav-links.mobile-open .dropdown.mega .drop-link { flex-direction: row; text-align: left; padding: 8px 10px; gap: 12px; }
  .nav-links.mobile-open .dropdown.mega .drop-link.first { border-right: 0; }
  .nav-links.mobile-open .dropdown.mega .plogo { --s: 30px; }
}

/* misc carried over */
.head .lead + .lead { margin-top: 14px; }
.head.center .lead { margin-left: auto; margin-right: auto; }
.drop-desc:empty { display: none; }

/* ============================================================
   v4 (Charles's corrections, Sep 2026)
   ============================================================ */
/* home hero is text only, so the statement gets the full width */
.hero3.solo .hero3-grid { grid-template-columns: 1fr; }
.hero3.solo h1 { max-width: 21ch; font-size: clamp(36px, 5.2vw, 70px); line-height: 1.05; }
.hero3.solo .lead { max-width: 640px; }

/* product heroes show Charles's full logo */
.hero3 .visual img.lockup { width: 100%; max-width: 330px; height: auto; filter: drop-shadow(0 26px 34px rgba(16,52,98,.16)); }
.pbtn .ttl .plogo { --s: 38px; }

/* photographs (tray pictures) */
.photo { margin: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); }
.photo img { display: block; width: 100%; height: auto; }

/* pricing band on its own (home + product pages) */
.pay.solo { margin-top: 0; padding-top: 0; border-top: 0; }

/* products menu: three products */
.dropdown.mega { grid-template-columns: repeat(3, 150px); }

/* ---------- live room status (real-time coordination) ---------- */
.live { --h0: 8; --hrs: 8; --now: 10.2; position: relative; margin-top: 56px; }
.live-panel { background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.live-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--royal); }
.live-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok-green); box-shadow: 0 0 0 4px rgba(31,157,107,.18); animation: livePulse 1.8s ease-in-out infinite; }
.live-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sched { min-width: 760px; padding: 6px 18px 18px; }
.sched-axis, .sched-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.sched-axis .ticks { position: relative; height: 30px; }
.sched-axis .ticks span { position: absolute; top: 8px; left: calc((var(--t) - var(--h0)) / var(--hrs) * 100%); transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--muted); }
.sched-axis .ticks .nowtag { top: 4px; padding: 2px 7px; border-radius: 999px; background: var(--royal); color: #fff; font-size: 10.5px; z-index: 2; }
.sched-row { border-top: 1px solid var(--border-soft); }
.sched-row .room { padding: 14px 0; }
.sched-row .room b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--navy); }
.sched-row .room span { font-size: 11.5px; color: var(--muted); }
.lane { position: relative; height: 66px; }
.lane::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: calc((var(--now) - var(--h0)) / var(--hrs) * 100%); background: var(--royal); opacity: .75; }
.blk { position: absolute; top: 10px; bottom: 10px; left: calc((var(--s) - var(--h0)) / var(--hrs) * 100%); width: calc((var(--e) - var(--s)) / var(--hrs) * 100% - 3px);
  border-radius: 9px; padding: 6px 8px; background: #fff; border: 1px solid #cddcf3; overflow: hidden; }
.blk b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-head); font-weight: 700; font-size: 11.5px; line-height: 1.25; color: var(--navy); }
.blk.done { background: #eef3fb; border-color: #e0e9f7; }
.blk.done b { color: #6f84a3; }
.blk.live-now { background: #e3f6ee; border-color: #9fdcc2; }
.blk.live-now b { color: #146c49; }
.tov, .dly { position: absolute; top: 21px; height: 24px; left: calc((var(--s) - var(--h0)) / var(--hrs) * 100%); width: calc((var(--e) - var(--s)) / var(--hrs) * 100% - 3px);
  display: grid; place-items: center; border-radius: 7px; font-size: 10.5px; font-weight: 800; }
.tov { background: #ece8ff; color: #5a45d6; }
.dly { background: #fdeaea; color: #c43c41; border: 1.5px dashed #e98f92; }
.notes { position: relative; z-index: 2; width: min(540px, 92%); margin: -54px 28px 0 auto; background: #fff; border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--shadow-lg); padding: 20px 22px 8px; }
.notes h4 { font-size: 16px; color: var(--navy); }
.note { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.note:first-of-type { margin-top: 12px; }
.note .meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note .meta b { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--navy-500); }
.note .st { flex: none; }
.note .st { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.note .st.sent { background: var(--ice-3); color: var(--royal-700); }
.note .st.queued { background: #fff; color: var(--muted); border: 1.5px dashed #c3d0e3; }
.note p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--navy-700); }
.after-graphic { margin-top: 56px; }
@media (max-width: 760px) {
  .live { margin-top: 36px; }
  .live-scroll { mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .notes { width: auto; margin: 14px 0 0; }
  .after-graphic { margin-top: 40px; }
}

#products { scroll-margin-top: calc(var(--nav-h) + 24px); }
.install img.device { filter: none; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 56% 56% at 50% 52%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 56% 56% at 50% 52%, #000 52%, transparent 100%); }
.dly { min-width: 40px; }
@media (min-width: 761px) { .sched { padding-bottom: 66px; } }

/* ============================================================
   v5 (Sep 28 2026): hero video, MYL Node band, gap chart,
   text blocks that end on one vertical line, compact footer,
   English / French switch
   ============================================================ */

/* ---- text blocks run to their column edge; paragraphs stay left-aligned
   (justifying opened wide gaps between words) and use balanced line
   breaking so the right edge stays even ---- */
.shead, .shead p, .hero3 .lead, .hero3.solo .lead, .xlist details p, .layer p { max-width: none; }
.shead p, .hsplit .side p, .hero3 .lead, .tl p, .nlist p, .stairs p, .stairs-foot p, .result p,
.impact-items p, .xlist details p, .install p, .pbtn .desc, .contact-card .sub, .team-header .lead, .mission-tail {
  text-align: left; text-wrap: pretty; }
.shead.wide h2 { font-size: clamp(28px, 3.3vw, 46px); text-wrap: pretty; }

/* tighter vertical rhythm: less empty space between sections */
.sec { padding: 88px 0; }
.sec-tight { padding: 60px 0; }
.after-head { margin-top: 52px; }
.hero3 { padding: 76px 0 64px; }
@media (max-width: 960px) { .after-head { margin-top: 40px; } .hero3 { padding: 52px 0 44px; } }
@media (max-width: 720px) { .sec { padding: 64px 0; } }

/* ---------- home hero: the MYL clip plays behind the statement ---------- */
.hero3.hero-video { background: #06152b; padding: 56px 0 56px; isolation: isolate; display: flex; flex-direction: column;
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
.hero3.hero-video > .wrap { width: 100%; flex: 1; display: flex; flex-direction: column; }
/* the statement sits a little above the middle of the video; the product buttons anchor the bottom */
.hero-video .hv-grid { margin-top: auto; margin-bottom: auto; padding-bottom: 6vh; }
.hv-media { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: #06152b url("video/myl-hero-poster.webp") center / cover no-repeat; }
.hv-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-media::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,21,43,.28) 0%, rgba(6,21,43,0) 24%, rgba(6,21,43,0) 58%, rgba(6,21,43,.72) 100%),
    linear-gradient(90deg, rgba(6,21,43,.66) 0%, rgba(6,21,43,.34) 42%, rgba(6,21,43,.10) 66%, rgba(6,21,43,.22) 100%); }
.hero-video .wrap { position: relative; z-index: 3; }
.hv-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px 56px; align-items: end; }
.hero-video .eyebrow { color: var(--sky-soft); }
.hero-video h1 { color: #fff; max-width: none; text-wrap: wrap; font-size: clamp(32px, 3.65vw, 52px); line-height: 1.04; text-shadow: 0 2px 24px rgba(3,12,28,.55); }
.hero-video .grad-text { background-image: linear-gradient(100deg, #6fb4ff, #b8e0fb, #6fb4ff); }
.hero-video .lead { margin-top: 0; color: #fff; text-shadow: 0 1px 14px rgba(3,12,28,.7); font-size: clamp(16.5px, 1.25vw, 17.5px); line-height: 1.65; }
.hero-video .hv-side .cta-row { margin-top: 26px; }
.hero-video .pbtns { margin-top: 40px; }
.hero-video .pbtn { border-color: rgba(255,255,255,.9); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
/* the hovered product button opens in place: site.js measures its description
   (--dh) and splits the extra height between the free video above the row (--up)
   and the room below it (--down); matching negative margins keep the row the same
   height, so the other two buttons and the headline stay perfectly still */
.hero-video .pbtns { align-items: stretch; }
@media (hover: hover) and (min-width: 961px) {
  .hero-video .pbtn { transition: box-shadow .28s, border-color .22s, margin .45s cubic-bezier(.22,1,.36,1); }
  .hero-video .pbtn:hover, .hero-video .pbtn:focus-visible { transform: none; z-index: 2;
    margin-top: calc(-1 * var(--up)); margin-bottom: calc(-1 * var(--down)); }
  .hero-video .pbtn .num { align-items: flex-start; padding-top: 24px; line-height: 1; }
  .hero-video .pbtn .desc { transition: max-height .45s cubic-bezier(.22,1,.36,1), margin-top .45s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
  .hero-video .pbtn:hover .desc, .hero-video .pbtn:focus-visible .desc { max-height: var(--dh, 240px);
    transition: max-height .45s cubic-bezier(.22,1,.36,1), margin-top .45s cubic-bezier(.22,1,.36,1), opacity .35s ease .1s; }
}
/* stacked in one column (narrow windows), the descriptions just show */
@media (hover: hover) and (max-width: 960px) {
  .hero-video .pbtn .desc { max-height: none; opacity: 1; margin-top: 11px; }
  .hero-video .pbtn:hover { transform: none; }
  .hero-video .pbtn .chev { display: none; }
}
@media (max-width: 960px) {
  .hero3.hero-video { padding: 64px 0 52px; min-height: 0; }
  .hero-video .hv-grid { padding-bottom: 0; }
  .hv-grid { grid-template-columns: 1fr; gap: 22px; }
  .hv-media::after { background: linear-gradient(180deg, rgba(6,21,43,.5) 0%, rgba(6,21,43,.36) 40%, rgba(6,21,43,.78) 100%); }
  .hero-video .pbtns { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .hv-media video { display: none; } }

/* ---------- pricing band: the fee line fits its column ---------- */
.pay .fees { font-size: clamp(22px, 1.95vw, 28px); }

/* ---------- home: MYL Node beside "Video powered OR intelligence" ---------- */
.nodesplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px 64px; align-items: center; }
.nodesplit .cta-row { margin-top: 28px; }
.nodesplit .node-link { display: block; }
.nodesplit img.device { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 56% 56% at 50% 52%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 56% 56% at 50% 52%, #000 52%, transparent 100%);
  transition: transform .5s cubic-bezier(.22,1,.36,1); }
.nodesplit .node-link:hover img.device { transform: translateY(-6px) scale(1.02); }
@media (max-width: 880px) { .nodesplit { grid-template-columns: minmax(0, 1fr); } .nodesplit .node-link { margin: -10px 0 0; } }
.nodesplit .btn { max-width: 100%; white-space: normal; text-align: left; }

/* ---------- home: MYL Node taken apart as you scroll ----------
   .n3-track is tall and .n3-stage sticks under the nav; site.js eases the
   scroll into a blend of the two nearest frames of assets/node3d, so the
   motion glides at any speed. The Node comes apart over the first half of the
   scroll, then callouts 1-4 arrive in turn. Desktop: whole 16:9 frame,
   callouts either side with a line to their part, and they stay. Phones: 4:3
   crop, the newest callout under the Node. */
.sec.n3 { background: #dbe7f5; padding-bottom: 0; }
.n3-head { display: flex; align-items: center; gap: 18px; }
.n3-head .plogo { --s: 54px; }
.n3-head h2 { margin-top: 0; }
.n3 .hsplit .side .cta-row { margin-top: 22px; }
.n3-track { position: relative; height: 420vh; height: 420svh; margin-top: 8px; }
.n3-stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); display: flex; align-items: center; overflow: hidden; }
.n3-stage > .wrap-wide { width: 100%; }
.n3-fig { position: relative; width: min(100%, calc((100vh - var(--nav-h) - 40px) * 16 / 9)); width: min(100%, calc((100svh - var(--nav-h) - 40px) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; }
.n3-view { position: absolute; inset: 0; }
.n3-poster, .n3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
/* soft edges: a static fade to the section colour on top of the canvas (a mask on a canvas that redraws every frame is expensive) */
.n3-view::after { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #dbe7f5, rgba(219,231,245,0) 9%, rgba(219,231,245,0) 91%, #dbe7f5),
              linear-gradient(180deg, #dbe7f5, rgba(219,231,245,0) 9%, rgba(219,231,245,0) 91%, #dbe7f5); }
.n3.ready .n3-poster { visibility: hidden; }
.n3-lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.n3-lines path { fill: none; stroke: var(--royal); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8;
  transition: stroke-dashoffset .3s ease; }
.n3-lines path.on { stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1) .12s; }
.n3-pin { position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; will-change: transform; }
.n3-dot { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  display: grid; place-items: center; background: var(--royal); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 13.5px;
  box-shadow: 0 0 0 5px rgba(255,255,255,.8), 0 10px 24px -6px rgba(31,95,224,.7); transform: scale(0); transition: transform .25s ease; }
.n3-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(31,95,224,.55); opacity: 0; }
.n3-dot.on { transform: scale(1); transition: transform .5s cubic-bezier(.3,1.6,.5,1) .3s; }
.n3-dot.cur::after { animation: n3Ping 1.8s ease-out .8s infinite; }
@keyframes n3Ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.n3-call { position: absolute; top: var(--cy); z-index: 3; width: 18%; display: flex; gap: 12px; align-items: flex-start;
  opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.n3-call.l { left: 0; flex-direction: row-reverse; text-align: right; }
.n3-call.r { right: 1%; }
.n3-call .n { flex: none; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; background: var(--royal); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 13.5px; box-shadow: 0 0 0 5px rgba(255,255,255,.8); }
.n3-call .t { margin-top: -12px; }
.n3-call b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.26; color: var(--navy); letter-spacing: -.01em; }
.n3-call p { margin-top: 6px; font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.55; color: var(--body); }
.n3-call.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .55s ease .1s, transform .6s cubic-bezier(.22,1,.36,1) .1s; }
.n3-call.cur b { color: var(--royal); }
.n3-hint { position: absolute; left: 50%; bottom: 5%; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.82); font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  letter-spacing: .06em; color: var(--navy-500); transition: opacity .4s ease; }
.n3-hint::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); animation: n3Bob 1.4s ease-in-out infinite; }
@keyframes n3Bob { 50% { transform: rotate(45deg) translate(1px, 1px); } }
.n3.moved .n3-hint { opacity: 0; }
@media (max-width: 900px) {
  .n3-head .plogo { --s: 44px; }
  .n3-track { height: 360vh; height: 360svh; }
  .n3-fig { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; margin-bottom: 150px; }
  .n3-lines { display: none; }
  .n3-dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 12px;
    box-shadow: 0 0 0 3px rgba(255,255,255,.8), 0 8px 18px -6px rgba(31,95,224,.7); }
  .n3-dot.on { transition-delay: .1s; }
  .n3-call, .n3-call.l, .n3-call.r { top: calc(100% + 14px); left: 0; right: 0; width: auto; flex-direction: row; text-align: left; }
  .n3-call .n { margin-top: 0; width: 28px; height: 28px; font-size: 12.5px; box-shadow: none; }
  .n3-call .t { margin-top: 2px; }
  .n3-call b { font-size: 16.5px; color: var(--royal); }
  .n3-call p { font-size: 14px; }
  .n3-call.on:not(.cur) { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
}
/* reduced motion: the finished exploded view with all four parts numbered, captions listed underneath */
@media (prefers-reduced-motion: reduce) {
  .n3-track { height: auto; }
  .n3-stage { position: static; height: auto; padding: 24px 0 64px; overflow: visible; }
  .n3-fig { aspect-ratio: auto; margin-bottom: 0; }
  .n3-view { position: relative; aspect-ratio: 16 / 9; }
  .n3-lines, .n3-hint { display: none; }
  .n3-view::after { display: none; }
  .n3-dot, .n3-call { transition: none; }
  .n3-calls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px 32px; margin-top: 18px; }
  .n3-call, .n3-call.l, .n3-call.r { position: static; width: auto; flex-direction: row; text-align: left; opacity: 1; transform: none; }
  .n3-call .n, .n3-call .t { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) { .n3-view { aspect-ratio: 4 / 3; } }

/* ---------- OR Capacity+ live room status: turnovers broken down, no overlaps ----------
   8:00 to 14:00 across the lane, so a 14 minute overrun is ~30px wide. Each
   turnover shows its total and a bar split into room cleaning / equipment
   wait / next-case setup (same breakdown as the Visibility Gap graphic). */
.live { --hrs: 6; }
.sched { min-width: 960px; }
.live-head { flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; }
.live-title { display: inline-flex; align-items: center; gap: 10px; }
.live-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--body); }
.live-key b { font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5a45d6; }
.live-key span { display: inline-flex; align-items: center; gap: 7px; }
.live-key i, .live-head .live-key i { width: 18px; height: 8px; border-radius: 3px; box-shadow: none; animation: none; }
.live-key i.c, .tseg .c { background: #8b7cf6; }
.live-key i.w, .tseg .w { background: repeating-linear-gradient(135deg, #f59e4b 0 4px, #f8bd86 4px 8px); }
.live-key i.u, .tseg .u { background: #5b8ff0; }
.tov { top: 10px; bottom: 10px; height: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 4px;
  padding: 6px 5px 5px; border-radius: 9px; background: #f4f1ff; border: 1px solid #d9d2fd; font-size: 10.5px; }
.tov b { text-align: center; font-weight: 800; font-size: 11px; color: #5a45d6; line-height: 1; }
.tseg { display: flex; gap: 2px; height: 10px; }
.tseg span { min-width: 3px; border-radius: 2px; }
.dly { min-width: 0; top: 10px; bottom: 10px; height: auto; border-radius: 0 9px 9px 0; padding: 0; font-size: 10px; letter-spacing: -.02em; white-space: nowrap; }
@media (max-width: 760px) {
  .live-key { font-size: 12px; gap: 6px 12px; }
  /* room names stay put while the board scrolls sideways */
  .sched { padding-left: 0; }
  .sched-row .room, .sched-axis > span:first-child { position: sticky; left: 0; z-index: 3; background: #fff; padding-left: 16px; }
  .sched-axis, .sched-row { grid-template-columns: 112px minmax(0, 1fr); }
  .sched-row .room { box-shadow: 8px 0 12px -10px rgba(16,52,98,.35); }
}

/* ---------- PrefCard Sync: chart gets the wider column ---------- */
.split.gapsplit { grid-template-columns: minmax(0, .92fr) minmax(0, 1.25fr); gap: 40px 56px; }
@media (max-width: 960px) { .split.gapsplit { grid-template-columns: 1fr; } }

/* ---------- PrefCard Sync: synchronization gap chart ---------- */
.gapc { margin: 0; position: relative; }
.gapc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gapc-svg text { font-family: var(--font-head); }
.gapc-svg.m { display: none; }
.gapc .t-pr { font-weight: 800; fill: #1f5fe0; }
.gapc .t-pr-sub { font-weight: 600; fill: #4d7fe6; }
.gapc .t-cd { font-weight: 800; fill: #52647f; }
.gapc .t-cd-sub { font-weight: 600; fill: #7d8fab; }
.gapc .t-upd { font-weight: 700; fill: #29456f; }
.gapc .t-gap { font-weight: 800; fill: #c9560b; letter-spacing: .12em; }
.gapc .t-gap-sub { font-weight: 700; fill: #d8762f; }
.gapc .t-axis { font-weight: 700; fill: #9aabc4; letter-spacing: .04em; }
@media (max-width: 560px) { .gapc-svg.d { display: none; } .gapc-svg.m { display: block; } }
/* draw-in once the chart scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .gapc .gc-pr, .gapc .gc-card { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .gapc .gc-gap, .gapc .gc-band, .gapc .gc-dot, .gapc .gc-lbl, .gapc .gc-gapl { opacity: 0; }
  .gapc .gc-mk { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); }
  .gapc.is-in .gc-pr { animation: gcDraw 1.6s cubic-bezier(.45,.05,.3,1) .15s forwards; }
  .gapc.is-in .gc-card { animation: gcDraw 1.6s cubic-bezier(.45,.05,.3,1) .35s forwards; }
  .gapc.is-in .gc-band, .gapc.is-in .gc-lbl { animation: gcFade .6s ease 1.1s forwards; }
  .gapc.is-in .gc-dot { animation: gcFade .3s ease 1.7s forwards; }
  .gapc.is-in .gc-mk { animation: gcPop .45s cubic-bezier(.3,1.5,.5,1) calc(.8s + var(--k) * .28s) forwards; }
  .gapc.is-in .gc-gap { animation: gcFade .9s ease 1.6s forwards; }
  .gapc.is-in .gc-gapl { animation: gcFade .5s ease 2.2s forwards; }
}
@keyframes gcDraw { to { stroke-dashoffset: 0; } }
@keyframes gcFade { to { opacity: 1; } }
@keyframes gcPop { to { opacity: 1; transform: none; } }

/* ---------- Preceptor: the staircase summary sits in the empty corner above steps 1 and 2 ---------- */
.stairs li.foot b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); color: var(--navy); line-height: 1.2; letter-spacing: -.02em; }
.stairs li.foot b em { display: block; font-style: normal; color: var(--royal); }
.stairs li.foot p { margin-top: 10px; font-size: 16px; line-height: 1.62; }
.stairs li.foot::after, .stairs li.foot::before { display: none; }
.stairs li:nth-child(4)::after { right: 0; }
@media (min-width: 881px) {
  .stairs { grid-template-rows: auto auto; }
  .stairs li { grid-row: 2; }
  .stairs li:nth-child(3), .stairs li:nth-child(4) { grid-row: 1 / span 2; }
  .stairs li.foot { grid-row: 1; grid-column: 1 / span 2; align-self: start; padding: 0 12px 34px 0; }
}
@media (max-width: 880px) { .stairs li.foot { margin: 8px 0 0 -26px; padding: 22px 0 0; border-top: 1px solid var(--border); } }

/* ---------- contact: consent note runs to the form edge ---------- */
.form .agree { flex: 1; min-width: 220px; max-width: none; }

/* ---------- Preceptor: training impact on one row ---------- */
.impact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; align-items: center; }
.impact-items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.impact-items > div { padding: 4px 0 4px 32px; border-left: 1px solid var(--border); }
.impact-items .ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--ice-3); color: var(--royal); }
.impact-items h3 { margin-top: 16px; font-size: 21px; color: var(--navy); letter-spacing: -.02em; }
.impact-items p { margin-top: 8px; font-size: 16px; line-height: 1.62; color: var(--body); }
@media (max-width: 960px) { .impact { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .impact-items { grid-template-columns: 1fr; gap: 26px; } .impact-items > div { padding-left: 22px; } }

/* ---------- compact footer: one row ---------- */
.footer { padding: 34px 0 30px; }
.foot-grid { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 22px 72px; align-items: start; }
.foot-grid h4 { font-size: 11px; margin-bottom: 8px; }
.foot-links a { padding: 4px 0; font-size: 13.5px; }
.foot-links.two { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 40px; }
.foot-about .foot-copy { margin-top: 12px; font-size: 12.5px; color: var(--muted); max-width: none; }
@media (max-width: 1080px) { .foot-grid { grid-template-columns: minmax(0, 1fr) auto auto; gap: 22px 48px; } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .foot-grid .foot-products { grid-column: 1 / -1; }
  .foot-links a { padding: 7px 0; }
}

/* ---------- French pages: longer words, slightly smaller headlines ---------- */
html[lang="fr"] .hero-video h1 { font-size: clamp(30px, 3.25vw, 47px); }
html[lang="fr"] .hero3.product h1 { font-size: clamp(36px, 5vw, 66px); max-width: 17ch; }
.mission-tail { max-width: none; }

/* ---------- small-screen fixes ---------- */
.tov-brace span { white-space: nowrap; }
.trk-real span { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 880px) { html[lang="fr"] .trk-real span { font-size: 9.5px; } }
@media (max-width: 720px) {
  .team-header { flex-wrap: wrap; }
  .team-header .head { max-width: none !important; flex: 1 1 100%; }
  .car-nav { margin-left: auto; }
}
@media (max-width: 560px) {
  .adv-kicker .ln { display: none; }
  .adv-kicker-text { white-space: normal; text-align: center; font-size: 19px; }
}
@media (max-width: 400px) {
  .nav-inner { padding: 0 14px; gap: 10px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding-left: 14px; padding-right: 14px; font-size: 13.5px; }
}

/* ---------- performance: same look, far less work per frame ----------
   The background glows were four huge layers blurred by 100px and animated,
   the grain used a blend mode over the whole page, and the nav blurred
   everything scrolling under it. Softer gradients give the same glow with no
   filter, the grain blends normally, the nav is simply opaque. */
#site-bg .glow { filter: none; will-change: auto; animation: none; }
#site-bg .g1 { background: radial-gradient(closest-side, rgba(120,190,250,.4), rgba(120,190,250,.18) 45%, rgba(120,190,250,0)); }
#site-bg .g2 { background: radial-gradient(closest-side, rgba(31,95,224,.2), rgba(31,95,224,.08) 48%, rgba(31,95,224,0)); }
#site-bg .g3 { background: radial-gradient(closest-side, rgba(150,212,250,.36), rgba(150,212,250,.15) 45%, rgba(150,212,250,0)); }
#site-bg .g4 { background: radial-gradient(closest-side, rgba(95,182,240,.26), rgba(95,182,240,.1) 48%, rgba(95,182,240,0)); }
#site-bg .grain { mix-blend-mode: normal; opacity: .025; }
.nav, .nav.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav { background: rgba(255,255,255,.95); }
.nav.scrolled { background: #fff; }
.aurora .blob, .nf-blob { animation: none; }
#scrollProgress { width: 100%; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* ---------- English / French switch ---------- */
.lang-switch { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 46px; padding: 0 13px;
  border-radius: 999px; border: 1.5px solid var(--border); background: rgba(255,255,255,.8);
  font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--navy-700);
  transition: border-color .15s, color .15s, background .15s; }
.lang-switch:hover { border-color: var(--royal); color: var(--royal); background: #fff; }
.nav-links .lang-item { display: none; }
@media (max-width: 560px) {
  .nav-cta .lang-switch { display: none; }
  .nav-links.mobile-open .lang-item { display: block; border-top: 1px solid var(--border-soft); margin-top: 6px; padding-top: 6px; }
  .nav-cta .btn { padding-left: 16px; padding-right: 16px; }
}