/* =====================================================================
   OLD-NAV EXPLORATION: the Office Timeline top bar, rebuilt for the Lucen suite.

   What is kept from the old nav (pes-integration.com):
   - A short row of EXPLORE menus on the left (Products, Solutions, Resources,
     Pricing) and the UTILITY items grouped on the right (Blog, Support,
     Contact, Login, Try free).
   - Explore menus drop a FULL-WIDTH panel attached to the bar, split into
     labelled columns with hairline dividers. Utility menus are small.
   - Click to open; the open trigger stays pressed.
   - Products sell from inside the menu: each product has its own CTA and
     plans right there, then its features and integrations as plain lists.
   - A boxed "What's new" column: the slot new products launch into.
   - Resources leads with pictures of templates, then the learning lists.

   What is Lucen's: Saans, indigo, off-white, the four product marks and the
   V8-b bar's metrics (172px logo, 42px items, 19px padding), so the page
   under it does not move when the bar is swapped.
   ===================================================================== */

/* The V8-b bar stays in the page for comparison; the review panel swaps them. */
html.nav-old .nav{display:none}
html.nav-v8 .onav,
html.nav-v8 .onav-drawer{display:none}

.onav{
  position:fixed;top:0;left:0;right:0;z-index:45;
  background:#fff;border-bottom:1px solid var(--gray-border);
  color:var(--dark-neutral);
}
.onav *,.onav-drawer *{box-sizing:border-box}
.onav a,.onav-drawer a{text-decoration:none}
.onav-bar{
  position:relative;
  max-width:var(--container-wide);margin:0 auto;padding:19px 48px;
  display:flex;align-items:center;gap:18px;
}
.onav-logo{flex:0 0 auto;display:block;margin-right:10px;line-height:0}
.onav-logo img{width:172px;max-width:none;height:auto;display:block}
.onav-group{display:flex;align-items:center;gap:2px}
.onav-group--util{margin-left:auto}

/* ---- Bar items ---------------------------------------------------- */
.onav-t{
  display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 12px;
  border:0;border-radius:9px;background:none;cursor:pointer;
  font:inherit;font-size:1rem;font-weight:500;letter-spacing:.03em;line-height:1;
  color:var(--dark-neutral);white-space:nowrap;
  transition:background .16s,color .16s;
}
.onav-t:hover{background:var(--off-white);color:var(--indigo)}
/* The old nav's pressed trigger (a grey fill while its panel is open), in
   Lucen's indigo tint. It ties the open panel back to the word that opened it. */
.onav-t[aria-expanded="true"]{background:#efecf8;color:var(--indigo)}
.onav-t:focus-visible,.onav-login:focus-visible,.onav-cta:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.onav .chev{display:block;flex:0 0 auto;transition:transform .2s;transform-origin:50% 55%}
[aria-expanded="true"] > .chev{transform:rotate(180deg)}

.onav-login{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 14px;margin-left:8px;
  border:2px solid var(--indigo);border-radius:100px;background:#fff;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:560;color:var(--indigo);white-space:nowrap;
  transition:background .16s;
}
.onav-login:hover,.onav-login[aria-expanded="true"]{background:rgba(45,0,172,.07)}
.onav-cta{
  display:inline-flex;align-items:center;height:42px;padding:0 22px;margin-left:10px;
  border-radius:100px;background:var(--indigo);color:#fff;
  font-size:.95rem;font-weight:560;white-space:nowrap;
  transition:background .16s,box-shadow .16s;
}
.onav-cta:hover{background:var(--indigo-hover);box-shadow:0 10px 30px rgba(45,0,172,.28)}

/* ---- Full-width explore panels ------------------------------------- */
.onav-mega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--gray-border);
  box-shadow:0 34px 60px -34px rgba(38,27,70,.38);
  display:none;
}
.onav-mega.is-open{display:block;animation:onavIn .18s ease-out}
@keyframes onavIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.onav-mega-in{
  max-width:var(--container-wide);margin:0 auto;padding:28px 48px 30px;
  display:grid;align-items:start;
}
/* Columns are split by hairlines, as on the old nav. */
.onav-col{min-width:0;padding:0 32px;border-left:1px solid var(--gray-border)}
.onav-col:first-child{padding-left:0;border-left:0}
.onav-col:last-child{padding-right:0}
.onav-col--plain{border-left:0}
.onav-eyebrow{
  margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--gray-border);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:620;
  color:var(--medium-neutral);
}
.onav-eyebrow--bare{border-bottom:0;padding-bottom:0;margin-bottom:8px}

/* Lists: the old nav's diamond bullets. Equal weight, quick to scan, and
   nothing competes with the product cards for attention. */
.onav-list{list-style:none;margin:0;padding:0}
.onav-list a{
  display:flex;align-items:center;gap:12px;
  padding:5px 10px;margin:0 -10px;border-radius:8px;
  font-size:.93rem;font-weight:500;line-height:1.3;color:var(--dark-neutral);
  transition:background .16s,color .16s;
}
.onav-list a::before{
  content:"";flex:0 0 6px;height:6px;background:#cdc8d8;transform:rotate(45deg);
  transition:background .16s;
}
.onav-list a:hover{background:var(--off-white);color:var(--indigo)}
.onav-list a:hover::before{background:var(--indigo)}
.onav-list a.is-lead{font-weight:600}
.onav-list a.is-lead::before{content:none}
.onav-list a.is-lead::after{content:"\203A";color:var(--indigo);font-size:1.1em;margin-left:-4px}
.onav-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:.88rem;font-weight:580;color:var(--indigo);
}
.onav-more::after{content:"\203A";font-size:1.15em;line-height:1}
.onav-more:hover{color:var(--indigo-hover)}

.onav-tag{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:6px;
  border-radius:100px;border:1px solid var(--gray-border);background:#fff;
  font-size:.66rem;font-weight:620;letter-spacing:.04em;color:var(--medium-neutral);
  white-space:nowrap;vertical-align:middle;
}
.onav-tag--new{border-color:#cfc3f3;background:#f4f0fe;color:var(--indigo)}
.onav-tag--soon{border-color:#fbd3a9;background:#fff5ea;color:#a3520a}

/* ---- Product marks (the V8-b badge, same ink sizing) ---------------- */
.onav-pm{
  position:relative;flex:0 0 34px;width:34px;height:34px;
  background:var(--off-white);border:1px solid var(--gray-border);border-radius:7px;
  transition:background .16s,border-color .16s;
}
/* Each mark's height and nudge are tuned for the 34px tile; --k scales both
   with the tile, so a bigger badge keeps the same optical centre. */
.onav-pm{--k:1}
.onav-pm img{
  position:absolute;left:50%;top:50%;width:auto;max-width:none;display:block;
  height:calc(var(--mh) * var(--k));
  transform:translate(calc(-50% + var(--dx,0px) * var(--k)),calc(-50% + var(--dy,0px) * var(--k)));
}
/* Optical sizes from the Products page's nav (products/src/css/95-navprod.css,
   New Products and Track page): Track +16%, Flowchart +6%, Plan +3% against
   Timeline, then all a size down in the 34px tile.
   Centring (10.30, final): each mark's whole shape, faded ends included,
   sits dead centre in the badge, the way the brand's own square Track
   submark (Brand Logos, Track_Submark_Purple.svg) centres its ring edge to
   edge. The SVGs share an 84x70 artboard with the art off-centre inside it,
   so the nudges below cancel that offset; they are measured from Chrome's
   paint of each SVG, not eyeballed. Weighting toward the solid end of the
   gradient left visibly more space on one side, which read as off-centre. */
.onav-pm[data-p="timeline"]{--mh:20.7px;--dx:1.34px;--dy:.28px}
.onav-pm[data-p="track"]{--mh:24px;--dx:2.22px;--dy:.48px}
.onav-pm[data-p="flowchart"],
.onav-pm[data-p="diagrams"]{--mh:23.5px;--dx:.44px;--dy:.06px}
.onav-pm[data-p="plan"]{--mh:21.3px;--dx:1.04px;--dy:-.43px}
/* The old `scale:1.25` here scaled each mark about its own box, which sat
   off the tile's centre, and pushed every mark 3-6px up and left. */
.onav-pm--lg{--k:1.2941;flex-basis:44px;width:44px;height:44px;border-radius:10px}
.onav-pm--glyph{display:grid;place-items:center;color:var(--indigo)}

/* ---- Products panel: rail | product | what's new -------------------- */
.onav-mega--products .onav-mega-in{grid-template-columns:292px minmax(0,1fr) 300px}

/* THE RAIL IS THE OLD "PRODUCT OVERVIEW" COLUMN, MADE A PICKER. The old nav
   had one product family, so its features and integrations columns could
   belong to it. With four products those lists only mean something per
   product, so picking a row swaps the columns beside it. */
/* The rows touch (no gap), so the pointer is always over one of them; the
   spacing lives in their padding instead. */
.onav-rail{display:flex;flex-direction:column}
.onav-prow{
  display:grid;grid-template-columns:34px minmax(0,1fr) 10px;gap:12px;align-items:center;
  width:calc(100% + 24px);margin:0 -12px;padding:12px;
  border:0;border-radius:12px;background:none;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  transition:background .12s,box-shadow .12s;
}
.onav-prow:hover,.onav-prow[aria-selected="true"]{background:var(--off-white)}
.onav-prow:hover .onav-pm,.onav-prow[aria-selected="true"] .onav-pm{background:#fff;border-color:#ddd6cd}
.onav-prow:focus-visible{outline:2px solid var(--indigo);outline-offset:-2px}
.onav-prow .nm{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;font-size:.98rem;font-weight:560;line-height:1.25}
.nm-t{white-space:nowrap}
.nm .onav-tag,.onav-ntitle .onav-tag{margin-left:0}
/* The picked row's name stays the dark text color (Matt, 10.30); its
   background and chevron carry the selection. */
.onav-prow[aria-selected="true"] .nm{color:var(--dark-neutral)}
.onav-prow .ds{display:block;margin-top:2px;font-size:.8rem;line-height:1.35;color:var(--medium-neutral)}
.onav-prow .go{color:var(--indigo);opacity:0;transform:translateX(-3px);transition:opacity .16s,transform .16s}
.onav-prow[aria-selected="true"] .go{opacity:1;transform:none}
.onav-rail-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-border)}

/* Switching products swaps the panel at once: a fade here was the second,
   late half of every hover and made the list feel slow. */
.onav-stage[hidden]{display:none}
.onav-shead{display:block}
.onav-sname{
  display:inline-flex;align-items:center;gap:8px;
  font-size:1.32rem;font-weight:560;letter-spacing:-.01em;line-height:1.2;color:var(--dark-neutral);
}
.onav-sname svg{color:var(--indigo);transition:transform .16s}
.onav-sname:hover{color:var(--indigo)}
.onav-sname:hover svg{transform:translate(2px,-2px)}
.onav-formerly{margin-top:3px;font-size:.78rem;color:var(--medium-neutral)}
.onav-sdesc{margin:8px 0 14px;max-width:38ch;font-size:.95rem;line-height:1.5;color:var(--dark-neutral)}
.onav-actions{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.onav-btn{
  display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:100px;
  background:var(--indigo);color:#fff;font-size:.9rem;font-weight:560;white-space:nowrap;
  transition:background .16s;
}
.onav-btn:hover{background:var(--indigo-hover)}
.onav-link{font-size:.9rem;font-weight:580;color:var(--indigo);white-space:nowrap}
.onav-link::after{content:" \2192"}
.onav-link:hover{color:var(--indigo-hover)}
.onav-poster{
  display:block;width:216px;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--gray-border);border-radius:10px;background:var(--off-white);
  box-shadow:0 10px 24px -14px rgba(38,27,70,.35);
}
.onav-poster img{width:100%;height:100%;object-fit:cover;display:block}

.onav-plans{margin-top:16px}
.onav-chips{display:flex;gap:8px}
.onav-chip{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;height:40px;padding:0 12px;
  border:1px solid var(--gray-border);border-radius:10px;background:#fff;
  font-size:.88rem;font-weight:560;color:var(--dark-neutral);white-space:nowrap;
  transition:border-color .16s,color .16s,background .16s;
}
.onav-chip:hover{border-color:var(--indigo);color:var(--indigo)}
.onav-chip--wide{flex:0 1 auto;padding:0 18px}

.onav-lists{
  display:grid;grid-template-columns:1fr 1fr;gap:0 28px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--gray-border);
}

/* What's new: the only coloured frame in the panel, as on the old nav. */
.onav-new{
  border:1px solid #d9d0f5;border-radius:16px;padding:20px 22px 6px;
  background:linear-gradient(180deg,#faf8ff 0%,#fff 55%);
}
.onav-new .onav-eyebrow{border-bottom-color:#e6e0f8}
.onav-ncard{padding:6px 0 18px}
.onav-ncard + .onav-ncard{padding-top:18px;border-top:1px solid var(--gray-border)}
.onav-nhead{display:flex;align-items:center;gap:12px}
.onav-ntitle{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:1rem;font-weight:600;line-height:1.25}
.onav-ndesc{margin:10px 0 12px;font-size:.86rem;line-height:1.5;color:var(--medium-neutral)}
.onav-obtn{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;
  border:1px solid var(--gray-border);border-radius:9px;background:#fff;
  font-size:.85rem;font-weight:580;color:var(--dark-neutral);
  transition:border-color .16s,color .16s;
}
.onav-obtn svg{color:var(--indigo)}
.onav-obtn:hover{border-color:var(--indigo);color:var(--indigo)}

/* ---- Solutions panel ------------------------------------------------- */
.onav-mega--solutions .onav-mega-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 320px}
.onav-logos{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;align-items:center;margin:8px 0 18px}
.onav-logos img{height:26px;width:auto;max-width:100%;display:block;opacity:.85}

/* ---- Resources panel ------------------------------------------------- */
.onav-mega--resources .onav-mega-in{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:0}
/* Templates first and in pictures: on the old nav this was the most visual
   thing in the whole menu, because templates are what people come for. */
.onav-tpl-zone{background:var(--off-white);border-radius:16px;padding:24px 26px 26px;margin-right:32px}
.onav-tpl-h{margin:0 0 18px;font-size:1.32rem;font-weight:560;letter-spacing:-.01em;line-height:1.25}
.onav-tpl-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* The button hugs its label and sits flush left under the slide. Stretched
   to the slide's width, its pill ends never quite lined up with the
   slide's square corners (Matt, 10.30). */
.onav-tpl{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.onav-tpl-img{align-self:stretch}
/* A firmer stroke and a tighter corner (Matt, 10.30): the light gray border
   and 12px radius faded into the off-white zone. No shadow, at rest or on
   hover; the stroke turns indigo instead. */
.onav-tpl-img{
  display:block;aspect-ratio:16/9;padding:0;background:#fff;
  border:1px solid #cfcad8;border-radius:6px;overflow:hidden;
  transition:border-color .16s;
}
.onav-tpl-img img{width:100%;height:100%;object-fit:cover;display:block}
.onav-fpo{display:grid;place-items:center;width:100%;height:100%;font-size:1.4rem;font-weight:620;letter-spacing:.14em;color:var(--medium-neutral)}
.onav-tpl:hover .onav-tpl-img{border-color:var(--indigo)}
.onav-tpl .onav-btn{justify-content:center}
.onav-learn-h{margin:0 0 14px;font-size:1.32rem;font-weight:560;letter-spacing:-.01em}
.onav-learn{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}

/* ---- Small utility menus (Support, Contact, Login) ------------------ */
.onav-dd{position:relative}
.onav-ddmenu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:2;min-width:240px;
  background:#fff;border:1px solid var(--gray-border);border-radius:14px;
  box-shadow:0 18px 44px -12px rgba(38,27,70,.24);padding:8px;
  display:none;
}
.onav-dd--end .onav-ddmenu{left:auto;right:0}
.onav-ddmenu.is-open{display:block;animation:onavIn .16s ease-out}
.onav-ddmenu a{
  display:block;padding:10px 14px;border-radius:9px;
  font-size:.95rem;font-weight:500;line-height:1.3;color:var(--dark-neutral);
  transition:background .16s,color .16s;
}
.onav-ddmenu a:hover{background:var(--off-white);color:var(--indigo)}
.onav-ddmenu .sub{display:block;margin-top:2px;font-size:.78rem;font-weight:430;color:var(--medium-neutral)}
.onav-ddhead{padding:8px 14px 4px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:620;color:var(--medium-neutral)}

/* ---- Narrower bars, then the drawer ---------------------------------- */
@media (max-width:1320px){
  .onav-bar{padding:19px 24px;gap:10px}
  .onav-t{padding:0 9px}
  .onav-mega-in{padding:28px 24px 32px}
  .onav-col{padding:0 24px}
  .onav-mega--products .onav-mega-in{grid-template-columns:268px minmax(0,1fr) 272px}
  .onav-poster{width:170px}
  .onav-tpl-zone{margin-right:24px}
}
.onav-burger{
  display:none;margin-left:auto;padding:8px;
  background:none;border:0;cursor:pointer;color:var(--dark-neutral);line-height:0;border-radius:8px;
}
.onav-burger svg{display:block}
.onav-burger .bx{transform-box:fill-box;transform-origin:center;transition:transform .24s cubic-bezier(.16,1,.3,1),opacity .18s}
.onav.drawer-open .onav-burger .b1{transform:translateY(7px) rotate(45deg)}
.onav.drawer-open .onav-burger .b2{opacity:0}
.onav.drawer-open .onav-burger .b3{transform:translateY(-7px) rotate(-45deg)}

.onav-drawer{
  position:fixed;left:0;right:0;bottom:0;top:var(--onav-h,81px);z-index:44;
  background:#fff;overflow-y:auto;overscroll-behavior:contain;
  padding:6px 24px 40px;display:none;color:var(--dark-neutral);
}
.onav-drawer.is-open{display:block;animation:onavIn .18s ease-out}
.onav-acc-t{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 2px;border:0;border-bottom:1px solid var(--gray-border);background:none;cursor:pointer;
  font:inherit;font-size:1.22rem;font-weight:560;color:var(--dark-neutral);text-align:left;
}
a.onav-acc-t{display:flex}
.onav-acc-t[aria-expanded="true"]{color:var(--indigo)}
.onav-acc-p{padding:6px 0 18px;border-bottom:1px solid var(--gray-border)}
.onav-acc-p[hidden]{display:none}
.onav-acc-p .onav-eyebrow{margin-top:16px}
.onav-dprod{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--gray-border)}
.onav-dprod:last-of-type{border-bottom:0}
.onav-dprod .nm{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;font-weight:600;font-size:1.02rem;color:var(--dark-neutral)}
.onav-dprod .ds{margin:3px 0 10px;font-size:.86rem;line-height:1.45;color:var(--medium-neutral);text-wrap:pretty}
.onav-dprod .row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.onav-dprod .onav-btn{height:34px;padding:0 14px;font-size:.85rem}
.onav-dfoot{padding-top:22px;display:flex;flex-direction:column;gap:16px}
.onav-dfoot .onav-cta{margin:0;justify-content:center;height:48px}
.onav-dlogin{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}
.onav-dlogin span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:620;color:var(--medium-neutral)}
.onav-dlogin a{font-size:.95rem;font-weight:560;color:var(--indigo)}

@media (max-width:1180px){
  .onav-group,.onav-login-wrap{display:none}
  .onav-burger{display:inline-flex}
  .onav-cta{margin-left:auto}
  .onav-cta + .onav-burger{margin-left:8px}
  .onav-mega,.onav-ddmenu{display:none !important}
}
@media (min-width:1181px){.onav-drawer{display:none !important}}
@media (max-width:720px){
  .onav-bar{padding:15px 20px}
  .onav-logo img{width:136px}
  .onav-bar > .onav-cta{display:none}
  .onav-burger{margin-left:auto}
}

/* ---- Review panel, link toast, "mark new" outlines ------------------- */
html.onav-mark .onav [data-st="proposed"],
html.onav-mark .onav-drawer [data-st="proposed"]{outline:1.5px dashed #f98613;outline-offset:1px;border-radius:7px}
html.onav-mark .onav [data-st="verify"],
html.onav-mark .onav-drawer [data-st="verify"]{outline:1.5px dashed #3b93f7;outline-offset:1px;border-radius:7px}

/* =====================================================================
   V2: the product stage without its screenshot, and a spacing pass.
   Toggle with the review panel's Layout switch (html.onav-v2).
   ===================================================================== */
.onav-alinks{display:none}
html.onav-v2 .onav-mega-in{padding:32px 48px 34px}
html.onav-v2 .onav-mega--products .onav-mega-in{grid-template-columns:272px minmax(0,1fr)}
/* The header splits on the same line as the lists under it: plans and the
   secondary links sit over Integrations, so the stage reads as two clean
   columns instead of a header with a hole where the screenshot was. */
html.onav-v2 .onav-shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:start}
html.onav-v2 .onav-sdesc{max-width:none;margin:8px 0 18px}
html.onav-v2 .onav-sintro .onav-link{display:none}
html.onav-v2 .onav-plans{margin-top:6px}
html.onav-v2 .onav-chip{height:38px;padding:0 8px}
html.onav-v2 .onav-chip--wide{flex:1 1 auto}
html.onav-v2 .onav-alinks{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px}
html.onav-v2 .onav-saside > .onav-alinks:first-child{margin-top:6px}
html.onav-v2 .onav-lists{margin-top:22px;padding-top:20px}

/* Boxed columns (What's new, Customer stories): one padding all round, one
   gap between cards, and the button its own step below the copy. */
html.onav-v2 .onav-new{padding:22px 24px 24px}
html.onav-v2 .onav-new .onav-eyebrow{margin-bottom:18px}
html.onav-v2 .onav-ncard{padding:0}
html.onav-v2 .onav-ncard + .onav-ncard{margin-top:20px;padding-top:20px}
html.onav-v2 .onav-ndesc{margin:8px 0 16px}
html.onav-v2 .onav-obtn{height:36px}

/* Customer logos, tuned by eye from rendered side-by-sides, not a formula:
   the two bold, compact marks (Hulu, Adobe) carry the same weight, J&J's long
   thin script is kept short enough not to dominate, and Novartis sits between.
   Heights are for the 50px-tall frames the SVGs ship in. */
html.onav-v2 .onav-mega--solutions .onav-mega-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 288px}
html.onav-v2 .onav-logos{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;
  margin:0;padding:2px 0 18px;border-bottom:1px solid var(--gray-border);
}
html.onav-v2 .onav-logos span{display:flex;align-items:center;justify-content:center;height:40px;min-width:0}
html.onav-v2 .onav-logos img{width:auto;max-width:none;opacity:.8}
html.onav-v2 .onav-logos img[data-l="hulu"]{height:34.5px}
html.onav-v2 .onav-logos img[data-l="adobe"]{height:31.6px}
html.onav-v2 .onav-logos img[data-l="jnj"]{height:26px}
html.onav-v2 .onav-logos img[data-l="novartis"]{height:28.3px}
html.onav-v2 .onav-mega--solutions .onav-ndesc{margin:18px 0 16px}

@media (max-width:1320px){
  html.onav-v2 .onav-mega-in{padding:28px 24px 30px}
  html.onav-v2 .onav-mega--products .onav-mega-in{grid-template-columns:248px minmax(0,1fr)}
  html.onav-v2 .onav-mega--solutions .onav-mega-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 264px}
  html.onav-v2 .onav-logos img{scale:.88}
}

/* =====================================================================
   10.29: KATE'S FEEDBACK. What's new is gone, so Main features and
   Integrations get its width; color marks out the regions instead of white
   on white; the plans carry the old nav's tier icons; Lucen MCP joins the
   products. Layout B (html.onav-b, the old nav's columns) is the reading of
   "a two-column grid for main features and integrations" that stayed; Matt
   dropped A (lists as grids under the header) on 10.30.
   ===================================================================== */

/* Each product's own tint, from the V8-b product colors (--orange, --purple,
   --green, --blue). Indigo mode puts every product on one indigo tint. */
.onav [data-pc],.onav-drawer [data-pc]{
  --pc-tint:color-mix(in srgb,var(--pc) 11%,#fff);
  --pc-soft:color-mix(in srgb,var(--pc) 4%,#fff);
  --pc-line:color-mix(in srgb,var(--pc) 28%,#fff);
  --pc-ink:color-mix(in srgb,var(--pc) 72%,#261b46);
}
/* --pc-bold and --pc-bold3: the second and third steps of each product's ramp
   in the brand palette (10.29.26/Full Brand Suite Overview.pdf), used by the
   Bold and Gradient color options. Flowchart's ramp is listed light to dark,
   so its steps are counted from #6AB99B. */
.onav [data-pc="timeline"],.onav-drawer [data-pc="timeline"]{--pc:#f98613;--pc-bold:#fbb671;--pc-bold3:#fdcfa1}
.onav [data-pc="track"],.onav-drawer [data-pc="track"]{--pc:#9c53e5;--pc-bold:#c498ef;--pc-bold3:#d7baf5}
.onav [data-pc="flowchart"],.onav-drawer [data-pc="flowchart"]{--pc:#6ab99b;--pc-bold:#92d4bb;--pc-bold3:#bef5e0}
.onav [data-pc="plan"],.onav-drawer [data-pc="plan"]{--pc:#3b93f7;--pc-bold:#89befa;--pc-bold3:#b1d4fc}
html.onav-c-indigo .onav [data-pc],
html.onav-c-indigo .onav-drawer [data-pc]{--pc:#2d00ac;--pc-tint:#f1eefb;--pc-soft:#f8f7fd;--pc-line:#ddd6f3;--pc-ink:#2d00ac}

/* The product list becomes its own off-white column, the way the Resources
   templates box already is. The picked row lifts out of it as a white card. */
/* Half a step lighter than --off-white (Matt, 10.30: the full off-white read
   too heavy here); the picked row's shadow keeps it lifted off the column. */
.onav-mega--products .onav-col:first-child{
  align-self:stretch;padding:18px 18px 16px;border-radius:16px;
  background:color-mix(in srgb,var(--off-white) 55%,#fff);
}
.onav-mega--products .onav-col:first-child .onav-eyebrow,
.onav-mega--products .onav-rail-foot{border-color:#ebe8e3}
.onav-mega--products .onav-col + .onav-col{border-left:0;padding:0 0 0 32px}
.onav-mega--products .onav-prow:hover{background:rgba(255,255,255,.7)}
.onav-mega--products .onav-prow[aria-selected="true"]{background:#fff;box-shadow:0 1px 2px rgba(38,27,70,.06),0 10px 22px -14px rgba(38,27,70,.32)}
.onav-mega--products .onav-pm{background:#fff}
.onav-mega--products .onav-prow[aria-selected="true"] .onav-pm{background:var(--pc-tint);border-color:var(--pc-line)}

/* The product's header: its mark, then a tinted band holding the two things
   Kate wants found first, the CTA and the plans. */
.onav-stitle{display:flex;align-items:center;gap:14px}
.onav-stitle .onav-pm--lg{background:#fff;border-color:var(--pc-line)}
html.onav-v2 .onav-stage .onav-shead{
  padding:22px 24px 24px;border:1px solid var(--pc-line);border-radius:16px;
  background:linear-gradient(135deg,var(--pc-tint) 0%,var(--pc-soft) 80%);
}
/* The description wraps inside 300px with balanced lines, so it breaks well
   before the card edge and never leaves one word alone on the last line
   (Matt, 10.30: "PowerPoint." and "365." were hanging). */
html.onav-v2 .onav-stage .onav-sdesc{margin:12px 0 18px;max-width:300px;text-wrap:balance}
/* Plan chips. Equal columns that fill the row but never get narrower than
   their label (minmax(max-content,1fr)), so the row stays even and nothing
   clips. Content is anchored left, not centred (Matt, 10.30): every icon sits
   at the same inset and every label starts the same distance after it, so
   icons and labels line up across the row whatever the label's length. Icon
   and label centre on the label's cap height (text-box trim) rather than its
   line box, which sits low in Saans. The icon side gets 2px less padding
   because the glyphs carry about 2px of their own air. */
.onav-stage .onav-chips{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);gap:8px}
.onav-stage .onav-chips:has(> :only-child){grid-auto-columns:max-content}
html.onav-v2 .onav-stage .onav-chip{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;
  height:38px;padding:0 13px 0 12px;
  border:1px solid var(--pc-line);border-radius:10px;background:#fff;
  box-shadow:0 1px 2px rgba(38,27,70,.06);
  font-size:.84375rem;font-weight:560;line-height:1;color:var(--dark-neutral);
  transition:border-color .16s,color .16s,box-shadow .16s,transform .16s;
}
.onav-stage .onav-chip > span{text-box:trim-both cap alphabetic}
/* Tier icons in each product's primary brand color (Matt, 10.30: the darkened
   mix read muddy). */
.onav-stage .onav-tier{flex:0 0 16px;width:16px;height:16px;color:var(--pc);transition:color .16s}
.onav-stage .onav-chip:hover{border-color:var(--indigo);color:var(--indigo);box-shadow:0 4px 12px -6px rgba(45,0,172,.35)}
.onav-stage .onav-chip:hover .onav-tier{color:var(--indigo)}
.onav-stage .onav-chip:active{transform:translateY(1px)}
.onav-stage .onav-chip:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}

/* B: the old nav's columns. The band becomes the product card on the left,
   and Main features and Integrations run full height beside it.
   The card is as wide as Track's three plan chips (324px, the widest row,
   plus 2px for the Cards border) and the card's side padding, which differs
   by style. The list columns
   never get narrower than their longest label, so every item stays on one
   line ("Dependencies & Critical Path" wrapped at 1fr); spare width is shared
   equally. */
html.onav-b .onav-stage{display:grid;grid-template-columns:calc(326px + 2 * var(--card-pad,20px)) minmax(max-content,1fr) minmax(max-content,1fr);align-items:stretch}
html.onav-s-field .onav-stage{--card-pad:28px}
/* Every product's panel sits in the same grid cell, the others laid out but
   invisible, so the menu is always as tall as the tallest product and does
   not jump when switching (Matt, 10.30). visibility:hidden also keeps the
   hidden panels out of the tab order and the accessibility tree. */
html.onav-b .onav-mega--products .onav-col + .onav-col{display:grid}
html.onav-b .onav-stage{grid-area:1/1}
html.onav-b .onav-stage[hidden]{display:grid;visibility:hidden}
html.onav-b .onav-lists .onav-list a,
html.onav-b .onav-lists .onav-more{white-space:nowrap}
html.onav-v2.onav-b .onav-stage .onav-shead{display:block;align-self:start;padding:20px 20px 22px}
html.onav-b .onav-stage .onav-chips{gap:6px}
html.onav-b .onav-saside{margin-top:20px;padding-top:18px;border-top:1px solid var(--pc-line)}
/* Plan has no plans or extra links: no divider over nothing. */
html.onav-b .onav-saside:empty{display:none}
html.onav-v2.onav-b .onav-plans{margin-top:0}
html.onav-v2.onav-b .onav-stage .onav-lists{display:contents}
html.onav-b .onav-lists > div{margin-left:32px;padding-left:32px;border-left:1px solid var(--gray-border)}
@media (max-width:1320px){
  html.onav-b .onav-lists > div{margin-left:24px;padding-left:24px}
}

/* Lucen MCP: a plug where the diamond would be, in indigo, since it spans
   the suite rather than belonging to one product. */
.onav-list a.is-mcp{gap:7px;color:var(--indigo);font-weight:580}
.onav-list a.is-mcp::before{content:none}
.onav-list a.is-mcp .mcp-g{flex:0 0 auto;width:15px;height:15px;margin:0 1px 0 -4px}
.onav-list a.is-fpo{color:#aaa3b8;font-style:italic;font-weight:450}
.onav-list a.is-fpo::before{background:#e3dfe9}
.onav-mcp{
  display:flex;align-items:center;gap:12px;margin:12px -12px 0;padding:10px 12px;border-radius:12px;
  font-size:.98rem;font-weight:560;color:var(--dark-neutral);transition:background .16s,color .16s;
}
.onav-mcp:hover{background:rgba(255,255,255,.7);color:var(--indigo)}
.onav-mcp .onav-pm--glyph{background:#f1eefb;border-color:#ddd6f3}
.onav-mcp .onav-tag{margin-left:0}

/* Mobile: each product on its own tinted card; What's new is gone here too. */
.onav-drawer .onav-dprod{
  margin:10px 0;padding:14px;border:1px solid var(--pc-line);border-radius:14px;
  background:linear-gradient(135deg,var(--pc-tint),var(--pc-soft) 80%);
}
.onav-drawer .onav-dprod:last-of-type{border-bottom:1px solid var(--pc-line)}
.onav-drawer .onav-dprod .onav-pm{background:#fff;border-color:var(--pc-line)}
.onav-dmcp{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.88rem;font-weight:580;color:var(--indigo)}
.onav-dmcp .onav-tag{margin-left:2px}
.onav-drawer .onav-mcp{margin:6px 0 4px;padding:12px 14px;border:1px solid #ddd6f3;background:#f8f7fd}

/* Review panel: the readings above, bottom left. */
.onav-review{
  position:fixed;left:16px;bottom:16px;z-index:60;width:344px;
  background:#fff;border:1px solid var(--gray-border);border-radius:14px;
  box-shadow:0 18px 44px -12px rgba(38,27,70,.3);font-size:.8rem;color:var(--dark-neutral);
}
.onav-review *{box-sizing:border-box}
.onav-review.is-min{width:auto}
.onav-rv-head{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  border:0;background:none;cursor:pointer;font:inherit;font-size:.7rem;font-weight:620;
  letter-spacing:.14em;text-transform:uppercase;color:var(--medium-neutral);
}
.onav-rv-head svg{display:block;transition:transform .2s}
.onav-review:not(.is-min) .onav-rv-head svg{transform:rotate(180deg)}
.onav-rv-body{display:grid;gap:6px;padding:0 10px 10px}
.onav-review.is-min .onav-rv-body{display:none}
.onav-rv-row{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:6px}
.onav-rv-row > span{padding-left:4px;font-weight:560}
.onav-seg{display:flex;padding:2px;border-radius:9px;background:var(--off-white)}
.onav-seg button{
  flex:1 1 0;padding:6px 4px;border:0;border-radius:7px;background:none;cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:560;color:var(--medium-neutral);white-space:nowrap;
}
.onav-seg button[aria-pressed="true"]{background:#fff;color:var(--indigo);box-shadow:0 1px 3px rgba(38,27,70,.14)}

/* =====================================================================
   STYLE: FIELDS (html.onav-s-field), Matt 10.30. The card style nests up to
   three rounded boxes (column, card, row). Here the regions are flat,
   square fields of color that run the panel's full height, flush with its
   top and bottom edges; rounding is kept only for what sits inside them
   (rows, badges, chips, buttons). No gradients.
   ===================================================================== */
html.onav-s-field .onav [data-pc],
html.onav-s-field .onav-drawer [data-pc]{--pc-field:color-mix(in srgb,var(--pc) 7%,#fff)}
html.onav-s-field.onav-c-indigo .onav [data-pc],
html.onav-s-field.onav-c-indigo .onav-drawer [data-pc]{--pc-field:#f5f3fc}

/* Products: product list on white | product field | lists on white. The list
   is white (Matt, 10.30: the pale product fields were hard to see against a
   gray column), and its text lines up with the logo. The stage column is a
   grid whose one cell stretches, so the product field fills the panel's
   full height. */
html.onav-v2.onav-s-field .onav-mega--products .onav-mega-in{padding-top:0;padding-bottom:0;align-items:stretch}
html.onav-v2.onav-s-field .onav-mega--products .onav-col:first-child{border-radius:0;padding:28px 0;background:#fff}
html.onav-v2.onav-s-field .onav-mega--products .onav-col + .onav-col{display:grid;padding:0}
html.onav-s-field .onav-mega--products .onav-prow{width:calc(100% + 14px);margin:0 0 0 -14px;padding:12px 14px;border-radius:10px}
html.onav-s-field .onav-mega--products .onav-prow:hover{background:rgba(38,27,70,.04)}
html.onav-s-field .onav-mega--products .onav-prow[aria-selected="true"]{background:var(--pc-field);box-shadow:none}
html.onav-s-field .onav-mega--products .onav-prow[aria-selected="true"] .onav-pm{background:#fff}
html.onav-s-field .onav-mega--products .onav-mcp{margin:12px 0 0 -14px;padding:10px 14px}

/* The product is a full-height field, and the picked row runs into it like a
   tab, so the selection and what it opens read as one piece. */
html.onav-v2.onav-s-field .onav-stage .onav-shead{border:0;border-radius:0;background:var(--pc-field)}
html.onav-s-field.onav-b .onav-mega--products .onav-col:first-child .onav-eyebrow,
html.onav-s-field.onav-b .onav-mega--products .onav-rail-foot{margin-right:16px}
html.onav-s-field.onav-b .onav-mega--products .onav-prow{border-radius:10px 0 0 10px}
/* The picked row reaches 1px under the field, so at fractional screen
   scaling the two edges never meet on a half pixel with white showing
   through between them. */
html.onav-s-field.onav-b .onav-mega--products .onav-prow[aria-selected="true"]{width:calc(100% + 15px)}
html.onav-s-field.onav-b .onav-mega--products .onav-mcp{margin-right:16px;border-radius:10px}
html.onav-v2.onav-b.onav-s-field .onav-stage .onav-shead{align-self:stretch;padding:30px 28px}
html.onav-s-field.onav-b .onav-lists > div{margin:30px 0;padding:0 0 0 40px;border-left:0}
html.onav-s-field.onav-b .onav-lists > div + div{margin-left:32px;padding-left:32px;border-left:1px solid var(--gray-border)}

/* Solutions: the customer-stories box becomes a field column, one equal third
   of the panel. At its old 288px it sat alone at the far right with a wide
   empty gap before it (Matt, 10.30). */
html.onav-v2.onav-s-field .onav-mega--solutions .onav-mega-in{padding-top:0;padding-bottom:0;align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr))}
html.onav-s-field .onav-mega--solutions .onav-col:not(.onav-col--plain){margin:30px 0}
html.onav-s-field .onav-mega--solutions .onav-col--plain{padding-right:0}
html.onav-v2.onav-s-field .onav-mega--solutions .onav-new{height:100%;border:0;border-radius:0;background:#f8f7fd;padding:30px 28px}

/* Resources: the templates box becomes a field column. */
html.onav-v2.onav-s-field .onav-mega--resources .onav-mega-in{padding-top:0;padding-bottom:0;align-items:stretch}
html.onav-s-field .onav-mega--resources .onav-tpl-zone{height:100%;margin-right:40px;padding:30px 32px;border-radius:0;background:#faf9f8}
html.onav-s-field .onav-mega--resources .onav-col:last-child{padding:30px 0 !important}

/* Mobile: each product is a full-bleed band instead of a card. */
html.onav-s-field .onav-drawer .onav-dprod{margin:0 -24px;padding:18px 24px;border:0;border-radius:0;background:var(--pc-field)}
html.onav-s-field .onav-drawer .onav-dprod:last-of-type{border-bottom:0}
html.onav-s-field .onav-drawer .onav-dprod + .onav-dprod{margin-top:1px}
html.onav-s-field .onav-drawer .onav-mcp{margin:1px -24px 0;padding:14px 24px;border:0;border-radius:0;background:#f5f3fc}

/* =====================================================================
   COLOR: BOLD (html.onav-c-bold), Matt 10.30: the pale tints read too weak.
   Each product sits on the second color of its brand ramp, flat, with the
   dark text color on it (no white knockout). The light tints that drew
   edges and secondary text inside the colored area are swapped for dark
   translucent ones that hold up on the stronger colors. Not yet checked for
   contrast; Matt will tune the values if needed.
   ===================================================================== */
html.onav-c-bold .onav [data-pc],
html.onav-c-bold .onav-drawer [data-pc]{--pc-field:var(--pc-bold)}
html.onav-v2.onav-c-bold .onav-stage .onav-shead{background:var(--pc-bold);border-color:var(--pc-bold)}
html.onav-c-bold .onav-stage .onav-saside{border-top-color:rgba(38,27,70,.16)}
html.onav-c-bold .onav-stage .onav-stitle .onav-pm--lg{border-color:rgba(38,27,70,.12)}
html.onav-v2.onav-c-bold .onav-stage .onav-chip{border-color:rgba(38,27,70,.14)}
html.onav-c-bold .onav-stage .onav-formerly,
html.onav-c-bold .onav-stage .onav-eyebrow{color:rgba(38,27,70,.78)}
html.onav-c-bold .onav-mega--products .onav-prow[aria-selected="true"] .onav-pm{background:#fff;border-color:rgba(38,27,70,.12)}
html.onav-c-bold .onav-drawer .onav-dprod{background:var(--pc-bold);border-color:var(--pc-bold)}
html.onav-c-bold .onav-drawer .onav-dprod .onav-pm{border-color:rgba(38,27,70,.12)}
html.onav-c-bold .onav-drawer .onav-dprod .ds{color:rgba(38,27,70,.8)}

/* =====================================================================
   COLOR: GRADIENT (html.onav-c-grad, with onav-c-bold), Matt 10.30. Bold's
   flat color becomes a 135deg gradient from the third, lighter brand color
   (top left) to the second (bottom right), same angle and stops for every
   product.
   In the Fields style the field and the picked row share one gradient fixed
   to the viewport, its stops set by oldnav.js (setGradBox) at the field's
   corners, so the tab carries the field's exact color where they meet; the
   menu opens with a fade only, since a moving transform would detach the
   fixed gradient while it plays.
   ===================================================================== */
html.onav-c-grad .onav [data-pc],
html.onav-c-grad .onav-drawer [data-pc]{--pc-grad:linear-gradient(135deg,var(--pc-bold3),var(--pc-bold))}
html.onav-v2.onav-c-grad .onav-stage .onav-shead{background:var(--pc-grad);border-color:transparent}
html.onav-v2.onav-s-field.onav-c-grad .onav-stage .onav-shead,
html.onav-s-field.onav-c-grad .onav-mega--products .onav-prow[aria-selected="true"]{
  background:linear-gradient(135deg,var(--pc-bold3) var(--g0,0px),var(--pc-bold) var(--g1,100vmax)) fixed;
}
@keyframes onavFadeIn{from{opacity:0}to{opacity:1}}
html.onav-s-field.onav-c-grad .onav-mega--products.is-open{animation-name:onavFadeIn}
html.onav-c-grad .onav-drawer .onav-dprod{background:var(--pc-grad)}