/* hire.nitinkhanna.io: palette from nitinkhanna.io, type is Hanken Grotesk (SIL OFL) */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/hanken-grotesk.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/hanken-grotesk-italic.woff2) format("woff2"); }
:root {
  --paper: #fffcf0;
  --bg-2: #f2f0e5;
  --ui: #e6e4d9;
  --rule: #dad8ce;
  --faint: #b7b5ac;
  --muted: #6f6e69;
  --ink: #100f0f;
  --teal: #24837b;
  --teal-wash: rgba(36, 131, 123, 0.08);
  --action: #af3029;
  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
  --wrap: 68rem;
}
:root[data-theme="dark"] {
  --paper: #100f0f;
  --bg-2: #1c1b1a;
  --ui: #282726;
  --rule: #343331;
  --faint: #575653;
  --muted: #878580;
  --ink: #cecdc3;
  --teal: #3aa99f;
  --teal-wash: rgba(58, 169, 159, 0.1);
  --action: #d14d41;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--faint); }
a:hover { color: var(--action); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; line-height: 1.5; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 2rem; }
.measure { max-width: 40rem; }

/* Top bar, like the blog */
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 2.5rem; padding-bottom: 1rem; }
.crumb { font-size: 1.0625rem; text-decoration: none; }
.crumb span { color: var(--faint); margin: 0 0.35rem; }
.crumb em { font-style: normal; color: var(--muted); }
.top nav { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 1.0625rem; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); }
.top nav a.cta { color: var(--teal); text-decoration: underline; text-decoration-color: currentColor; }

/* Type */
h1 { font-weight: 500; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; margin: 3.5rem 0 1rem; }
.lede { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.4; letter-spacing: -0.012em; margin: 0 0 1rem; max-width: 38rem; }
h2 { font-weight: 500; font-size: clamp(1.375rem, 1.25rem + 0.45vw, 1.625rem); letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 0.5rem; }
h3 { font-weight: 500; font-size: 1.1875rem; letter-spacing: -0.012em; line-height: 1.3; margin: 0; }
section { margin-top: 5.5rem; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sec-head p { margin: 0; }

/* Concern chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 2.25rem 0 1.75rem; }
.chips .label { color: var(--muted); margin-right: 0.25rem; }
.chip {
  font: inherit; font-size: 0.9375rem; color: var(--ink);
  padding: 0.3rem 0.85rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips.co .chip { font-size: 0.875rem; }

/* Phone outline */
.phone {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  border: 1.5px solid var(--ink); border-radius: 1.6rem;
  padding: 1.6rem 0.8rem 0.9rem; background: var(--paper);
  display: flex; flex-direction: column; gap: 0.45rem; overflow: hidden;
}
.phone::before { content: ""; position: absolute; top: 0.6rem; left: 50%; width: 2rem; height: 0.3rem; margin-left: -1rem; border-radius: 1rem; background: var(--rule); }
.phone i { display: block; height: 0.42rem; border-radius: 1rem; background: var(--ui); flex: none; }
.phone i.w6 { width: 60%; } .phone i.w4 { width: 40%; } .phone i.w8 { width: 80%; }
.phone i.t { background: var(--teal); opacity: 0.85; }
.phone .blk { border-radius: 0.5rem; background: var(--bg-2); flex: none; }
.phone .row { display: flex; gap: 0.4rem; align-items: center; flex: none; }
.phone .dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ui); flex: none; }
.phone .step { border: 1px solid var(--rule); border-radius: 0.45rem; height: 1.5rem; flex: none; display: flex; align-items: center; padding: 0 0.45rem; gap: 0.35rem; }
.phone .step.on { border-color: var(--teal); }
.phone .step b { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid var(--faint); flex: none; }
.phone .step.on b { border-color: var(--teal); background: var(--teal); }
.phone svg { width: 100%; height: auto; flex: none; }
.phone .bar { display: flex; align-items: flex-end; gap: 0.25rem; height: 3.5rem; flex: none; }
.phone .bar span { flex: 1; background: var(--ui); border-radius: 0.2rem 0.2rem 0 0; }
.phone .bar span.t { background: var(--teal); opacity: 0.85; }
.phone .bubble { align-self: flex-start; width: 70%; height: 1.4rem; border-radius: 0.7rem; background: var(--bg-2); flex: none; }
.phone .bubble.me { align-self: flex-end; background: var(--teal); opacity: 0.8; width: 55%; }

/* Home rail */
.rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
.card { display: block; text-decoration: none; color: inherit; transition: opacity 200ms ease; }
.card .phone { max-width: 11rem; transition: transform 200ms ease; }
.card:hover .phone { transform: translateY(-3px); }
.card:hover { color: inherit; }
.card .num { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.025em; color: var(--teal); margin: 1rem 0 0.15rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.card .co { font-size: 0.8125rem; color: var(--muted); }
.card .ttl { font-size: 0.9375rem; line-height: 1.35; margin-top: 0.15rem; }
.card[hidden] { display: none; }

/* JSON printer */
.printer { display: grid; grid-template-columns: 13rem 1fr; gap: 3rem; align-items: start; }
.printer .phone { max-width: 13rem; }
.printer .phone .step { height: auto; min-height: 2.1rem; font-size: 0.75rem; line-height: 1.25; padding: 0.4rem 0.55rem; transition: opacity 220ms ease, transform 220ms ease; }
.printer .phone .step.enter { opacity: 0; transform: translateY(4px); }
.printer .phone .head { font-size: 0.8125rem; font-weight: 500; margin: 0.2rem 0 0.35rem; flex: none; }
.printer .phone .cta { margin-top: auto; border-radius: 0.6rem; height: 2rem; background: var(--ink); color: var(--paper); font-size: 0.75rem; display: flex; align-items: center; justify-content: center; flex: none; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 0.5rem; overflow: hidden; margin: 0.25rem 0 1rem; }
.seg button { font: inherit; font-size: 0.9375rem; padding: 0.35rem 1rem; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
pre.json {
  margin: 0; padding: 1.1rem 1.25rem; border-radius: 0.6rem;
  background: var(--bg-2); border: 1px solid var(--ui);
  font: 0.875rem/1.6 var(--mono); color: var(--ink); overflow-x: auto; tab-size: 2;
}
.json .k { color: var(--muted); }
.json .s { color: var(--teal); }
.json .p { color: var(--faint); }
.json .changed { background: var(--teal-wash); border-radius: 0.2rem; }

/* Beliefs strip */
.beliefs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
.beliefs li { border-top: 1px solid var(--rule); padding: 1rem 0 1.25rem; }
.beliefs b { display: block; font-weight: 500; margin-bottom: 0.25rem; }
.beliefs span { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }

/* Career strip */
.career { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); }
.career a { text-decoration: none; padding: 1rem 1rem 1rem 0; border-right: 1px solid var(--rule); }
.career a + a { padding-left: 1rem; }
.career a:last-child { border-right: 0; }
.career b { display: block; font-weight: 500; }
.career span { display: block; font-size: 0.875rem; color: var(--muted); }
.career a:hover b { color: var(--action); }

/* Contact band */
.band { margin-top: 6rem; padding: 3rem 0 4rem; border-top: 1px solid var(--rule); }
.band .lede { margin-bottom: 1.5rem; }
.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn { display: inline-block; padding: 0.65rem 1.1rem; border-radius: 0.6rem; border: 1px solid var(--rule); text-decoration: none; font-size: 1rem; }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn:hover { border-color: var(--ink); }

/* Work page */
.filters { margin: 2rem 0 0; }
.filters .chips { margin: 0 0 0.75rem; }
.group { margin-top: 4.5rem; }
.group > h2 { padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.group[hidden] { display: none; }
.lead { display: grid; grid-template-columns: 12rem 1fr; gap: 3rem; align-items: start; margin-bottom: 2.5rem; }
.lead .phone { max-width: 12rem; }
.lead .num { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--teal); margin: 0.5rem 0 0.75rem; font-variant-numeric: tabular-nums; }
.lead .co { color: var(--muted); font-size: 0.9375rem; margin-bottom: 0.35rem; }
.lead h3 { font-size: 1.375rem; margin-bottom: 0.75rem; }
.lead p { max-width: 36rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { border-top: 1px solid var(--rule); }
.rows li:last-child { border-bottom: 1px solid var(--rule); }
.rows details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 9rem 1fr 9rem 1.25rem; gap: 1.25rem; align-items: baseline; padding: 0.9rem 0; }
.rows details > summary::-webkit-details-marker { display: none; }
.rows summary .n { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--teal); font-variant-numeric: tabular-nums; }
.rows summary .c { font-size: 0.875rem; color: var(--muted); text-align: right; }
.rows summary .x { color: var(--faint); transition: transform 200ms ease; text-align: right; }
.rows details[open] summary .x { transform: rotate(45deg); }
.rows summary:hover .t { color: var(--action); }
.rows .more { display: grid; grid-template-columns: 9rem 1fr; gap: 1.25rem; padding: 0 0 1.25rem; }
.rows .more .phone { max-width: 6.5rem; padding-top: 1.2rem; border-radius: 1.1rem; gap: 0.3rem; }
.rows .more p { max-width: 36rem; }
.rows li[hidden], .lead[hidden] { display: none; }
.measured { font-size: 0.875rem; color: var(--muted); margin-top: 0.25rem; }
.measured summary { cursor: pointer; color: var(--teal); display: inline; list-style: none; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; }
.measured summary::-webkit-details-marker { display: none; }
.measured p { margin: 0.4rem 0 0; }
.permalink { font-size: 0.875rem; color: var(--muted); margin-left: 1rem; }
.empty { color: var(--muted); padding: 2rem 0; }
:target .lead, .rows li:target { scroll-margin-top: 2rem; }
.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--teal-wash); } 100% { background: transparent; } }

/* Notes */
.notes { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.notes li { counter-increment: n; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.notes li:last-child { border-bottom: 1px solid var(--rule); }
.notes li::before { content: counter(n, decimal-leading-zero); color: var(--faint); font-variant-numeric: tabular-nums; padding-top: 0.15rem; }
.notes h3 { margin-bottom: 0.4rem; }
.notes p { margin: 0 0 0.5rem; max-width: 40rem; color: var(--muted); }
.notes .proof { font-size: 0.9375rem; }
.prompt { border-left: 2px solid var(--teal); padding: 0.25rem 0 0.25rem 1.25rem; max-width: 40rem; }
.prompt p { margin-bottom: 0.75rem; }
.prompt b { font-weight: 500; }

/* Now */
.pipeline { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; counter-reset: s; }
.pipeline li { counter-increment: s; border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.9375rem; }
.pipeline li::before { content: counter(s) " "; color: var(--faint); font-variant-numeric: tabular-nums; }
.proj { list-style: none; margin: 0; padding: 0; }
.proj li { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.proj li:last-child { border-bottom: 1px solid var(--rule); }
.proj .meta { color: var(--muted); font-size: 0.9375rem; }
.proj p { margin: 0.25rem 0 0; color: var(--muted); max-width: 38rem; }

footer.foot { padding: 2rem 0 3rem; color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 900px) {
  .rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; margin: 0 -2rem; padding-left: 2rem; padding-right: 2rem; scroll-padding-left: 2rem; }
  .card { scroll-snap-align: start; }
  .beliefs { grid-template-columns: 1fr; }
  .career { grid-template-columns: 1fr 1fr; }
  .career a, .career a + a { padding: 0.9rem 0; border-right: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 1.25rem; }
  .top { padding-top: 1.5rem; flex-direction: column; gap: 0.5rem; }
  .top nav { gap: 1rem; font-size: 1rem; }
  .rail { margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; grid-auto-columns: 46%; gap: 1.25rem; }
  .printer, .lead { grid-template-columns: 1fr; gap: 1.5rem; }
  .printer .phone, .lead .phone { max-width: 10rem; }
  .rows details > summary { grid-template-columns: 6.5rem 1fr 1rem; }
  .rows summary .c { display: none; }
  .rows .more { grid-template-columns: 1fr; }
  .rows .more .phone { display: none; }
  .proj li, .notes li { grid-template-columns: 1fr; gap: 0.25rem; }
  .notes li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Let long code and text shrink inside grids */
.printer > *, .lead > * { min-width: 0; }
@media (max-width: 640px) {
  .lead .phone { max-width: 7.5rem; }
  .printer .phone { max-width: 11rem; }
  pre.json { font-size: 0.75rem; }
}

/* Theme switch, same as the blog */
#theme-toggle { position: relative; width: 36px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; align-self: center; }
#theme-toggle .slide { position: absolute; inset: 0; border: 1px solid var(--rule); border-radius: 24px; }
#theme-toggle .knob {
  position: absolute; top: 1px; left: 1px; width: 18px; height: 18px;
  background: var(--muted); transition: left 0.1s linear, background-color 0.2s linear;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 18px no-repeat;
}
#theme-toggle:hover .knob { background: var(--action); }
:root[data-theme="dark"] #theme-toggle .knob {
  left: 16px; background: var(--ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'/%3E%3C/svg%3E");
}
.top nav { align-items: center; }

/* Filter label sits above the chips so they fit on one line */
.chips .label { flex-basis: 100%; margin-bottom: 0.15rem; }

/* Why hire me / what I look for */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.two h2 { margin-bottom: 1.25rem; }
.reasons { list-style: none; margin: 0; padding: 0; }
.reasons li { border-top: 1px solid var(--rule); padding: 0.9rem 0 1rem; color: var(--muted); }
.reasons li:last-child { border-bottom: 1px solid var(--rule); }
.reasons b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 0.15rem; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; gap: 3rem; } }

/* Per-case mini screens. Sizes scale with the phone width. */
.phone { container-type: inline-size; }
.ui { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5em; font-size: 6.2cqw; line-height: 1.25; overflow: hidden; color: var(--ink); }
.ui-fill { flex: 1; }
.ui-t { font-weight: 500; }
.ui-h { font-size: 1.12em; }
.ui-m { color: var(--muted); font-size: 0.86em; }
.ui-c { text-align: center; }
.ui-r { margin-left: auto; }
.ui-big { font-size: 2em; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ui-big.sm { font-size: 1.5em; }
.ui-up { color: var(--teal); font-size: 0.86em; font-weight: 500; }
.ui-down { color: var(--action); font-size: 0.86em; font-weight: 500; }
.ui-rate { font-size: 0.8em; color: var(--teal); background: var(--teal-wash); border-radius: 1em; padding: 0.25em 0.6em; align-self: flex-start; }
.ui-row { display: flex; align-items: center; gap: 0.45em; }
.ui-between { justify-content: space-between; }
.ui-wrap { flex-wrap: wrap; }
.ui-card { background: var(--bg-2); border-radius: 0.7em; padding: 0.6em 0.7em; }
.ui-li { display: flex; align-items: center; gap: 0.5em; padding: 0.35em 0; border-bottom: 1px solid var(--ui); }
.ui-li.dim { opacity: 0.55; }
.ui-bar { display: block; height: 0.5em; border-radius: 1em; background: var(--ui); flex: none; }
.ui-bar.w8 { width: 85%; } .ui-bar.w6 { width: 60%; } .ui-bar.w4 { width: 40%; }
.ui-li .ui-bar { flex: 1; width: auto; }
.ui-btn { flex: none; text-align: center; padding: 0.6em; border-radius: 0.7em; background: var(--teal); color: #fff; font-weight: 500; font-size: 0.9em; }
.ui-btn.alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.ui-av { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ui); flex: none; display: inline-block; }
.ui-av.lg { width: 2.4em; height: 2.4em; }
.ui-ok { color: var(--teal); font-weight: 600; margin-left: auto; font-size: 0.9em; }
.ui-dot { width: 0.8em; height: 0.8em; border-radius: 50%; border: 1.5px solid var(--faint); margin-left: auto; }
.ui-live { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0.25em var(--teal-wash); }
.ui-code { font-size: 0.75em; font-weight: 600; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; flex: none; }
.ui-code-box { border: 1.5px dashed var(--teal); border-radius: 0.6em; text-align: center; padding: 0.5em; font-weight: 600; letter-spacing: 0.08em; color: var(--teal); }
.ui-gift { align-self: center; width: 3.2em; height: 2.8em; border-radius: 0.4em; background: var(--teal-wash); border: 1.5px solid var(--teal); position: relative; margin-top: 0.3em; }
.ui-gift::before { content: ""; position: absolute; left: 50%; top: -0.2em; bottom: 0; width: 0.35em; margin-left: -0.175em; background: var(--teal); }
.ui-gift span { position: absolute; left: -0.2em; right: -0.2em; top: 0.7em; height: 0.35em; background: var(--teal); }
.ui-svg { width: 100%; height: auto; display: block; flex: none; }
.ui-svg.tall { height: 7em; }
.ui-post { border-bottom: 1px solid var(--ui); padding-bottom: 0.55em; display: flex; flex-direction: column; gap: 0.4em; }
.ui-icons { gap: 1em; font-size: 0.8em; }
.ui-input { border: 1px solid var(--rule); border-radius: 0.7em; padding: 0.55em 0.7em; color: var(--faint); font-size: 0.85em; }
.ui-org { display: flex; flex-direction: column; align-items: center; gap: 0.3em; margin: 0.4em 0; }
.ui-org > i { width: 1px; height: 0.9em; background: var(--rule); }
.ui-org > div { display: flex; gap: 0.6em; }
.ui-sw { flex: 1; height: 2.2em; border-radius: 0.5em; border: 1px solid var(--ui); }
.ui-aa { font-size: 3em; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.ui-tgl { width: 2.4em; height: 1.4em; border-radius: 1em; background: var(--teal); position: relative; }
.ui-tgl::after { content: ""; position: absolute; right: 0.2em; top: 0.2em; width: 1em; height: 1em; border-radius: 50%; background: #fff; }
.ui-chipx { font-size: 0.75em; padding: 0.25em 0.6em; border-radius: 1em; border: 1px solid var(--rule); }
.ui-chipx.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ui-tabs { gap: 0.9em; font-size: 0.8em; }
.ui-tabs .on { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 0.3em; }
.ui-seg { display: flex; background: var(--bg-2); border-radius: 0.7em; padding: 0.2em; font-size: 0.85em; }
.ui-seg span { flex: 1; text-align: center; padding: 0.35em; border-radius: 0.55em; color: var(--muted); }
.ui-seg span.on { background: var(--paper); color: var(--ink); font-weight: 500; }
.ui-ticket { position: relative; border: 1.5px solid var(--teal); background: var(--teal-wash); border-radius: 0.8em; padding: 1em 0.8em; text-align: center; display: flex; flex-direction: column; gap: 0.35em; margin-top: 0.5em; }
.ui-ticket::before, .ui-ticket::after { content: ""; position: absolute; top: 58%; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--teal); }
.ui-ticket::before { left: -0.7em; } .ui-ticket::after { right: -0.7em; }
.ui-star { font-size: 2em; color: var(--teal); line-height: 1; }
.ui-perf { border-top: 1.5px dashed var(--teal); margin: 0.4em 0; opacity: 0.6; }
.ui-banner { border-radius: 0.8em; padding: 0.8em; background: var(--teal-wash); display: flex; flex-direction: column; gap: 0.25em; }
.ui-banner.alt { background: var(--bg-2); }
.ui-prog { height: 0.45em; border-radius: 1em; background: var(--ui); overflow: hidden; }
.ui-prog span { display: block; height: 100%; background: var(--teal); }
.ui-bar-h { height: 0.9em; }
.ui-bar-h span { display: block; height: 100%; border-radius: 0.3em; border: 1.5px solid var(--muted); }
.ui-bar-h.t span { background: var(--teal); border-color: var(--teal); }
.ui-idea { display: flex; gap: 0.5em; align-items: center; background: var(--teal-wash); border-radius: 0.5em; padding: 0.4em 0.55em; font-size: 0.85em; }
.ui-idea b { color: var(--teal); }
.ui-ring { width: 2.8em; height: 2.8em; border-radius: 50%; border: 0.3em solid var(--teal); display: grid; place-items: center; font-weight: 600; flex: none; }
.ui-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; }
.ui-tile { background: var(--bg-2); border-radius: 0.6em; padding: 0.5em; display: flex; flex-direction: column; gap: 0.2em; font-size: 0.9em; }
.ui-heat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25em; }
.ui-heat span { height: 1.5em; border-radius: 0.3em; }
.ui-heat .u1 { background: var(--teal); opacity: 0.35; } .ui-heat .u2 { background: var(--teal); opacity: 0.6; } .ui-heat .u3 { background: var(--teal); opacity: 0.9; }
.ui-heat .d1 { background: var(--action); opacity: 0.3; } .ui-heat .d2 { background: var(--action); opacity: 0.6; }
.ui-logo { width: 1.6em; height: 1.6em; border-radius: 0.45em; background: var(--ui); flex: none; }
.ui-donut { width: 42%; align-self: center; transform: rotate(-90deg); }
.ui-sc { display: flex; flex-direction: column; align-items: center; gap: 0.25em; font-size: 0.75em; color: var(--muted); }
.ui-sc i { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--bg-2); }
.ui-trace { display: grid; grid-template-columns: 4.6em 1fr; align-items: center; gap: 0.4em; }
.ui-trace .ui-m { font-size: 0.72em; white-space: nowrap; }
.ui-trace i { display: block; height: 0.8em; border-radius: 0.2em; background: var(--teal); opacity: 0.75; }
.ui-alert { font-size: 0.8em; border-left: 2px solid var(--action); padding: 0.3em 0.5em; background: var(--bg-2); border-radius: 0 0.4em 0.4em 0; }
.ui-dest { font-size: 0.75em; font-weight: 500; }
.ui-dest span { background: var(--bg-2); border-radius: 0.4em; padding: 0.3em 0.4em; }
.ui-tree { font-size: 0.82em; font-family: var(--mono); display: flex; flex-direction: column; gap: 0.3em; }
.ui-tree div { display: flex; flex-direction: column; gap: 0.3em; margin-left: 0.6em; padding-left: 0.6em; border-left: 1px solid var(--rule); }
.ui-tree span { background: var(--bg-2); border-radius: 0.35em; padding: 0.25em 0.45em; align-self: flex-start; }
.ui-bub { align-self: flex-start; max-width: 85%; background: var(--bg-2); border-radius: 0.9em 0.9em 0.9em 0.2em; padding: 0.5em 0.7em; font-size: 0.85em; display: flex; flex-direction: column; gap: 0.35em; }
.ui-bub.me { align-self: flex-end; background: var(--teal); color: #fff; border-radius: 0.9em 0.9em 0.2em 0.9em; }
.ui-bub .ui-bar { width: 6em; }
.ui-bub.fwd { width: 85%; }
.ui-warn { border: 1.5px solid var(--action); border-radius: 0.7em; padding: 0.5em 0.65em; display: flex; flex-direction: column; gap: 0.2em; font-size: 0.82em; }
.ui-warn b { color: var(--action); }
.ui-moods { font-size: 1.5em; }
.ui-moods span { padding: 0.15em 0.25em; border-radius: 0.4em; }
.ui-moods .on { background: var(--teal-wash); box-shadow: inset 0 0 0 1px var(--teal); }
.ui-img { height: 5em; border-radius: 0.7em; background: linear-gradient(135deg, var(--bg-2), var(--ui)); flex: none; }
.ui-img.sm { width: 3.2em; height: 3.2em; }
.ui-venue { display: flex; gap: 0.6em; align-items: center; }
.ui-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35em; font-family: var(--mono); font-size: 0.78em; }
.ui-mods span { border: 1px solid var(--rule); border-radius: 0.4em; padding: 0.35em; text-align: center; }
.ui-mods.core span { background: var(--bg-2); border-color: var(--bg-2); }
.ui-mods.core { grid-template-columns: repeat(3, 1fr); }
.ui-key { width: 0.7em; height: 0.7em; border-radius: 0.2em; flex: none; }
.ui-key.t { background: var(--teal); } .ui-key.f { background: var(--faint); } .ui-key.r { background: var(--rule); }
.ui-json { margin: 0; font: 0.8em/1.45 var(--mono); color: var(--teal); white-space: pre; }
.ui-app { display: flex; flex-direction: column; align-items: center; gap: 0.35em; font-size: 0.8em; }
.ui-app span { width: 3.2em; height: 3.2em; border-radius: 0.9em; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule); }
.apps { gap: 1em 0.5em; margin-top: 1em; }
.ui-notif { background: var(--bg-2); border-radius: 0.8em; padding: 0.6em 0.7em; display: flex; flex-direction: column; gap: 0.15em; }

/* Gentle shimmer on placeholder bars when you hover a case */
.card:hover .ui-bar, .lead:hover .ui-bar {
  background: linear-gradient(90deg, var(--ui) 0%, var(--bg-2) 50%, var(--ui) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Northline flow on the Now page */
.flow { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; counter-reset: f; }
.flow li { counter-increment: f; border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.75rem 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; position: relative; }
.flow li::before { content: counter(f); color: var(--faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.flow b { font-weight: 500; }
.flow span { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.flow li.me { border-color: var(--teal); background: var(--teal-wash); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr 1fr; } }
.chips { gap: 0.4rem; }
.chip { font-size: 0.875rem; padding: 0.28rem 0.75rem; }

.case-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.25rem 0 0.5rem; font-size: 0.9375rem; }
.case-links a { color: var(--teal); text-decoration-color: currentColor; }
.reasons.plain li { color: var(--ink); }
.days { margin: 1rem 0; padding-left: 1.25rem; }
.days li { margin: 0.5rem 0; }
.measure h3 { font-size: 1rem; font-weight: 500; margin: 1.75rem 0 0.4rem; }
.measure h3:first-child { margin-top: 0; }

/* Home, organised around the reader's questions */
.asks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.asks-label { flex-basis: 100%; margin: 0 0 0.25rem; color: var(--muted); font-size: 0.9375rem; }
.asks a { text-decoration: none; color: var(--ink); }
.asks a::after { content: " ↓"; color: var(--faint); }
.asks a:hover { color: var(--action); }
h2.ask { font-size: clamp(1.625rem, 1.35rem + 1vw, 2.25rem); letter-spacing: -0.025em; }
h2.ask::before { content: "Q"; display: inline-block; width: 1.4em; color: var(--teal); font-weight: 400; }
h2.ask + .muted, h2.ask + .help, h2.ask + .style, h2.ask + .faq, h2.ask + .path { margin-left: 0; }
@media (min-width: 901px) { section > h2.ask { margin-left: -1.4em; } }

.help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 1.75rem; border-top: 1px solid var(--rule); }
.help a { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.help a:not(:nth-child(3n+1)) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.help .when { font-weight: 500; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.3; }
.help .what { color: var(--muted); font-size: 0.9875rem; line-height: 1.5; flex: 1; }
.help .go { color: var(--teal); font-size: 0.9375rem; }
.help .go::after { content: " →"; }
.help a:hover .when { color: var(--action); }
.help a:hover { background: var(--teal-wash); }

.path { list-style: none; margin: 2rem 0 0; padding: 0; position: relative; }
.path::before { content: ""; position: absolute; left: 6.25rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--rule); }
.path li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem; padding: 0 0 2.25rem; position: relative; }
.path li::before { content: ""; position: absolute; left: calc(6.25rem - 4px); top: 0.55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--teal); }
.path li:last-child::before { background: var(--teal); }
.path .yr { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.9375rem; padding-top: 0.2rem; }
.path li > div { padding-left: 1.5rem; max-width: 42rem; }
.path h3 { margin-bottom: 0.35rem; }
.path p { color: var(--muted); margin-bottom: 0.5rem; }
.path a { font-size: 0.9375rem; color: var(--teal); }

.style { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; margin-top: 1.75rem; }
.style h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.style p { color: var(--muted); margin: 0; font-size: 0.9875rem; line-height: 1.55; }

.faq { margin-top: 1.5rem; border-top: 1px solid var(--rule); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 500; font-size: 1.0625rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 0.95rem; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--action); }
.faq details p { color: var(--muted); margin: -0.25rem 0 1.1rem; max-width: 40rem; }

@media (max-width: 900px) {
  .help, .style { grid-template-columns: 1fr 1fr; }
  .help a:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .help a:nth-child(2n) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .help, .style { grid-template-columns: 1fr; }
  .help a:nth-child(2n) { padding-left: 0; border-left: 0; }
  .path::before { left: 0.25rem; }
  .path li { grid-template-columns: 1fr; gap: 0.25rem; padding-left: 1.5rem; }
  .path li::before { left: 0; }
  .path li > div { padding-left: 0; }
}

/* Shore: chat head floating over WhatsApp, verdict sheet */
.sh { position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.5em; min-height: 0; }
.sh-top { display: flex; gap: 0.5em; align-items: center; padding-bottom: 0.45em; border-bottom: 1px solid var(--rule); font-size: 0.85em; line-height: 1.15; }
.sh-av { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule); flex: none; }
.sh-head { position: absolute; right: -0.2em; top: 38%; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 0.95em; box-shadow: 0 0.2em 0.6em rgba(16,15,15,.25), 0 0 0 0.25em var(--teal-wash); animation: sh-pulse 2.4s ease-in-out infinite; z-index: 2; }
.sh-card { position: absolute; left: -0.3em; right: -0.3em; bottom: -0.3em; background: var(--paper); border: 1px solid var(--rule); border-radius: 1em 1em 0.7em 0.7em; padding: 0.55em 0.75em 0.75em; display: flex; flex-direction: column; gap: 0.3em; font-size: 0.82em; box-shadow: 0 -0.4em 1.2em rgba(16,15,15,.08); }
.sh-grab { align-self: center; width: 2.2em; height: 0.25em; border-radius: 1em; background: var(--rule); margin-bottom: 0.2em; }
.sh-verdict { color: var(--action); font-size: 1.35em; letter-spacing: -0.01em; line-height: 1.1; }
.sh-src { display: flex; gap: 0.35em; margin: 0.15em 0 0.3em; }
.sh-src i { width: 1.4em; height: 1.4em; border-radius: 0.35em; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule); }
@keyframes sh-pulse { 0%, 100% { box-shadow: 0 0.2em 0.6em rgba(16,15,15,.25), 0 0 0 0.2em var(--teal-wash); } 50% { box-shadow: 0 0.2em 0.6em rgba(16,15,15,.25), 0 0 0 0.6em var(--teal-wash); } }
@media (prefers-reduced-motion: reduce) { .sh-head { animation: none; } }
.sh-scan { outline: 1.5px dashed var(--teal); outline-offset: 0.25em; }
.sh .sh-head { top: auto; bottom: 47%; }

/* Richer screens */
.ui-av.i { display: inline-grid; place-items: center; font-size: 0.75em; font-weight: 600; color: var(--teal); background: var(--teal-wash); }
.xf { border: 1px solid var(--rule); border-radius: 0.7em; padding: 0.4em 0.6em; display: flex; flex-direction: column; gap: 0.1em; flex: none; }
.xf .ui-big.sm { font-size: 1.45em; }
.pf { display: flex; flex-direction: column; gap: 0.25em; border: 1px solid var(--rule); border-radius: 0.7em; padding: 0.5em 0.6em; flex: none; }
.nl-draft { border: 1.5px solid var(--teal); border-radius: 0.7em; padding: 0.5em 0.6em; display: flex; flex-direction: column; gap: 0.35em; flex: none; }

/* Remittance market and VDA */
section.tight { margin-top: 4rem; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin-top: 1.25rem; }
.stats > div { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 1.25rem 1.25rem 0; }
.stats > div + div { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.stats b { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; }
.stats span { color: var(--ink); font-size: 0.9875rem; line-height: 1.45; flex: 1; }
.stats a { font-size: 0.8125rem; color: var(--muted); }
.rails { align-self: start; border: 1px solid var(--rule); border-radius: 1rem; padding: 1.5rem; }
.rails-label { margin: 0 0 0.6rem; font-size: 0.9375rem; color: var(--muted); }
.rails ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.rails li { font-size: 0.875rem; padding: 0.3rem 0.65rem; border-radius: 2rem; border: 1px solid var(--rule); background: var(--bg-2); position: relative; }
.rails li + li { margin-left: 1.2rem; }
.rails li + li::before { content: "→"; position: absolute; left: -1.1rem; color: var(--faint); }
.rails ol.t li:not(:first-child):not(:last-child) { color: var(--teal); font-weight: 500; border-color: var(--teal); background: var(--teal-wash); }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } .stats > div:nth-child(3) { padding-left: 0; border-left: 0; } .stats > div:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } .stats > div, .stats > div + div { padding: 1rem 0; border-left: 0; } .stats > div + div { border-top: 1px solid var(--rule); } }

/* Home pitch: the three things */
.pitch { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pitch li { padding: 1.5rem 1.75rem 0.5rem 0; display: flex; flex-direction: column; }
.pitch li + li { padding-left: 1.75rem; border-left: 1px solid var(--rule); }
.pitch .pn { color: var(--teal); font-variant-numeric: tabular-nums; font-size: 0.9375rem; margin-bottom: 0.75rem; }
.pitch h2 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 0.75rem; }
.pitch p { color: var(--muted); font-size: 1rem; line-height: 1.55; }
.pitch p.proof { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.5rem; }
.proof a { text-decoration: none; color: var(--muted); font-size: 0.9375rem; }
.proof a b { color: var(--teal); font-weight: 500; margin-right: 0.35rem; }
.proof a:hover { color: var(--action); }
.proof a::after { content: " →"; color: var(--faint); }
@media (max-width: 900px) {
  .pitch { grid-template-columns: 1fr; }
  .pitch li, .pitch li + li { padding: 1.5rem 0; border-left: 0; }
  .pitch li + li { border-top: 1px solid var(--rule); }
}

/* Rules in the app vs on the server */
.vs { width: 100%; max-width: 52rem; border-collapse: collapse; margin-top: 1.75rem; font-size: 0.9875rem; }
.vs th, .vs td { text-align: left; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.vs thead th { font-weight: 400; color: var(--muted); font-size: 0.9375rem; border-bottom-color: var(--ink); }
.vs tbody th { font-weight: 500; width: 32%; }
.vs td { color: var(--muted); }
.vs td:last-child { color: var(--teal); }
@media (max-width: 640px) {
  .vs thead { display: none; }
  .vs tr { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
  .vs th, .vs td { display: block; border: 0; padding: 0.15rem 0; width: auto !important; }
  .vs td:nth-of-type(1)::before { content: "In the app: "; color: var(--faint); }
  .vs td:nth-of-type(2)::before { content: "On the server: "; color: var(--faint); }
}
.remit-card { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.5rem 1.75rem; border: 1px solid var(--rule); border-radius: 1rem; text-decoration: none; color: var(--muted); }
.remit-card b { color: var(--ink); font-weight: 500; font-size: 1.125rem; margin-right: 0.35rem; }
.remit-card .go { color: var(--teal); white-space: nowrap; }
.remit-card .go::after { content: " →"; }
.remit-card:hover { background: var(--teal-wash); }
.remit-card:hover b { color: var(--action); }
@media (max-width: 640px) { .remit-card { flex-direction: column; align-items: flex-start; gap: 0.75rem; } }

/* What I work with */
.stack { margin: 1.5rem 0 0; border-top: 1px solid var(--rule); max-width: 52rem; }
.stack > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.stack dt { font-weight: 500; }
.stack dd { margin: 0; color: var(--muted); }
@media (max-width: 640px) { .stack > div { grid-template-columns: 1fr; gap: 0.2rem; } }
.remit-cta { margin-top: 4.5rem; padding: 2rem 2rem 2.25rem; border-radius: 1rem; background: var(--teal-wash); border: 1px solid var(--rule); }
.remit-cta .lede { margin-bottom: 1.25rem; }