/* ===================================================================
   Section styles, in the order the sections appear in index.html.
   Tokens and shared components come from base.css.
   =================================================================== */

/* ===================================================================
   Announcement bar
   =================================================================== */

.announcement {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background: #000;
  color: #F2F2F2;
  font-size: 13px;
  letter-spacing: .01em;
  text-align: center;
}
.announcement a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* A centred flex row with nothing to give: on a phone the sentence and
   the link squeeze each other into two ragged columns. Stack them. */
@media (max-width: 560px) {
  .announcement {
    flex-direction: column;
    gap: 4px;
    padding: 10px 20px;
    font-size: 12.5px;
  }
}

/* ===================================================================
   Navigation
   =================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px var(--shell-pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: -.02em;
}
.nav__brand img { width: 28px; height: 28px; object-fit: contain; }
.nav__brand:hover { text-decoration: none; }

.nav__links { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.nav__actions { display: flex; align-items: center; gap: 12px; }

/* --- Products flyout ---------------------------------------------
   Opens on hover and on keyboard focus. The padded wrapper keeps the
   menu reachable while the pointer travels down from the trigger. */
.nav__dropdown { position: relative; flex-shrink: 0; }

.nav__menu {
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 60;
  padding-top: 14px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .14s ease, visibility .14s ease;
}
.nav__dropdown:hover .nav__menu,
.nav__dropdown:focus-within .nav__menu { visibility: visible; opacity: 1; }

.nav__menu-inner {
  display: grid;
  gap: 2px;
  width: 340px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(20, 20, 20, .1);
}
.nav__menu-inner a { display: block; padding: 12px 14px; border-radius: 10px; }
.nav__menu-inner a:hover { background: var(--paper-sunk); text-decoration: none; }

.nav__menu-title { font-size: 14px; font-weight: 600; }
.nav__menu-desc  { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-muted); }

/* --- Menu toggle --------------------------------------------------
   Hidden on desktop, where the nav is a single row and the flyout
   opens on hover. Three bars from one element via ::before/::after,
   crossing into an X when the panel is open. */
.nav__toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, background-color .2s ease;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ""; position: absolute; left: 12px; }
.nav__toggle-bars::before { transform: translateY(-6px); }
.nav__toggle-bars::after  { transform: translateY(6px); }

.nav[data-nav-open="true"] .nav__toggle-bars { background: transparent; }
.nav[data-nav-open="true"] .nav__toggle-bars::before { transform: rotate(45deg); }
.nav[data-nav-open="true"] .nav__toggle-bars::after  { transform: rotate(-45deg); }

/* --- Below 960px: the row becomes a panel --------------------------
   .nav__links and .nav__actions stay siblings and simply take a full
   row each once the bar is allowed to wrap, so nothing needs
   reordering and the desktop layout above is untouched.

   960px, not the 800px the rest of the page uses: the bar needs about
   870px for the brand, four links and the CTA at their natural widths,
   so between 800 and 900 the button wraps to two lines while still
   pretending to be a desktop nav. The extra headroom covers font
   metrics this was not measured against.

   Three things share this number and must change together: this block,
   the --nav-height fallback in base.css, and the auto-close width in
   js/main.js. */
@media (max-width: 960px) {
  .nav { flex-wrap: wrap; gap: 0 16px; padding-block: 14px; }
  .nav__toggle { display: flex; margin-left: auto; }

  .nav__links,
  .nav__actions { display: none; flex-basis: 100%; }

  .nav[data-nav-open="true"] .nav__links,
  .nav[data-nav-open="true"] .nav__actions { display: flex; }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 16px;
  }
  .nav__links > a,
  .nav__dropdown-trigger { padding: 12px 0; }

  /* No hover on touch, so the flyout is simply the list it contains. */
  .nav__dropdown-trigger span { display: none; }
  .nav__menu {
    position: static;
    padding-top: 0;
    visibility: visible;
    opacity: 1;
  }
  .nav__menu-inner {
    width: auto;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav__menu-inner a { padding: 10px 0; }
  .nav__menu-desc { display: none; }

  .nav__actions { margin-top: 12px; padding-bottom: 4px; }
  .nav__actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__toggle-bars,
  .nav__toggle-bars::before,
  .nav__toggle-bars::after { transition: none; }
}

/* ===================================================================
   Hero film
   =================================================================== */

.film {
  position: relative;
  height: min(88vh, 920px);
  min-height: 540px;
  overflow: hidden;
  background: var(--film);
}
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.film__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 11, 14, .08) 35%, rgba(10, 11, 14, .62) 100%);
}

.film__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0 var(--shell-pad);
  text-align: center;
  pointer-events: none;
}
.film__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(54px, 6.5vw, 104px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.film__sub {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(250, 250, 249, .9);
}

/* ===================================================================
   City ticker
   =================================================================== */

.ticker {
  margin-top: 32px;
  padding: 14px 0;
  overflow: hidden;
  background: var(--paper-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.ticker__list { display: flex; }
.ticker__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  font-size: 13px;
  color: var(--ink-body);
  white-space: nowrap;
}
.ticker__list b    { font-weight: 600; }
.ticker__list span:last-child { color: var(--ink-faint); }

.ticker__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: pulse 2.4s infinite;
}
.ticker__dot--live { background: #155B1F; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__dot   { animation: none; }
}

/* ===================================================================
   About
   =================================================================== */

.about { padding-block: 96px; }
.about__lead {
  max-width: 30ch;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.22;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.about__cta { margin-top: 32px; }

/* ===================================================================
   Why it matters
   =================================================================== */

.band--dark .shell--split { padding-block: 110px; }

.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

/* Each stat is a button so the count-up can be replayed by click or key. */
.why__stat {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.why__figure {
  display: block;
  font-family: var(--font-serif);
  font-size: 88px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
}
.why__figure--nowrap { white-space: nowrap; }
.why__amount { font-size: 68px; }
.why__unit    { font-size: 44px; }
.why__unit--sm { font-size: 36px; }

.why__label {
  display: block;
  max-width: 26ch;
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-on-dark-muted);
}
.why__sources {
  max-width: 70ch;
  margin-top: 36px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-on-dark-faint);
}

@media (max-width: 800px) {
  .why { grid-template-columns: 1fr; gap: 32px; }
  .band--dark .shell--split { padding-block: 88px; }
}

/* ===================================================================
   Products index
   =================================================================== */

.products { padding-block: 120px; }
.products .display { margin-bottom: 88px; }

.products__row {
  display: grid;
  grid-template-columns: 90px 260px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 8px;
  border-top: 1px solid var(--line);
}
.products__list .products__row:last-child { border-bottom: 1px solid var(--line); }
.products__row:hover { background: var(--paper-sunk); text-decoration: none; }

.products__num  { font-family: var(--font-serif); font-size: 26px; color: var(--accent); }
.products__name { font-size: 17px; font-weight: 600; }
.products__desc { font-size: 15px; color: var(--ink-muted); }

@media (max-width: 800px) {
  .products { padding-block: 88px; }
  .products .display { margin-bottom: 48px; }
  .products__row { grid-template-columns: 60px 1fr; gap: 8px 16px; }
  .products__desc { grid-column: 2; }
}

/* ===================================================================
   Product galleries (App and Console)
   =================================================================== */

/* The only anchor target with no top padding of its own — its air comes
   from .products' 120px bottom padding, which a jump scrolls past. The
   scroll-margin puts it back, so jumping here looks like scrolling here.
   Layout is untouched; this applies to scrolling only. */
.app-head { padding-bottom: 40px; scroll-margin-top: 120px; }
.app-head .eyebrow { margin-bottom: 20px; }

/* Must sit after the rule above, not in the earlier 800px block with
   .products: a media query adds no specificity, so the later of two
   equally specific rules wins at every width. */
@media (max-width: 800px) {
  .app-head { scroll-margin-top: 88px; }
}

.gallery {
  display: grid;
  gap: 32px;
  align-items: start;
  padding-block: 48px;
}
.gallery--three { grid-template-columns: repeat(3, 1fr); }
.gallery--two   { grid-template-columns: repeat(2, 1fr); }

.gallery__lead {
  grid-column: 1 / -1;
  max-width: 70ch;
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-body);
}
.gallery__lead--wide { margin-bottom: 48px; }

/* --- Card -------------------------------------------------------- */
.card__frame {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--film);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: zoom-in;
}
.card__frame--portrait { aspect-ratio: 4 / 5; }
.card__frame--wide     { aspect-ratio: 16 / 9; }
.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.card__frame:hover img { transform: scale(1.015); }
.card__frame:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.card__body { padding: 22px 4px 0; }
.card__body .eyebrow { margin-bottom: 10px; }
.card__title {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.card__copy { font-size: 14.5px; line-height: 1.6; color: var(--ink-body); }

@media (prefers-reduced-motion: reduce) {
  .card__frame img { transition: none; }
  .card__frame:hover img { transform: none; }
}
@media (max-width: 900px) {
  .gallery--three, .gallery--two { grid-template-columns: 1fr; gap: 24px; }
}

/* ===================================================================
   Console
   =================================================================== */

.console {
  margin-top: 60px;
  padding: 120px 0 60px;
  border-top: 1px solid var(--line);
}
.console__head { padding-bottom: 40px; }
.console__head .eyebrow { margin-bottom: 20px; }
.console__cta { padding-top: 32px; }

/* ===================================================================
   Data Bot
   =================================================================== */

.databot {
  margin-block: 60px;
  border-top: 1px solid var(--line);
}
.databot__intro { padding: 120px var(--shell-pad) 64px; }
.databot__intro .eyebrow { margin-bottom: 20px; }
.databot__title { max-width: 18ch; margin-bottom: 28px; }
.databot__note {
  max-width: 70ch;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #7A776F;
}

.databot__stage {
  width: 100%;
  overflow: hidden;
  background: #0B0C0E;
  border-top: 1px solid var(--line-dark);
}
.databot__video { width: 100%; height: auto; background: #0B0C0E; }

.databot__specs { padding: 34px var(--shell-pad) 44px; }
.databot__specs .eyebrow { margin-bottom: 22px; }

.specs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid #D9D7D1;
}
.specs__item { min-width: 0; padding: 18px 18px 0 0; }
.specs__item + .specs__item { padding-left: 18px; }
.specs dt { margin-bottom: 5px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.specs dd { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-muted); }

@media (max-width: 900px) {
  .databot__intro { padding: 88px var(--shell-pad) 48px; }
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .specs__item:nth-child(n + 4) { border-top: 1px solid var(--line); padding-top: 18px; }
}
@media (max-width: 600px) {
  .specs { grid-template-columns: 1fr 1fr; }
  .specs__item:nth-child(n + 3) { border-top: 1px solid var(--line); padding-top: 16px; }
}

/* ===================================================================
   Intelligence — simulation panels
   =================================================================== */

.intelligence .shell { padding-block: 120px 100px; }
.intelligence .eyebrow { margin-bottom: 20px; }
.intelligence__copy { margin: 28px 0 56px; }

.sim {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  margin-bottom: 24px;
}

.panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
}
.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--panel-line);
}
.panel__label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-on-dark-muted);
  white-space: nowrap;
}
.panel__live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--data-free);
}
.panel__body { flex: 1; padding: 8px 8px 0; }
.panel__legend {
  display: flex;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--panel-line);
  font-size: 12px;
  color: var(--ink-on-dark-muted);
}
.panel__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--panel-line);
  font-size: 12.5px;
  color: var(--ink-on-dark-muted);
}
.panel__foot b { color: var(--accent); font-weight: 600; }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--data-free);
  display: inline-block;
}
.dot--pulse { animation: pulse 2.4s infinite; }
@media (prefers-reduced-motion: reduce) {
  .dot--pulse { animation: none; }
}

.swatch--free      { color: var(--data-free); }
.swatch--taken     { color: var(--data-taken); }
.swatch--predicted { color: var(--accent); }
.swatch--none      { color: var(--data-none); }

/* --- City tabs --------------------------------------------------- */
.panel__tabs { display: flex; gap: 6px; }
.panel__tabs button {
  padding: 5px 13px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-on-dark-muted);
  font-family: var(--font-sans);
  font-size: 11.5px;
  cursor: pointer;
}
.panel__tabs button[aria-selected="true"] { background: var(--accent); color: var(--dark); }

/* --- Hourly bars ------------------------------------------------- */
.bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 180px;
  padding: 24px 20px 8px;
}
.bars button {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.bars span {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--data-bar-idle);
  transition: background-color .2s ease, height .2s ease;
}
.bars__axis {
  display: flex;
  justify-content: space-between;
  padding: 0 20px 10px;
  font-size: 11px;
  color: var(--ink-on-dark-faint);
}

/* --- Hour slider ------------------------------------------------- */
.sim__controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  padding: 16px 24px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
}
.sim__controls input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.sim__hour {
  min-width: 64px;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--accent);
  text-align: right;
}

@media (max-width: 800px) {
  .intelligence .shell { padding-block: 88px 72px; }
  .sim { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sim__controls { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .sim__controls input { flex: 1 1 150px; min-width: 0; }
}

/* ===================================================================
   Technology — layered architecture
   -------------------------------------------------------------------
   Desktop: .arch__scroll is a tall spacer, .arch__sticky pins to the
   viewport, and js/architecture.js maps scroll progress onto
   data-active plus a --shift per layer.
   Narrow screens and reduced motion: everything collapses to a plain
   stacked list and the JS switches to its static branch.
   =================================================================== */

.technology {
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  overflow: clip;
}
.technology .shell { padding-block: 120px 100px; }
.technology__heading { margin-bottom: 40px; }
.technology__heading .eyebrow { margin-bottom: 20px; }

.arch {
  --arch-ink: var(--ink-on-dark);
  --arch-accent: var(--accent);
  position: relative;
  isolation: isolate;
}
.arch__scroll { position: relative; height: 300vh; }
.arch__sticky {
  position: sticky;
  top: var(--nav-height);
  box-sizing: border-box;
  height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.4vh, 24px) 0 clamp(10px, 1.8vh, 18px);
}
.arch__stage {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
  min-height: 0;
}

/* --- Layer labels ------------------------------------------------ */
.arch__labels { display: grid; gap: 12px; }

.arch__label {
  appearance: none;
  width: max-content;
  max-width: 100%;
  min-width: 230px;
  min-height: 56px;
  padding: 0 12px 0 20px;
  overflow: hidden;
  border: 1px solid rgba(243, 242, 238, .14);
  border-radius: 999px;
  background: rgba(243, 242, 238, .055);
  color: var(--arch-ink);
  text-align: left;
  cursor: pointer;
  opacity: .48;
  transition: width .32s ease, min-height .32s ease, border-radius .32s ease,
              background-color .24s ease, border-color .24s ease, opacity .24s ease,
              transform .18s ease;
}
.arch__label:hover  { opacity: .78; border-color: rgba(243, 242, 238, .28); }
.arch__label:active { transform: scale(.985); }

.arch__label-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.arch__label-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
}
.arch__label-copy {
  display: block;
  max-width: 36ch;
  max-height: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(-5px);
  font-size: 15px;
  line-height: 1.55;
  color: #c0bdb5;
  transition: max-height .3s ease, opacity .22s ease, transform .3s ease, padding .3s ease;
}

.arch__plus {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(243, 242, 238, .10);
}
.arch__plus::before, .arch__plus::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 14px;
  height: 1px;
  background: var(--arch-ink);
  transition: transform .24s ease;
}
.arch__plus::after { transform: rotate(90deg); }

/* The active label expands into a card and its plus becomes a minus. */
.arch[data-active="0"] .arch__label[data-arch-label="0"],
.arch[data-active="1"] .arch__label[data-arch-label="1"],
.arch[data-active="2"] .arch__label[data-arch-label="2"],
.arch[data-active="3"] .arch__label[data-arch-label="3"] {
  width: 100%;
  min-height: 148px;
  padding: 10px 18px 20px 24px;
  border-radius: 28px;
  border-color: rgba(248, 203, 173, .56);
  background: rgba(243, 242, 238, .105);
  opacity: 1;
}
.arch[data-active="0"] .arch__label[data-arch-label="0"] .arch__label-copy,
.arch[data-active="1"] .arch__label[data-arch-label="1"] .arch__label-copy,
.arch[data-active="2"] .arch__label[data-arch-label="2"] .arch__label-copy,
.arch[data-active="3"] .arch__label[data-arch-label="3"] .arch__label-copy {
  max-height: 80px;
  padding-top: 8px;
  opacity: 1;
  transform: none;
}
.arch[data-active="0"] .arch__label[data-arch-label="0"] .arch__plus::after,
.arch[data-active="1"] .arch__label[data-arch-label="1"] .arch__plus::after,
.arch[data-active="2"] .arch__label[data-arch-label="2"] .arch__plus::after,
.arch[data-active="3"] .arch__label[data-arch-label="3"] .arch__plus::after {
  transform: rotate(0deg);
}

/* --- Stacked 3D layers ------------------------------------------- */
.arch__visual {
  position: relative;
  height: clamp(340px, 47vh, 440px);
  min-height: 340px;
  perspective: 1200px;
  perspective-origin: 50% 26%;
  contain: layout paint style;
}

.arch__layer {
  --depth: 16px;
  --rim: linear-gradient(145deg, rgba(248, 250, 252, .66), rgba(139, 145, 156, .28) 46%, rgba(248, 203, 173, .34));
  position: absolute;
  left: 9%;
  right: 7%;
  top: 20%;
  height: 240px;
  opacity: .46;
  transform: translate3d(var(--x, 0), var(--shift, 0), var(--z, 0)) rotateX(48deg) rotateZ(-1.8deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter: saturate(.68) drop-shadow(0 26px 24px rgba(0, 0, 0, .34));
  will-change: transform, opacity;
  transition: opacity .28s ease, filter .28s ease;
}
/* Hexagonal body and rim, drawn with the same clip-path. */
.arch__layer::before, .arch__layer::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 27%, 100% 73%, 50% 100%, 0 73%, 0 27%);
  pointer-events: none;
}
.arch__layer::before {
  z-index: 0;
  transform: translate3d(0, var(--depth), -22px);
  background: linear-gradient(180deg, rgba(181, 187, 198, .38) 0%, rgba(68, 73, 84, .72) 30%, rgba(19, 21, 27, .96) 78%, rgba(5, 6, 8, 1) 100%);
  box-shadow: 0 34px 50px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 -3px 0 rgba(0, 0, 0, .88);
}
.arch__layer::after {
  z-index: 1;
  background: var(--rim);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .32), inset 0 -2px 0 rgba(6, 7, 10, .76), 0 1px 0 rgba(255, 255, 255, .12);
}
.arch__layer[data-arch-layer="0"] { --x: -7px; --z: -24px; }
.arch__layer[data-arch-layer="1"] { --x: -3px; --z:  -8px; }
.arch__layer[data-arch-layer="2"] { --x:  3px; --z:   8px; }
.arch__layer[data-arch-layer="3"] { --x:  7px; --z:  24px; }

.arch__surface {
  position: absolute;
  inset: 3px;
  z-index: 2;
  overflow: hidden;
  clip-path: polygon(50% 0, 100% 27%, 100% 73%, 50% 100%, 0 73%, 0 27%);
  background: linear-gradient(145deg, rgba(226, 230, 236, .24), rgba(100, 106, 117, .12) 48%, rgba(12, 13, 16, .58));
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .20), inset 0 -2px 1px rgba(255, 255, 255, .04);
}
.arch__surface::before, .arch__surface::after { content: ""; position: absolute; pointer-events: none; }
.arch__surface::before {
  inset: -30%;
  background: linear-gradient(112deg, transparent 28%, rgba(255, 255, 255, .10) 43%, rgba(255, 255, 255, .025) 55%, transparent 68%);
  transform: translateX(-18%);
}
.arch__surface::after {
  inset: 0;
  background: radial-gradient(circle at 78% 24%, rgba(255, 255, 255, .09), transparent 26%),
              linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 45%);
}

.arch__layer-title {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14%;
  font-size: clamp(12px, 1.25vw, 16px);
  font-weight: 600;
  letter-spacing: .16em;
  color: rgba(243, 242, 238, .48);
  text-align: center;
  white-space: nowrap;
  transition: color .24s ease, opacity .24s ease;
}

/* Active layer lifts; the ones still "above" it fade out entirely. */
.arch[data-active="0"] .arch__layer[data-arch-layer="0"],
.arch[data-active="1"] .arch__layer[data-arch-layer="1"],
.arch[data-active="2"] .arch__layer[data-arch-layer="2"],
.arch[data-active="3"] .arch__layer[data-arch-layer="3"] {
  --depth: 22px;
  --rim: linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(165, 171, 183, .42) 46%, rgba(248, 203, 173, .70));
  opacity: 1;
  filter: saturate(1) drop-shadow(0 34px 30px rgba(0, 0, 0, .48));
}
.arch[data-active="0"] .arch__layer[data-arch-layer="1"],
.arch[data-active="0"] .arch__layer[data-arch-layer="2"],
.arch[data-active="0"] .arch__layer[data-arch-layer="3"],
.arch[data-active="1"] .arch__layer[data-arch-layer="2"],
.arch[data-active="1"] .arch__layer[data-arch-layer="3"],
.arch[data-active="2"] .arch__layer[data-arch-layer="3"] {
  opacity: 0;
  filter: saturate(.55) drop-shadow(0 20px 18px rgba(0, 0, 0, .20));
}
.arch[data-active="0"] .arch__layer[data-arch-layer="0"] .arch__layer-title,
.arch[data-active="1"] .arch__layer[data-arch-layer="1"] .arch__layer-title,
.arch[data-active="2"] .arch__layer[data-arch-layer="2"] .arch__layer-title,
.arch[data-active="3"] .arch__layer[data-arch-layer="3"] .arch__layer-title {
  color: var(--arch-ink);
}

/* Static fallback: every label open, every layer flat and stacked. */
.arch[data-static="true"] .arch__label {
  width: 100%;
  min-height: 0;
  padding: 8px 18px 18px 22px;
  border-radius: 22px;
  opacity: 1;
  cursor: default;
}
.arch[data-static="true"] .arch__label-copy { max-height: 90px; padding-top: 6px; opacity: 1; transform: none; }
.arch[data-static="true"] .arch__plus { display: none; }

@media (max-width: 800px) {
  .technology .shell { padding-block: 88px 72px; }
  .technology__heading .display { max-width: 12ch; font-size: clamp(44px, 12vw, 58px); }
  .arch__scroll { height: auto; }
  .arch__sticky { position: relative; top: auto; height: auto; min-height: 0; display: block; padding: 0; }
  .arch__stage { display: block; }
  .arch__copy { margin-bottom: 32px; }
  .arch__label { width: 100%; min-width: 0; }

  /* The stack is the desktop end state rendered once: same rotation,
     same clip-path, layers fanned by a fixed step instead of a scrolled
     one. Flattening it is what used to break the look — the hexagon is
     cut to be read through rotateX(48deg), so face-on each layer became
     an isolated plate, and a 30px grid gap meant nothing overlapped.
     Everything below is inherited from .arch__layer; only the geometry
     is restated. */
  .arch__visual {
    height: 340px;
    min-height: 0;
    perspective: 900px;
    perspective-origin: 50% 42%;
  }
  .arch__layer {
    left: 3%;
    right: 3%;
    top: 50%;
    height: 168px;
    margin-top: -84px;
    /* !important is load-bearing. With JS the stack is data-active="all"
       and nothing below matches, but the markup ships data-active="0",
       which hides layers 1-3 outright (opacity: 0) — so without JS three
       of the four would simply vanish. */
    opacity: 1 !important;
  }

  /* The fan. applyStatic() in js/architecture.js clears the inline
     --shift so these can win — an inline style would outrank them. */
  .arch__layer[data-arch-layer="0"] { --shift:  84px; }
  .arch__layer[data-arch-layer="1"] { --shift:  28px; }
  .arch__layer[data-arch-layer="2"] { --shift: -28px; }
  .arch__layer[data-arch-layer="3"] { --shift: -84px; }

  .arch__layer-title { font-size: 12px; color: var(--arch-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .arch__scroll { height: auto; }
  .arch__sticky { position: relative; top: auto; height: auto; min-height: 0; display: block; padding: 64px 0; }
  .arch__stage { display: block; }
  .arch__copy { margin-bottom: 32px; }
  .arch__label, .arch__label-copy, .arch__layer { transition: none !important; }

  /* Same static stack as the small-screen block, at the larger size this
     one has room for. A fixed rotation is not motion — there is nothing
     here to reduce, so there is no reason to show these visitors the
     flattened version, which only ever looked like a broken render. */
  .arch__visual {
    height: 420px;
    min-height: 0;
    perspective: 1000px;
    perspective-origin: 50% 42%;
  }
  .arch__layer {
    left: 5%;
    right: 5%;
    top: 50%;
    height: 210px;
    margin-top: -105px;
    opacity: 1 !important;  /* see the note in the 800px block */
  }
  .arch__layer[data-arch-layer="0"] { --shift:  105px; }
  .arch__layer[data-arch-layer="1"] { --shift:   35px; }
  .arch__layer[data-arch-layer="2"] { --shift:  -35px; }
  .arch__layer[data-arch-layer="3"] { --shift: -105px; }

  .arch__layer-title { color: var(--arch-ink); }
}

/* ===================================================================
   Partnerships carousel
   -------------------------------------------------------------------
   Pure CSS: the track is a scroll-snap row, the dots are anchors, and
   :target drives which dot reads as active.
   =================================================================== */

.partners {
  background: var(--paper-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #151513;
  overflow: hidden;
}
.partners__stage {
  display: grid;
  grid-template-columns: minmax(310px, .9fr) minmax(390px, 1.1fr);
  align-items: center;
  gap: clamp(64px, 9vw, 140px);
  padding-block: 112px 54px;
}
.partners__copy { align-self: start; padding-top: 2px; }
.partners__copy .eyebrow { margin-bottom: 38px; }
.partners__title {
  max-width: 9.7ch;
  margin-bottom: 22px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(46px, 4.55vw, 66px);
  line-height: .98;
  letter-spacing: -.025em;
}
.partners__intro { max-width: 42ch; font-size: 16px; line-height: 1.62; color: #44423d; }
.partners__cta { margin-top: 28px; }

.carousel { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.carousel__viewport { position: relative; width: min(100%, 440px); aspect-ratio: 1; overflow: hidden; }
.carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid #17181b; outline-offset: -7px; }

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Soft ground shadow under each floating logo. */
.carousel__slide::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 22%;
  right: 22%;
  top: 69%;
  height: 12%;
  border-radius: 50%;
  background: rgba(41, 39, 34, .2);
  filter: blur(20px);
  opacity: .32;
  transform: scaleY(.34);
  pointer-events: none;
}
.carousel__slide img {
  position: relative;
  z-index: 2;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 20px 24px rgba(31, 29, 24, .08));
  -webkit-box-reflect: below 22px linear-gradient(transparent 58%, rgba(0, 0, 0, .12));
}
.carousel__slide--voi img      { width: 56%; height: 56%; }
.carousel__slide--parquery img { width: auto; height: 60%; }

.carousel__open {
  position: relative;
  z-index: 2;
  width: 54%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px dashed #aaa8a2;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 24px 34px rgba(31, 29, 24, .06);
  -webkit-box-reflect: below 22px linear-gradient(transparent 60%, rgba(0, 0, 0, .08));
}
.carousel__open span {
  font-size: clamp(42px, 5vw, 62px);
  /* Archivo's face stops at 400, so anything lighter clamps to it. */
  font-weight: 400;
  line-height: 1;
  color: #aaa8a2;
  transform: translateY(-2px);
}
.carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .1em;
  color: #8a8882;
}

@media (prefers-reduced-motion: no-preference) {
  .carousel__slide img, .carousel__open { animation: float 6s ease-in-out infinite; will-change: transform; }
}

.carousel__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 14px;
  padding: 0 10px;
  min-height: 46px;
}
.carousel__page {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.carousel__page::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #b5b3ad;
  transition: width .24s cubic-bezier(.2, .7, .2, 1), background-color .2s ease, transform .12s ease;
}
.carousel__page:hover::before  { background: #85837e; }
.carousel__page:active::before { transform: scale(.82); }
.carousel__page.is-active::before { width: 28px; background: #17181b; }
.carousel__page:focus-visible { outline: 2px solid #17181b; outline-offset: -4px; }

/* Once another slide is targeted, the default-active first dot resets. */
.partners:has(#partner-slide-parquery:target) .carousel__page--voi::before,
.partners:has(#partner-slide-open:target) .carousel__page--voi::before {
  width: 8px;
  background: #b5b3ad;
}
.partners:has(#partner-slide-voi:target) .carousel__page--voi::before,
.partners:has(#partner-slide-parquery:target) .carousel__page--parquery::before,
.partners:has(#partner-slide-open:target) .carousel__page--open::before {
  width: 28px;
  background: #17181b;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .carousel__page::before { transition: none; }
}
@media (max-width: 900px) {
  .partners__stage { grid-template-columns: 1fr; gap: 64px; padding-top: 88px; }
  .partners__copy { max-width: 680px; }
  .partners__title { max-width: 12ch; }
  .partners__intro { max-width: 55ch; }
  .carousel { width: min(100%, 520px); }
  .carousel__viewport { width: 100%; }
  .carousel__pages { margin-top: 28px; }
}
@media (max-width: 620px) {
  .partners__stage { gap: 48px; padding-block: 72px 40px; }
  .partners__copy .eyebrow { margin-bottom: 28px; }
  .partners__title { max-width: 10ch; margin-bottom: 18px; font-size: clamp(42px, 13vw, 54px); }
  .carousel__viewport { max-width: 390px; }
  .carousel__caption { bottom: 24px; font-size: 10px; }
}

/* ===================================================================
   Community
   =================================================================== */

.community { padding-block: 110px 120px; }
.community__quote {
  max-width: 30ch;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.community__attrib { margin-top: 24px; font-size: 14px; color: var(--ink-muted); }
.community__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.community__links .btn:hover { background: var(--ink); color: var(--paper); }

/* ===================================================================
   Waitlist
   =================================================================== */

.waitlist__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: center;
  padding-block: 110px;
}
.waitlist__left { min-width: 0; }
.waitlist__left .eyebrow { margin-bottom: 24px; }
.waitlist__left .display { margin-bottom: 24px; }
.waitlist__intro { max-width: 46ch; margin-bottom: 40px; font-size: 17px; }

.waitlist__done {
  max-width: 34ch;
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.35;
}

.waitlist__form { display: grid; gap: 18px; max-width: 560px; }
.waitlist__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.field { display: grid; gap: 8px; min-width: 0; }
.field__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-on-dark-muted);
}
.field__req { color: var(--accent); }

.field__input {
  width: 100%;
  height: 50px;
  padding: 11px 14px;
  background: rgba(243, 242, 238, .015);
  border: 1px solid rgba(243, 242, 238, .34);
  border-radius: 10px;
  color: var(--ink-on-dark);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.field__input:hover { border-color: rgba(243, 242, 238, .62); }
.field__input:focus-visible {
  border-color: var(--accent);
  background: rgba(248, 203, 173, .035);
  outline: 2px solid rgba(248, 203, 173, .42);
  outline-offset: 4px;
}
.field__input[aria-invalid="true"] { border-color: var(--accent); }
.field__input::placeholder { color: rgba(243, 242, 238, .36); }

/* --- Select ------------------------------------------------------- */
/* The chevron lives on the wrapper, not as a background-image on the
   select: .field__input:focus-visible sets `background` as a shorthand
   and outranks select.field__input, so a background-image arrow would
   vanish the moment the field took focus. */
.field__select { position: relative; display: block; min-width: 0; }
.field__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--ink-on-dark-muted);
  border-bottom: 1.5px solid var(--ink-on-dark-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

select.field__input {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  /* The option list is drawn by the OS, not by us. This is what stops it
     opening as black-on-white over a dark panel. */
  color-scheme: dark;
}
/* Empty and required — the placeholder option is still selected, so it
   reads like a placeholder rather than an answer. */
select.field__input:invalid { color: rgba(243, 242, 238, .36); }
select.field__input option { color: var(--ink); }

/* Reserving the row keeps the form from jumping when an error appears. */
.field__error-slot { display: block; min-height: 16px; }
.field__error { display: block; color: var(--accent); font-size: 12px; line-height: 1.35; }

.field--platform { margin: 0; padding: 0; border: 0; min-width: 0; }

.radios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 280px);
  margin-top: 10px;
}
.radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  min-width: 0;
  padding: 10px 0;
  color: #b5b2a8;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s ease;
}
.radio:hover { color: var(--ink-on-dark); }
.radio input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }

.radio__mark {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(243, 242, 238, .55);
  border-radius: 50%;
  transition: border-color .18s ease;
}
.radio__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(.45);
  transition: opacity .18s ease, transform .18s ease;
}
.radio:has(input:checked) { color: var(--ink-on-dark); }
.radio:has(input:checked) .radio__mark { border-color: var(--accent); }
.radio:has(input:checked) .radio__mark::after { opacity: 1; transform: scale(1); }
.radio:has(input:focus-visible) { outline: 2px solid rgba(248, 203, 173, .58); outline-offset: 3px; }

.waitlist__submit {
  justify-self: start;
  margin-top: 2px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
}
.waitlist__submit:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.waitlist__submit:focus-visible { outline: 2px solid var(--ink-on-dark); outline-offset: 4px; }
.waitlist__submit:disabled { cursor: not-allowed; opacity: .34; }

.waitlist__note {
  justify-self: start;
  max-width: 70ch;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-on-dark-faint);
}

.waitlist__error { color: var(--accent); }

/* Android only, revealed by js/main.js when that radio is chosen. Sits
   inside the fieldset so it reads as part of the choice that triggered
   it, not as a note about the form. */
.waitlist__hint {
  max-width: 46ch;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-on-dark-muted);
}

/* --- welcome.html ------------------------------------------------- */
/* The page the visitor lands on coming back from Auth0. It borrows the
   fields, radios and submit button above rather than restyling them, so
   the two halves of the hand-off look like one thing. */
.welcome { display: grid; align-items: center; min-height: 100vh; min-height: 100svh; }
.welcome__shell { padding-block: 96px; }
.welcome__shell .eyebrow { margin-bottom: 24px; }
.welcome__shell .display { margin-bottom: 24px; }
.welcome__intro { max-width: 46ch; margin-bottom: 40px; font-size: 17px; }
.welcome__note { max-width: 52ch; margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--ink-on-dark-faint); }
.welcome__back { margin-top: 32px; font-size: 14px; }
.welcome__back a { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.welcome__back a:hover { color: var(--accent); }

/* --- Floating phone ---------------------------------------------- */
.waitlist__phone-stage {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.waitlist__phone-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 5%;
  width: 46%;
  height: 5%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  filter: blur(18px);
  opacity: .72;
}
.waitlist__phone {
  position: relative;
  z-index: 1;
  width: min(108%, 460px);
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, .4));
}
@media (prefers-reduced-motion: no-preference) {
  .waitlist__phone { animation: float 6s ease-in-out infinite; will-change: transform; }
}

@media (max-width: 800px) {
  .waitlist__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 88px; }
  .waitlist__names { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .waitlist__form { max-width: none; }
  .waitlist__phone-stage { min-height: 560px; }
  .waitlist__phone { width: min(112%, 420px); }
}

/* ===================================================================
   Lightbox
   =================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(11, 11, 13, .9);
  cursor: zoom-out;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
  box-shadow: 0 60px 120px rgba(0, 0, 0, .6);
}
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(243, 242, 238, .1);
  color: var(--ink-on-dark);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(243, 242, 238, .2); }

/* ===================================================================
   Footer
   =================================================================== */

.footer { background: var(--paper); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-block: 80px 48px;
}
.footer__brand {
  margin-bottom: 16px;
  font-family: var(--font-serif);
  font-size: 44px;
  letter-spacing: -.02em;
}
.footer__tagline { max-width: 26ch; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }

.footer__col { display: grid; gap: 12px; align-content: start; font-size: 14px; }
.footer__col .eyebrow { margin-bottom: 6px; }

.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: 24px 40px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-faint);
}
.footer__social { display: flex; gap: 18px; align-items: center; }
.footer__social a { display: flex; }
.footer__social a:hover { color: var(--ink-muted); }
.footer__version { border-left: 1px solid var(--line); padding-left: 18px; }

@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-block: 64px 32px; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}