/* easyMeraki — styling that echoes the Meraki dashboard: light gray canvas,
   white cards, the Meraki green as the action color, a dark top nav. */

:root {
  --mk-green: #6cb33f;
  --mk-green-dark: #4e8a2c;
  --mk-green-soft: #eaf5e1;
  --mk-blue: #1795d3;
  --nav: #20303c;
  --nav-2: #2a3e4c;
  --bg: #eef1f3;
  --card: #ffffff;
  --border: #dce1e5;
  --text: #21313d;
  --muted: #6a7a86;
  --danger: #d6336c;
  --warn: #b5711a;
  --warn-bg: #fdf3e3;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(33, 49, 61, 0.06), 0 2px 8px rgba(33, 49, 61, 0.06);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--mk-blue); }

/* ---- top nav ---- */
.nav {
  background: var(--nav);
  background: linear-gradient(180deg, var(--nav-2), var(--nav));
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  box-shadow: var(--shadow);
}
.nav .brand { display: flex; align-items: center; gap: 12px; }
.nav .brand h1 { font-size: 18px; margin: 0; font-weight: 650; letter-spacing: 0.2px; }
.nav .brand h1 .lo { color: var(--mk-green); }
.nav .tag { color: #9db1bf; font-size: 12.5px; margin-left: 2px; }
.nav .spacer { flex: 1; }
.nav .env {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: #9db1bf; border: 1px solid #3c4f5c; border-radius: 20px; padding: 3px 10px;
}

/* Interactive Ineapple logo (source: ineapple-logo/). Sized to the nav bar and
   placed in normal flow — the asset defaults to position:fixed, so we override.
   `overflow: visible` is required: the intro's fly-in lines start outside the
   SVG box and would otherwise be clipped. Colors (#C6C8CC / #F2642B) are tuned
   for this dark nav. */
.brandlogo {
  position: static;
  height: 46px;
  width: auto;
  overflow: visible;
  display: block;
  flex: none;
}

/* ---- layout ---- */
.wrap { max-width: 1000px; margin: 26px auto 60px; padding: 0 20px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.card h2 { margin: 0 0 4px; font-size: 17px; }
.card .sub { color: var(--muted); margin: 0 0 16px; font-size: 13.5px; }
.step { display: flex; align-items: center; gap: 8px; }
.step .n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--mk-green);
  color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

.hero h2 { font-size: 22px; }
.hero .lead { font-size: 15px; color: var(--muted); max-width: 66ch; }
.pill {
  display: inline-block; background: var(--mk-green-soft); color: var(--mk-green-dark);
  border-radius: 20px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px;
}

/* ---- form controls ---- */
label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 5px; }
textarea, input, select {
  font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; width: 100%;
}
textarea {
  min-height: 190px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
textarea:focus, input:focus, select:focus { outline: 2px solid var(--mk-green); border-color: var(--mk-green); }

.controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-top: 16px; }
.controls .field { flex: 0 0 auto; min-width: 150px; }
.controls .field.grow { flex: 1 1 200px; }
.row-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }

button {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; border: 1px solid transparent;
  padding: 10px 18px;
}
.btn-primary { background: var(--mk-green); color: #fff; }
.btn-primary:hover { background: var(--mk-green-dark); }
.btn-primary:disabled { background: #b6c2ca; cursor: not-allowed; }
.btn-ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.link-btn { background: none; border: none; color: var(--mk-blue); padding: 0; font-weight: 600; }

/* ---- chip editor ---- */
.paste { min-height: 120px; }
.tier-controls { display: contents; } /* let tier fields sit in the .controls flex row */
.warn-text { color: var(--warn); }

.chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 4px;
}
/* Chips are grouped under their product line, in the same order the BOM and the
   PDF use, so a long list reads as an estate rather than a pile of SKUs. */
.chip-group { display: flex; flex-direction: column; gap: 6px; }
.chip-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Paste / Browse tabs */
.tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--border); }
.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--mk-green-dark, #1a7a1a); border-bottom-color: currentColor; }

/* Browse catalog: category accordion → models with a count */
.browse-filter {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  margin-bottom: 12px;
}
.browse { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.browse-cat + .browse-cat { border-top: 1px solid var(--border); }
.browse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.browse-head:hover { background: var(--mk-green-soft, #f4faf0); }
.browse-head::before {
  content: '▸';
  margin-right: 8px;
  color: var(--muted);
  transition: transform .12s ease;
}
.browse-cat.open .browse-head::before { transform: rotate(90deg); }
.browse-head > span:first-of-type { flex: 1; }
.browse-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg, #f6f7f8);
  border-radius: 999px;
  padding: 1px 8px;
}
.browse-models { display: none; padding: 4px 0 8px; background: #fbfcfb; }
.browse-cat.open .browse-models { display: block; }
.browse-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 30px;
}
.browse-model { flex: 1; font-size: 13px; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.browse-qty {
  width: 62px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}
.browse-add {
  min-width: 74px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.browse-add:hover { background: var(--mk-green-soft, #f4faf0); border-color: #bfe0a6; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px 4px 6px;
  font-size: 13px;
  background: #fff;
  max-width: 100%;
}
.chip-ok {
  background: var(--mk-green-soft);
  border-color: #bfe0a6;
  color: var(--mk-green-dark);
}
.chip-warn {
  background: var(--warn-bg);
  border-color: #eccf9a;
  color: var(--warn);
}
.chip-review {
  background: #e8f2fb;
  border-color: #b8d8ef;
  color: #1a6aa8;
}
.chip-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.chip-tier { opacity: 0.75; font-size: 11.5px; }
.chip-label { font-weight: 600; }
.chip-qty {
  width: 46px;
  padding: 2px 5px;
  font-size: 12px;
  text-align: right;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
}
/* Hierarchical "Map to…" picker: top level shows CATEGORIES only; hovering
   (or tapping) a category flies out its model list. */
.pick {
  position: relative;
  display: inline-block;
}
.pick-btn {
  padding: 3px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  color: var(--text);
}
.pick-btn::after {
  content: ' ▾';
  color: var(--muted);
}
.pick-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow), 0 8px 24px rgba(33, 49, 61, 0.12);
  padding: 4px;
}
.pick.open .pick-menu {
  display: block;
}
.pick-cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: default;
  white-space: nowrap;
}
.pick-cat::after {
  content: '›';
  color: var(--muted);
}
.pick-cat:hover,
.pick-cat.open {
  background: var(--mk-green-soft);
}
.pick-sub {
  display: none;
  position: absolute;
  top: -5px;
  /* Flush against the category row — any gap breaks hover continuity on the
     way into the flyout. */
  left: 100%;
  z-index: 61;
  min-width: 170px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow), 0 8px 24px rgba(33, 49, 61, 0.12);
  padding: 4px;
}
.pick-cat:hover > .pick-sub,
.pick-cat.open > .pick-sub {
  display: block;
}
/* When the flyout would run off the right edge, open it to the left. */
.pick-cat.flip > .pick-sub {
  left: auto;
  right: 100%;
}
.pick-item {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.pick-item:hover {
  background: var(--mk-green-soft);
  color: var(--mk-green-dark);
}
.pick-custom {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
  color: var(--mk-blue);
}
.pick-custom::after {
  content: '';
}
.chip-x {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  color: inherit;
  opacity: 0.6;
}
.chip-x:hover { opacity: 1; }

/* ---- results ---- */
.hidden { display: none; }
.detected {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  margin-bottom: 14px;
}
.detected b { color: var(--text); }

.bom { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bom th, .bom td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.bom th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.bom td.num, .bom th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bom tr:last-child td { border-bottom: none; }
.bom .sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.bom .desc { color: var(--muted); font-size: 12.5px; }
.bom tr.unmatched { background: var(--warn-bg); }
.tag-eos, .tag-tier, .tag-review {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}
.tag-eos { background: #fbe4ec; color: var(--danger); }
.tag-tier { background: #e5f2fa; color: var(--mk-blue); }
.tag-review { background: var(--warn-bg); color: var(--warn); }

.totals { display: flex; justify-content: flex-end; gap: 26px; margin-top: 14px; align-items: baseline; }
.totals .amt { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.totals .lbl { color: var(--muted); font-size: 13px; }
.bom .list, .totals .list { color: var(--muted); text-decoration: line-through; opacity: 0.8; }
.bom .net, .totals .net { color: var(--mk-green-dark); font-weight: 700; }
.savings { text-align: right; color: var(--mk-green-dark); font-weight: 600; margin: 4px 0 0; }

.flags { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.flags ul { margin: 8px 0 0; padding-left: 20px; }
.flags li { color: var(--warn); font-size: 13px; margin-bottom: 4px; }
.note { color: var(--muted); font-size: 12.5px; }

/* "This is not a Cisco website." Sits directly under the h1 and has to be read
   before the tables, so it is bordered rather than muted — a disclaimer styled
   like fine print is fine print. Not alarm-coloured either: the partner
   relationship is a credential, not a warning. */
.who {
  border: 1px solid var(--border); border-left: 3px solid var(--mk-green);
  border-radius: 8px; padding: 11px 14px; margin: 0 0 14px;
  font-size: 13px; line-height: 1.55; color: var(--text); max-width: 78ch;
}
.who b { font-weight: 650; }

.banner {
  border-radius: 8px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px;
}
.banner.info { background: var(--mk-green-soft); color: var(--mk-green-dark); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.err { background: #fbe4ec; color: var(--danger); }

/* ---- contact + checkout ---- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
@media (max-width: 620px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .controls .field { flex: 1 1 100%; }
}
.req { color: var(--danger); }

.checkout-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.checkout-opts.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .checkout-opts, .checkout-opts.two { grid-template-columns: 1fr; } }
.opt {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex;
  flex-direction: column; gap: 8px;
}
.opt h3 { margin: 0; font-size: 14.5px; }
.opt p { margin: 0; color: var(--muted); font-size: 12.5px; flex: 1; }
.mock-badge {
  align-self: flex-start; background: #eef1f3; color: var(--muted); font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 4px;
}

footer { text-align: center; color: var(--muted); font-size: 12px; padding: 8px 0 30px; }
footer code { font-family: ui-monospace, Menlo, monospace; }

/* Company / address type-ahead (Cisco Customer Registry match). A company with
   several sites shows as name → addresses, reusing the picker's flyout. */
.party-cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  cursor: default;
  border-bottom: 1px solid #f0f2f4;
}
.party-cat:last-child { border-bottom: 0; }
.party-cat::after { content: '›'; color: var(--mut, #6b7a86); }
.party-cat:hover, .party-cat.open { background: #f5f8fa; }
.party-cat b { display: block; font-size: 13px; }
.party-cat em { font-style: normal; font-size: 12px; color: var(--mut, #6b7a86); }
.party-sub {
  display: none;
  position: absolute;
  top: -5px;
  left: 100%;            /* flush, so hover survives the trip into the flyout */
  z-index: 61;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line, #e3e8ec);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(33, 49, 61, 0.12);
  padding: 4px;
}
.party-cat:hover > .party-sub, .party-cat.open > .party-sub { display: block; }
.party-cat.flip > .party-sub { left: auto; right: 100%; }

/* Company type-ahead (Cisco Customer Registry match). */
.party-suggest {
  position: absolute; z-index: 20; margin-top: 2px;
  background: #fff; border: 1px solid var(--line, #e3e8ec); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); min-width: 320px; max-width: 460px;
  /* NOT overflow:hidden — the locations flyout escapes this box to the right,
     and clipping it made the second level invisible. Corners are rounded on
     the first/last rows instead. */
  overflow: visible;
}
.party-suggest > :first-child { border-radius: 8px 8px 0 0; }
.party-suggest > :last-child { border-radius: 0 0 8px 8px; }
.party-suggest > :only-child { border-radius: 8px; }
.party-opt {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 12px; cursor: pointer; font: inherit; border-bottom: 1px solid #f0f2f4;
}
.party-opt:last-child { border-bottom: 0; }
.party-opt:hover { background: #f5f8fa; }
.party-opt b { display: block; font-size: 13px; }
.party-opt span { display: block; font-size: 12px; color: var(--mut, #6b7a86); margin-top: 1px; }

/* Parties on a quote: company, requester, signer. A definition list because
   that is what it is — labels and values, not a table. */
.parties {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: var(--bg, #f6f7f8);
  border-radius: 10px;
  font-size: 13px;
}
.parties dt { color: var(--muted); font-weight: 600; }
.parties dd { margin: 0; }
.parties a { color: inherit; }
.parties .mut { color: var(--muted); }
@media (max-width: 560px) {
  /* Stack on a phone: two columns squeezes an email into three lines. */
  .parties { grid-template-columns: 1fr; gap: 2px; }
  .parties dt { margin-top: 6px; }
}

/* ---- public catalogue pages (/renew, /renew/:sku) ------------------------
   Server-rendered, so they reuse the app's card/table styles and only add the
   few pieces the SPA never needed: a plain nav, a footer, and an FAQ list. */
.brand-link { color: inherit; text-decoration: none; font-size: 18px; }
.brand-link .brand-accent { color: var(--mk-green, #6cbf3f); }
.nav-right { margin-left: auto; }
.nav-right .btn-ghost { text-decoration: none; }
.foot {
  max-width: 1040px;
  margin: 28px auto 48px;
  padding: 0 20px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.foot a { color: var(--muted); }
.faq { margin: 0; }
.faq dt { font-weight: 600; margin-top: 14px; }
.faq dd { margin: 4px 0 0; color: var(--muted); }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.plain li:last-child { border-bottom: 0; }
/* On a SKU page the table is a spec sheet: labels left, values right. */
.card .bom th { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap; }
.card h1 { font-size: 26px; margin: 6px 0 10px; }
/* The box belongs to the CLASS, not the element. It lived on `button` alone,
   so an <a class="btn-primary"> — every call-to-action on the server-rendered
   pages — rendered as a bare green text highlight: no padding, no radius, and
   ghost links had no border at all. */
a.btn-primary, a.btn-ghost {
  display: inline-block; text-decoration: none;
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 8px; border: 1px solid transparent;
  padding: 10px 18px;
}
/* a.btn-ghost outweighs .btn-ghost, so the shorthand above would erase the
   ghost border — restate it at the same specificity. */
a.btn-ghost { border-color: var(--border); }

/* ---- license tier matrix -------------------------------------------------
   A comparison table has to survive a phone, so it scrolls inside its own box
   rather than forcing the page sideways. */
.tier-matrix { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 14px; display: block; overflow-x: auto; }
.tier-matrix th, .tier-matrix td { border-bottom: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.tier-matrix thead th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tier-matrix tbody th { font-weight: 400; min-width: 260px; }
.tier-matrix .group th { background: var(--bg, #f6f7f8); font-weight: 700; font-size: 12px; }
.tier-matrix .pitch td { color: var(--muted); font-style: italic; }
.tier-matrix .mark { text-align: center; width: 92px; font-size: 15px; }
/* The edition the reader is actually looking at. */
.tier-matrix .is-this { background: var(--mk-green-soft, #f4faf0); }
.tier-matrix thead .is-this { color: var(--text); }
.tag-this {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mk-green-dark, #2e7d1a);
}
.tier-rules { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.tier-rules li { padding: 3px 0; border-bottom: 0; }
.tier-rules li::before { content: '· '; }

/* A quiet link under a field, for the decision the field is asking about. */
.field-help { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.field-help:hover { color: var(--text); }

/* ---- help video modal ---------------------------------------------------- */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.help-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--mk-blue);
  cursor: pointer;
}
.help-link:hover { text-decoration: underline; }
.help-link .mut { color: var(--muted); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 27, 35, .55);
}
.modal.hidden { display: none; }
.modal-card {
  background: #fff;
  border-radius: 14px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 18px 20px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h3 { margin: 0 0 6px; font-size: 17px; }
.modal-x {
  appearance: none; background: none; border: 0; padding: 0 4px;
  font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer;
}
.modal-x:hover { color: var(--text); }
.help-steps { margin: 6px 0 14px; padding-left: 20px; font-size: 14px; }
.help-steps li { padding: 2px 0; }
/* The recording is a wide desktop capture; let it scale rather than crop. */
.help-video { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }

/* Quotes this browser has opened — a way back in without the email. */
.recent-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.recent-row:last-child { border-bottom: 0; }
.recent-row > a { flex: 1; text-decoration: none; color: inherit; }
.recent-row > a:hover b { text-decoration: underline; }
.recent-row b { display: block; font-size: 14px; }
.recent-row .mut { color: var(--muted); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   Licenses menu (public/catalog-menu.js)

   Three columns filling in left to right, so the path you took stays visible:
   product line → model → license and term. Below 860px there is no room for
   that, so the same panel becomes a drill-down — one column at a time with a
   back button — rather than three columns crushed to nothing.
   -------------------------------------------------------------------------- */
.brand-home {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.brand-home:hover h1 { text-decoration: underline; text-underline-offset: 3px; }
.brand-home:focus-visible { outline: 2px solid var(--mk-green); outline-offset: 4px; }

/* An author `display:` beats the UA rule for [hidden], so the panel, the back
   button and the results list would all stay on screen while "hidden". */
[hidden] { display: none !important; }

/* The panel hangs off the NAV, not off the button. Anchored to the button it
   is right-aligned to something ~120px in from the edge, so a 980px panel runs
   off the left of a 1000px window — which it did. */
.nav { position: relative; }
.menu-wrap { position: static; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: #dbe6ee;
  border: 1px solid #3c4f5c; border-radius: 8px;
  padding: 7px 12px; font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.menu-btn:hover { background: #223440; border-color: #55707f; color: #fff; }
.menu-btn[aria-expanded='true'] { background: #223440; border-color: var(--mk-green); color: #fff; }
.menu-btn .menu-i { flex: none; opacity: 0.85; }
.menu-caret { font-size: 10px; opacity: 0.7; }

.menu-panel {
  position: absolute; top: calc(100% + 8px); right: 20px; z-index: 60;
  width: min(980px, calc(100vw - 40px));
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(16, 34, 48, 0.28);
  overflow: hidden;
}
.menu-head { padding: 12px 14px; border-bottom: 1px solid var(--border); background: #f6f9fb; }
.menu-search {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.menu-search:focus { outline: none; border-color: var(--mk-green); box-shadow: 0 0 0 3px rgba(108, 191, 63, 0.18); }
.menu-quick { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font-size: 13px; }
.menu-quick a { color: var(--mk-blue); text-decoration: none; }
.menu-quick a:hover { text-decoration: underline; }

.menu-back {
  display: none; width: 100%; text-align: left;
  padding: 10px 14px; font: inherit; font-size: 13.5px;
  background: #fff; color: var(--mk-blue); border: 0; border-bottom: 1px solid var(--border); cursor: pointer;
}

.menu-cols { display: grid; grid-template-columns: 1.05fr 1fr 1.5fr; }
.menu-col { border-right: 1px solid var(--border); min-width: 0; }
.menu-col:last-child { border-right: 0; }
.menu-col h3 {
  margin: 0; padding: 10px 14px 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--muted); font-weight: 650;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-col ul, .menu-results ul { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow-y: auto; }
.menu-col li, .menu-results li { margin: 0; }
.menu-col button:not(.menu-add), .menu-col a, .menu-results a {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 0; border-radius: 7px;
  background: transparent; font: inherit; font-size: 13.5px; color: var(--text);
  text-align: left; text-decoration: none; cursor: pointer;
}
.menu-col button:not(.menu-add):hover, .menu-col a:hover, .menu-results a:hover { background: #eef4f8; }
.menu-col button.is-open { background: #e5f2fa; color: var(--mk-blue); font-weight: 600; }
.menu-col button > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-col code, .menu-results code { font-size: 12.5px; color: var(--text); flex: none; }
.menu-meta { flex: 1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-price { font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.menu-empty { padding: 14px; font-size: 13px; color: var(--muted); }
.menu-empty a { color: var(--mk-blue); }
.menu-foot {
  margin: 0; padding: 9px 14px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border); background: #f6f9fb;
}

@media (max-width: 860px) {
  .menu-panel { position: fixed; left: 12px; right: 12px; width: auto; }
  .menu-back { display: block; }
  .menu-cols { display: block; }
  .menu-col { display: none; border-right: 0; }
  .menu-cols[data-level='0'] .menu-col[data-level='0'],
  .menu-cols[data-level='1'] .menu-col[data-level='1'],
  .menu-cols[data-level='2'] .menu-col[data-level='2'] { display: block; }
  .menu-col ul, .menu-results ul { max-height: 58vh; }
  .nav .tag { display: none; }
}

/* Adding the Licenses button pushed the nav past the width of a phone: brand +
   button + status pill totalled ~436px in a 375px bar, so the pill hung off the
   end of the dark background. The pill is the least load-bearing of the three —
   the quote page states its status in the page itself — so it is what goes. */
@media (max-width: 560px) {
  .nav { padding: 0 12px; gap: 10px; }
  .nav .env { display: none; }
  .nav .brand h1 { font-size: 16px; }
  .brandlogo { height: 38px; }
}

/* --------------------------------------------------------------------------
   Shared nav (built by src/lib/nav.ts, injected into every page)

   The brand name is no longer an <h1>: the nav is on every page, and the h1
   belongs to whatever that page is about. Sizes below preserve exactly what the
   old markup looked like — the change was semantic, not visual.
   -------------------------------------------------------------------------- */
.nav .brandname {
  display: block;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.nav .brandname .lo { color: var(--mk-green); }
.nav .brandname .tag { display: block; margin-left: 0; font-weight: 400; }

/* Reserved before the SVG arrives, so the bar does not jump. The ratio is the
   logo's own viewBox (887.793 x 676.111) at nav height. */
.brandlogo-mount { display: block; width: 60px; height: 46px; flex: none; }
.brandlogo-flat { height: 34px; width: auto; display: block; }

/* The nav is dark; .btn-ghost is a white card button and looked pasted on when
   "Get a quote" borrowed it. Nav controls share one treatment instead. */
.btn-nav {
  display: inline-flex; align-items: center;
  background: transparent; color: #dbe6ee;
  border: 1px solid #3c4f5c; border-radius: 8px;
  padding: 7px 12px; font-size: 13.5px; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-nav:hover { background: #223440; border-color: #55707f; color: #fff; }
.nav-right { display: flex; align-items: center; gap: 10px; }

/* Headings promoted to h1 when the brand vacated the nav. They keep the size
   they already had. */
.hero h1 { font-size: 22px; margin: 0 0 4px; }
.step h1, .card h1#quote-title { font-size: 17px; margin: 0 0 4px; }

@media (max-width: 560px) {
  .brandlogo-mount { width: 50px; height: 38px; }
  .nav .brandname { font-size: 16px; }
  /* Beats `.nav .brandname .tag { display: block }` — that rule is more
     specific than the `.nav .tag` hide at 860px, so without this the tagline
     stays on a phone. A one-line strapline was survivable; the full "an
     independent reference by Ineapple Corp., a Cisco partner" wraps to four
     lines and shoves the buttons out of the bar. The disclaimer under the h1
     carries that message on every screen anyway. */
  .nav .brandname .tag { display: none; }
}

/* ---- billing address on the card page ----
   Its own block because it is doing two jobs the buyer should see: it is
   checked against the card (AVS) and it is what the sales tax is computed
   from. Hiding it behind "same as quote" for the common case keeps checkout
   short without hiding that it matters. */
.bill {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 4px;
  margin: 14px 0 4px;
}
.bill legend { font-size: 12.5px; color: var(--muted); padding: 0 6px; }
.bill .check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; margin-bottom: 10px; cursor: pointer;
}
.bill .check input { width: auto; margin: 0; }
.bill .note { margin: 2px 0 10px; }

/* ---- "Talk to an expert" consultation popover ----
   The nav button opens a small panel — desktop: anchored top-right under the
   bar; mobile: a bottom sheet. Availability comes from Microsoft Bookings via
   our API; this is only the picker and a three-field form. */
.btn-consult { cursor: pointer; font: inherit; font-size: 13.5px; white-space: nowrap; }
.consult-label-short { display: none; }
@media (max-width: 560px) {
  .btn-consult { font-size: 12.5px; padding: 6px 8px; }
  .consult-label-full { display: none; }
  .consult-label-short { display: inline; }
}

.consult-pop { position: fixed; inset: 0; z-index: 60; }
.consult-overlay { position: absolute; inset: 0; background: rgba(33, 49, 61, 0.25); }
.consult-card {
  position: absolute; top: 64px; right: 16px;
  width: 372px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 90px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 30px rgba(33, 49, 61, 0.22);
}
@media (max-width: 560px) {
  .consult-card {
    top: auto; right: 0; left: 0; bottom: 0; width: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 82vh;
  }
}

.consult-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
}
.consult-title { font-size: 15.5px; font-weight: 600; }
.consult-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.consult-x {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 2px;
}
.consult-x:hover { color: var(--text); }

.consult-body { padding: 12px 16px 16px; overflow-y: auto; }
.consult-msg { font-size: 13.5px; color: var(--text); margin: 8px 0; }
.consult-alt { color: var(--muted); font-size: 12.5px; }

.consult-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.consult-day {
  flex: none; font: inherit; font-size: 12.5px; cursor: pointer;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
}
.consult-day.sel { background: var(--mk-green-soft); border-color: var(--mk-green); font-weight: 600; }

.consult-times {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px;
}
.consult-time {
  font: inherit; font-size: 13px; cursor: pointer;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 2px;
}
.consult-time:hover, .consult-day:hover { border-color: var(--mk-green); }
.consult-time.sel { background: var(--mk-green); border-color: var(--mk-green); color: #fff; }
.consult-tz { font-size: 11.5px; color: var(--muted); margin-top: 10px; }

.consult-when { font-size: 13.5px; font-weight: 600; margin: 4px 0 10px; }
.consult-change {
  background: none; border: none; color: var(--mk-blue); cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 0;
}
.consult-form label { display: block; margin-bottom: 10px; }
.consult-form label span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.consult-form input, .consult-form textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--card);
}
.consult-form textarea { min-height: 64px; resize: vertical; }
.consult-form input:focus, .consult-form textarea:focus {
  outline: none; border-color: var(--mk-green);
  box-shadow: 0 0 0 3px var(--mk-green-soft);
}
.consult-book { width: 100%; margin-top: 4px; }
.consult-retry { margin: 4px 0 8px; }
.consult-err { color: var(--danger); font-size: 13px; margin: 6px 0; }
.consult-check {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--mk-green-soft); color: var(--mk-green-dark);
  font-size: 24px; display: flex; align-items: center; justify-content: center;
  margin: 8px auto 6px;
}
.consult-done { text-align: center; }

/* Zone picker in the consult popover: quiet by default — most visitors never
   need it because the detected zone is right — but present for anyone booking
   on someone else's behalf. */
.consult-tz-select {
  font: inherit; font-size: 11.5px; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 4px; background: #fff; max-width: 240px;
}

/* ---- EOL matrix (/renew/eol) ---- */
.eol-scroll { overflow-x: auto; }
.eol .eol-prod { font-weight: 600; max-width: 300px; }
/* One item per line. Compact part numbers never break mid-token — split
   across lines they read like two different SKUs — while prose segments
   (.eol-wrap) wrap normally so a handful of wordy rows can never push the
   whole table past the viewport. Dates stay whole; they are short. */
.eol .eol-line { display: block; white-space: nowrap; }
.eol .eol-line.eol-wrap { white-space: normal; overflow-wrap: anywhere; }
.eol .eol-date { white-space: nowrap; }
.eol-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.eol-dead { background: #fbe4ec; color: var(--danger); }
.eol-orderable { background: var(--mk-green-soft); color: var(--mk-green-dark); }
.eol-supported { background: #e5f2fa; color: var(--mk-blue); }
.eol .eol-models { line-height: 2; }
.eol-chip {
  display: inline-block; margin: 1px 4px 1px 0; padding: 1px 8px;
  background: var(--mk-green-soft); color: var(--mk-green-dark);
  border-radius: 10px; font-size: 12px; white-space: nowrap;
}

/* Jump navigation on the EOL page: plain anchors, so it works without any
   script and a crawler reads it as the table of contents it is. */
.eol-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.eol-jump a {
  display: inline-block; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: 16px;
  font-size: 12.5px; color: var(--text); text-decoration: none; background: #fff;
}
.eol-jump a:hover { border-color: var(--mk-blue); color: var(--mk-blue); }
.eol-jump .eol-jump-good { background: var(--mk-green-soft); color: var(--mk-green-dark); border-color: var(--mk-green-soft); }
html { scroll-behavior: smooth; }
.eol .card, section.card[id] { scroll-margin-top: 16px; }
.eol-filter {
  width: 100%; box-sizing: border-box; margin-top: 12px;
  padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.eol-filter:focus { outline: none; border-color: var(--mk-green); box-shadow: 0 0 0 3px rgba(108, 179, 63, 0.18); }

/* Quick-add in the Licenses menu.

   The button sits OUT of the row's flow (absolute, right edge) — inline it
   widened every row even while invisible, pushing prices off the end and
   growing a horizontal scrollbar. On hover-capable devices it appears in the
   price's spot (the price yields); on touch it sits inline after the price,
   always visible, with row padding making room. */
.menu-col a, .menu-results a { position: relative; }
.menu-add {
  width: auto; padding: 2px 10px;
  font: inherit; font-size: 12px; font-weight: 600;
  background: var(--mk-green); color: #fff;
  border: 0; border-radius: 12px; cursor: pointer;
  /* In the empty space BEFORE the price: offset past the widest price this
     menu renders, so it never covers the number it is offering to add. */
  position: absolute; right: 96px; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity 0.12s;
}
.menu-add:hover { background: var(--mk-green-dark); }
.menu-add:disabled { cursor: default; }
.menu-add.is-added { background: var(--mk-green-soft); color: var(--mk-green-dark); }

@media (hover: hover) {
  .menu-col a:hover .menu-add, .menu-results a:hover .menu-add,
  .menu-add:focus-visible, .menu-add.is-added { opacity: 1; }
}

@media (hover: none) {
  /* No hover to reveal on: always visible, at the right edge, with row
     padding making room — narrow touch columns have no gap before the price
     to borrow. Still out of the flow. */
  .menu-add { opacity: 1; right: 6px; }
  .menu-col a, .menu-results a { padding-right: 74px; }
}