/* =========================================================================
   Module · Footer — Figma 7059:2736 (page Global: Modules)
   420 7059:2695 · 1024 7059:2654 · 1440 7059:2572 · 1920 7059:2613
   Black, white type. A column, spacing/stack-xl apart, padded
   spacing/section-padding on top, spacing/stack-l below, the page margin at
   the sides (the site's --gutter, so the content holds at 1440 from 1680):
     Newsletter  420: a column, grid-gutter apart; from 1024 a row, heading
                 (eyebrow + Heading/Section, stack-m apart) left, sign-up
                 (400 wide) right, bottoms aligned
     divider     1px White 20
     Links       from 1024: Contact | About | Products | Brand, equal,
                 grid-gutter apart; 420: Products | About, a divider,
                 Contact | Brand. Each column: Heading/Card Small, then its
                 lines (Body/Default, White 50), stack-l apart
     divider
     Legal       Body/Small, White 50: copyright left, links right; 420: the
                 links over the copyright, 16 apart
     Wordmark    full width, 1360 : 186
   Figma draws it from plain layers, not elements: its eyebrow is a 12px
   white diamond 10 from a Label/Eyebrow label.
   Raw in Figma: the 8 between lines, the diamond 12 and its 10, the sign-up
   400 wide, the field 56 high with its 40 button 8 from the right and the
   value 16 in, "For general inquries:" in a raw 16/24, the Legal gap on 420
   (16), the social icons 32 and 8 apart.
   Motion and hovers are the old footer's: the reveals, the links' rolling
   text (motion.js), the wordmark lighting up as the page ends, the grow
   seam from the section above (seams.css).
   ========================================================================= */
.m-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-stack-xl);
  padding: var(--spacing-section-padding) var(--gutter) var(--spacing-stack-l);
  background: var(--color-black);
  color: var(--color-white);
}
.m-footer :is(p, h2, h3) { margin: 0; }
.m-footer__muted { color: var(--color-white-50); }
.m-footer__rule { display: block; height: 1px; background: var(--color-white-20); }

/* ── newsletter ──────────────────────────────────────────────────────── */
.m-footer__news { display: flex; flex-direction: column; gap: var(--spacing-grid-gutter); }
.m-footer__heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-stack-m); }
.m-footer__eyebrow { display: flex; align-items: center; gap: 10px; }
.m-footer__eyebrow span { display: block; }
.m-footer__eyebrow img { flex: none; width: 12px; height: 12px; }
.m-footer__signup { display: flex; flex-direction: column; gap: var(--spacing-stack-s); }
.m-footer__field {
  position: relative;
  height: 56px;
  border-radius: var(--radius-box);
  overflow: hidden;
  background: var(--color-white-10);
  transition: background-color .2s var(--e-inout);
}
.m-footer__field:focus-within { background: var(--color-white-20); }
.m-footer__field input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(40px + var(--space-16)) 0 var(--space-16);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-white);
  text-box: normal;
}
.m-footer__field input::placeholder { color: var(--color-white); opacity: 1; }
.m-footer__field button {
  position: absolute;
  top: 50%;
  right: var(--space-8);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-box);
  background: var(--color-white);
  cursor: pointer;
  transition: background-color .2s var(--e-inout);
}
.m-footer__field button img { width: 16px; height: 16px; }

/* ── links ───────────────────────────────────────────────────────────── */
/* 420: Products | About, a divider, Contact | Brand */
.m-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-stack-xl) var(--spacing-grid-gutter);
  align-items: start;
}
.m-footer__col--products { order: 1; }
.m-footer__col--about { order: 2; }
.m-footer__rule--links { order: 3; grid-column: 1 / -1; }
.m-footer__col--contact { order: 4; }
.m-footer__col--brand { order: 5; }
.m-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-stack-l); min-width: 0; }
.m-footer__head { align-self: stretch; }
.m-footer__lines > * { display: block; }
.m-footer__lines > * + * { margin-top: 8px; }                     /* Figma: 8, raw */
.m-footer__list a { color: var(--color-white-50); transition: color .2s var(--e-inout); }
.m-footer__inquiry { display: flex; flex-direction: column; align-items: flex-start; }
.m-footer__ask { font-size: var(--font-size-16); line-height: var(--line-height-24); }   /* Figma: raw 16/24 */
.m-footer__inquiry a { color: var(--color-white); text-decoration: none; transition: opacity .2s var(--e-inout); }
.m-footer__social { display: flex; align-items: center; gap: var(--space-8); }
.m-footer__social a { display: block; transition: opacity .2s var(--e-inout); }
.m-footer__social img { width: 32px; height: 32px; }

/* ── legal ───────────────────────────────────────────────────────────── */
.m-footer__legal { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: var(--space-16); }
.m-footer__copy { color: var(--color-white-50); }
.m-footer__legal-links a { margin-right: var(--space-20); }
.m-footer__legal-links a:last-child { margin-right: 0; }
.m-footer__legal-links a { color: var(--color-white-50); transition: color .2s var(--e-inout); }

/* ── wordmark: it lights up as the reader arrives at it (the old footer's
   view() timeline: black until the page is nearly done, white at the end) */
.m-footer__wordmark { display: block; width: 100%; height: auto; }
@supports (animation-timeline: view()) {
  .m-footer__wordmark {
    opacity: 0;
    animation: m-footer-word-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  @keyframes m-footer-word-in {
    0%   { opacity: 0; }
    45%  { opacity: 0; }
    100% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .m-footer__wordmark { opacity: 1; animation: none; }
  }
}

/* ── hovers (the old footer's) ───────────────────────────────────────── */
@media (any-hover: hover) {
  .m-footer__list a:hover, .m-footer__legal-links a:hover { color: var(--color-white); }
  .m-footer__inquiry a:hover { opacity: .7; }
  .m-footer__social a:hover { opacity: .65; }
  .m-footer__field button:hover { background: var(--color-white-80); }
}
/* the rolling text (motion.js builds it from 1025 with a fine pointer): the
   copy that rolls in is white, so the link keeps its grey under it */
.m-footer a.is-rolled { --roll-to: var(--color-white); }
.m-footer a.is-rolled:hover { color: var(--color-white-50); }
@media (prefers-reduced-motion: reduce) {
  .m-footer a.is-rolled:hover { color: var(--color-white); }
}

/* ── 1024 up ─────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .m-footer__news { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .m-footer__title { white-space: nowrap; }
  .m-footer__signup { flex: none; width: 400px; }                  /* Figma: 400, raw */
  .m-footer__links { display: flex; align-items: flex-start; gap: var(--spacing-grid-gutter); }
  .m-footer__col { flex: 1 0 0; }
  .m-footer__col--contact { order: 1; }
  .m-footer__col--about { order: 2; }
  .m-footer__col--products { order: 3; }
  .m-footer__col--brand { order: 4; }
  .m-footer__rule--links { display: none; }
  .m-footer__lines { white-space: nowrap; }
  .m-footer__legal { flex-direction: row; justify-content: space-between; align-items: center; }
  .m-footer__legal-links { white-space: nowrap; }
}