/* apt Solution site. Tokens come from the apt Solution brochure. */
:root {
  --paper: #F7F7F7;
  --ink: #000;
  --accent: #FFB81C;
  --tone: #E6E6E6;        /* pill fill on paper */
  --rule: #CFCFCF;
  --mute: #555;           /* secondary text on paper: 7.0:1 */
  --mute-dark: #BDBDBD;   /* secondary text on ink: 10.6:1 */
  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 1240px;
  --measure: 66ch;
  --step: clamp(64px, 9vw, 128px);   /* space between sections */
  --display: clamp(2.6rem, 8.4vw, 6rem);
  --h2: clamp(1.75rem, 3.6vw, 2.75rem);
  --lead: clamp(1.125rem, 1.7vw, 1.375rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 'Barlow', system-ui, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--ink) }
img, svg { display: block; max-width: 100% }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em }
a:hover { text-decoration-color: var(--accent) }
/* Ink ring on paper, amber ring on ink: both clear 3:1 against what they sit on. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px }
.foot :focus-visible, .menu ul :focus-visible, .pull :focus-visible { outline-color: var(--accent) }
ul, ol { list-style: none }
h1, h2, h3 { font-weight: 700; letter-spacing: -.015em; line-height: .98; text-wrap: balance }
h1 { font-size: var(--display) }
h2 { font-size: var(--h2); line-height: 1.02 }
h3 { font-size: 1.1875rem; line-height: 1.2; letter-spacing: -.005em }
p { max-width: var(--measure); text-wrap: pretty }
.cond { font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) }
.section { padding-top: var(--step) }
.section > .wrap > h2 { margin-bottom: clamp(24px, 3vw, 40px) }

.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; text-decoration: none }
.skip:focus { top: 12px }

/* ---------- Header ---------- */
.top { position: relative; z-index: 5; padding-top: 22px }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px }

.brand { color: var(--ink) }
.brand svg { height: auto }
.brand .m + svg { width: 74px }
.nav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px) }
.nav a { font-weight: 600; font-size: 1rem; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent }
.nav a:hover { border-bottom-color: var(--accent) }
.nav a[aria-current="page"] { border-bottom-color: var(--ink) }
.nav .nav-contact a { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; border: 0 }
.nav .nav-contact a:hover { background: #262626 }
.menu { display: none }

@media (max-width: 860px) {
  .nav { display: none }
  .menu { display: block; position: relative }
  .menu summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600
  }
  .menu summary::-webkit-details-marker { display: none }
  .menu summary .bars { width: 16px; height: 10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; position: relative }
  .menu summary .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid #fff }
  .menu[open] summary .bars { border-color: transparent }
  .menu[open] summary .bars::after { top: 2px; border-color: #fff }
  .menu ul {
    position: absolute; right: 0; top: 54px; width: min(300px, calc(100vw - 2 * var(--gutter)));
    background: var(--ink); color: #fff; border-radius: 28px; padding: 14px; z-index: 20;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35)
  }
  .menu li a { display: block; padding: 12px 16px; border-radius: 999px; font-weight: 600; text-decoration: none }
  .menu li a:hover, .menu li a[aria-current="page"] { background: #262626 }
  .menu li a[aria-current="page"]::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle }
}

/* ---------- Pills and stadiums ---------- */
.pill {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 18px;
  border-radius: 999px; background: var(--tone); font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600; font-size: 1rem; line-height: 1.1; white-space: nowrap
}
.pill--amber { background: var(--accent) }
.pill--ink { background: var(--ink); color: #fff }
.pill--line { background: transparent; box-shadow: inset 0 0 0 2px var(--ink) }
.sku { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; letter-spacing: .02em }

.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease)
}
.btn--ink { background: var(--ink); color: #fff }
.btn--ink:hover { background: #262626 }
.btn--amber { background: var(--accent); color: var(--ink) }
.btn--amber:hover { background: #F2A900 }
.btn--line { box-shadow: inset 0 0 0 2px currentColor }
.btn--line:hover { background: rgba(0, 0, 0, .05) }
.on-ink .btn--line:hover, .foot .btn--line:hover { background: rgba(255, 255, 255, .1) }
.btn:active { transform: translateY(1px) }
.btn .arrow { width: 18px; height: 18px; flex: none }
.text-link { font-weight: 600 }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px }

/* The fitted word: the stadium is cut to the word and settles onto it once. */
.fit { position: relative; display: inline-block; color: #fff; padding: .02em .26em .07em .24em; margin-left: -.02em; line-height: 1; isolation: isolate; white-space: nowrap }
.fit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--ink);
  animation: settle 1.1s var(--ease) .15s both
}
.fit--amber { color: var(--ink) }
.fit--amber::before { background: var(--accent) }
@keyframes settle { from { transform: scaleX(1.18) scaleY(1.06) } to { transform: none } }
@media (prefers-reduced-motion: reduce) {
  .fit::before { animation: none }
  html { scroll-behavior: auto }
}

/* The logomark: a circle (a complete answer) made of capsule rows, the stadium shape the brand is built from.
   The gaps trace two strands that cross: a double helix in negative space. One artwork, one placement rule
   on every page: huge and cropped off the right edge of the hero, each page head, the black band and the footer. */
.mark-crop { position: absolute; z-index: 0; color: var(--ink); pointer-events: none }
.mark-crop svg { width: 100%; height: auto }
/* On load the rows slide into place one after another, alternating sides, once. */
.mark-anim rect, .mark-anim circle { animation: row-in 1.1s var(--ease) calc(var(--i) * 70ms + 60ms) both }
.mark-anim [style*="--i:1"], .mark-anim [style*="--i:3"], .mark-anim [style*="--i:5"], .mark-anim [style*="--i:7"] { --dir: 1 }
@keyframes row-in { from { transform: translateX(calc(var(--dir, -1) * 22%)); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .mark-anim rect, .mark-anim circle { animation: none !important } }
/* Header and footer lockup: the mark beside the wordmark. */
.brand, .lockup { display: flex; align-items: center; gap: 12px }
.brand .m, .lockup .m { width: 42px; flex: none }

/* ---------- Hero (home) ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 120px) 0 0 }
.hero { --mw: clamp(400px, 44vw, 760px) }
.hero .mark-crop { width: var(--mw); right: calc(var(--mw) * -0.07); top: 28px }
.hero .wrap { position: relative; z-index: 1 }
.hero h1 { font-size: clamp(3rem, 6.8vw, 6rem); line-height: 1.12; max-width: 9.5em; letter-spacing: -.025em }
.hero .wrap > * { max-width: 58% }
.hero .wrap > .lead { max-width: min(36em, 58%) }
.hero .product { margin-top: clamp(28px, 4vw, 48px) }
.product { display: inline-flex; align-items: center; height: clamp(54px, 6vw, 68px); padding: 0 clamp(22px, 2.6vw, 32px); border-radius: 999px; background: var(--accent); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.01em; line-height: 1 }
.hero .lead { margin-top: 22px; font-size: var(--lead); font-weight: 500; line-height: 1.45; max-width: 36em }
.exchange-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px }
.exchange-line .join { width: 28px; height: 2px; background: var(--ink); flex: none }
.hero .actions { margin-top: 36px }

/* ---------- Page head (inner pages) ---------- */
.page-head { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 0 }
.page-head { --mw: clamp(260px, 30vw, 460px); min-height: calc(var(--mw) + 56px) }
.page-head .mark-crop { width: var(--mw); right: calc(var(--mw) * -0.08); top: 20px }
.page-head .wrap { position: relative; z-index: 1 }
.page-head h1 { line-height: 1.1; max-width: 11em }
/* Narrow screens: the mark shrinks to the top-right corner and the text starts below it. */
@media (max-width: 1100px) {
  .hero .wrap > *, .hero .wrap > .lead { max-width: none }
  .hero { --mw: clamp(220px, 60vw, 400px); padding-top: calc(var(--mw) * .9 + 12px) }
  .hero .mark-crop { top: 4px; right: calc(var(--mw) * -0.12) }
}
@media (max-width: 860px) {
  .page-head { --mw: clamp(190px, 52vw, 320px); padding-top: calc(var(--mw) * .9 + 8px); min-height: 0 }
  .page-head .mark-crop { top: 4px; right: calc(var(--mw) * -0.12) }
}
.page-head .lead { margin-top: 24px; font-size: var(--lead); font-weight: 500; line-height: 1.45; max-width: 38em }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-weight: 600; font-size: .9375rem; color: var(--mute) }
.crumbs a { color: var(--ink) }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--mute) }

/* ---------- Prose block ---------- */
.why { display: grid; grid-template-columns: minmax(150px, 3fr) 9fr; gap: 20px clamp(24px, 4vw, 64px); border-top: 2px solid var(--ink); padding-top: 22px }
.why h2 { font-size: 1.5rem; line-height: 1.15 }
.why p { font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.4; font-weight: 500; max-width: 34em; letter-spacing: -.005em }
@media (max-width: 720px) { .why { grid-template-columns: 1fr } }

/* ---------- Definition lists (fit points) ---------- */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(14px, 2vw, 24px) }
.points div {
  display: grid; grid-template-columns: minmax(130px, 2fr) 3fr; gap: 4px 20px; align-items: center;
  padding: 20px clamp(26px, 3vw, 40px); border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink)
}
.points dt { font-weight: 700; font-size: 1.3125rem; line-height: 1.25 }
.points dd { color: var(--ink) }
@media (max-width: 900px) { .points { grid-template-columns: 1fr } }
@media (max-width: 520px) { .points div { grid-template-columns: 1fr; border-radius: 36px; padding: 20px 24px } }

/* ---------- Numbered steps on a stem ---------- */
.steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px clamp(16px, 2.4vw, 32px); counter-reset: s }
.steps li { position: relative; counter-increment: s }
.steps .head { display: flex; align-items: center; gap: 12px; position: relative }
.steps .head::after { content: ""; flex: 1; height: 2px; background: var(--ink); margin-right: calc(-1 * clamp(16px, 2.4vw, 32px)) }
.steps li:last-child .head::after { display: none }
.steps .n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 1.125rem }
.steps h3 { flex: none; font-size: 1.5rem }
.steps p { margin-top: 14px; padding-right: 8px }
.steps .last .n { background: var(--accent); color: var(--ink) }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 0 }
  .steps li { padding: 0 0 28px 56px }
  .steps li::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--ink) }
  .steps li:last-child::before { display: none }
  .steps .head { margin-left: -56px; gap: 16px }
  .steps .head::after { display: none }
  .steps p { margin-top: 6px }
}

/* ---------- Coverage (home) and panel table ---------- */
.cover { display: grid; grid-template-columns: 7fr 5fr; gap: 24px clamp(24px, 4vw, 64px); align-items: start }
.live-cards { display: grid; gap: 20px }
.live-card {
  position: relative; display: block; text-decoration: none; padding: clamp(28px, 4vw, 48px);
  border-radius: clamp(36px, 6vw, 80px); box-shadow: inset 0 0 0 clamp(5px, .7vw, 8px) var(--ink); background: var(--paper);
  transition: background-color .25s var(--ease)
}
.live-card:hover { background: #fff }
.live-card h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 18px 0 10px }
.live-card .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
.live-card .go { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700 }
.live-card:hover .go .arrow { transform: translateX(4px) }
.arrow { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease) }
.nowrap { white-space: nowrap }
.dev { padding-top: 6px }
.dev h3 { font-size: 1.375rem; margin: 14px 0 8px }
.dev p + p { margin-top: 12px }
@media (max-width: 860px) { .cover { grid-template-columns: 1fr } }

.status { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: .9375rem; white-space: nowrap }
.status--live { background: var(--accent) }
.status--dev { background: var(--tone) }
.status--retired { background: var(--ink); color: #fff }

/* ---------- Pull stadium ---------- */
.pull { --pw: clamp(320px, 44vw, 620px); position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; text-align: center; min-height: clamp(240px, 32vw, 440px); padding: 44px clamp(40px, 10vw, 180px); border-radius: 999px; background: var(--ink); color: #fff }
.pull p { max-width: 17em; font-size: clamp(1.6rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; position: relative; z-index: 1 }
.pull .mark-crop { z-index: 0; width: var(--pw); right: calc(var(--pw) * -0.14); top: 50%; margin-top: calc(var(--pw) * -0.5); color: #2c2c2c }
@media (max-width: 600px) { .pull { border-radius: 56px; --pw: 340px; min-height: 280px; padding: 40px 28px } }

/* ---------- Exchange diagram (how it works) ---------- */
/* The brochure p2 device: one tall stadium, round at top and bottom, heavy ink stroke. */
.exchange {
  display: grid; gap: clamp(24px, 3vw, 36px); max-width: 600px; margin: 0 auto; text-align: center;
  padding: clamp(96px, 20vw, 150px) clamp(22px, 4vw, 48px); border-radius: 9999px;
  box-shadow: inset 0 0 0 clamp(5px, .7vw, 8px) var(--ink)
}
.exchange h3 { font-size: 1.0625rem; margin-bottom: 16px }
.exchange ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px }
.exchange .send .first-row { flex-basis: 100%; display: flex; justify-content: center }
.exchange .send .first { font-size: 1.5rem; min-height: 56px; padding: 0 30px; background: var(--accent); font-weight: 700 }
.exchange .core {
  display: flex; align-items: center; justify-content: center; gap: 18px; min-height: clamp(84px, 9vw, 112px);
  border-radius: 999px; background: var(--ink); color: #fff; padding: 0 32px
}
.exchange .core svg { width: clamp(48px, 5vw, 64px); color: #fff }
.exchange .core span { font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1; letter-spacing: -.01em }
.exchange .end { margin-top: 18px; font-size: 1.1875rem; font-weight: 700; min-height: 56px; padding: 0 28px }


/* ---------- Lists ---------- */
.plain-list { display: grid; gap: 0 }
.plain-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--rule); font-weight: 600; font-size: 1.125rem }
.plain-list li:first-child { border-top: 2px solid var(--ink) }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(24px, 5vw, 80px) }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr } }
.pills { display: flex; flex-wrap: wrap; gap: 10px }
.pills--big .pill { min-height: 56px; padding: 0 26px; font-size: 1.25rem; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink) }
.narrow > * { max-width: 760px }
.narrow > h2 { margin-bottom: 22px }
.facts-grid--one { grid-template-columns: 1fr }
.points--one { grid-template-columns: 1fr }
.points--one div { border-radius: 40px }
.co-name { margin-top: 14px; color: var(--mute) }
.io .end { margin-top: 12px; font-weight: 700; background: var(--accent) }

/* ---------- Panel index ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; padding: 20px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule) }
.filters[hidden] { display: none }
.field-select { display: grid; gap: 6px; font-weight: 600; font-size: .9375rem }
.field-select select {
  appearance: none; height: 46px; padding: 0 44px 0 18px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center;
  font: 600 1rem 'Barlow', sans-serif; color: var(--ink); cursor: pointer
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0 }
.chips legend { font-weight: 600; font-size: .9375rem; margin-bottom: 6px; float: left; width: 100% }
.chip input { position: absolute; opacity: 0; pointer-events: none }
.chip span { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); font-weight: 600; cursor: pointer; user-select: none }
.chip input:checked + span { background: var(--ink); color: #fff }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px }
.count { margin-left: auto; align-self: center; font-weight: 600; color: var(--mute) }
@media (max-width: 600px) {
  .filters { display: grid; grid-template-columns: 1fr }
  .field-select select { width: 100% }
  .count { margin-left: 0 }
}
.field-group { margin-top: clamp(40px, 5vw, 64px) }
.field-group > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px }
.area { margin-top: 26px }
.area > h3 { font-size: 1rem; color: var(--mute); font-weight: 600; letter-spacing: 0; margin-bottom: 10px }
.rows { border-top: 2px solid var(--ink) }
.row { display: grid; grid-template-columns: 130px minmax(0, 3fr) minmax(0, 2fr) 150px; gap: 8px 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule) }
.row .name { font-weight: 700; font-size: 1.125rem; line-height: 1.25 }
.row .name a { text-decoration: none }
.row .name a:hover { text-decoration: underline; text-decoration-color: var(--accent) }
.row .sub { display: block; font-weight: 500; font-size: .9375rem; color: var(--mute); margin-top: 2px }
.row .facts { font-size: .9375rem }
.row .end-cell { justify-self: end }
.row--dev .name { font-weight: 600 }
.row[hidden] { display: none }
.empty-note { padding: 22px 0; font-weight: 600 }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr auto; gap: 6px 16px }
  .row .code-cell { grid-column: 1 / -1 }
  .row .facts { grid-column: 1 / -1; grid-row: 3 }
  .row .end-cell { grid-row: 2; grid-column: 2 }
}

/* ---------- Panel page ---------- */
.panel-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px }
.panel-tags .pill, .panel-tags .status { height: 40px; min-height: 40px; padding: 0 18px; font-size: 1rem }
.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px) }
.facts-grid div { padding: 18px 0 20px; border-top: 2px solid var(--ink) }
.facts-grid dt { font-weight: 600; font-size: .9375rem; color: var(--mute); margin-bottom: 8px }
.facts-grid dd { font-weight: 600; font-size: 1.1875rem; line-height: 1.35 }
.facts-grid .note { display: block; font-weight: 500; font-size: .9375rem; color: var(--mute); margin-top: 6px }
@media (max-width: 860px) { .facts-grid { grid-template-columns: 1fr } }
.io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(24px, 5vw, 80px) }
.io h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 18px }
.io ul { display: flex; flex-wrap: wrap; gap: 10px }
.io .first { background: var(--accent); font-weight: 700 }
@media (max-width: 860px) { .io { grid-template-columns: 1fr } }

/* ---------- Contact ---------- */
.person { display: grid; gap: 6px }
.person .who { font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1 }
.big-link { font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere }
.mailtos { display: grid; gap: 0 }
.mailtos a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; border-top: 1px solid var(--rule); font-weight: 700; font-size: 1.1875rem; text-decoration: none }
.mailtos li:first-child a { border-top: 2px solid var(--ink) }
.mailtos a:hover { background: #fff }
.mailtos a:hover .arrow { transform: translateX(4px) }
.mailtos .sub { display: block; font-weight: 500; font-size: .9375rem; color: var(--mute) }

/* ---------- Footer arch ---------- */
.foot { margin-top: var(--step); background: var(--ink); color: #fff; border-radius: clamp(120px, 22vw, 360px) clamp(120px, 22vw, 360px) 0 0; position: relative; overflow: hidden }
.foot { --fw: clamp(420px, 54vw, 860px) }
.foot .mark-crop { width: var(--fw); right: calc(var(--fw) * -0.12); bottom: calc(var(--fw) * -0.32); color: #262626 }
.foot .wrap { position: relative; z-index: 1; padding-top: clamp(72px, 10vw, 140px); padding-bottom: 34px }
.foot .close { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end }
.foot h2 { font-size: clamp(2.4rem, 6.6vw, 5rem); line-height: 1.05; letter-spacing: -.02em }
.foot .lockup { color: #fff }
.foot .lockup .m { width: clamp(52px, 5.5vw, 72px) }
.foot .lockup .m + svg { width: clamp(84px, 9vw, 120px); height: auto }
.foot .contact-block { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px clamp(24px, 4vw, 56px); margin-top: 40px; padding-top: 22px; border-top: 1px solid #fff; font-size: 1.0625rem }
.foot .contact-block a { font-weight: 600; text-decoration: none }
.foot .contact-block a:hover { text-decoration: underline; text-decoration-color: var(--accent) }
.foot .contact-block b { font-weight: 700 }
.foot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; margin-top: 56px; font-size: .9375rem; color: var(--mute-dark) }
.foot .legal ul { display: flex; flex-wrap: wrap; gap: 8px 22px }
.foot .legal a { color: #fff; text-decoration: none }
.foot .legal a:hover { text-decoration: underline; text-decoration-color: var(--accent) }
.foot .actions { margin-top: 32px }
.foot .actions .btn--line { color: #fff }
@media (max-width: 720px) {
  .foot { border-radius: 64px 64px 0 0 }
  .foot .close { grid-template-columns: 1fr }
  .foot .contact-block { grid-template-columns: 1fr }
}

/* ---------- 404 ---------- */
.lost { min-height: 52vh }

@media print {
  .top nav, .menu, .foot .actions, .skip, .mark-crop { display: none }
  .foot { border-radius: 0 }
  .fit::before { animation: none }
}

@media (max-width: 520px) {
  .exchange-line { flex-direction: column; align-items: flex-start; gap: 6px }
  .exchange-line .join { width: 2px; height: 14px; margin-left: 22px }
}