:root {
  /* Option A+ Logo Match palette */
  --bg: #010921;
  --header-bg: #0a1430;
  --footer-bg: #020e32;
  --bg-alt: #020e2c;
  --surface: #01133b;
  --surface-2: #031a4d;
  --border: #063d99;
  --hover: #00c6fe;
  --text: #e7ecf3;
  --muted: #9aa6bd;
  --accent: #00f4fc;
  --accent-2: #026cfc;
  --on-accent: #010921;
  /* Gradient for small text (header menu, footer headings): the hero's direction and cyan start, with the blue end
     lightened to #4090fd so every point stays at least 4.5:1 on the footer, the solid header and the hero glow
     behind the transparent header (worst pixel #02284c: 4.7:1). The big hero headline keeps .accent. */
  --text-gradient: linear-gradient(135deg, var(--accent), #4090fd);
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --max: 1140px;
  /* Side padding of every .container (header, content, footer): 24px, 16px up to 400px wide. */
  --gutter: 24px;
  /* Type scale: fluid between 375px and 1366px wide. */
  --fs-body: clamp(1rem, 0.953rem + 0.202vw, 1.125rem);      /* 16px -> 18px */
  --fs-h2: clamp(1.875rem, 1.639rem + 1.009vw, 2.5rem);      /* 30px -> 40px */
  --fs-nav: 1rem;                                            /* 16px */
  --fs-card-title: 1.25rem;                                  /* 20px */
  --fs-card-text: 1rem;                                      /* 16px */
  --fs-pill: 0.875rem;                                       /* 14px */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Body size on body only, so rem stays 16px. */
body { font-size: var(--fs-body); }

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

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 400px) { :root { --gutter: 16px; } }

/* Non-production environment banner (added by script.js) */
.env-banner {
  background: #f5a524;
  color: #1a1200;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 16px;
}

/* Header: solid navy with a soft shadow and a thin cyan line at the bottom. On the homepage (body.has-hero)
   it starts transparent over the hero and turns solid once the page is scrolled (script.js adds .is-scrolled). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--header-bg);
  border-bottom: 1px solid transparent;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent);
  transition: opacity .2s ease;
}
.has-hero .site-header:not(.is-scrolled) { background-color: transparent; box-shadow: none; }
.has-hero .site-header:not(.is-scrolled)::after { opacity: 0; }
/* The hero slides up under the transparent header by exactly the header's height (set per breakpoint below). */
:root { --header-h: 87px; --hero-pad: 96px; }
.has-hero .hero { margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--hero-pad) + var(--header-h)); }
@media (max-width: 639px) { :root { --header-h: 85px; } }
@media (max-width: 600px) { :root { --hero-pad: 72px; } }
@media (max-width: 480px) { :root { --header-h: 65px; } }
@media (max-width: 360px) { :root { --header-h: 57px; } }
@media (max-width: 347px) { :root { --header-h: 49px; } }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header::after { transition: none; }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Hybrid logo: the overlay (vector wordmark + tagline) sits exactly on the ring image below it. */
.logo-hybrid { position: relative; display: block; }
.logo-hybrid .logo-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* Transparent logo with ring (3:2). 64px from 640px up (52px when scrolled); smaller on phones (see below). */
.brand-logo {
  display: block;
  height: 64px;
  width: auto;
  aspect-ratio: 3 / 2;
}

/* Menu links: gradient text like the footer headings (solid cyan where background-clip: text isn't supported);
   solid near-white on hover and keyboard focus. */
.nav a {
  margin-left: 22px;
  color: var(--accent);
  font-size: var(--fs-nav);
  font-weight: 700;
  border-radius: 4px;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav a {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.nav a:hover,
.nav a:focus-visible { background: none; color: var(--text); }
.nav a:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; }

/* Hero */
.hero {
  padding: 96px 0 56px;
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(2, 108, 252, 0.22), transparent 60%),
    radial-gradient(700px 280px at 90% 10%, rgba(0, 244, 252, 0.10), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-size: clamp(36px, 5.5vw, 60px);
  margin: 0 0 18px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  color: var(--muted);
  font-size: 18px;
  max-width: 680px;
  margin: 0 0 28px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Below 900px: "Welcome to MS10.Club" stays on one line, scaled to the content width (100vw minus the
   container padding, 2 x --gutter). The text is 10.58 font-sizes wide in Segoe UI and Arial (Roboto 10.11); dividing by 11
   leaves about 4% for wider phone fonts such as San Francisco. Never above the desktop size (36px up to 655px). */
@media (max-width: 899px) {
  .hero h1 { font-size: clamp(22px, calc((100vw - 2 * var(--gutter)) / 11), max(36px, 5.5vw)); }
  /* Hero text and About paragraphs: even right edges; the last line stays natural. */
  .hero .lede,
  .about-body p:not(.motto) { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
}
/* Narrowest phones: 17px hero text, so the first justified line doesn't open up wide gaps
   ("start­up" in index.html adds a break point the hyphenation dictionaries don't have). */
@media (max-width: 340px) {
  .hero .lede { font-size: 17px; }
}
/* Desktop (900px+): the hero is centered, its text at a comfortable reading width, the buttons side by side. */
@media (min-width: 900px) {
  .hero .container { text-align: center; }
  .hero .lede { max-width: 29em; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  /* <button> doesn't inherit the page font by default. */
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
/* Dark text: white is unreadable on the cyan end of the gradient. */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  font-weight: 700;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--hover), 0 4px 18px rgba(0, 198, 254, 0.35); }
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--hover); color: var(--hover); }

/* Sections */
.section { padding: 56px 0; }
/* Keep anchor targets clear of the sticky header. */
section[id] { scroll-margin-top: 150px; }

/* Header from 640px: 86px tall, shrinking to 72px once the page is scrolled (script.js adds .is-scrolled).
   The 12px it loses is given back as margin-bottom, so the content below never shifts.
   The logo is 64px tall. */
@media (min-width: 640px) {
  .header-inner { padding-top: 11px; padding-bottom: 11px; }
  .brand-logo { height: 64px; }
  .site-header .header-inner,
  .site-header .brand-logo { transition: padding .2s ease, height .2s ease; }
  .site-header { transition: margin-bottom .2s ease, background-color .2s ease, box-shadow .2s ease; }
  .site-header.is-scrolled { margin-bottom: 12px; }
  .site-header.is-scrolled .header-inner { padding-top: 10px; padding-bottom: 10px; }
  .site-header.is-scrolled .brand-logo { height: 52px; }
  /* Header (72px) + 16px. */
  section[id] { scroll-margin-top: 88px; }
}
@media (min-width: 640px) and (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .header-inner,
  .site-header .brand-logo { transition: none; }
}
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { margin-bottom: 32px; }
.section-head h2 {
  font-size: var(--fs-h2);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.section-head p { color: var(--muted); margin: 0; }

/* Grid + cards */
.grid {
  display: grid;
  gap: 18px;
  /* 3 columns from 768px (tighter in 768-1023px); products and services 1 per row under 768px (see media queries). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.products { display: flex; flex-direction: column; gap: 18px; }
/* min-width: 0 lets cards shrink inside grid/flex tracks; long words break instead of overflowing. */
.card {
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.card:hover {
  border-color: var(--hover);
  background: var(--surface-2);
}
/* Only whole-card links (services) lift; product cards hold their own buttons. */
a.card:hover { transform: translateY(-2px); }
.card-top {
  display: flex;
  flex-wrap: wrap;            /* on the narrowest phones the badge drops below the icon instead of overflowing */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: linear-gradient(135deg, rgba(0, 244, 252, 0.16), rgba(2, 108, 252, 0.28));
  border: 1px solid var(--border);
}
.card-body { display: flex; flex-direction: column; gap: 6px; }
.card h3 { margin: 0; font-size: var(--fs-card-title); }
.card .tagline { color: var(--text); margin: 0; font-weight: 500; font-size: var(--fs-card-text); }
.platforms { list-style: none; margin: 0 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.platforms li {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.card .desc { color: var(--muted); margin: 0; font-size: var(--fs-card-text); }

/* Status badges (Live / Coming soon / Available) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-dot { font-size: 9px; line-height: 1; }
.badge-live { color: #5ee6a0; }
.badge-soon { color: #f5c542; }

/* Feature checklists */
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-card-text);
  color: var(--text);
}
.features .check { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.card .fine-print { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.card .card-note { margin: 0; font-size: 13px; color: var(--muted); }

.card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
}
.card-cta::after {
  content: "→";
  transition: transform .15s ease;
}
.card:hover .card-cta::after { transform: translateX(3px); }

.card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.card-actions .btn { padding: 10px 16px; }
/* Read by screen readers only (e.g. the "copied" message beside a card's Copy email button). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Featured product: full width, details beside the checklist on wide screens. */
@media (min-width: 768px) {
  .card-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "body features"
      "note features"
      "actions features";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 32px;
    padding: 28px;
    background:
      radial-gradient(500px 220px at 0% 0%, rgba(2, 108, 252, 0.18), transparent 70%),
      var(--surface);
  }
  .card-featured:hover {
    background:
      radial-gradient(500px 220px at 0% 0%, rgba(2, 108, 252, 0.18), transparent 70%),
      var(--surface-2);
  }
  .card-featured .card-top { grid-area: top; }
  .card-featured .card-body { grid-area: body; }
  .card-featured .features { grid-area: features; align-content: start; }
  .card-featured .card-note { grid-area: note; }
  .card-featured .card-actions { grid-area: actions; align-self: start; margin-top: 4px; }
}

/* Fade-in on scroll (script.js adds .reveal only to elements below the fold). */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .card, .card-cta::after, .btn { transition: none; }
  a.card:hover { transform: none; }
}

/* Contact */
.section-contact { text-align: center; border-top: 1px solid var(--border); }
.section-contact h2 { font-size: var(--fs-h2); margin: 0 0 8px; }
.section-contact p { color: var(--muted); margin: 0 0 22px; }
.section-contact .contact-lede { margin-bottom: 6px; }
.section-contact .contact-sub { max-width: 560px; margin-left: auto; margin-right: auto; font-size: 14px; }
.section-contact .contact-address {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  user-select: all;
}
.contact-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
/* The "copied" message (filled and cleared by script.js) sits in the card's bottom padding, under the
   buttons, so it takes no space and the card never changes height. One 16px line, centred in the padding. */
.section-contact .copy-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;                /* (28px padding - 16px line) / 2 */
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  color: var(--accent);
}
/* Glowing CTA card: the gradient border is a second background clipped to the border box. */
.contact-card {
  position: relative;         /* anchors .copy-status */
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 32px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(0, 244, 252, 0.55), rgba(2, 108, 252, 0.55)) border-box;
  box-shadow: 0 0 48px rgba(0, 198, 254, 0.12), var(--shadow);
}
.contact-actions .btn { transition: transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.contact-actions .btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .contact-actions .btn { transition: none; }
  .contact-actions .btn:hover { transform: none; }
}

/* About */
.about-body { max-width: 760px; }
.about-body p { color: var(--muted); margin: 0 0 14px; }
.about-body .motto { margin-bottom: 0; color: var(--text); font-weight: 500; }
.stat-pills {
  list-style: none;
  margin: 4px 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stat-pills li {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: var(--fs-pill);
  font-weight: 600;
}
/* Phones: at most two chips per row (each at least 34% wide, and never narrower than its text, so where two
   don't fit each takes a full row), growing to fill it; the motto's words get their own line under
   "Our motto is simple:", ending at the right edge like the chips. */
@media (max-width: 639px) {
  .stat-pills li { flex: 1 0 34%; text-align: center; white-space: nowrap; }
  .motto-words { display: block; text-align: right; }
}
.grid.values { margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.value-card h3 { margin: 0 0 6px; font-size: var(--fs-card-title); }
.value-card p { margin: 0; color: var(--muted); font-size: var(--fs-card-text); }
/* Desktop (900px+): About in two columns. Heading, text, chips and motto on the left (about 58%); the value
   cards stacked on the right (about 42%), their top level with the first paragraph. Same DOM order as below 900px. */
@media (min-width: 900px) {
  .section-about .container { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); column-gap: 40px; align-items: start; }
  .section-about .section-head { grid-column: 1; }
  .section-about .about-body { grid-column: 1; grid-row: 2; }
  .grid.values { grid-column: 2; grid-row: 2; margin-top: 0; grid-template-columns: minmax(0, 1fr); }
  /* The four chips as two even rows of two, like on phones. */
  .stat-pills li { flex: 1 0 34%; text-align: center; white-space: nowrap; }
}

/* Privacy page */
.legal { padding: 64px 0 72px; }
.legal-body { max-width: 760px; }
.legal-body h1 { font-size: clamp(30px, 4.5vw, 44px); margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.1; }
.legal-body .updated { color: var(--muted); margin: 0 0 32px; font-size: 14px; }
.legal-body h2 { font-size: 20px; margin: 32px 0 8px; }
.legal-body p, .legal-body li { color: var(--muted); margin: 0 0 10px; }
.legal-body ul { padding-left: 20px; margin: 0 0 10px; }
.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--hover); }
.about-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.about-body a:hover { color: var(--hover); }

/* 404 page */
.not-found { text-align: center; padding: 96px 0 104px; }
.not-found h1 { font-size: clamp(32px, 5vw, 48px); margin: 0 0 12px; letter-spacing: -0.02em; }
.not-found .lede { margin: 0 auto 28px; }

/* Footer: four columns on top, copyright and Back to top below. */
.site-footer {
  position: relative;
  background: var(--footer-bg);
  color: var(--muted);
  font-size: 14px;
}
/* Thin gradient line in place of a plain top border. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent);
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 40px;
}
.footer-logo { display: inline-block; }
.footer-tagline { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
/* Inline growth icon in the taglines: as tall as the text, sitting on the baseline. */
.growth-icon { display: inline-block; height: 1em; width: auto; vertical-align: -0.1em; }
/* The motto's last word and its emojis stay on one line (the rest of the motto still wraps). */
.keep-together { white-space: nowrap; }
.footer-logo img { display: block; height: 64px; width: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.footer-blurb { margin: 12px 0 0; max-width: 300px; color: var(--muted); }
/* Column headings (Explore, Legal, Connect): gradient text, so they stand apart from the muted links.
   inline-block keeps the gradient as wide as the word; solid cyan where background-clip: text isn't supported. */
.footer-heading {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer-heading {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-link { color: var(--muted); transition: color .15s ease; }
.footer-link:hover { color: var(--hover); }
.footer-socials { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.footer-social:hover { color: var(--hover); border-color: var(--hover); box-shadow: 0 0 14px rgba(0, 198, 254, 0.35); }
.footer-note { margin: 14px 0 0; font-size: 13px; }
.footer-bottom { border-top: 1px solid var(--border); padding: 18px 0; font-size: 13px; }
/* Phones: copyright centred, "Back to top" centred on its own line below it.
   From 768px: one row; the copyright sits in the middle column so it stays truly centred, the link at the right edge. */
.footer-bottom-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px 24px; }
@media (min-width: 768px) {
  .footer-bottom-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .footer-copy { grid-column: 2; }
  .back-to-top { grid-column: 3; justify-self: end; }
}
.footer-copy { margin: 0; }
.muted { color: var(--muted); }

/* Tablets and phones in "Desktop site" mode (768-1023px): products and services stay three in a row,
   with a slightly tighter gap and card padding so nothing overflows. */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid:not(.values) { gap: 14px; }
  .grid > .card { padding: 18px; }
}

/* Phones and small tablets: products and services stack one card per row. */
@media (max-width: 767px) {
  .grid:not(.values) { grid-template-columns: minmax(0, 1fr); }
}

/* Tablets: value cards stack so their text isn't squeezed. */
@media (max-width: 767px) {
  .grid.values { grid-template-columns: minmax(0, 1fr); }
}

/* Gmail web compose is a desktop convenience; hide it on phones and tablets. */
@media (max-width: 768px) {
  .btn-gmail { display: none; }
}

/* Phones and small tablets: brand on top, Explore and Legal side by side, Connect centred below;
   everything centred, with 44px tap targets. */
@media (max-width: 767px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 16px; text-align: center; padding-top: 36px; padding-bottom: 28px; }
  .footer-brand, .footer-top > .footer-col:last-child { grid-column: 1 / -1; }
  .stat-pills { gap: 6px; }
  .stat-pills li { padding: 5px 10px; }
  .footer-list { gap: 0; }
  .footer-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
  .footer-heading { margin-bottom: 4px; }
  .footer-socials { justify-content: center; }
  .footer-social { width: 44px; height: 44px; }
  .footer-blurb { margin-left: auto; margin-right: auto; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .contact-card { padding: 32px 20px 24px; }
  .section-contact .copy-status { bottom: 4px; }   /* (24px padding - 16px line) / 2 */
}

@media (max-width: 600px) {
  .hero { padding: 72px 0 40px; }
  .section { padding: 40px 0; }
  .not-found { padding: 80px 0; }
  .nav a { margin-left: 14px; }
}

/* Mobile header: smaller logo, nav stays on the same line. */
@media (max-width: 639px) {
  .header-inner { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .brand-logo { height: 64px; }
  .nav { white-space: nowrap; }
  .nav a { margin-left: 12px; }
  .nav a:first-child { margin-left: 0; }
  section[id] { scroll-margin-top: 96px; }
  .contact-actions .btn { flex: 1 1 100%; }
  /* Hero buttons: side by side at equal width when both fit, otherwise stacked at equal full width. */
  .hero-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); }
}

/* Phones: slimmer header, smaller logo and tighter padding. */
@media (max-width: 480px) {
  .header-inner { padding-top: 6px; padding-bottom: 6px; }
  .brand-logo { height: 52px; }
  section[id] { scroll-margin-top: 80px; }
}

/* Narrow phones (up to 439px): tighten the header only. Its side padding is the content's (--gutter), so "Contact"
   ends at the content's right edge. */
@media (max-width: 439px) {
  .header-inner { gap: 8px; }
  .nav a { font-size: 14px; margin-left: 5px; }
  .nav a:first-child { margin-left: 0; }
}
/* Narrowest phones (up to 360px): a smaller logo so logo and nav still share one line. */
@media (max-width: 360px) {
  .brand-logo { height: 44px; }
}
/* 14px menu fits from 348px with the rules above; below that the menu becomes a flex row (no whitespace
   between the links), with a smaller logo and tighter link gaps. */
@media (max-width: 347px) {
  .brand-logo { height: 36px; }
  .nav { display: flex; }
  .nav a { margin-left: 5px; }
}
/* Below 340px (300-339px): 13px menu text and tighter gaps, so "Contact" stays inside the 16px padding
   with room to spare for wider phone fonts. */
@media (max-width: 339px) {
  .header-inner { gap: 6px; }
  .nav a { font-size: 13px; margin-left: 4px; }
  .nav a:first-child { margin-left: 0; }
}