/* chrome.css (2026-10-18) - the one navigation, footer, phone bottom bar
   and "Talk to us" block every page shares (conversion audit, canvas
   7wFzsEMyQZpP8i8DBNc2Do). Loaded after each page's own <style>, and it
   only reads the colour/type tokens every page already defines (--dark,
   --cream, --gold, --gold-light, --gold-rgb, --text-rgb, --border, --ink,
   --font-display, --font-body), so dark and light both follow the page.
   Markup comes from the injector (scratchpad apply_chrome.js) between
   <!-- pc:* --> markers; behaviour is chrome.js.
   2026-10-18 evening: top bar = Host menu, Pricing, Sign in, Start free;
   compare / guides / partners sit in .pc-menu-more; the theme toggle is in
   the footer's .pc-legal row. */

/* ---- navigation -------------------------------------------------------- */
nav.pc-nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1rem 2.5rem; margin: 0;
  background: var(--dark); border-bottom: 1px solid var(--border);
  font-family: var(--font-body); box-sizing: border-box; width: 100%;
  justify-content: flex-start;
}
nav.pc-nav a { text-decoration: none; }
.pc-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream);
  white-space: nowrap;
}
.pc-brand img { width: 34px; height: 34px; object-fit: contain; }
.pc-brand em { color: var(--gold); font-style: normal; }
.pc-links { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.pc-links > a, .pc-host > summary, .pc-signin {
  color: rgba(var(--text-rgb), 0.72); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.pc-links > a:hover, .pc-host > summary:hover, .pc-signin:hover { color: var(--cream); }
.pc-links > a[aria-current="page"], .pc-host.pc-active > summary { color: var(--gold); }
.pc-host { position: static; }
/* display:flex, not inline-flex: an inline summary sat on the <details>
   element's own 16px line box and rode ~1.7px below Pricing / Sign in. */
.pc-host > summary { list-style: none; display: flex; align-items: center; gap: 0.4rem; }
.pc-host > summary::-webkit-details-marker { display: none; }
.pc-host > summary svg { width: 10px; height: 10px; transition: transform 0.2s ease; }
.pc-host[open] > summary { color: var(--gold); }
.pc-host[open] > summary svg { transform: rotate(180deg); }
.pc-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr);
  padding: 1.6rem 2.5rem 1.8rem; background: var(--dark);
  border-bottom: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.pc-menu > a { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.2rem 1.4rem; border-right: 1px solid var(--border); }
.pc-menu > a:first-child { padding-left: 0; }
.pc-menu > a strong { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--cream); letter-spacing: 0; text-transform: none; }
.pc-menu > a span { font-size: 0.82rem; line-height: 1.55; color: rgba(var(--text-rgb), 0.68); letter-spacing: 0; text-transform: none; }
.pc-menu > a:hover strong, .pc-menu > a[aria-current="page"] strong { color: var(--gold); }
.pc-menu-note { padding: 0.2rem 0 0.2rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.pc-menu-note .k { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.pc-menu-note p { margin: 0; font-size: 0.82rem; line-height: 1.55; color: rgba(var(--text-rgb), 0.8); }
.pc-menu-note a { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
/* The quieter host links (compare, guides, partners) under the four doors. */
.pc-menu-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.pc-menu-more a { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: rgba(var(--text-rgb), 0.72); }
.pc-menu-more a:hover, .pc-menu-more a[aria-current="page"] { color: var(--gold); }
.pc-menu-more a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.pc-right { display: flex; align-items: center; gap: 1.1rem; }
.pc-cta {
  background: var(--gold); color: var(--ink) !important; border: 1px solid var(--gold); border-radius: 2px;
  padding: 0.7rem 1.1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
.pc-cta:hover { background: var(--gold-light); border-color: var(--gold-light); }
.pc-cta .pc-short { display: none; }
.pc-cta:focus-visible, .pc-links a:focus-visible, .pc-host > summary:focus-visible, .pc-burger > summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.pc-burger { display: none; }
.pc-burger > summary {
  list-style: none; width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid rgba(var(--gold-rgb), 0.45); color: var(--cream);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pc-burger > summary::-webkit-details-marker { display: none; }
.pc-burger > summary svg { width: 18px; height: 18px; }
.pc-burger .pc-x { display: none; }
.pc-burger[open] .pc-x { display: block; }
.pc-burger[open] .pc-lines { display: none; }
/* A closed menu stays out of the layout (a closed <details> still lays its
   content out in some engines, which pushed phone pages wider). */
.pc-burger:not([open]) .pc-drawer, .pc-host:not([open]) .pc-menu { display: none; }
.pc-drawer {
  position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 70px); overflow-y: auto;
  background: var(--dark); border-bottom: 1px solid var(--border); padding: 1.2rem 1.25rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.2rem; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.pc-drawer .k { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--text-rgb), 0.55); padding: 0 0 0.3rem; }
.pc-drawer .big { font-family: var(--font-display); font-size: 1.35rem; color: var(--cream); padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.pc-drawer .row { display: flex; flex-wrap: wrap; gap: 1.2rem; padding: 1rem 0 0.4rem; }
.pc-drawer .row a { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); padding: 0.4rem 0; }
.pc-drawer .pc-cta { text-align: center; padding: 1rem; margin-top: 0.8rem; font-size: 0.75rem; }
.pc-drawer .pc-ghost { text-align: center; padding: 0.9rem; margin-top: 0.5rem; border: 1px solid rgba(var(--gold-rgb), 0.5); border-radius: 2px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

@media (max-width: 980px) {
  nav.pc-nav { padding: 0.8rem 1rem; gap: 0.7rem; }
  .pc-links, .pc-signin { display: none; }
  .pc-right { margin-left: auto; gap: 0.6rem; }
  .pc-burger { display: block; }
  .pc-cta { padding: 0.65rem 0.8rem; font-size: 0.64rem; letter-spacing: 0.12em; }
  .pc-cta .pc-long { display: none; }
  .pc-cta .pc-short { display: inline; }
  .pc-brand { font-size: 1.05rem; }
  .pc-brand img { width: 28px; height: 28px; }
}
@media (max-width: 370px) { .pc-brand span.pc-word { display: none; } }

/* ---- footer ------------------------------------------------------------- */
footer.pc-foot {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2rem;
  padding: 3rem 2.5rem 2rem; margin: 0; border-top: 1px solid var(--border);
  background: var(--dark); font-family: var(--font-body); box-sizing: border-box; width: 100%;
  text-align: left;
}
.pc-foot a { color: rgba(var(--text-rgb), 0.78); text-decoration: none; font-size: 0.88rem; letter-spacing: 0; text-transform: none; }
.pc-foot a:hover { color: var(--gold); }
.pc-foot .pc-col { display: flex; flex-direction: column; gap: 0.65rem; }
.pc-foot .pc-col .k { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem; }
.pc-foot .pc-about p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: rgba(var(--text-rgb), 0.68); max-width: 22rem; }
.pc-foot .pc-about .pc-cta { align-self: flex-start; margin-top: 0.4rem; font-size: 0.66rem; }
.pc-foot .pc-legal { grid-column: 1 / -1; margin: 0.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: 0.75rem; line-height: 1.6; color: rgba(var(--text-rgb), 0.5); display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem; flex-wrap: wrap; }
.pc-foot .pc-legal p { margin: 0; }
.pc-foot .pc-legal a { font-size: 0.75rem; }
/* The light/dark switch lives here now (2026-10-18), out of the top bar. */
.pc-foot .pc-theme { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(var(--text-rgb), 0.6); white-space: nowrap; }
/* The brand mark and the button keep their own look inside the footer. */
.pc-foot a.pc-brand { font-size: 1.15rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); }
.pc-foot a.pc-cta { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink) !important; }
.pc-foot a.pc-cta:hover { color: var(--ink) !important; }
@media (max-width: 860px) {
  footer.pc-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2.4rem 1.25rem 6.5rem; }
  .pc-foot .pc-about { grid-column: 1 / -1; }
}

/* ---- phone bottom bar (host pages) --------------------------------------- */
.pc-bar { display: none; }
@media (max-width: 760px) {
  .pc-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0.5rem;
    padding: 0.6rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--dark); border-top: 1px solid var(--border);
    transform: translateY(110%); transition: transform 0.25s ease;
    font-family: var(--font-body); box-sizing: border-box;
  }
  .pc-bar.pc-on { transform: translateY(0); }
  .pc-bar a { text-align: center; text-decoration: none; padding: 0.85rem 0.4rem; border-radius: 2px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .pc-bar .pc-cta { padding: 0.85rem 0.4rem; font-size: 0.66rem; }
  .pc-bar .pc-ghost { border: 1px solid rgba(var(--gold-rgb), 0.5); color: var(--gold); font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) { .pc-bar { transition: none; } }

/* ---- "Talk to us" block (pages that had none) ----------------------------- */
.pc-lead { margin: 4.5rem 0 0; border: 1px solid rgba(var(--gold-rgb), 0.5); border-radius: 8px; background: rgba(var(--gold-rgb), 0.05); padding: 2.2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.4rem; align-items: start; font-family: var(--font-body); }
.pc-lead .k { margin: 0; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.pc-lead h2 { margin: 0.6rem 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; color: var(--cream); }
.pc-lead h2 em { color: var(--gold); font-style: italic; }
.pc-lead p.sub { margin: 0.8rem 0 0; font-size: 0.92rem; line-height: 1.7; color: rgba(var(--text-rgb), 0.72); }
.pc-lead p.sub a { color: var(--gold); }
.pc-lead form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; }
.pc-lead label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--text-rgb), 0.6); }
.pc-lead label.full, .pc-lead .full { grid-column: 1 / -1; }
.pc-lead input, .pc-lead select { height: 46px; box-sizing: border-box; border: 1px solid rgba(var(--gold-rgb), 0.4); border-radius: 3px; background: var(--dark); color: var(--cream); padding: 0 0.8rem; font: inherit; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.pc-lead input:focus, .pc-lead select:focus { outline: none; border-color: var(--gold); }
.pc-lead .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pc-lead button { height: 50px; border: 0; border-radius: 2px; background: var(--gold); color: var(--ink); font: inherit; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.pc-lead button:hover { background: var(--gold-light); }
.pc-lead button:disabled { opacity: 0.6; cursor: default; }
.pc-lead .msg { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: 0.85rem; color: var(--gold); }
.pc-lead .msg.err { color: #d98f78; }
@media (max-width: 760px) {
  .pc-lead { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.4rem; }
  .pc-lead form { grid-template-columns: 1fr; }
}