/* Integovox marketing site -- shared design system.
   Dark theme tokens match the fleet app: #0d1117 background, #EF9F27 amber accent.
   Text/muted/border/card values are the standard companions to a #0d1117 background
   (the same dark palette GitHub's own dark theme uses), chosen to sit naturally alongside it. */

:root {
  --bg: #0d1117;
  --bg-elevated: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #EF9F27;
  --accent-dark: #d6871a;
  --radius: 10px;
  --max-width: 1120px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* No such reset existed before -- .hero-badge img's own fixed 380px box (and any other
   fixed-px image on this site) had nothing capping it to its container below that size, so a
   390px-viewport phone with normal page padding overflowed horizontally. max-width:100% only
   caps the box (object-fit:contain inside .hero-badge img already keeps the actual artwork
   proportional within whatever box it ends up with), it doesn't touch any image that's already
   narrower than its container. */
img { max-width: 100%; height: auto; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 16px; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 16px; color: var(--muted); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Icons (sprite via <use>) ---------- */
.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-lg { width: 32px; height: 32px; }

/* ---------- Header / Nav ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Navbar logo: logo-navbar.png is a cropped wordmark-only asset (assets/logo-long.png and
   logo-square.png are both the full hexagon-diagram lockup, not a compact navbar mark, and
   squeeze the wordmark down to an illegible sliver at any navbar height). Height-constrained,
   width auto so it scales cleanly. */
.logo-img { height: 56px; max-height: 56px; width: auto; display: block; }
/* flags-us-ca.png is cropped tight to its visible flag pixels (no padding), so plain
   .logo-img width:auto sizing keeps it proportional and lined up with the wordmark's edges.
   Sits inside .logo's flex box (gap: 8px) right next to the wordmark, not as a separate .nav
   flex item -- .nav's space-between would otherwise shove it apart toward nav-links/toggle. */
.flags-img { height: 42px; }
.logo-dot { color: var(--accent); }
.logo-tagline {
  font-weight: 500; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--border);
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px;
  cursor: pointer;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #1a1200; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--muted); }

/* ---------- Hero ---------- */
.hero {
  padding: 96px 0 72px;
  text-align: center;
}
.hero-badge {
  margin-bottom: 32px;
}
/* hero-badge.png is thin line-art hexagons plus a wordmark on mostly-transparent ground
   (~39% opaque pixel fill) vs cvam2-badge.png's dense edge-to-edge illustration (~90% opaque) --
   same 320px box reads noticeably smaller/lighter, so sized up to compensate. */
.hero-badge img {
  width: 380px;
  height: 380px;
  object-fit: contain;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.hero h1 { max-width: 780px; margin: 0 auto 20px; }
.hero .lede {
  max-width: 620px;
  margin: 0 auto 32px;
  font-size: 1.1rem;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { font-size: 0.85rem; color: var(--muted); margin-top: 4px; margin-bottom: 0; }

/* ---------- Product frame (hero) -- pure CSS mockup, no screenshot/illustration ---------- */
.product-frame {
  max-width: 920px; margin: 56px auto 0;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.product-frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.product-frame-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.product-frame-url {
  margin-left: 12px; font-size: 0.78rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 10px;
}
.product-frame-body { display: flex; text-align: left; min-height: 320px; font-size: 0.8rem; }
.pf-sidebar {
  width: 168px; flex-shrink: 0; background: var(--bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
}
.pf-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  color: var(--muted); font-size: 0.78rem; font-weight: 500;
}
.pf-nav-item .icon { width: 15px; height: 15px; flex-shrink: 0; }
.pf-nav-item.pf-active { background: rgba(239, 159, 39, 0.12); color: var(--accent); }
.pf-main { flex: 1; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pf-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pf-kpi {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; display: flex; flex-direction: column; gap: 6px;
}
.pf-kpi-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pf-kpi-num { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.pf-kpi-num.pf-accent { color: var(--accent); }
.pf-panel-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; flex: 1; }
.pf-panel {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; display: flex; flex-direction: column;
}
.pf-panel-title {
  font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em;
  padding: 6px 8px 10px;
}
.pf-wo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 6px; border-top: 1px solid var(--border);
}
.pf-wo-row:first-of-type { border-top: none; }
.pf-wo-unit { font-weight: 600; color: var(--text); width: 52px; flex-shrink: 0; }
.pf-wo-desc { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-wo-status {
  flex-shrink: 0; font-size: 0.66rem; font-weight: 600; padding: 3px 8px; border-radius: 20px;
  white-space: nowrap;
}
.pf-wo-status.st-progress { background: rgba(239, 159, 39, 0.15); color: var(--accent); }
.pf-wo-status.st-waiting { background: rgba(139, 148, 158, 0.15); color: var(--muted); }
.pf-wo-status.st-open { background: rgba(230, 237, 243, 0.08); color: var(--text); }
.pf-panel-narrow { justify-content: flex-start; }
.pf-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px; border-radius: 6px; font-size: 0.72rem; color: var(--muted);
}
.pf-chip.pf-accent-chip { color: var(--accent); }
.pf-chip-count {
  font-size: 0.66rem; font-weight: 700; background: var(--border); color: var(--text);
  border-radius: 20px; padding: 1px 7px;
}
.pf-chip.pf-accent-chip .pf-chip-count { background: rgba(239, 159, 39, 0.2); color: var(--accent); }
@media (max-width: 720px) {
  .product-frame-body { flex-direction: column; min-height: 0; }
  .pf-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
  .pf-nav-item { flex: 1 1 auto; justify-content: center; }
  .pf-nav-item span:not(.icon) { display: none; }
  .pf-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .pf-panel-row { grid-template-columns: 1fr; }
  .pf-wo-desc { display: none; }
}

/* ---------- Section ---------- */
.section { padding: 72px 0; border-top: 1px solid var(--border); }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head .eyebrow {
  color: var(--accent); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 10px;
}

/* ---------- Grid / Cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.card .icon-wrap {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239, 159, 39, 0.12);
  border-radius: 10px;
  color: var(--accent);
  margin-bottom: 18px;
}
.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: 0; font-size: 0.95rem; }

.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
.list-check .icon { color: var(--accent); margin-top: 2px; }

/* ---------- Stat strip ---------- */
.stat-strip {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: center;
  padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat-strip .stat { text-align: center; }
.stat-strip .stat strong { display: block; font-size: 1.6rem; color: var(--accent); }
.stat-strip .stat span { color: var(--muted); font-size: 0.85rem; }

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  padding: 64px 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { max-width: 520px; margin: 0 auto 28px; }

/* ---------- Architecture diagram (pure CSS/HTML, no image) ---------- */
.arch-diagram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.arch-node {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.arch-node strong { display: block; color: var(--text); margin-bottom: 4px; font-size: 0.9rem; }
.arch-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--bg-elevated);
}

/* ---------- Quote / story block ---------- */
.story-block {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-size: 1.05rem;
  color: var(--text);
}

/* ---------- Form ---------- */
.form-field { margin-bottom: 18px; text-align: left; }
.form-field label {
  display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 6px;
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--accent);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field select option { background: var(--bg-elevated); color: var(--text); }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 16px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 48px 0 32px; }
.footer-grid {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between;
  margin-bottom: 32px;
}
.footer-tagline { max-width: 320px; color: var(--muted); font-size: 0.9rem; }
.footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.footer-links h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 12px; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-links a { color: var(--text); font-size: 0.9rem; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--muted);
}

/* ---------- Footer isolation promise ---------- */
.footer-promise {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 0.85rem;
  padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border);
}
.footer-promise .icon { color: var(--accent); width: 18px; height: 18px; }

/* ---------- Module / vertical cards ---------- */
.module-card { position: relative; }
a.module-card {
  display: block; color: inherit; text-decoration: none;
  transition: border-color 0.15s ease;
}
a.module-card:hover { border-color: var(--accent); }
/* Unscoped (not ".module-card .badge") on purpose -- product.html's module table uses these same
   badges outside any .module-card, and a module-card-only rule left them completely unstyled
   there (no color, no pill shape) since that ancestor never matched. */
.badge {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
  margin-bottom: 14px;
}
.badge.live { color: #3fb950; border-color: rgba(63, 185, 80, 0.4); background: rgba(63, 185, 80, 0.1); }
.badge.next { color: var(--accent); border-color: rgba(239, 159, 39, 0.4); background: rgba(239, 159, 39, 0.1); }
.badge.in-dev { color: #388bfd; border-color: rgba(56, 139, 253, 0.4); background: rgba(56, 139, 253, 0.1); }
.module-card .competes-with {
  font-size: 0.8rem; color: var(--muted); margin-top: 12px; margin-bottom: 0;
}
.module-card .competes-with strong { color: var(--muted); font-weight: 600; }

/* Amber-highlighted centre piece -- 7 tiles at 3 columns lays out 3/3/1; explicitly placing the
   Hub in the middle column of that trailing row is what actually centres it, rather than letting
   it fall wherever grid auto-placement puts a 7th item (column 1). */
#modules .grid { grid-template-columns: repeat(3, 1fr); }
#modules .hub-card { grid-column: 2; }
@media (max-width: 720px) {
  #modules .grid { grid-template-columns: 1fr; }
  #modules .hub-card { grid-column: 1; }
}

.card.hub-card {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(239, 159, 39, 0.08), var(--bg-elevated) 40%);
}
.card.hub-card .icon-wrap { background: var(--accent); color: #1a1200; }

/* ---------- How it works (numbered steps) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  counter-reset: step;
}
.step { text-align: center; }
.step-number {
  width: 40px; height: 40px; margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.92rem; margin-bottom: 0; }
.step-connector {
  display: none;
}
@media (min-width: 721px) {
  .steps { position: relative; }
}

/* ---------- Device surface mockups (pure CSS, no screenshots) ---------- */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.device-card { text-align: center; }
.device-frame {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 6px;
  height: 150px;
  justify-content: flex-start;
}
.device-frame .bar { background: var(--border); border-radius: 3px; height: 8px; }
.device-frame .bar.accent { background: rgba(239, 159, 39, 0.5); }
/* Desktop -- dense: many thin rows, a manager scanning everything at once */
.device-frame.desktop { flex-direction: row; gap: 8px; }
.device-frame.desktop .col { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.device-frame.desktop .bar { height: 6px; }
/* Tablet -- medium-density touch cards */
.device-frame.tablet .bar { height: 20px; border-radius: 6px; }
/* Mobile -- one focused block, nothing else competing for attention */
.device-frame.mobile { justify-content: center; align-items: center; }
.device-frame.mobile .bar { width: 70%; height: 34px; border-radius: 8px; }
/* Kiosk -- one huge always-on stat, read-only, wide-format */
.device-frame.kiosk { justify-content: center; align-items: center; height: 110px; }
.device-frame.kiosk .bar { width: 85%; height: 46px; border-radius: 6px; }
.device-card h3 { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.05rem; }
.device-card .icon { color: var(--accent); }
.device-card p { font-size: 0.88rem; }

/* ---------- AI callout ---------- */
.ai-callout {
  display: flex; gap: 28px; align-items: flex-start;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 32px;
}
.ai-callout .icon-wrap {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239, 159, 39, 0.12); color: var(--accent); border-radius: 12px;
}
.ai-callout h2 { margin-bottom: 10px; }
.ai-callout .list-check { margin-top: 18px; }
@media (max-width: 600px) {
  .ai-callout { flex-direction: column; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }
  .nav-links a:last-child { border-bottom: none; }
  .hero { padding: 64px 0 48px; }
  .section { padding: 48px 0; }
  .footer-bottom { flex-direction: column; }
}

/* ---------- Signup plan cards ---------- */
/* flex column + the CTA's margin-top:auto (set inline on index.html's pricing cards) keeps
   both buttons on one baseline even if the two cards' list content runs to different heights
   and the grid row stretches them to equal height. */
.plan-card { text-align: left; display: flex; flex-direction: column; }
.plan-price { font-size: 2rem; font-weight: 800; color: var(--text); margin-bottom: 18px; }
.plan-price span { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.plan-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ---------- Signup wizard ---------- */
.wizard-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
.wizard-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--muted); font-weight: 600;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
}
.wizard-step-num {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0;
}
.wizard-step.active { color: var(--text); border-color: var(--accent); }
.wizard-step.active .wizard-step-num { background: var(--accent); border-color: var(--accent); color: #1a1200; }
.wizard-step.done { color: var(--accent); border-color: rgba(239, 159, 39, 0.4); }
.wizard-step.done .wizard-step-num { border-color: var(--accent); color: var(--accent); }

.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

.module-select-card { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.module-select-card:hover { border-color: var(--muted); }
.module-select-card.module-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.module-select-card.module-disabled { cursor: not-allowed; opacity: 0.5; }

.wizard-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; }
.wizard-review dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; }
.wizard-review dt { color: var(--muted); font-size: 0.9rem; }
.wizard-review dd { margin: 0; font-weight: 600; }

/* Header logo row overflow at 390px -- wordmark (.logo-img, ~255px at its default 56px height)
   + flags (.flags-img, ~46px at 42px height) + .nav-toggle (~42px) run about 9px past a 390px
   viewport before this shrinks the two logo images down. Scoped tighter than the existing 600px
   nav-toggle breakpoint above -- the row fits fine down to ~420px, this only needs to kick in
   right at the actual overflow point. */
@media (max-width: 420px) {
  .logo-img { height: 44px; }
  .flags-img { height: 32px; width: auto; }
}