/* Mobile/tablet menu for every skin (nav.js). Logo left, hamburger right INSIDE
   the header bar; on <=900px the skin's inline nav + header CTA move into a
   drop-down panel under the header. Loaded before each skin's CSS, hence the
   !importants on the rules that must beat skin-specific header styles. */
brand-word{display:inline;white-space:nowrap}
.mnav-btn,.mnav-overlay{display:none}

@media(max-width:900px){
  .g-nav,.s-nav,.m-nav,.u-nav,.st-nav,.p-side{display:none !important}
  .g-header .g-cta,.s-header .s-cta,.p-topbar .p-top-cta{display:none !important}
  .g-header .g-bar,.s-header,.m-header>div,.u-header>div,.st-header,.p-topbar{
    display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:12px}
  .g-brand,.s-brand,.m-brand,.u-brand,.st-brand,.p-brand-sm{
    min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .mnav-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;flex:none;
    margin-left:auto;width:44px;height:44px;padding:0 11px;box-sizing:border-box;cursor:pointer;
    background:transparent;border:1.5px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:10px}
  .mnav-btn span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;
    transition:transform .22s,opacity .18s}
  .mnav-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mnav-btn.is-open span:nth-child(2){opacity:0}
  .mnav-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mnav-overlay{display:block;position:fixed;left:0;right:0;bottom:0;top:60px;z-index:1090;
    background:rgba(10,10,16,.45);opacity:0;pointer-events:none;transition:opacity .2s}
  .mnav-overlay.is-open{opacity:1;pointer-events:auto}
  .mnav-panel{background:#fff;max-height:calc(100% - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:6px 0 18px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);transform:translateY(-8px);transition:transform .2s;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .mnav-overlay.is-open .mnav-panel{transform:none}
  .mnav-panel a{display:block;padding:14px 22px;color:#1c1f26 !important;font-size:16px;font-weight:600;
    text-decoration:none !important;border-bottom:1px solid #eef0f3;background:none}
  .mnav-panel a:hover{background:#f6f7f9}
  .mnav-panel a.mnav-cta{margin:16px 22px 0;padding:14px 18px;border:0;border-radius:10px;text-align:center;
    color:var(--mnav-c-ink,#fff) !important;background:var(--mnav-c,#222)}
  html.mnav-lock{overflow:hidden}
}

/* Phones: flatten the card-inside-a-card hero so the tool gets the width. */
@media(max-width:600px){
  .hero{padding:22px 16px !important;border-radius:14px !important}
  .hero .cv-widget{padding:6px !important}
  .hero .cv-drop{padding:26px 14px !important}
}

/* ---- Global breadcrumb fix: current (non-link) crumb must stay readable ----
   Skins style `.crumbs` / `.crumbs span` in a faint colour for separators; the
   current-page label shares that markup and became near-invisible (UAT). Force
   the tagged `.cur` segment to the skin's primary ink colour. !important because
   per-skin `body.skin-x .crumbs span` rules load after this file. */
.crumbs .cur{color:var(--ink,#1a1a1a)!important;font-weight:600}

/* ---- Tool option controls (e.g. JPG resizer target size). Skin-neutral. ---- */
.cv-options{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:14px 0 4px}
.cv-opt{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;text-align:left}
.cv-opt-label{opacity:.75;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.cv-opt-select{font:inherit;font-size:14px;font-weight:600;padding:8px 12px;border-radius:8px;
  border:1px solid var(--line2,rgba(128,128,128,.4));background:var(--card,#fff);color:var(--ink,inherit);cursor:pointer}
.cv-opt-select:focus{outline:2px solid var(--c,#2563eb);border-color:var(--c,#2563eb)}