/* ==========================================================================
   Studesafe — landing page
   Design rules this file enforces literally:
   1. one background color, everywhere (a barely-tinted off-white — see
      brand palette below)
   2. clean, minimal, restrained — color is used with intent, not decoration
   3. one font-family, everywhere
   4. copy text (body paragraphs, list/FAQ/answer text) is fixed at
      0.98rem / 1.53 line-height, and stays the single neutral ink color
      for readability. Headings, nav links, buttons, eyebrow labels, and
      footer labels are NOT copy text and get their own sizes AND may use
      brand color — see the "Type scale" and "Brand palette" sections.
   5. no card borders / shadows / fills — grouping is done with spacing only
   6. buttons: flat, brand-blue background, white text — no gradient/shadow
   7. all copy text is the single ink color (brand color is reserved for
      non-copy elements: headings, links, buttons, labels, accents)
   8. hamburger -> full-screen centered overlay on mobile, morphs to a close ×
   9. fluid, touch-friendly, no horizontal scroll

   Brand palette — sampled directly from the Studesafe logo file
   (the original logo.webp, since replaced by logo.svg) by pixel frequency, then each hue was
   darkened just enough to clear WCAG AA (4.5:1) for text/button use.
   The *-raw variables are the true logo colors, kept for large/decorative
   use (backgrounds, icons) where contrast rules don't apply; the plain
   variables are the text/button-safe versions used everywhere legibility
   matters.
     blue  (raw #0085ff -> safe #0070d7) — primary: trust, links, CTAs
     green (raw #01c34b -> safe #018333) — secondary: confirmation/safety
     coral (raw #fe5353 -> safe #e40101) — reserved, used sparingly, only
       for the one place the copy is actually about an alert escalating
       (mirrors the logo itself, where red only appears in the small
       decorative wifi/dotted elements, never in the STUD/e/SAFE wordmark)
   ========================================================================== */

:root {
  --bg: #f6f6f6;
  --ink: #14171f;

  --blue: #0085ff;
  --blue-text: #0070d7;
  --green: #01c34b;
  --green-text: #018333;
  --coral: #fe5353;
  --coral-text: #e40101;
  --btn-text: #ffffff;

  --font: "Manrope", sans-serif;

  /* Copy text — fixed, per rule #4. Everything else below is free. */
  --fs-copy: 0.98rem;
  --lh-copy: 1.53;

  /* Type scale — headings, nav, buttons, and small print only. */
  --fs-h1: clamp(2.25rem, 5.5vw, 3.4rem);
  --lh-h1: 1.08;
  --fs-h2: clamp(1.6rem, 3.4vw, 2.15rem);
  --lh-h2: 1.2;
  --fs-h3: 1.15rem;
  --lh-h3: 1.3;
  --fs-eyebrow: 0.8rem;
  --lh-eyebrow: 1.4;
  --fs-nav: 0.95rem;
  --fs-nav-overlay: 1.65rem;
  --fs-btn: 0.95rem;
  --fs-footer-link: 0.9rem;
  --fs-footer-copy: 0.85rem;
  --fs-step-index: 1.85rem;
  --fs-faq-q: 1.05rem;

  --maxw-narrow: 640px;
  --maxw-wide: 1040px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-pad: clamp(3rem, 8vw, 6rem);
  --header-h: clamp(94px, 12.5vw, 122px); /* grown to keep clearance around the enlarged .logo img */
}

/* Widescreen gets half the section rhythm of the fluid clamp above
   (6rem -> 3rem); mobile/tablet are untouched. */
@media (min-width: 960px) {
  :root {
    --section-pad: 3rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  color: inherit;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit; /* buttons don't inherit font-family by default in most browsers */
  font-size: inherit;
}

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75em 1.25em;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 3px;
}

/* Containers ------------------------------------------------------------ */

.container-narrow,
.container-wide {
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  max-width: var(--maxw-narrow);
}

.container-wide {
  max-width: var(--maxw-wide);
}

main section {
  padding-block: var(--section-pad);
}

/* Type helpers ------------------------------------------------------------
   Headings/labels get their own size + line-height from the type scale
   above. Copy text (p, li body content, FAQ answers) is left alone on
   purpose — no rule here touches font-size/line-height on those, so they
   keep inheriting the fixed 0.98rem / 1.53 straight from body. */

.eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.9em;
  color: var(--blue-text);
}

/* One section — safety & privacy — gets the green eyebrow instead of
   blue, since green is this page's "confirmed / all-clear" color and
   this section is literally the reassurance pitch. */
#safety .eyebrow {
  color: var(--green-text);
}

/* Accent utilities — applied selectively to headings/spans, never to
   copy text, to tag content by theme: blue = trust/visibility, green =
   confirmation/safety, coral = the one alert/escalation moment. */
.accent {
  color: var(--blue-text);
}

.accent-green {
  color: var(--green-text);
}

.accent-coral {
  color: var(--coral-text);
}

.headline,
.h {
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.6em;
}

.headline {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  max-width: 14ch;
}

.h {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-bottom: 0.75em;
}

.h-sub {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  margin-bottom: 0.4em;
}

.lede {
  max-width: 46ch;
  margin-bottom: 1.75em;
}

main section p + p {
  margin-top: 1em;
}

/* The closing CTA section's button follows a lone paragraph (no `p + p`
   to catch it), so it sits flush against the copy above it by default. */
#contact .btn {
  margin-top: 1.75rem;
}

/* Buttons & links --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-text);
  color: var(--btn-text);
  font-size: var(--fs-btn);
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.95em 1.7em;
  border-radius: 8px;
  min-height: 48px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn:active {
  filter: brightness(0.95);
  transform: translateY(0);
}

.text-link {
  font-size: var(--fs-nav);
  line-height: 1.2;
  font-weight: 600;
  color: var(--blue-text);
  text-underline-offset: 0.3em;
}

.text-link:hover,
.text-link:focus-visible {
  text-decoration: underline;
}

/* Header / nav ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
}

.nav-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.logo {
  display: block;
  margin-right: auto;
  flex-shrink: 0;
}

/* Horizontal wordmark (logo.svg, about 5:1): the S is the route mark. */
.logo img {
  display: block;
  height: clamp(36px, 4.6vw, 48px);
  width: auto;
}

.logo-footer img {
  height: clamp(44px, 11vw, 60px);
}

.nav-links {
  display: none;
  gap: 1.75rem;
  font-size: var(--fs-nav);
  line-height: 1.2;
}

.nav-links a {
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.nav-cta {
  display: none;
  /* No padding/min-height override — matches the hero CTA's .btn size
     exactly rather than a shrunk-down nav-specific one. */
}

/* Hamburger ---------------------------------------------------------------
   Three bars that rotate into an × on open; the same control both opens
   and closes the menu. */

.hamburger {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hamburger .bar {
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.hamburger .bar:nth-child(1) {
  transform: translateY(-6px);
}

.hamburger .bar:nth-child(3) {
  transform: translateY(6px);
}

body.nav-open .hamburger .bar:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

body.nav-open .hamburger .bar:nth-child(2) {
  opacity: 0;
}

body.nav-open .hamburger .bar:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* Full-screen mobile overlay ----------------------------------------------
   Links centered both horizontally and vertically, same bg as the rest of
   the page so it reads as one continuous surface, not a separate "sheet". */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

body.nav-open .nav-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-overlay ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  padding-inline: var(--gutter);
}

.nav-overlay a {
  font-weight: 600;
}

.nav-overlay a:not(.btn) {
  font-size: var(--fs-nav-overlay);
  line-height: 1.3;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nav-overlay a.btn {
  font-size: var(--fs-btn);
}

.nav-overlay a:not(.btn):hover,
.nav-overlay a:not(.btn):focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Hero ---------------------------------------------------------------- */

.hero {
  padding-top: clamp(3.5rem, 10vw, 7rem);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Numbered steps ("How it works") ----------------------------------------- */

.steps {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.steps li {
  display: flex;
  gap: 1.5rem;
}

.step-index {
  font-size: var(--fs-step-index);
  line-height: 1;
  font-weight: 700;
  flex-shrink: 0;
  width: 2ch;
  color: var(--green-text);
}

/* Product image placeholders --------------------------------------------
   Clearly-marked mockup frames (dashed border, muted fill) standing in
   for real app screenshots — deliberately not styled to look like a
   finished "card" (which the rest of the page avoids), since the point
   is to visually read as "swap this out", not as real content. */

.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}

@media (min-width: 860px) {
  .product-layout {
    /* copy column slightly wider than the shots column, and pinned to
       the top so the images don't stretch to match a taller step list */
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  /* #product's shots column is the one exception: it stretches to match
     the (taller, 6-step) copy column's height, so the third shot's
     bottom edge can be pinned to sit flush with the end of the copy
     (see .product-shots > .shot-frame:last-child below). */
  #product .product-layout {
    align-items: stretch;
  }
}

.product-copy .steps {
  max-width: 46ch;
}

/* Match the gap above the first step to the gap between steps (2.25rem,
   set on .steps below) rather than the shared .h heading's smaller
   default margin — scoped here so other section headings are unaffected. */
.product-copy .h {
  margin-bottom: 2.25rem;
}

.product-shots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

/* Pushes the last shot to the bottom of the (stretched) shots column —
   a no-op wherever the column's height already equals its own content
   (mobile stacking, and #signal's single-image .product-shots, which
   isn't stretched). */
#product .product-shots > .shot-frame:last-child {
  margin-top: auto;
}

.shot-frame {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 2rem;
  text-align: center;
  border: 2px dashed rgba(20, 23, 31, 0.25);
  border-radius: 16px;
  background: rgba(20, 23, 31, 0.03);
  color: rgba(20, 23, 31, 0.5);
}

.shot-frame--mobile {
  max-width: 220px;
  aspect-ratio: 9 / 18;
}

.shot-frame--web {
  max-width: 560px;
  aspect-ratio: 16 / 10;
}

/* "Everything a checkpoint system needs" — a photo above each point,
   full width of the point's own grid column on widescreen. */
.shot-frame--feature {
  aspect-ratio: 16 / 9;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* "One system, three views" — each view gets its own photo beside the
   copy on widescreen, stacked above it (still shown, not dropped) on
   mobile. */
.shot-frame--view {
  aspect-ratio: 16 / 10;
}

.shot-icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Grids — "invisible cards": no border, no background, no shadow.
   Separation comes entirely from spacing. */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 2.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-item p {
  max-width: 40ch;
}

/* "One system, three views" rows — copy + photo, side by side on
   widescreen, photo stacked below the copy on mobile. */

.view-list {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  margin-top: 2.5rem;
}

.view-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 720px) {
  .view-row {
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
  }
}

.view-copy p {
  max-width: 40ch;
}

/* Team section — real member cards, structure/sizing matched to
   Tech Studio.Art's own team section (techstudio.art): centered
   card, initials avatar at 50% card width (20%/72px max on mobile),
   name, role label, one-line bio. Colors use Studesafe's own palette
   rather than importing Tech Studio.Art's, everything else as-is. */

.team-member {
  text-align: center;
}

.team-avatar {
  width: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  background: rgba(20, 23, 31, 0.06);
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
}

.team-role {
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
  opacity: 0.65;
}

@media (max-width: 900px) {
  .team-avatar {
    width: 20%;
    max-width: 72px;
  }
}

@media (min-width: 960px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Plain list ("why this approach") ----------------------------------------- */

.plain-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.plain-list li {
  padding-left: 1.4em;
  position: relative;
}

.plain-list li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-text);
}

/* Signal visual -----------------------------------------------------------
   Makes the logo's own idea explicit: a confirmed checkpoint is a signal
   (green, arcs pointing up, same shape as the top of the logo) — an
   unconfirmed one is a lost signal (coral, arcs mirrored downward, same
   shape as the bottom of the logo) that starts the escalation chain the
   logo represents as a row of dots under the wordmark. */

.signal-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 2.5rem;
}

@media (min-width: 720px) {
  .signal-compare {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4rem;
  }
}

/* Mobile: both states centered. Desktop: ok stays left, lost flips to
   the right — see the two .signal-state--* rules in the media query
   below. */
.signal-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 720px) {
  .signal-state--ok {
    align-items: flex-start;
    text-align: left;
  }

  .signal-state--lost {
    align-items: flex-end;
    text-align: right;
  }

  /* The lost column has an extra escalation-dots row between its icon
     and heading that the ok column doesn't, which would otherwise push
     "Signal lost -> escalating" below "Signal received". This matches
     it — see the README for how the exact value was measured. */
  .signal-state--ok h3 {
    margin-top: 2.65rem;
  }
}

.signal-icon {
  width: 84px;
  height: auto;
  margin-bottom: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

.signal-icon circle {
  fill: currentColor; /* the dot needs its own fill — the icon-level
    `fill: none` above would otherwise leave it invisible */
}

.signal-state--ok .signal-icon {
  color: var(--green-text);
}

.signal-state--lost .signal-icon {
  color: var(--coral-text);
}

.signal-state p {
  max-width: 42ch;
}

/* Matches the gap after "Signal received" / "Signal lost -> escalating"
   to the gap between two paragraphs elsewhere in this section (`main
   section p + p`, 1em of the 0.98rem copy font-size = 0.98rem) — the
   shared .h-sub heading style's own margin-bottom (0.4em of the
   heading's own, larger font-size) is smaller and scoped generically,
   so it's overridden here rather than changed everywhere. */
.signal-state h3 {
  margin-bottom: 0.98rem;
}

.escalation-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.9rem 0 1.25rem;
}

@media (min-width: 720px) {
  .escalation-dots {
    justify-content: flex-end;
  }
}

.escalation-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral-text);
  opacity: 0.35;
  animation: escalate-pulse 1.8s ease-in-out infinite;
}

.escalation-dots span:nth-child(1) {
  animation-delay: 0s;
}
.escalation-dots span:nth-child(2) {
  animation-delay: 0.25s;
}
.escalation-dots span:nth-child(3) {
  animation-delay: 0.5s;
}
.escalation-dots span:nth-child(4) {
  animation-delay: 0.75s;
}

@keyframes escalate-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .escalation-dots span {
    animation: none;
    opacity: 0.8;
  }
}

.escalation-steps {
  /* Matches the paragraph-to-paragraph gap in this section (see the
     .signal-state h3 rule above) instead of .plain-list's own smaller
     default top margin. */
  margin-top: 0.98rem;
  /* Without this, .plain-list's own align-items:stretch default would
     size every <li> to match the widest ("Transport coordinator"),
     leaving the dot+text unit off-center within that shared width. */
  align-items: center;
}

@media (min-width: 720px) {
  .escalation-steps {
    /* The rest of the column is right-aligned, but this list reads
       left-to-right per item (dot, then text) instead — align-items
       reverts to stretch so every <li> shares one width and the dots
       land in a single vertical column, and align-self pins the whole
       list to the column's left edge rather than following everything
       else flush right. */
    align-self: flex-start;
    align-items: stretch;
    text-align: left;
  }
}

.escalation-steps li::before {
  background: var(--coral-text);
}

/* FAQ — native <details>, no border by default, matches rule #5 ----------- */

.faq-list {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

.faq-list details {
  border-top: 1px solid rgba(20, 23, 31, 0.12);
  padding-block: 1.25rem;
}

.faq-list details:last-child {
  border-bottom: 1px solid rgba(20, 23, 31, 0.12);
}

.faq-list summary {
  cursor: pointer;
  font-size: var(--fs-faq-q);
  line-height: var(--lh-h3);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--blue-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.faq-list details[open] .faq-chevron {
  transform: rotate(180deg);
}

/* Height is animated by assets/script.js (0 -> scrollHeight -> auto on
   open, the reverse on close) — native <details> has no transition of
   its own for the open/closed jump, so this is JS-driven, not CSS-only. */
.faq-answer {
  height: 0;
  overflow: hidden;
}

.faq-answer p {
  margin-top: 0.9rem;
  max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-chevron {
    transition: none;
  }
}

/* Footer -------------------------------------------------------------- */

.site-footer {
  padding-top: 3.5rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .logo's own `margin-right: auto` (for the header, where it pins the
   logo to the far left of a row) would otherwise cancel this container's
   centering by eating all the cross-axis space on one side. */
.footer-brand .logo {
  margin-right: 0;
}

@media (min-width: 720px) {
  .footer-brand {
    align-items: flex-start;
  }
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}

.footer-col {
  text-align: center;
}

.footer-col-title {
  font-size: var(--fs-footer-link);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--blue-text);
  margin-bottom: 1rem;
}

.footer-col nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.footer-col nav a {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-footer-link);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.footer-col nav a:hover,
.footer-col nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.footer-bottom {
  padding-block: 1.5rem;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: var(--fs-footer-copy);
  color: var(--ink);
}

@media (min-width: 560px) {
  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 720px) {
  .footer-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer-columns {
    flex: 1;
    max-width: 480px;
    margin-left: auto;
  }

  .footer-col {
    text-align: left;
  }

  .footer-col nav {
    align-items: flex-start;
  }
}

/* Desktop nav switch -------------------------------------------------------
   Above this width: inline links + CTA, no hamburger.
   Below it: hamburger + full-screen overlay only. */

@media (min-width: 880px) {
  /* Three-zone bar: logo fixed left, links centered in the remaining
     space, CTA fixed right — rather than the mobile flex row where
     everything after the logo just bunches to the right. */
  .nav-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
  }

  .nav-links {
    display: flex;
    justify-self: center;
  }

  .nav-cta {
    display: inline-flex;
  }

  .hamburger,
  .nav-overlay {
    display: none;
  }
}