/* ==========================================================================
   Apoxy marketing — the stylesheet that every page loads.

   tools/build.ts replaces each @import below with the file it names and writes
   the result to /assets/css/site.css. Files that start with "_" are parts of
   this file and are not written on their own. Page stylesheets (home.css,
   pricing.css, legal.css, not-found.css, start.css) are written next to it,
   and each page links its own after this one.

   The order: brand tokens, the cookie banner, base rules, then the page frame.
   The demo modal has its own file at /assets/apx-demo.css, because the blog
   loads it too.
   ========================================================================== */
/* ==========================================================================
   Apoxy Design System — Tokens
   The single source of truth for brand color (light + dark), type, spacing,
   radius, shadow, and motion across every web surface:

     - run/marketing — @import'd by styles/site.css, which tools/build.ts
       bundles. Also served as-is at /assets/shared-tokens.css (a repo
       symlink under public/assets/).
     - run/blog      — @import'd by app/blog.css at build time (Vite).
     - run/docs2     — @import'd by app/docs.css at build time (Vite).

   Surface-specific bits stay OUT of this file by design: @font-face rules
   (font URL paths differ per surface), layout vars (--container, --gutter,
   --topbar-h, ...), and base body classes each live in the consuming app's
   own stylesheet.
   ========================================================================== */

:root {
  /* --- Color: core palette ---
     Apoxy is monochromatic by design. Off-black on warm-white,
     with a single brand blue accent reserved for key CTAs and links. */

  --apx-ink:          #1E1D1C;   /* near-black, all primary text + logos */
  --apx-ink-2:        #252122;   /* line-illustration stroke */
  --apx-graphite:     #4A4847;   /* body text, secondary */
  --apx-slate:        #6B6967;   /* muted text, captions */
  --apx-stone:        #ABABAB;   /* disabled, hairlines on dark */
  --apx-fog:          #D9D7D3;   /* borders */
  --apx-mist:         #EDECE8;   /* subtle dividers, inset surfaces */
  --apx-paper:        #F5F3EE;   /* warm canvas, the signature surface */
  --apx-bone:         #FAF8F4;   /* off-white card surface */
  --apx-white:        #FFFFFF;

  /* --- Color: accents ---
     Used sparingly. Blue is the only saturated hue in the system. */
  --apx-blue:         #3D91DC;   /* primary action, links on hover */
  --apx-blue-deep:    #2E72B0;   /* pressed / heading accents */
  --apx-blue-tint:    #E5F0FA;   /* informational backgrounds */

  --apx-violet:       #AA94EB;   /* media scrubber accent only */
  --apx-coral:        #EA6A4E;   /* destructive, alerts */
  --apx-coral-tint:   #FBE8E2;
  --apx-leaf:         #4F8A4A;   /* success */
  --apx-leaf-tint:    #E2EEDF;
  --apx-amber:        #C28A2A;   /* warning */
  --apx-amber-tint:   #F7ECCE;

  /* --- Semantic surfaces --- */
  --surface-canvas:   var(--apx-paper);
  --surface-card:     var(--apx-white);
  --surface-inset:    var(--apx-mist);
  --surface-invert:   var(--apx-ink);

  /* --- Semantic text --- */
  --text-primary:     var(--apx-ink);
  --text-secondary:   var(--apx-graphite);
  --text-muted:       var(--apx-slate);
  --text-disabled:    var(--apx-stone);
  --text-on-invert:   var(--apx-bone);
  --text-link:        var(--apx-ink);
  --text-link-hover:  var(--apx-blue);

  /* --- Semantic borders --- */
  --border-strong:    var(--apx-ink);
  --border-default:   var(--apx-fog);
  --border-subtle:    var(--apx-mist);

  /* --- Type --- */
  --font-display:     'TWK Everett', 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:        'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body-sm:     'Inter Small', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  /* Display scale — TWK Everett, used for hero & section headers.
     The brand voice is restrained: tight tracking, no italics. */
  --t-display-xl:     clamp(56px, 8vw, 120px);   /* hero */
  --t-display-lg:     clamp(44px, 6vw, 80px);    /* section openers */
  --t-display-md:     clamp(34px, 4vw, 56px);
  --t-display-sm:     clamp(28px, 3vw, 40px);

  /* UI scale — Inter, used everywhere else */
  --t-h1:             40px;
  --t-h2:             32px;
  --t-h3:             24px;
  --t-h4:             20px;
  --t-h5:             16px;
  --t-body-lg:        18px;
  --t-body:           16px;
  --t-body-sm:        14px;
  --t-caption:        13px;
  --t-micro:          12px;
  --t-overline:       11px;

  --lh-display:       0.95;
  --lh-tight:         1.15;
  --lh-snug:          1.35;
  --lh-body:          1.55;
  --lh-loose:         1.7;

  --tr-display:       -0.02em;
  --tr-tight:         -0.01em;
  --tr-normal:        0;
  --tr-wide:          0.04em;
  --tr-overline:      0.12em;

  /* --- Spacing (4px base) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* --- Radius ---
     Apoxy is square. Every surface — buttons, inputs, cards, modals,
     code blocks, badges, avatars, focus rings — has a 0 px corner.
     The only exception is the moving knob inside a toggle switch,
     which is a mechanical control, not a surface. */
  --r-none: 0;
  --r-xs:   0;
  --r-sm:   0;
  --r-md:   0;
  --r-lg:   0;
  --r-xl:   0;
  --r-2xl:  0;
  --r-pill: 0;     /* deprecated — kept at 0 for back-compat */
  --r-knob: 50%;   /* toggle-switch knob only */

  /* --- Shadow ---
     Subtle, never blown out. The line-art carries weight; shadows just hint. */
  --sh-none: none;
  --sh-1: 0 1px 0 rgba(30, 29, 28, 0.04), 0 1px 2px rgba(30, 29, 28, 0.06);
  --sh-2: 0 2px 4px rgba(30, 29, 28, 0.05), 0 4px 12px rgba(30, 29, 28, 0.06);
  --sh-3: 0 4px 8px rgba(30, 29, 28, 0.06), 0 12px 32px rgba(30, 29, 28, 0.08);
  --sh-4: 0 8px 16px rgba(30, 29, 28, 0.08), 0 24px 64px rgba(30, 29, 28, 0.12);
  --sh-focus: 0 0 0 3px rgba(61, 145, 220, 0.35);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast:     120ms;
  --d-base:     200ms;
  --d-slow:     320ms;
}

/* --- Dark theme ---
   The same warm monochrome, inverted: ink and paper trade places, tints
   deepen. Surfaces that support a theme toggle (blog, docs2) set
   data-theme="dark" on <html>; marketing is light-only so this block is
   inert there. */
[data-theme='dark'] {
  --apx-paper: #1A1917;
  --apx-bone: #232220;
  --apx-mist: #2A2826;
  --apx-fog: #3A3735;
  --apx-stone: #5A5856;
  --apx-slate: #8E8B86;
  --apx-graphite: #C5C2BB;
  --apx-ink-2: #E5E3DD;
  --apx-ink: #F0EEE8;
  --apx-white: #1A1917;

  --apx-blue-tint: #1F2D3D;
  --apx-coral-tint: #3D2A24;
  --apx-leaf-tint: #233028;
  --apx-amber-tint: #3D331C;

  --surface-canvas: var(--apx-paper);
  --surface-card: var(--apx-bone);
  --surface-inset: var(--apx-mist);
  --surface-invert: var(--apx-ink);

  --text-primary: var(--apx-ink);
  --text-secondary: var(--apx-graphite);
  --text-muted: var(--apx-slate);
  --text-disabled: var(--apx-stone);
  --text-on-invert: var(--apx-bone);

  --border-strong: var(--apx-ink);
  --border-default: var(--apx-fog);
  --border-subtle: var(--apx-mist);

  /* The light shadows are a near-black ink at low opacity, which vanishes on the
     dark surfaces. Re-tune to pure black at higher opacity so elevation (card
     hover/selection, popovers) reads in dark mode. */
  --sh-1: 0 1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
  --sh-3: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}
/* Cookie consent banner — canonical styles, single source of truth.
   Imported by blog.css and docs.css alongside components.css, and by the
   marketing site's styles/site.css.

   The palette is hardcoded to the charcoal/bone design values rather than the
   --apx-* tokens on purpose: those tokens flip in dark mode, which would turn
   this into a light card on dark pages. The banner reads as the same inverted
   card on every site and in both themes. */
.apx-cookie {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  width: min(320px, calc(100vw - 32px));
  background: #1e1d1c;
  color: #faf8f4;
  border: 1px solid #34302e;
  border-radius: 0;
  font-family: var(--font-body, 'Inter', ui-sans-serif, system-ui, sans-serif);
  padding: 16px;
  transform: translateY(10px);
  opacity: 0;
  /* Invisible until .is-in — don't let the fixed box swallow clicks on whatever
     sits under the bottom-right corner during the ~900ms reveal delay. */
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.apx-cookie.is-in {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.apx-cookie-copy {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #ababab;
}
.apx-cookie-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.apx-cookie-link {
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ababab;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(171, 171, 171, 0.45);
  white-space: nowrap;
  align-self: flex-start;
}
.apx-cookie-link:hover {
  color: #faf8f4;
  text-decoration-color: #faf8f4;
}
.apx-cookie-btns {
  display: flex;
  gap: 8px;
}
.apx-cookie-btns .apx-cookie-btn {
  flex: 1;
  text-align: center;
  justify-content: center;
}
.apx-cookie-btn {
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d9d7d3;
  background: transparent;
  border: 1px solid #46413e;
  border-radius: 0;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.apx-cookie-btn:hover {
  color: #faf8f4;
  border-color: #ababab;
}
.apx-cookie-btn[data-cookie='accept'] {
  background: #faf8f4;
  color: #1e1d1c;
  border-color: #faf8f4;
}
.apx-cookie-btn[data-cookie='accept']:hover {
  background: #fff;
  border-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .apx-cookie {
    transition: none;
  }
}
/* ==========================================================================
   Apoxy marketing — base rules shared by every page.

   Part of site.css. This file owns the font faces, the layout vars, and the
   reset. The page frame (top bar, rows, footer) is in
   _frame.css. Brand tokens and the cookie banner come from
   ../../web-shared/styles/.

   Visual rules:
     canvas = --apx-paper, cards = --apx-bone, never #fff
     ink    = --apx-ink, never #000
     blue   = single accent, CTA + hover only
     radius = 0 across the board
     type   = TWK Everett display, Inter body, JetBrains Mono labels
   ========================================================================== */

/* Font URLs stay under /assets/fonts (a repo symlink into
   ../../web-shared/fonts). */
@font-face {
  font-family: "TWK Everett";
  src:
    url("/assets/fonts/TWKEverett-Regular.woff2") format("woff2"),
    url("/assets/fonts/TWKEverett-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Everett";
  src:
    url("/assets/fonts/TWKEverett-Medium.woff2") format("woff2"),
    url("/assets/fonts/TWKEverett-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Layout --- */
  --container: 1240px;
  --gutter: 32px;
  /* The page frame: the right column, the top bar height, the light rule
     between cells, and the side padding of a cell. */
  --side: 360px;
  --hdr: 60px;
  --hair: rgba(30, 29, 28, 0.09);
  --pad: 28px;
  --pad-r: 22px;
}
@media (max-width: 1280px) {
  :root {
    --side: 300px;
  }
}
@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --pad: 16px;
    --pad-r: 16px;
  }
}

.apx-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  /* The VPC design uses the browser line height. Text blocks set their own. */
  line-height: normal;
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* The full-width rules of the frame go past the page edge. The body clips them,
   so the document is not wider than the viewport. The clip on html stops the
   body value from moving to the viewport. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  /* biome-ignore lint/suspicious/noDuplicateProperties: hidden above is the fallback where clip is not supported. */
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--apx-blue-deep);
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
img,
svg {
  max-width: 100%;
}
::selection {
  background: var(--apx-ink);
  color: var(--apx-bone);
}
/* ==========================================================================
   The page frame of every marketing page: the boxed column, the rows, the top
   bar and its mobile drawer, the crumb row, the "Start free" cell, and the
   footer. Part of site.css. The markup is in partials/topbar.html and
   partials/footer.html.

   The page is one 1440px column with ink side rules. Each .rw is a row of two
   columns (the content and a --side column, marked .sd) with an ink rule at
   the top that runs to the edges of the window. Below 1080px a row stacks.
   ========================================================================== */

body {
  background: var(--apx-paper);
  color: var(--apx-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.bx {
  max-width: 1440px;
  margin: 0 auto;
  border-left: 1px solid var(--apx-ink);
  border-right: 1px solid var(--apx-ink);
  background: var(--apx-bone);
}
.rw {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
}
.rw::before {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  top: 0;
  height: 1px;
  background: var(--apx-ink);
  z-index: 4;
  pointer-events: none;
}
.sd {
  border-left: 1px solid var(--apx-ink);
}
.k {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ar {
  display: inline-block;
  transition: transform var(--d-fast) var(--ease-out);
}

/* ----- Top bar ----- */
.hd {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--hdr);
  background: var(--apx-bone);
}
.hd::before {
  display: none;
}
.hd::after {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  bottom: -1px;
  height: 1px;
  background: var(--apx-ink);
  z-index: 4;
}
.hd-l,
.hd-l nav {
  display: flex;
  min-width: 0;
}
.hd-l > *,
.hd-l nav > a {
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-right: 1px solid var(--hair);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--d-fast);
}
.hd-l > .logo {
  padding: 0 var(--pad);
}
.hd-l > nav {
  align-items: stretch;
  padding: 0;
  border-right: 0;
}
.hd-l nav > a:last-child {
  border-right: 0;
}
.hd-l .logo img {
  display: block;
  height: 22px;
  width: auto;
}
.hd-l .sp {
  flex: 1;
  padding: 0;
}
.hd-l nav > a:hover {
  background: var(--apx-mist);
  color: var(--apx-ink);
}
.hd-l nav > a.cur {
  box-shadow: inset 0 -2px 0 var(--apx-ink);
}
.hd-r {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hd-r a {
  display: flex;
  align-items: center;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--d-fast);
}
.hd-r .li {
  justify-content: center;
}
.hd-r .li:hover {
  background: var(--apx-mist);
  color: var(--apx-ink);
}
.hd-r .demo {
  justify-content: space-between;
  gap: 8px;
  background: var(--apx-ink);
  color: var(--apx-bone);
}
.hd-r .demo:hover {
  background: #2a2826;
  color: var(--apx-bone);
}
.hd-r .demo:hover .ar {
  transform: translateX(4px);
}

/* The menu button and the drawer show below 720px only. */
.hd-mb {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--hdr);
  padding: 0;
  border: 0;
  border-left: 1px solid var(--apx-ink);
  background: transparent;
  color: var(--apx-ink);
}
.hd-mb:hover {
  background: var(--apx-mist);
}
.hd-mb svg {
  display: block;
  width: 22px;
  height: 22px;
}
.hd-mb .ic-close,
.hd-mb[aria-expanded="true"] .ic-menu {
  display: none;
}
.hd-mb[aria-expanded="true"] .ic-close {
  display: block;
}
.mnav {
  position: fixed;
  inset: var(--hdr) 0 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--apx-bone);
  border-top: 1px solid var(--apx-ink);
}
.mnav[hidden] {
  display: none;
}
.mnav nav {
  display: flex;
  flex-direction: column;
}
.mnav nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--hair);
  font: 500 22px / 1.1 var(--font-display);
  letter-spacing: -0.01em;
}
.mnav nav a::after {
  content: "→";
  font: 14px var(--font-mono);
  color: var(--text-muted);
}
.mnav nav a.cur {
  box-shadow: inset 2px 0 0 var(--apx-ink);
}
.mnav .mnav-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  border-top: 1px solid var(--apx-ink);
}
.mnav .mnav-cta a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 64px;
  padding: 0 var(--pad);
  font-size: 15px;
  font-weight: 500;
}
.mnav .mnav-cta .demo {
  background: var(--apx-ink);
  color: var(--apx-bone);
}
.mnav .mnav-cta .li {
  justify-content: center;
}

/* ----- Crumb row ----- */
.cr {
  height: 40px;
}
.cr > * {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 var(--pad);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.cr > .sd {
  padding: 0 var(--pad-r);
  justify-content: space-between;
}
.cr a:hover {
  color: var(--apx-ink);
}
.cr b {
  font-weight: 500;
  color: var(--apx-ink);
}

/* ----- "Start free" cell: an ink block that fills blue on hover ----- */
.a-go {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 140px;
  padding: 20px var(--pad-r);
  background: var(--apx-ink);
  color: var(--apx-bone);
}
.a-go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--apx-blue-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.a-go:hover {
  color: var(--apx-bone);
}
.a-go:hover::before {
  transform: none;
}
.a-go .k {
  display: flex;
  justify-content: space-between;
  color: var(--apx-stone);
}
.a-go:hover .k {
  color: var(--apx-bone);
}
.a-go .row {
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.a-go .v {
  font: 500 34px / 1 var(--font-display);
  letter-spacing: -0.02em;
}
.a-go .ar {
  font-size: 30px;
  line-height: 1;
}
.a-go:hover .ar {
  transform: translateX(6px);
}

/* A link cell with a label at the top and a title at the bottom. */
.cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--pad-r);
  transition: background var(--d-fast);
}
.cell:hover {
  background: var(--apx-mist);
  color: var(--apx-ink);
}
.cell:hover .ar {
  transform: translateX(4px);
}
.cell .row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 500;
}

/* ----- Footer ----- */
.ft-l {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
.ft-l > * {
  padding: 28px 24px 32px;
  border-right: 1px solid var(--hair);
}
.ft-l > :first-child {
  padding-left: var(--pad);
}
.ft-l > :last-child {
  border-right: 0;
}
.ft h4 {
  margin: 0 0 16px;
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ft ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ft ul a {
  font-size: 14px;
}
.ft-brand img {
  display: block;
  height: 22px;
  width: auto;
}
.ft-brand p {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.ft-r {
  display: grid;
  grid-template-rows: 1fr auto;
}
.ft-r .st {
  padding: 28px var(--pad-r);
}
.ft-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 12px var(--font-mono);
}
.ft-soc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--apx-ink);
}
.ft-soc a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-right: 1px solid var(--hair);
  transition: background var(--d-fast);
}
.ft-soc a:last-child {
  border-right: 0;
}
.ft-soc a:hover {
  background: var(--apx-ink);
  color: var(--apx-bone);
}
.ft-b > span {
  padding: 14px var(--pad);
  font: 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ft-b > .sd {
  padding: 14px var(--pad-r);
}

@media (max-width: 1080px) {
  .rw:not(.hd) {
    grid-template-columns: minmax(0, 1fr);
  }
  .rw:not(.hd) > .sd {
    border-left: 0;
    border-top: 1px solid var(--apx-ink);
  }
  .hd {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .hd-r {
    grid-template-columns: auto auto;
  }
  .ft-l {
    grid-template-columns: 1fr 1fr;
  }
  .ft-l > * {
    border-bottom: 1px solid var(--hair);
  }
  .ft-l > :nth-child(2n) {
    border-right: 0;
  }
  .ft-l > :nth-child(2n + 1) {
    padding-left: var(--pad);
  }
  /* The crumb row stays one line. */
  .rw.cr {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rw.cr > .sd {
    border-top: 0;
    border-left: 1px solid var(--apx-ink);
  }
}
@media (max-width: 720px) {
  .hd-l nav,
  .hd-r {
    display: none;
  }
  .hd-l .sp {
    border-right: 0;
  }
  .hd-mb {
    display: flex;
  }
  .rw.cr {
    grid-template-columns: minmax(0, 1fr);
  }
  .cr > .sd {
    display: none;
  }
}