/* Sellva — shared navbar styles. Single source, rendered by /assets/nav.js. */
/* The navbar is a full-width bar, not a floating pill: it spans the viewport
   edge to edge and is separated from the page by a hairline rather than a
   shadow. The inner row is what stays aligned with the page's content. */
#site-nav { display: block; min-height: 68px; position: sticky; top: 0; z-index: 100; }
.nav-wrapper {
      display: flex;
      justify-content: center;
      padding: 0;
      background: #ffffff;
      border-bottom: 1px solid rgba(16,24,40,0.09);
      box-shadow: 0 1px 2px rgba(16,24,40,0.03);
    }
.nav {
      display: flex;
      align-items: center;
      gap: 0;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      padding: 0 2.5rem;
      height: 68px;
      width: 100%;
      max-width: 1600px;
      border: 0;
      overflow: visible;
    }
/* The links sit next to the wordmark rather than filling the bar, so the
   right-hand actions stay a distinct group at this width. */
.nav-logo { margin-right: 30px; }
.nav-links { gap: 6px; }
.nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
      margin-right: 4px;
    }
.nav-logo-text {
      font: 700 17.5px/1 Poppins, sans-serif;
      color: #101828;
      letter-spacing: -0.4px;
    }
.nav-logo-img { display: none; }
.nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: none;
      margin-right: auto;
    }
.nav-menu { display: contents; }
.nav-btn {
      appearance: none;
      border: 0;
      background: transparent;
      color: #374151;
      font: 500 13.5px/1 Inter, system-ui, sans-serif;
      padding: 7px 11px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.13s, color 0.13s, box-shadow 0.13s;
      white-space: nowrap;
      text-decoration: none;
    }
/* Hover is a white pill lifted by a soft shadow (Guilherme, 31 Oct: white,
   not green). The bar is white too, so the shadow is what shows it. */
.nav-btn:hover { background: #FFFFFF; color: #101828; box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 4px 14px rgba(16,24,40,0.09); }
.nav-chevron { font-size: 9px; transition: transform 0.15s; opacity: 0.6; }
.nav-dd {
      position: relative;
    }
.nav-dd.open .nav-chevron { transform: rotate(180deg); }
.nav-dd-panel {
      display: none;
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.14);
      border: 1px solid rgba(0,0,0,0.07);
      padding: 8px;
      z-index: 300;
    }
.nav-dd.open .nav-dd-panel { display: block; }
.nav-dd-panel.features-panel {
      width: 560px;
      left: 0;
      transform: none;
      padding: 16px 16px 0;
    }
.nav-dd-panel a:hover { background: #F6F7F2; color: #3F7D4E; }
.nav-dd-panel.resources-panel {
      width: 660px;
      max-width: calc(100vw - 32px);
      left: 50%;
      transform: translateX(-50%);
      padding: 16px;
    }
.nav-dd.open .nav-dd-panel.resources-panel { display: block; }
/* Solution > By role (23 Oct 2026): one column of the five teams, then a
   link to the whole page. Under its button, not centred, so it never runs
   into the logo. */
.nav-dd-panel.solution-panel {
      width: 280px;
      left: 0;
      transform: none;
      padding: 12px;
    }
.solution-all {
      display: block;
      margin: 6px 0 0;
      padding: 10px 10px 4px;
      border-top: 1px solid rgba(15,23,42,0.08);
      font: 600 13px/1.2 Inter, system-ui, sans-serif;
      color: #2F5E3B;
      text-decoration: none;
    }
.nav-dd-panel a.solution-all:hover { background: transparent; color: #3F7D4E; text-decoration: underline; text-underline-offset: 3px; }
/* The role icons are duotone line drawings (Guilherme, 26 Oct 2026): a fine
   green line with a soft fill, on a white tile with a hairline. */
.solution-panel .res-icon {
      background: #FFFFFF; border: 1px solid #D5E3D8; color: #2F5E3B;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
.solution-panel a.res-item:hover .res-icon { background: #FFFFFF; border-color: #B9D2BF; color: #2F5E3B; }
.resources-menu { display: flex; gap: 14px; align-items: stretch; }
.resources-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; flex: 1; }
.resources-col h4 {
      font: 700 10.5px/1 Inter, system-ui, sans-serif;
      color: #94a3b8; letter-spacing: 0.09em; text-transform: uppercase;
      padding: 6px 10px 8px; margin: 0;
    }
a.res-item {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 10px; border-radius: 10px; text-decoration: none;
      transition: background 0.12s;
    }
/* Soft green, not the old lavender-pink (Guilherme, 30 Oct 2026). */
a.res-item:hover { background: #F3F8F4; }
.res-icon {
      width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
      background: #F6F7F2; color: #101828;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
a.res-item:hover .res-icon { background: #dce6d8; color: #3F7D4E; }
.res-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-title { font: 600 13px/1.2 Inter, system-ui, sans-serif; color: #1e293b; }
a.res-item:hover .res-title { color: #101828; }
.res-desc { font: 400 11.5px/1.45 Inter, system-ui, sans-serif; color: #64748b; }
a.res-item:hover .res-desc { color: #64748b; }
/* The featured card is the daily Swiss retail news (13 Oct 2026). Dressed
   like the announcement bar: since 21 Oct 2026 the Sellva 2.0 forest silk
   (Guilherme: "don't use this green anymore"), so it is the first thing the
   eye finds in the menu. On hover a thin light wash lifts it; `.nav-dd-panel
   a:hover` paints every menu link light grey, so the card restates its own
   background there with a selector that outranks it. */
a.res-featured {
      width: 232px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
      padding: 18px; border-radius: 14px; text-decoration: none;
      position: relative; overflow: hidden;
      background: #143A2E url('/assets/silk-menu.jpg') center / cover no-repeat;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 22px rgba(12,31,20,0.22);
      transition: transform 0.15s, box-shadow 0.15s;
    }
.nav-dd-panel a.res-featured:hover {
      background:
        linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
        url('/assets/silk-menu.jpg') center / cover no-repeat,
        #143A2E;
      transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,31,20,0.34);
    }
a.res-featured:focus-visible { outline: 2px solid #79AE7C; outline-offset: 3px; }
.res-featured-badge {
      width: 34px; height: 34px; border-radius: 10px;
      background: rgba(127,208,138,0.16); border: 1px solid rgba(127,208,138,0.28);
      color: #9FE0A8;
      display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
    }
/* A small live dot before the label: this card changes every weekday. */
.res-featured-label {
      display: inline-flex; align-items: center; gap: 7px;
      font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #9FE0A8;
    }
.res-featured-label::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%; background: #7FD08A;
      box-shadow: 0 0 0 3px rgba(127,208,138,0.22);
    }
.res-featured-title { font: 700 20px/1.15 Poppins, Inter, sans-serif; letter-spacing: -0.015em; color: #fff; }
.res-featured-desc { font: 400 12.5px/1.5 Inter, system-ui, sans-serif; color: rgba(255,255,255,0.86); }
.res-featured-cta {
      align-self: flex-start; margin-top: 6px;
      font: 600 12px/1 Inter, sans-serif; color: #fff;
      padding: 8px 11px; border-radius: 8px;
      background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.16);
      transition: background 0.15s, border-color 0.15s;
    }
.nav-dd-panel a.res-featured:hover .res-featured-cta { background: var(--sns-cta-bg); border-color: #1F4A2E; }
.nav-right {
      flex: 1;
      justify-content: flex-end;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex-shrink: 0;
    }
.lang-switch {
      position: relative;
      display: flex;
      align-items: center;
    }
.lang-switch-btn {
      appearance: none;
      border: 0;
      background: transparent;
      color: #374151;
      font: 500 13.5px/1 Inter, system-ui, sans-serif;
      padding: 7px 10px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.13s, color 0.13s, box-shadow 0.13s;
    }
.lang-switch-btn:hover { background: #FFFFFF; color: #101828; box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 4px 14px rgba(16,24,40,0.09); }
.lang-switch-btn svg { flex-shrink: 0; opacity: 0.6; }
.lang-switch-btn .lang-code { font-weight: 600; font-size: 13px; letter-spacing: 0.3px; }
.lang-switch-panel {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.13);
      border: 1px solid rgba(0,0,0,0.07);
      padding: 6px;
      min-width: 110px;
      z-index: 400;
    }
.lang-switch.open .lang-switch-panel { display: block; }
.lang-switch-panel button, .lang-switch-panel a {
      display: block;
      box-sizing: border-box;
      text-decoration: none;
      appearance: none;
      border: 0;
      background: transparent;
      width: 100%;
      text-align: left;
      padding: 8px 12px;
      font: 500 13px/1 Inter, system-ui, sans-serif;
      color: #374151;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
.lang-switch-panel button:hover, .lang-switch-panel a:hover { background: #F6F7F2; color: #101828; }
.lang-switch-panel button.active, .lang-switch-panel a.active { font-weight: 700; color: #101828; }
.lang-switch-panel a:focus-visible { outline: 2px solid #3F7D4E; outline-offset: -2px; }
/* 40px tall, 14px medium type, generous sides (Guilherme, 22 Oct 2026:
   "larger buttons, more elegance", after a reference header). */
.nav-login, .nav-cta, .nav-start {
      appearance: none;
      font: 500 14px/1 Inter, system-ui, sans-serif;
      letter-spacing: -0.005em;
      padding: 12px 18px;
      border-radius: 10px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      white-space: nowrap;
      text-decoration: none;
    }
/* The header's right side, quiet to loud (Guilherme, 21-22 Oct 2026): Login
   plain text, no button; Get a demo outlined; Get started for free the one
   filled button, in the CTA pink. .nav-cta keeps its class because demo-modal.js
   opens the demo form for it; .nav-start goes to Sellva Light. */
.nav-login { background: transparent; color: #1F2937; padding-left: 8px; padding-right: 8px; }
.nav-login:hover { color: #101828; text-decoration: underline; text-underline-offset: 4px; }
.nav-cta { background: #ffffff; color: #111827; border-color: rgba(15,23,42,0.22); }
.nav-cta:hover { background: #F6F7F2; border-color: rgba(15,23,42,0.36); }
.nav-start { background: var(--sns-cta-bg); color: #ffffff; }
.nav-start:hover { background: var(--sns-cta-bg-hover); color: #ffffff; }
.nav-login:focus-visible, .nav-cta:focus-visible, .nav-start:focus-visible { outline: 2px solid #3F7D4E; outline-offset: 2px; }
/* Between the phone menu and full width there is a band where the longest
   locale (French) plus the right-hand group only just fits the row. Tighten
   the rail and the buttons there rather than letting the last button push
   off-screen; from 1381px every locale fits the full 40px buttons (1271px
   until Solution joined the menu, 1341px until it became a dropdown with a
   chevron, both 23 Oct 2026). */
@media (max-width: 1380px) {
.nav { padding: 0 1.25rem; }
.nav-logo { margin-right: 14px; }
.nav-links { gap: 0; }
.nav-btn { padding: 7px 8px; font-size: 13px; }
.nav-login, .nav-cta, .nav-start { padding: 11px 13px; font-size: 13.5px; }
.nav-login { padding-left: 4px; padding-right: 4px; }   /* plain text: no box to pad */
}
.nav-hamburger { display: none; }
/* With three buttons on the right (Login, Get a demo, Get started for free,
   21 Oct 2026) the full link row needs ~1140px for the longest locales
   (French, German), ~1200px since Solution joined it (23 Oct 2026). Below
   1220px the hamburger takes over: a small laptop or
   tablet gets the menu rather than a row whose buttons hang off the edge. */
@media (max-width: 1220px) {
.nav { max-width: 100%; }
.nav-logo { margin-right: 0; }
.nav-links { display: none; }
.nav-hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 36px; height: 36px;
        padding: 8px;
        background: #eff1ea;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-left: auto;
      }
.nav-hamburger span {
        display: block; height: 2px; width: 100%;
        background: #101828; border-radius: 2px;
      }
}
.footer-nav-links { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-links a {
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      transition: color 0.15s;
    }
.footer-nav-links a:hover { color: #fff; }
@media (max-width: 1220px) {
.nav { padding: 0 1.25rem; }
.nav-logo-img { margin-top: 0; border-radius: 11px; }
.nav-hamburger { display: flex; }
.nav-menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        /* Sellva 2.0 forest silk (Guilherme, 21 Oct 2026; it was flat navy).
           The colour behind it shows while the image loads. */
        background: #143A2E url('/assets/silk-menu.jpg') center top / cover no-repeat;
        border-radius: 12px;
        box-shadow: 0 16px 32px rgba(0,0,0,0.35);
        padding: 10px; z-index: 300;
        opacity: 0; transform: translateY(-8px) scale(0.985); transform-origin: top center;
        transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.33,0.1,0.25,1), display 0.24s allow-discrete;
      }
.nav.menu-open .nav-menu { display: flex; opacity: 1; transform: translateY(0) scale(1); }
@starting-style { .nav.menu-open .nav-menu { opacity: 0; transform: translateY(-8px) scale(0.985); } }
.nav-menu .nav-links,
      .nav-menu .nav-right {
        display: flex !important; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; flex: none;
      }
/* 44px minimum: these were 35px links and a 29px CTA in the drawer, under
   the tap-target guideline on the device where the drawer is the only nav. */
.nav-menu .nav-btn { justify-content: flex-start; color: rgba(255,255,255,0.85); padding: 13px 12px; width: 100%; min-height: 44px; align-items: center; }
.nav-menu .nav-cta, .nav-menu .nav-login { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.nav-menu .nav-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-menu .nav-btn, .nav-menu .nav-login { transition: background 0.16s ease, color 0.16s ease; }
.nav-menu .nav-btn:focus, .nav-menu .nav-login:focus, .nav-menu .lang-switch-btn:focus,
      .nav-menu .nav-btn:focus-visible, .nav-menu .nav-login:focus-visible, .nav-menu .lang-switch-btn:focus-visible { outline: none; }
.nav-menu .nav-btn:focus-visible, .nav-menu .nav-login:focus-visible { background: rgba(255,255,255,0.12); }
.nav-menu .nav-dd.open > .nav-btn { background: rgba(255,255,255,0.06); color: #fff; }
.nav-menu .nav-chevron { display: inline-flex; margin-left: auto; font-size: 11px; opacity: 0.55; transition: transform 0.28s cubic-bezier(0.33,0.1,0.25,1); }
.nav-menu .nav-dd { width: 100%; }
.nav-menu .nav-dd-panel.resources-panel, .nav-menu .nav-dd-panel.solution-panel {
        display: grid !important; grid-template-rows: 0fr; opacity: 0;
        transition: grid-template-rows 0.3s cubic-bezier(0.33,0.1,0.25,1), opacity 0.22s ease, padding 0.3s ease;
        position: static; transform: none; width: auto; max-width: none;
        background: transparent; border: 0; box-shadow: none;
        padding: 0 0 0 12px; margin: 2px 0 0;
      }
.nav-menu .nav-dd.open .nav-dd-panel.resources-panel, .nav-menu .nav-dd.open .nav-dd-panel.solution-panel { grid-template-rows: 1fr; opacity: 1; padding: 4px 0 6px 12px; }
.nav-menu .nav-dd-panel.resources-panel > .resources-menu, .nav-menu .nav-dd-panel.solution-panel > .solution-menu { overflow: hidden; min-height: 0; }
.nav-menu .solution-all { border-top: 0; margin: 0; padding: 8px 10px 4px; color: rgba(255,255,255,0.75); font-weight: 500; font-size: 12.5px; }
.nav-menu .resources-menu, .nav-menu .resources-cols { display: block; }
.nav-menu .res-featured { display: none; }
.nav-menu .resources-col h4 { color: rgba(255,255,255,0.4); font-size: 9.5px; padding: 8px 10px 3px; }
.nav-menu .res-item { padding: 6px 10px; gap: 9px; }
.nav-menu .res-item:hover { background: rgba(255,255,255,0.06); }
.nav-menu .res-title { color: rgba(255,255,255,0.6); font-weight: 400; font-size: 12.5px; }
.nav-menu .res-item:hover .res-title { color: rgba(255,255,255,0.9); }
.nav-menu .res-desc { color: rgba(255,255,255,0.45); }
.nav-menu .res-icon { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }
.nav-menu .res-icon svg { width: 14px; height: 14px; }
.nav-menu .solution-panel .res-icon { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.85); }
.nav-menu .solution-panel a.res-item:hover .res-icon { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); color: #FFFFFF; }
.nav-menu .nav-right { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 8px; padding-top: 12px; }
.nav-menu .lang-switch { align-self: flex-start; }
.nav-menu .lang-switch-btn { color: rgba(255,255,255,0.85); }
.nav-menu .nav-btn:hover, .nav-menu .lang-switch-btn:hover { box-shadow: none; }
.nav-menu .lang-switch-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-menu .lang-switch-panel { position: static; box-shadow: none; }
/* On the silk menu panel the same order: Login plain, Get a demo outlined in
   white, Get started for free filled pink. */
.nav-menu .nav-login { background: transparent; color: rgba(255,255,255,0.85); padding: 11px 12px; }
.nav-menu .nav-login:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-menu .nav-cta {
        margin: 8px 0 0; text-align: center; justify-content: center;
        background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.6);
      }
.nav-menu .nav-cta:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); }
.nav-menu .nav-start {
        min-height: 44px; display: flex; align-items: center; justify-content: center; margin: 8px 0 0;
      }
}
/* The base size for every viewport. This rule sits after the max-width:1220px
   block above, so it wins there — which is why the phone bar was stuck at
   28px however that block was edited. Desktop is set again further down. */
.nav-logo-img {
      display: block !important;
      height: 42px;
      width: 42px;
      object-fit: contain;
      flex-shrink: 0;
    }
.nav-logo-text {
      font: 700 17.5px/1 Poppins, sans-serif;
      color: #101828;
      letter-spacing: -0.4px;
      margin-left: 8px;
    }
.nav-logo-img {
      transition: width 0.35s ease, height 0.35s ease;
    }
.nav-logo-text {
      transition: opacity 0.25s ease, max-width 0.35s ease, margin-left 0.25s ease;
      overflow: hidden;
      max-width: 120px;
      white-space: nowrap;
    }
.nav.scrolled .nav-logo-img {
      width: 54px !important;
      height: 54px !important;
      opacity: 1 !important;
      margin-right: 10px;
    }
.nav.scrolled .nav-logo-text {
      opacity: 0;
      max-width: 0;
      margin-left: 0 !important;
    }
.nav {
      display: flex !important;
      align-items: center !important;
    }
.nav-logo { flex-shrink: 0; margin-right: 32px; }
.nav-links {
      display: flex !important;
      align-items: center !important;
      gap: 2px !important;
      flex: none !important;
      margin-right: auto !important;
    }
.nav-right { flex-shrink: 0; margin-left: 0 !important; }
.nav-hamburger { display: none; }
/* This block restores the desktop row with !important, so the hamburger switch
   has to happen here too — at the same 1220px the rules above use, or the
   restore wins and the tablet band gets neither links nor a menu. */
@media (max-width: 1220px) {
.nav-links { display: none !important; }
.nav-hamburger { display: flex !important; }
}

/* ==========================================================================
   Announcement bar.

   A full-width strip above the navbar, written as static HTML by
   components/announcement/build.mjs.

   The ground is the Sellva 2.0 forest silk (Guilherme, 21 Oct 2026), the same
   green band as the homepage press strip. It replaced a Bracken-to-Fern
   gradient with a Fern glow; the colour behind it shows while it loads.
   ========================================================================== */

.anno {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  background: #143A2E url('/assets/press-silk.jpg') center / cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* (The Fern glow went with the gradient; the silk carries its own light.) */
.anno::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

/* (The brushed-steel grain was retired with the Sellva palette.) */
.anno::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

.anno-inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  padding: 11px 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  text-align: center;
}

/* Lighter than it was. At 600 the bar shouted; the weight drops to 500 and
   the tracking opens slightly, which is what makes small type on a dark
   ground read as considered rather than loud. */
/* The label is the news section's name, set like the menu's featured card:
   bold Poppins, white (13 Oct 2026). */
.anno-label {
  font: 700 14px/1.3 Poppins, Inter, system-ui, sans-serif;
  color: #FFFFFF;
  letter-spacing: -0.005em;
}
.anno-label::after {
  content: ':';
  color: rgba(255,255,255,0.45);
}
/* One line, whatever it holds: the bar's own sentence, or the newest
   headline that nav.js puts here once the news status file arrives. Both are
   cut to the same width, so swapping them never moves the page. */
.anno-text {
  font: 300 13px/1.4 Inter, system-ui, sans-serif;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.012em;
  min-width: 0;
  max-width: 62ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity .2s ease;
}
.anno-text.is-swapping { opacity: 0; }
.anno.has-headline .anno-text { color: rgba(255,255,255,0.86); }
.anno-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 500 13px/1.4 Inter, system-ui, sans-serif;
  color: #FFFFFF;
  letter-spacing: 0.012em;
  white-space: nowrap;
}
.anno-arrow {
  width: 13px; height: 13px;
  transition: transform .18s ease;
}

/* "● Updated today at 06:03": a live dot that pulses, in the menu card's
   mint, so the bar reads as something that changes every morning. */
.anno-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 12.5px/1.4 Inter, system-ui, sans-serif;
  color: #B9DFBB;
  letter-spacing: 0.012em;
  white-space: nowrap;
}
.anno-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7FD08A;
  flex-shrink: 0;
}
.anno-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #7FD08A;
  animation: anno-pulse 2s ease-out infinite;
}
@keyframes anno-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
/* The time arrives a moment after load: it fades in rather than jumps. */
.anno-live.is-live [data-anno-updated] { animation: anno-fade .45s ease both; }
@keyframes anno-fade { from { opacity: 0; } to { opacity: 1; } }
.anno:hover .anno-cta { text-decoration: underline; text-underline-offset: 3px; }
.anno:hover .anno-arrow { transform: translate(1.5px, -1.5px); }

.anno:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -3px;
}

@media (max-width: 900px) {
  .anno-inner { padding: 9px 1.25rem; gap: 3px 8px; }
  .anno-label { font-size: 13px; }
  .anno-text, .anno-cta, .anno-live { font-size: 12px; }
  .anno-arrow { width: 12px; height: 12px; }
}

/* On a phone the sentence would run to three lines, so it goes: the label on
   top, the live line and the call to action below it. When nav.js has a
   recent headline, the headline takes the live line's place, cut to one
   line. A grid of two fixed rows, so the bar is the same height whichever
   of the two it shows and nothing below it moves when it swaps. */
@media (max-width: 560px) {
  .anno-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) max-content minmax(0, 1fr);
    grid-template-areas: "label label label label" ". line cta .";
    align-items: center;
    gap: 3px 10px;
    padding: 8px 1rem;
  }
  .anno-label { grid-area: label; justify-self: center; }
  .anno-label::after { content: ''; }
  .anno-text { display: none; }
  .anno-live { grid-area: line; min-width: 0; }
  .anno-live [data-anno-updated] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .anno-cta { grid-area: cta; }
  .anno.has-headline .anno-live { display: none; }
  .anno.has-headline .anno-text { display: block; grid-area: line; max-width: none; }
}

/* The ticker (nav.js, when the news status file has two or more items): the
   newest headlines scroll right to left across the band like a market
   ticker, between the label and the live line; the bar's own sentence and
   its call to action step aside. One copy of the headlines is followed by
   a second, so moving the track by half loops without a seam. Hover or
   focus pauses it; edges fade so headlines slide in and out softly. Same
   one row on a desktop, the same two rows on a tablet or phone (label and
   live line, then the ticker), so the bar keeps its height when it starts. */
.anno.has-ticker .anno-inner { flex-wrap: nowrap; justify-content: flex-start; }
.anno.has-ticker .anno-text,
.anno.has-ticker .anno-cta { display: none; }
.anno.has-ticker .anno-label,
.anno.has-ticker .anno-live { flex: none; }
.anno-ticker {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  font: 400 13px/1.4 Inter, system-ui, sans-serif;
  color: rgba(255,255,255,0.86);
  letter-spacing: 0.012em;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.anno-track {
  display: inline-flex;
  white-space: nowrap;
  animation: anno-scroll 60s linear infinite;
  will-change: transform;
}
.anno-run { display: inline-flex; align-items: baseline; }
.anno-item { cursor: pointer; }
.anno-item-name { font-weight: 600; color: #FFFFFF; }
.anno-item-date { font-weight: 500; color: #B9DFBB; }
.anno-item:hover .anno-item-head { text-decoration: underline; text-underline-offset: 3px; }
.anno-sep { padding: 0 18px; font-size: 8px; color: #7FD08A; align-self: center; }
.anno:hover .anno-track,
.anno:focus-within .anno-track { animation-play-state: paused; }
@keyframes anno-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .anno.has-ticker .anno-inner {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas: "label live" "tick tick";
    align-items: center;
    gap: 3px 12px;
    text-align: left;
  }
  .anno.has-ticker .anno-label { grid-area: label; justify-self: start; }
  .anno.has-ticker .anno-live { grid-area: live; justify-self: stretch; justify-content: flex-end; display: flex; min-width: 0; overflow: hidden; }
  .anno.has-ticker .anno-live [data-anno-updated] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .anno-ticker { grid-area: tick; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .anno-track { animation: none; }
  .anno-text { transition: none; }
  .anno-arrow { transition: none; }
  .anno:hover .anno-arrow { transform: none; }
  .anno-dot::after { animation: none; opacity: 0; }
  .anno-live.is-live [data-anno-updated] { animation: none; }
}

/* Phones only: a shorter bar and edge-to-edge padding. */
@media (max-width: 700px) {
  .nav-wrapper { padding: 0; }
  .nav { padding: 0 1rem; height: 60px; }
}

/* ------------------------------------------------------- scrolled state --- */

/* At rest the wordmark leads. Once the page scrolls, the wordmark collapses
   into the mark and the mark grows — so the header gets shorter and the brand
   stays present as an icon rather than a full lockup.

   Desktop only: below 1220px the mark is already the logo, at a fixed size. */
@media (min-width: 1221px) {
  /* The mark is present from the start, beside the wordmark. Scrolling grows
     it and collapses the wordmark into it, so the lockup becomes an icon
     rather than the mark appearing from nowhere. */
  .nav-logo-img {
    display: block;
    width: 42px;
    height: 42px;
    opacity: 1;
    margin-right: 10px;
    overflow: hidden;
    flex: none;
    transition: width .32s cubic-bezier(.22,.9,.3,1),
                height .32s cubic-bezier(.22,.9,.3,1),
                opacity .24s ease,
                margin-right .32s cubic-bezier(.22,.9,.3,1);
  }
  .nav-logo-text {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .22s ease,
                max-width .32s cubic-bezier(.22,.9,.3,1);
  }
  .nav.scrolled .nav-logo-text { opacity: 0; max-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo-img, .nav-logo-text { transition: none; }
}

/* ==========================================================================
   Sellva wordmark: the word in Urbanist ExtraBold, tracked −0.03em, in Bracken
   (the brand ink, never pure black),
   led by the green Agent orb. Both stay the same size in every state,
   including after scrolling (the old badge used to grow and the name hide).
   ========================================================================== */
.nav-logo-img,
.nav.scrolled .nav-logo-img {
      display: block !important;
      width: 46px !important;
      height: 46px !important;
      opacity: 1 !important;
      margin: 0 8px 0 -4px !important;
      border-radius: 0 !important;
    }
.nav-logo-text,
.nav.scrolled .nav-logo-text {
      font: 800 26px/1 Urbanist, Poppins, system-ui, sans-serif;
      letter-spacing: -0.03em;
      color: #122A1C;
      opacity: 1;
      max-width: none;
      margin-left: 0 !important;
    }

/* Footer mail card: the mail icon opens it (nav.js footerMail). A white card
   like the header menus; it opens below the icon, since the footer clips
   anything that crosses its top edge (overflow: hidden for the silk). */
.fm-host { position: relative; display: flex; }
.fm-pop {
      position: absolute;
      left: 0;
      top: calc(100% + 10px);
      z-index: 20;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 16px;
      background: #FFFFFF;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(16,24,40,0.08), 0 10px 30px rgba(16,24,40,0.22);
      white-space: nowrap;
      font: 400 14px/1.3 Inter, system-ui, sans-serif;
      color: #101828;
    }
.fm-pop[hidden] { display: none; }
.fm-addr { font-weight: 600; user-select: all; }
.fm-actions { display: flex; gap: 8px; }
.fm-copy, .fm-open {
      appearance: none;
      border: 1px solid rgba(15,23,42,0.18);
      background: #FFFFFF;
      color: #101828;
      font: 500 13px/1 Inter, system-ui, sans-serif;
      padding: 9px 12px;
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.13s, border-color 0.13s;
    }
.fm-copy:hover, .fm-open:hover { background: #F6F7F2; border-color: rgba(15,23,42,0.32); }
.fm-copy:focus-visible, .fm-open:focus-visible { outline: 2px solid #1F4A2E; outline-offset: 2px; }