/* Frontier Analytics, set in Outbound. The system itself (inks, palettes, type, scenes, components and motion)
   lives in outbound/css/outbound.css; this sheet only arranges the page.
   Layout: a 1200px measure. Each side of the record opens on a full-bleed chapter poster in its own palette,
   Side A in High Desert and Side B in Ice Station; everything between runs on the page ground. */

:root {
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --route-h: 66px;
}

html { scroll-padding-top: calc(var(--route-h) + 16px); }
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--ground);
}

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--block);
  color: var(--on-block);
  font-weight: 600;
}
.skip:focus { top: 8px; }

/* ---------- Route bar: ten stops ---------- */

.route__line { left: 32px; right: 32px; top: 15px; }

/* Ten stops need the room, so the name shortens and the switches drop their words below 1600px.
   The words stay for screen readers, and the buttons keep a title for pointer users. */
@media (max-width: 1599px) {
  .route__mark-tail { display: none; }
  .route__controls .toggle__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sky-toggle, .motion-toggle { padding: 0 8px; }
}
@media (max-width: 1180px) {
  :root { --route-h: 112px; }
  .route__row { flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
  .route__mark { margin-right: auto; }
  .route__nav { order: 3; flex: 1 0 100%; }
  .route__stops { justify-content: flex-start; }
}

/* ---------- Opening poster ---------- */

.route__sun { width: 30px; height: 30px; }

.hero { position: relative; }
.hero__poster {
  position: relative;
  display: grid;
  align-content: start;
  min-height: clamp(500px, calc(100svh - var(--route-h) - 200px), 820px);
  overflow: hidden;
  color: var(--title);
  --print-ink: var(--title);
  --print-2: var(--title-2);
}
.hero__scene { position: absolute; inset: 0; }
.hero__head {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--sp-3);
  padding-top: max(28px, calc(clamp(4.2rem, .4rem + 12.5vw, 11rem) * .95 - 28px));
  /* Room for the near ridges under the title, which scale with the scene's width, so the title stays in the sky. */
  padding-bottom: clamp(var(--sp-6), 17vw - 60px, 300px);
}
.hero__kicker { letter-spacing: .32em; }
/* The title is the logo: FRONTIER over ANALYTICS at .4 of its size, with a spaceplane flying over. Both lines
   scale with --t, so the flight, drawn in hundredths of --t, stays on the same arc as the logo at every width. */
.hero__title {
  --t: clamp(4.2rem, .4rem + 12.5vw, 11rem);
  position: relative;
  display: grid;
  justify-items: start;
  margin: 0 0 0 -.03em;
  font-size: var(--t);
  font-weight: inherit;
}
.hero__title-main { font-size: 1em; }
.hero__title-sub { margin-top: .08em; font-size: .4em; letter-spacing: .14em; line-height: 1; }
.hero__flight {
  position: absolute;
  left: -0.6em;
  top: -1.5em;
  width: 6.2em;
  height: 2.1em;
  overflow: visible;
  pointer-events: none;
}
.hero__craft { fill: var(--title); transition: fill var(--t-scene) var(--ease-orbit); }
.hero__craft-window { fill: var(--marigold); }
.hero__tag { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.9rem); margin-top: -.05em; }

.hero__foot {
  --text: var(--stock);
  --ground: var(--land);
  --focus: var(--marigold);
  --line-strong: color-mix(in srgb, var(--stock) 55%, transparent);
  margin-top: -1px;
  padding-block: var(--sp-2) var(--sp-7);
  background: var(--land);
  color: var(--stock);
  transition: background-color var(--t-scene) var(--ease-orbit);
}
.hero__foot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-6) var(--sp-7);
  align-items: end;
}
.hero__lede { max-width: 56ch; font-size: 1.125rem; line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.hero__actions .ticket, .foot .ticket { --t-bg: var(--marigold); --t-fg: var(--night); }
.hero__edition { text-align: right; color: color-mix(in srgb, var(--stock) 78%, var(--land)); }

@media (max-width: 960px) {
  .hero__foot-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero__edition { text-align: left; }
}

/* ---------- Departures: the languages ticker ---------- */

.departures {
  display: flex;
  align-items: stretch;
  min-height: 60px;
  background: var(--marigold);
  color: var(--night);
  overflow: hidden;
}
.departures__label {
  flex: none;
  display: flex;
  align-items: center;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: var(--sp-5);
  background: var(--night);
  color: var(--marigold);
}
.departures__ticker { flex: 1; min-width: 0; display: flex; align-items: center; }
.dep {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dep::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .55; }

/* ---------- Small adjustments to Outbound parts ---------- */

/* Script swashes run past the last letter's box, and the write-on mask clips anything outside it. */
.tagline.write { padding-inline-end: .35em; }
/* Postcard marks carry cancellation lines to their left; keep titles and copy clear of both. */
.postcard__title { padding-right: 116px; min-height: 64px; }

/* ---------- Sections ---------- */

.sec { padding-block: var(--sp-10) var(--sp-9); }
.sec--surface { background: var(--surface); transition: background-color var(--t-pass) var(--ease-orbit); }
.sec--deep { background: var(--surface-2); transition: background-color var(--t-pass) var(--ease-orbit); }
.head { display: grid; gap: var(--sp-4); max-width: 780px; margin-bottom: var(--sp-8); }
.head .lede { max-width: 58ch; }
.after { margin-top: var(--sp-8); }

/* ---------- The short version: one poster per side ---------- */

.sides {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
}
.side { display: grid; gap: var(--sp-5); align-content: start; justify-items: start; }
.side .poster { width: 100%; max-width: 460px; box-shadow: 10px 12px 0 color-mix(in srgb, var(--text) 14%, transparent); }
.poster__title--long { font-size: 19cqi; }
.side__text { display: grid; gap: var(--sp-4); justify-items: start; max-width: 46ch; }
.engine-line { display: grid; gap: var(--sp-4); max-width: 780px; margin-top: var(--sp-9); }

@media (max-width: 760px) {
  .sides { grid-template-columns: minmax(0, 1fr); }
  .side .poster { max-width: 400px; }
}

/* ---------- Chapter posters: where each side begins ---------- */

.chapter__poster {
  position: relative;
  display: grid;
  align-content: start;
  min-height: clamp(420px, 48vw, 640px);
  overflow: hidden;
  background: var(--sky-1);
  color: var(--title);
  --print-ink: var(--title);
  --print-2: var(--title-2);
}
.chapter__scene { position: absolute; inset: 0; }
.chapter__head {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--sp-3);
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: var(--sp-6);
}
.chapter__head .credit { letter-spacing: .32em; }
.chapter__title { font-size: clamp(4.5rem, 1rem + 14vw, 12rem); margin-left: -.03em; }
.chapter__tag { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.4rem); margin-top: -.05em; }
.chapter__band {
  --text: var(--on-band);
  --focus: var(--marigold);
  margin-top: -1px;
  padding-block: var(--sp-6) var(--sp-7);
  background: var(--band);
  color: var(--on-band);
}
.chapter__band-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); align-items: end; }
.chapter__lede { max-width: 60ch; font-size: var(--fs-lede); line-height: 1.4; }
.chapter__count { text-align: right; opacity: .8; }
@media (max-width: 760px) {
  .chapter__band-row { grid-template-columns: minmax(0, 1fr); }
  .chapter__count { text-align: left; }
}

/* ---------- Side A: where the risk hides ---------- */

.reasons {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-8);
}
.reason { display: grid; gap: var(--sp-3); align-content: start; justify-items: start; padding-top: var(--sp-5); border-top: 2px solid var(--text); }
.reason p:not(.stat__value) { max-width: 52ch; }
.reason .stat__value { margin-top: var(--sp-2); }
@media (max-width: 760px) {
  .reasons { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Side A: the platform, from inputs to the workflow ---------- */

/* Three inputs, one platform, three outputs. Real text in a grid; the dotted links carry small craft.
   On narrow screens it stacks, and one link between each column turns to run downward. */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.05fr) 72px minmax(0, 1fr);
  grid-template-rows: auto repeat(3, auto);
  gap: var(--sp-4) 0;
  margin-bottom: var(--sp-5);
}
.flow__label { color: var(--muted); grid-row: 1; }
.flow__label--in { grid-column: 1; }
.flow__label--hub { grid-column: 3; }
.flow__label--out { grid-column: 5; }
.flow__r1 { grid-row: 2; }
.flow__r2 { grid-row: 3; }
.flow__r3 { grid-row: 4; }
.flow__src { grid-column: 1; }
.flow__link--in { grid-column: 2; }
.flow__hub { grid-column: 3; grid-row: 2 / 5; }
.flow__link--out { grid-column: 4; }
.flow__out { grid-column: 5; }

.flow__node { display: grid; gap: 4px; align-content: center; min-width: 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-2); }
.flow__name { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.flow__sub { font-size: var(--fs-small); line-height: 1.4; }
/* Inputs and the platform are printed in fixed inks, like a poster, so they read the same by day and by night. */
.flow__src--inside { background: #2f6690; color: #f3e6c8; }
.flow__src--outside { background: #e8743b; color: #1c2140; }
.flow__src--ground { background: #6b3a63; color: #f3e6c8; }
.flow__out { border: 2px solid var(--text); background: var(--ground); }
.flow__out .credit { color: var(--muted); }

.flow__hub {
  --print-ink: #1c2140;
  --print-2: #e8743b;
  align-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: #f5b43c;
  color: #1c2140;
}
.flow__hub-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.75rem); line-height: .86; text-transform: uppercase; color: var(--print-ink); text-shadow: var(--mis-x) var(--mis-y) 0 var(--print-2); }
.flow__steps { list-style: none; padding: 0; display: grid; gap: 10px; }
.flow__steps li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; }
.flow__steps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.flow__hub-foot { padding-top: var(--sp-3); border-top: 2px dashed color-mix(in srgb, #1c2140 45%, transparent); }

.flow__link {
  position: relative;
  align-self: center;
  height: 2px;
  margin-inline: 6px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 8px);
}
.flow__craft {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 16px;
  height: 14px;
  margin: -7px 0 0 -8px;
  background: var(--marigold);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  filter: drop-shadow(1px 1px 0 var(--night));
}
.motion .flow__craft { animation: site-fly 2.7s var(--ease-orbit) var(--fly-delay, 0s) infinite; }
@keyframes site-fly {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.flow__note { margin-bottom: var(--sp-8); }

@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--sp-3); }
  .flow > * { grid-column: 1; grid-row: auto; }
  .flow__label--hub, .flow__label--out { margin-top: var(--sp-3); }
  .flow__link { display: none; }
  .flow__link--lead {
    display: block;
    justify-self: center;
    width: 2px;
    height: 48px;
    margin: 0;
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 3px, transparent 3px 8px);
  }
  .flow__link--lead .flow__craft { left: 50%; top: 55%; rotate: 90deg; }
  .motion .flow__link--lead .flow__craft { animation-name: site-fall; }
}
@keyframes site-fall {
  0% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.points {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.point { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-4); border-top: 2px solid var(--text); }
@media (max-width: 860px) {
  .points { grid-template-columns: minmax(0, 1fr); }
}

.home {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
  margin-top: var(--sp-9);
}
.home__seal { --seal-size: 148px; }
.home__text { display: grid; gap: var(--sp-3); }
.home__card { background: var(--ground); }
@media (max-width: 1000px) {
  .home { grid-template-columns: auto minmax(0, 1fr); }
  .home__card { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .home { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .home__seal { --seal-size: 120px; }
}

/* ---------- The record ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-9);
}
.stats .stat { padding-top: var(--sp-4); border-top: 2px solid var(--text); }
.stats .stat__value { font-size: clamp(2.75rem, 1.4rem + 3vw, 4.5rem); }
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}

.log + .log { margin-top: var(--sp-8); }
.log__head { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--text); font-weight: inherit; }
.entries { list-style: none; padding: 0; }
.entry {
  display: grid;
  grid-template-columns: 56px minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr) 128px;
  gap: var(--sp-2) var(--sp-6);
  align-items: start;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.entry__n { font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; line-height: 1; color: var(--muted); }
.entry__client { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.entry__when { margin-top: 6px; }
.entry__col { display: grid; gap: 6px; }
.entry__stamp { justify-self: end; margin-top: 4px; white-space: nowrap; }
@media (max-width: 1000px) {
  .entry { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .entry__who { grid-column: 2; }
  .entry__stamp { grid-column: 3; grid-row: 1; }
  .entry__col { grid-column: 2 / -1; }
}
@media (max-width: 560px) {
  .entry { grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); }
  .entry__who, .entry__col { grid-column: 2; }
  .entry__stamp { grid-column: 2; grid-row: auto; justify-self: start; }
}

/* ---------- Five rules ---------- */

.rules-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-8); }
.rules-top .head { margin-bottom: 0; }
.rules-top__seal { --seal-size: 132px; }
/* Three across, then two wider cards, so the last row fills. */
.rules { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6); }
.rules > li { grid-column: span 2; }
.rules > li:nth-child(n + 4) { grid-column: span 3; }
.rules .postcard { height: 100%; background: var(--ground); }
@media (max-width: 960px) {
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules > li, .rules > li:nth-child(n + 4) { grid-column: auto; }
  .rules > li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .rules { grid-template-columns: minmax(0, 1fr); }
  .rules > li:last-child { grid-column: auto; }
}

/* ---------- Side B: four shapes ---------- */

.shapes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-7);
}
.shape { display: grid; gap: var(--sp-4); align-content: start; }
.shape__scene { aspect-ratio: 1600 / 560; max-width: 100%; border-radius: var(--r-2); }
.shape__text { display: grid; gap: var(--sp-3); justify-items: start; }
.shape__text p { max-width: 52ch; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); margin-top: var(--sp-9); }
.principles .postcard { background: var(--surface); }
@media (max-width: 760px) {
  .shapes, .principles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Side B: the trip from audit to running ---------- */

/* Four stops on one dotted line. site.js moves the craft along it as the section scrolls past;
   without motion the line is drawn in full and every stop is reached. */
.trip { position: relative; padding-top: 44px; --trip: 1; }
.trip__line {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 9px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 8px);
}
.trip__line::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--trip) * 100%);
  background: var(--text);
}
.trip__craft {
  position: absolute;
  top: -6px;
  left: calc(var(--trip) * 100%);
  width: 16px;
  height: 14px;
  margin-left: -8px;
  background: var(--marigold);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  filter: drop-shadow(1px 1px 0 var(--night));
}
html:not(.motion) .trip__craft { display: none; }
.trip__stops { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.trip__stop { position: relative; display: grid; gap: var(--sp-3); align-content: start; }
.trip__dot {
  position: absolute;
  top: -44px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: var(--surface);
  transition: transform var(--t-pass) var(--ease-buoy), background-color var(--t-quick) var(--ease-land), border-color var(--t-quick) var(--ease-land);
}
.trip__stop.is-reached .trip__dot { background: var(--marigold); border-color: var(--text); transform: scale(1.25); }
.trip__n { font-family: var(--font-display); font-weight: 900; font-size: 3.25rem; line-height: .85; color: var(--muted); transition: color var(--t-quick) var(--ease-land); }
.trip__stop.is-reached .trip__n { color: var(--text); text-shadow: var(--mis-x) var(--mis-y) 0 var(--mis); }

@media (max-width: 860px) {
  .trip { padding-top: 0; padding-left: 44px; }
  .trip__line {
    left: 9px;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 3px, transparent 3px 8px);
  }
  .trip__line::after { inset: 0 0 auto 0; width: auto; height: calc(var(--trip) * 100%); }
  .trip__craft { top: calc(var(--trip) * 100%); left: -7px; margin: -7px 0 0; rotate: 90deg; }
  .trip__stops { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .trip__dot { top: 0; left: -44px; }
}

.method__board { margin-top: var(--sp-9); }
.method__board .board__note { margin-top: var(--sp-3); }

/* ---------- The long version ---------- */

.story { padding-bottom: 0; }
.story__notes p { font-size: 1.125rem; line-height: 1.65; }
.mapline {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(300px, 38vw, 520px);
  margin-top: var(--sp-9);
  overflow: hidden;
  background: var(--sky-1);
  color: var(--title);
}
.mapline__scene { position: absolute; inset: 0; }
.mapline__head { position: relative; z-index: 2; display: grid; justify-items: end; padding-block: var(--sp-7) var(--sp-9); }
.mapline__line { font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem); text-align: right; }

/* ---------- Last call: the boarding pass ---------- */

.book .field__input.book__question { min-height: 96px; resize: vertical; font-size: 1.0625rem; line-height: 1.5; }
.book__meta { display: grid; gap: var(--sp-4); }
.book__meta dd { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.05; text-transform: uppercase; }
.book__stamp { position: absolute; top: 18px; right: 18px; font-size: 1.125rem; --stamp-rot: -10deg; background: var(--surface); }
.book__status { min-height: 1.5em; font-size: var(--fs-small); font-weight: 500; }

.contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-8); }
.contact .credit { flex: 1 0 100%; }
.contact__mail { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.contact__mail a { color: var(--text); }

/* ---------- End card ---------- */

.foot__scene { height: clamp(220px, 28vw, 400px); }
.foot__band {
  --text: var(--stock);
  --link: var(--haze);
  --focus: var(--marigold);
  --mis: var(--flare);
  margin-top: -1px;
  padding-block: var(--sp-7) var(--sp-8);
  background: var(--land);
  color: var(--stock);
  transition: background-color var(--t-scene) var(--ease-orbit);
}
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-7); align-items: end; }
.foot__title { margin-top: var(--sp-3); }
.foot__legal { max-width: 62ch; margin-top: var(--sp-4); font-size: var(--fs-small); color: color-mix(in srgb, var(--stock) 82%, var(--land)); }
.foot__links { display: grid; gap: var(--sp-4); justify-items: start; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: minmax(0, 1fr); } }