/* LOGA V1.6 — approved header and UI consistency refinements.
   V1.5 remains the baseline. CSS is intentionally loaded LAST so the
   older approved rules and breakpoints can be retained without cascading changes. */
:root{
  --v16-button-pill:999px;
  --v16-nav-gap:30px;
}

/* 01. The brandmark itself is a genuine, local vector SVG; divider and caption
   stay two independent DOM elements, not baked into the illustration. */
.brand{min-width:0;gap:14px;justify-self:start}
.brand-image{width:99px;height:55.8px;transform:translateY(4px);object-fit:contain;flex:none}
.brand-divider{flex:none}
.brand-description{flex:none}

/* 02. True centered middle nav: symmetric grid tracks make the links center
   relative to the page/capsule rather than relative to a leftover flex area. */
.navigation{display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);min-height:90px;align-items:center;column-gap:16px;padding-right:35px}
.navigation-links{justify-self:center;justify-content:center;flex:none;max-width:none;width:max-content;gap:var(--v16-nav-gap)}
.header-cta{justify-self:end;min-width:206.64px;height:45.36px;padding-inline:22.32px;font-size:14.4px;gap:10px}
.header-cta .icon-arrow{width:20.16px;height:20.16px}

/* 03. Price frame shrinks inward from its LEFT edge: keep the right edge on the
   originally approved right-hand grid line; remove yellow decoration in HTML. */
.price-zone{width:463.5px;margin-left:auto}
.price-card{width:100%}
.price-outline .corner{width:10px;height:10px;border-radius:0}

/* 04. Shared pill shape for action buttons across ALL sections. We intentionally
   do not restyle input fields, cards, the logo or decorative icon tiles. */
.button,
.mb-submit,
.mb-attach,
.mb-copy-button,
.ps-support-link,
.dropdown-price button,
.modal-main-button,
.dropdown-option,
.dropdown-bottom-link,
.icon-button,
.mobile-menu-toggle{border-radius:var(--v16-button-pill)}

/* Compact laptop nav: 30px is maintained as long as geometry allows.
   For narrow laptop widths the links compress before switching to mobile. */
@media(max-width:1600px){
  .brand-image{width:91.8px;height:52.2px}
  .navigation{min-height:90px}
  .navigation-links{gap:30px}
  .header-cta{height:45px;min-width:169.2px;padding-inline:17.28px;font-size:12.24px}
  .price-zone{width:400.5px}
}
@media(max-width:1210px){
  .navigation{min-height:83px;column-gap:10px;padding-right:20px}
  .brand{gap:9px}
  .navigation-links{gap:15px}
  .header-cta{height:39.6px;min-width:136.8px;padding-inline:10.8px;font-size:11px}
  .header-cta .icon-arrow{width:16px;height:16px}
  .price-zone{width:351px}
}
@media(max-width:980px){
  /* Existing collapse-to-mobile behavior remains; avoid an invisible menu
     occupying the desktop center column. Preserve >=44px touch controls. */
  .navigation{display:flex;min-height:67.5px;gap:12px;padding-right:12px}
  .brand-image{width:79.2px;height:44.1px}
  .navigation-links{display:none;width:auto;max-width:none;gap:2px;flex-direction:column;align-items:stretch}
  .navigation-links.is-open{display:flex}
  .mobile-menu-toggle{margin-left:auto;flex:none}
  .header-cta{height:44px;min-width:0;padding-inline:14px;font-size:12px}
  .price-zone{width:min(515px,100%);margin-left:0}
}
@media(max-width:600px){
  .navigation{min-height:64.8px;padding-right:10px}
  .brand-image{width:69.3px;height:39.6px}
  .header-cta{width:44px;min-width:44px;height:44px;font-size:0;padding:0}
  .header-cta .icon{width:17px;height:17px}
}