/* ---------- design tokens ---------- */
:root {
  color-scheme: light;

  --cream: #f4f0e6;
  --paper: #faf7ed;
  --ink: #1a1a17;
  --ink-soft: #2e2b24;
  --muted: #6b6759;
  --red: #a23a24;

  --r1: #1a1a17;
  --r2: #c6c3b5;

  --d-bg: #1a1a17;
  --d-text: #e8e3d6;
  --d-soft: #a8a497;
  --d-rule: #37352e;
  --d-red: #e25132;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:
    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --zA: 1.45fr;
  --zB: 6fr;
  --zC: 4.4fr;
  --gut: 36px;
  --measure: 488px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: env(safe-area-inset-top, 0) 0 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/27px var(--text);
  font-variation-settings: "opsz" 16;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: inherit;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

hr {
  border: 0;
  margin: 0;
}
.r0 {
  border-top: 1px solid var(--r1);
}
.r1 {
  border-top: 1px solid var(--r1);
}
.r2 {
  border-top: 1px solid var(--r2);
}

.band {
  display: grid;
  align-items: baseline;
  grid-template-columns: minmax(0, var(--zA)) minmax(0, var(--zB)) minmax(
      0,
      var(--zC)
    );
}
.band > .a {
  grid-column: 1;
}
.band > .b {
  grid-column: 2;
  padding: 0 var(--gut);
}
.band > .c {
  grid-column: 3;
  padding-left: var(--gut);
}
.band > .bc {
  grid-column: 2/-1;
  padding-left: var(--gut);
}
.ruled {
  background: linear-gradient(to right, var(--r2), var(--r2)) no-repeat
    12.23629% 0;
  background-size: 1px 100%;
}

/* rail */
.rail {
  font: 400 15px/22px var(--text);
  font-variation-settings: "opsz" 16;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0;
}
.rail.log {
  font: 400 12.5px/19px var(--mono);
  letter-spacing: 0;
  color: var(--ink-soft);
  position: relative;
  text-align: right;
}
.band > .a {
  padding-right: 20px;
}
.rail.log span {
  display: block;
  white-space: nowrap;
}
.rail.log span:first-child {
  font-size: 23px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.rail.log::after {
  content: "";
  position: absolute;
  top: 11.5px;
  right: -24.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.rail.grp {
  color: var(--muted);
  margin-bottom: 22px;
}
.rail .no {
  font: 400 11px/22px var(--mono);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-right: 9px;
}
.rail .i {
  display: block;
  font-size: 23px;
  line-height: 23px;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 9px;
}

.reg .hc,
.reg .hx,
.spec .k,
.spec .hd span,
.close .nl {
  font: 400 12px/16px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c584c;
}
.rail.log span + span {
  font: 400 12.5px/17px var(--mono);
  letter-spacing: 0;
  color: #5c584c;
}

/* Stub rails — the two lower sweep rails (09:15, 15:15) carry honest
   placeholders ("+ a few" / "− a few") for past sweeps of this store,
   not real counts. They only make sense once the user has loaded their
   own snapshot — until then they're hidden so we don't show fake data. */
.rail.log.rail-stub {
  display: none;
}
body.has-snapshot .rail.log.rail-stub {
  display: block;
}
.rail.log.rail-stub .stub-count {
  color: var(--muted);
  font-style: italic;
}

.figs .who {
  font: 400 17px/24px var(--text);
  color: var(--ink-soft);
}

.close .clock-now {
  font: 400 12.5px/17px var(--mono);
  letter-spacing: 0;
  white-space: nowrap;
}
.close .clock-now b {
  display: block;
  font-size: 23px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.close .clock-now i {
  display: block;
  font-style: normal;
}

/* ---------- masthead ---------- */
.wordmark .wd span {
  position: relative;
  display: inline-block;
}
.wordmark .wd span:nth-child(2) {
  top: 0.025em;
}
.wordmark .wd span:nth-child(3) {
  top: 0.05em;
}
.wordmark .wd span:nth-child(4) {
  top: 0.075em;
}
.wordmark .wd span:nth-child(5) {
  top: 0.1em;
}
.mast {
  display: grid;
  align-items: baseline;
  padding: 34px 0 22px;
  grid-template-columns: minmax(0, var(--zA)) minmax(0, var(--zB)) minmax(
      0,
      var(--zC)
    );
}
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 22;
  font-size: 25px;
  line-height: 24px;
  letter-spacing: -0.034em;
  text-decoration: none;
  white-space: nowrap;
  margin-left: -2px;
}
.mast .links {
  grid-column: 2/-1;
  padding-left: var(--gut);
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 30px;
  font: 400 15px/24px var(--text);
  letter-spacing: 0;
  color: var(--ink-soft);
}
.mast .links a {
  text-decoration: none;
  white-space: nowrap;
}
.mast .links a:hover {
  color: var(--red);
}
.mast .login {
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.mast .login:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mast .start {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.mast .links a.start:hover {
  color: var(--red);
}

/* ---------- headline ---------- */
.headline {
  padding: 98px 0 92px;
  position: relative;
}
.dateline {
  position: absolute;
  right: 0;
  top: 145px;
  margin: 0;
  text-align: right;
  font: 400 10px/19px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: -0.14em;
}
.dateline span {
  display: block;
}
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  /* Cap lower than the inspiration's 6.4625rem — at wide screens the H1
 otherwise overflows the ~1000px content column. 5rem keeps the
 hero large but contained. */
  font-size: clamp(2.4rem, 7.1806vw, 6.4625rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  word-spacing: -0.02em;
  margin: 0 0 0 -2px;
  text-wrap: balance;
}
/* No `.l` spans — text wraps naturally. The user is fine with
   "competitors" dropping to a third line on narrow viewports; the
  forced two-line span structure was overkill. The `.hang` period
  still hangs past the margin. */
h1 .hang {
  margin-right: -0.25em;
}
.hb {
  display: none;
}
@media (min-width: 1081px) {
  .hb {
    display: inline;
  }
}
h1 .l1 {
  margin-left: -4.5px;
}
h1 .l2 {
  margin-left: -3.5px;
}
h1 .o {
  margin-left: -3px;
}

/* ---------- hero ---------- */
.hero {
  padding: 98px 0 64px;
}
.hero > .b {
  margin-top: 46px;
}
.hero > .c {
  margin-top: 55px;
}
.hero .c {
  align-self: start;
}
.hero .offer.lead {
  margin: 22px 0 0;
  color: var(--ink-soft);
}
@media (min-width: 1200px) {
  .hero form.snap {
    margin-top: 33px;
  }
}
.deck {
  font-size: 24px;
  line-height: 34px;
  margin: 0 0 18px;
  max-width: var(--measure);
}
.price-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 22px 0 0;
  padding-top: 0;
  border-top: 0;
}
.price-line .n {
  font-family: var(--display);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings:
    "lnum" 1,
    "tnum" 1;
}
.price-line .cur {
  font-size: 0.42em;
  vertical-align: 0.7em;
  letter-spacing: 0;
  margin-right: 0.06em;
}
.price-line .u {
  font: 400 17px/27px var(--text);
  color: var(--ink-soft);
}
.price-line .n {
  margin-left: -3px;
}
.price-line s {
  text-decoration: none;
  color: var(--muted);
}
.body {
  font-size: 17px;
  line-height: 27px;
  color: var(--ink-soft);
  margin: 6px 0 0;
  max-width: var(--measure);
}

form.snap {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 20px 0 0;
  width: 100%;
  max-width: var(--measure);
}
.field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.field input {
  width: 100%;
  font: 400 14px/22px var(--mono);
  height: 56px;
  padding: 0 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-right: 0;
  border-radius: 0;
}
.field input::placeholder {
  color: #5c584c;
}
.field input:focus {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}
button.cta {
  flex: none;
  font: 500 16px/22px var(--text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  height: 56px;
  width: 212px;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
button.cta:hover {
  background: #000;
  border-color: #000;
}
button.cta:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
button.cta[disabled] {
  background: var(--muted);
  border-color: var(--muted);
  cursor: wait;
}
.offer {
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
.offer.fine {
  font: 400 16px/24px var(--text);
  color: var(--ink-soft);
  margin-top: 18px;
}
.offer.fine .link-inline {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.offer.fine .link-inline:hover {
  color: var(--red);
}

.notes {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--r2);
}
.notes p:not(.rail) {
  margin: 9px 0 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---------- the specimen (example alert email card) ---------- */
.spec {
  font-family: var(--mono);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.spec .hd {
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--ink);
}
.spec .hd .meta {
  margin: 0;
  font: 400 17px/22px var(--text);
  letter-spacing: 0;
  color: var(--ink-soft);
}
.spec .hd span {
  display: inline-block;
  width: 84px;
}
.spec .hd .subj {
  margin: 6px 0 0;
  font: 400 17px/22px var(--text);
  color: var(--ink);
}
.spec .body-rows {
  padding: 0;
}
.spec .ev {
  padding: 12px 0 13px;
  border-top: 1px solid var(--r2);
}
.spec .ev:first-child {
  border-top: 0;
}
.spec .k {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
}
.spec .k.cut {
  color: var(--red);
}
.spec .v {
  font-family: var(--text);
  font-size: 17px;
  line-height: 22px;
  color: var(--ink);
  display: block;
}
.spec .n {
  display: block;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  margin-top: 0;
}
.spec .n .d {
  color: var(--red);
}
.spec .n .up {
  color: var(--muted);
}
.spec .old {
  color: var(--muted);
}
s {
  text-decoration-thickness: 1px;
}
.spec .ar {
  font-family: var(--text);
  font-size: 16px;
  color: var(--muted);
  position: relative;
  top: -0.06em;
}
.spec .ft {
  margin: 0;
  padding: 10px 14px 11px;
  border-top: 1px solid var(--r2);
  font-size: 10.5px;
  line-height: 18px;
  color: var(--muted);
}

/* ---------- chapter head ---------- */
.sect {
  padding: 98px 0 62px;
}
.spec-sect {
  padding-bottom: 26px;
}
.spec-sect h2 {
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.024em;
}
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.75rem, 3.78vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin: 0;
  text-wrap: balance;
}
.note {
  margin: 9px 0 0;
  font: 400 9px/16px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.chead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
}
.key {
  font: 400 10px/16px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.key .mark {
  color: var(--red);
}
.lede {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 31px;
  max-width: var(--measure);
}

/* ---------- argument one (the price plot) ---------- */
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.024em;
  margin: 0 0 14px;
  text-indent: -0.014em;
  text-wrap: balance;
}
.arg
  p:not(.rail):not(.note):not(.grouphd):not(.gap):not(.conseq):not(
    .deck
  ):not(.stand) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 27px;
  max-width: var(--measure);
}
.arg p.gap {
  font-family: var(--display);
  font-variation-settings: "opsz" 36;
  font-feature-settings:
    "lnum" 1,
    "tnum" 1;
  font-size: 24px;
  line-height: 30px;
  color: var(--red);
  margin: 0 0 12px;
}
.arg p.conseq {
  font: 400 12.5px/20px var(--mono);
  color: var(--ink-soft);
  margin: 14px 0 0;
}

.arg {
  padding: 44px 0 43.5px;
}
.arg.one {
  padding: 101.5px 0 90.5px;
}
.arg > .c {
  align-self: start;
}
.two .ledger div {
  grid-template-columns: 1fr auto;
}

.arg .figure {
  margin-right: -1px;
}
.figure {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  display: block;
  text-align: right;
  font-size: clamp(1.9rem, 5.9vw, 5.3rem);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 24px;
  white-space: nowrap;
}
.figure .unit {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: baseline;
  margin: 0 -0.14em 0 15px;
  color: inherit;
}
.figure .sign {
  display: inline-block;
  width: 0.285em;
  height: 0.076em;
  background: currentColor;
  vertical-align: 0.345em;
  margin-right: 0.03em;
}
.ladder {
  border-top: 1px solid var(--r2);
}
.ladder div {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  padding: 7px 0;
  text-align: right;
  border-bottom: 1px solid var(--r2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-soft);
}
.ladder div:last-child {
  border-bottom: 0;
}
.ladder .lbl {
  color: var(--muted);
  text-align: left;
}
.ladder .old {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: #bdb8a9;
  text-decoration-thickness: 1px;
}
.ladder .now {
  color: var(--ink);
}
.ladder .d {
  color: var(--red);
}
.ledger {
  border-top: 1px solid var(--r2);
}
.ledger div {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--r2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-soft);
}
.ledger div:last-child {
  border-bottom: 0;
}
.ledger .now {
  color: var(--ink);
}
.cap {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 19px;
  color: #57534a;
  margin-top: 0;
  padding-top: 9px;
  border-top: 1px solid var(--r2);
  white-space: nowrap;
}

.arg.one .top {
  grid-row: 1;
}
.arg.one .c.top {
  align-self: baseline;
}
.arg.one .top h3 {
  margin: 0;
}
.arg p.stand {
  font-size: 19px;
  line-height: 29px;
  color: var(--ink-soft);
  margin: 0;
}
.arg.one .caprow {
  grid-row: 3;
  align-self: start;
  margin-top: 22px;
}
.figs .big {
  font-family: var(--display);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-feature-settings:
    "lnum" 1,
    "tnum" 1;
  font-size: clamp(3rem, 11.1vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 10px 0 0 -0.04em;
  white-space: nowrap;
}
.figs .big .cur {
  font-size: 0.5em;
  vertical-align: 0.62em;
  letter-spacing: 0;
}
.figs .big .cts {
  font-size: 0.38em;
  vertical-align: 1.1em;
  letter-spacing: 0;
  margin-left: 0.08em;
}
.figs .big .cur {
  margin-right: -0.05em;
}
.arg.one .plot {
  grid-row: 2;
  align-self: start;
  margin-top: 40px;
}
.figs {
  display: grid;
  align-items: last baseline;
}
.figs .fig {
  grid-area: 1/1;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
}
.figs .fig .big {
  margin-left: -0.03em;
}
.figs .fig.them {
  margin-left: 20%;
}
.figs .fig.you {
  margin-left: 80%;
}
.figs .fig.them .big {
  font-size: clamp(3.4rem, 15.28vw, 13.75rem);
  color: var(--red);
}
.figs .fig.you .big {
  font-size: clamp(2.2rem, 6.67vw, 6rem);
}
.figs .big {
  margin: 0;
}
.figs .who {
  white-space: nowrap;
  margin-bottom: 4px;
}
.figs .fig.them .who {
  margin-bottom: calc(clamp(3.4rem, 15.28vw, 13.75rem) * 0.11);
}
.ax {
  position: relative;
  height: 1px;
  background: var(--ink);
  margin: calc(64px - clamp(3.4rem, 15.28vw, 13.75rem) * 0.218) 0 72px;
}
.ax .tk {
  position: absolute;
  top: 0;
  width: 1px;
  height: 8px;
  margin-left: -0.5px;
  background: var(--ink);
}
.ax .tk b {
  position: absolute;
  top: 13px;
  left: 0;
  transform: translateX(-50%);
  font: 400 12px/16px var(--mono);
  color: var(--muted);
}
.ax .tk:first-child b {
  transform: none;
}
.ax .tk:nth-child(5) b {
  transform: translateX(-100%);
}
.ax .cut {
  position: absolute;
  top: 44px;
  height: 1px;
  background: var(--red);
}
.ax .cut::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -3px;
  border: 3.5px solid transparent;
  border-left: 0;
  border-right: 7px solid var(--red);
}
.ax .cut::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 40px;
  background: var(--red);
}
.ax .cut i {
  position: absolute;
  right: 0;
  top: 7px;
  font: 400 12.5px/16px var(--mono);
  font-style: normal;
  color: var(--red);
  white-space: nowrap;
}
.ax .br {
  position: absolute;
  top: -18px;
  height: 9px;
  border: 1px solid var(--ink);
  border-bottom: 0;
}
.ax .br .dl {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 4px;
  font: 400 20px/24px var(--mono);
  letter-spacing: -0.01em;
  color: var(--red);
  white-space: nowrap;
}
.ax .pt {
  position: absolute;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink);
}
.ax .pt.them {
  background: var(--red);
}
.ax .pt.was {
  width: 9px;
  height: 9px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--red);
}
.arg .row2 {
  align-self: start;
  margin-top: 28px;
}
.arg .row2.b {
  grid-column: 2;
}
.arg .row2.c {
  grid-column: 3;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0 44px;
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid var(--r2);
  max-width: var(--measure);
}
.stats dt {
  font: 400 11px/18px var(--mono);
  color: var(--muted);
  margin: 0;
}
.stats dd {
  font: 400 15px/22px var(--mono);
  color: var(--ink);
  margin: 2px 0 0;
}
.pair {
  display: grid;
  justify-items: end;
  margin: 4px 0 16px;
}
.pair .was-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 6px;
}
.pair .pwas {
  font: 400 28px/34px var(--display);
  font-variation-settings: "opsz" 36;
  font-feature-settings:
    "lnum" 1,
    "tnum" 1;
  color: var(--muted);
  position: relative;
}
.pair .pwas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 1.5px;
  background: var(--red);
}
.pair .pnow .cur,
.pair .pnow .cts {
  font-size: 0.56em;
  vertical-align: 0.52em;
  letter-spacing: 0;
}
.pair .pnow .cur {
  margin-right: -0.06em;
}
.pair .pnow .cts {
  vertical-align: 0.592em;
}
.pair .pnow {
  font-family: var(--display);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-feature-settings:
    "lnum" 1,
    "tnum" 1;
  font-size: clamp(2.8rem, 10.1vw, 9.1rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 6px -2px 0 0;
}

/* ---------- the register (nine changes at three stores) ---------- */
.reg {
  margin: 0;
}
.reg > .row {
  padding: 2px 0 1px;
  position: relative;
}
.reg > .row.grp {
  padding-top: 9px;
}
.reg > .row::after {
  content: "";
  position: absolute;
  left: calc(12.23629% + var(--gut));
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--r2);
}
.reg > .row:last-child::after,
.reg > .row.hdr::after {
  background: var(--r1);
}
.reg > .row::after {
  background: #dad6c9;
}
.reg > .row.hdr::after,
.reg > .row:last-child::after {
  background: var(--r1);
}
.reg > .row.grp:not(.hdr + .row)::before {
  content: "";
  position: absolute;
  left: calc(12.23629% + var(--gut));
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--r1);
}
.reg .nm {
  grid-column: 2;
  grid-row: 1;
  padding-left: var(--gut);
  margin: 0;
  font: 400 12.5px/26px var(--mono);
  color: var(--muted);
}
.reg .ds .pr {
  display: inline-block;
  width: 210px;
  color: var(--ink);
}
.reg .ds .ch {
  display: inline-block;
  width: 124px;
}
.reg .ds .ch {
  color: var(--ink-soft);
}
.reg .hc .pr {
  width: 210px;
  display: inline-block;
}
.reg .ds {
  grid-column: 2;
  grid-row: 1;
  padding-left: calc(var(--gut) + 162px);
  margin: 0;
  font: 400 15px/26px var(--text);
  color: var(--ink-soft);
}
.reg dd.c {
  grid-column: 2/-1;
  grid-row: 1;
  padding-left: calc(var(--gut) + 162px + 210px + 124px);
}
.reg .ds code {
  font: 400 12px/26px var(--mono);
  color: var(--ink-soft);
}
.reg {
  padding-bottom: 0;
}
.tail {
  height: 40px;
}
.regkey {
  margin: 12px 0 0;
}
.regkey .bc {
  font: 400 14px/21px var(--text);
  color: var(--muted);
}
.reg .ds .st {
  display: inline-block;
  width: 160px;
  font: 400 12.5px/26px var(--mono);
  color: var(--ink-soft);
}
.reg .hc .st {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.reg > .row.hdr {
  padding: 0 0 7px;
}
.reg .hc {
  margin: 0;
}
.reg .hc,
.reg .hx {
  line-height: 22px;
}
.reg .ex.hx .was,
.reg .ex.hx .is {
  color: var(--muted);
}
.reg .hdr .rail {
  color: var(--muted);
  font: 400 11px/22px var(--mono);
}
.reg dd {
  margin: 0;
  max-width: none;
}
.reg .ex {
  display: grid;
  grid-template-columns: 76px 100px 88px;
  justify-content: start;
  gap: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 27px;
  color: var(--ink);
  white-space: nowrap;
  max-width: none;
}
.reg .ex .was {
  text-align: right;
  color: var(--muted);
}
.reg .ex .ar {
  color: var(--muted);
  font-family: var(--text);
  font-size: 16px;
  position: relative;
  top: -0.06em;
  text-align: center;
}
.reg .ex .is {
  text-align: right;
  color: var(--ink);
}
.reg .ex .ar {
  font-style: normal;
  font-family: var(--text);
  color: var(--muted);
  text-align: center;
  position: relative;
  top: 0;
}
.reg .ex .dt {
  text-align: right;
  color: var(--ink);
}
.reg .ex .dt.down {
  color: var(--red);
}
.reg .ex .dt.dash {
  color: var(--muted);
}
.reg .ex.hx .dt {
  color: var(--muted);
}
.reg .ex .down,
.reg .ex .is.down {
  color: var(--red);
}
.reg .ex .tag {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---------- the inverted band (close form + footer) ---------- */
.inv {
  background: var(--d-bg);
  color: var(--d-text);
}
.inv .arg {
  padding: 76px 0 72px;
}
.arg.one h3 {
  margin-left: -3.5px;
}
.arg.two h3 {
  margin-left: 0;
}
.arg.three h3 {
  margin-left: -1px;
}
.arg .figure {
  margin-top: 6px;
}
.arg.one .figure {
  color: var(--red);
}
.inv .figure {
  color: var(--d-red);
}
.figure.f25 {
  margin-right: -2.5px;
}
.figure.f4 {
  margin-right: -1.5px;
}
.figure.f0 {
  margin-right: -3px;
}
.arg .wide {
  grid-column: 2/-1;
  padding-left: var(--gut);
  align-self: start;
  margin-top: 22px;
}
.arg .wide .cap {
  max-width: none;
}
.ledger.four div {
  grid-template-columns: minmax(0, 1fr) 52px 72px;
}
.ledger.four .t {
  color: var(--muted);
  text-align: right;
}
.ledger.four .now {
  text-align: right;
}
.inv .ruled {
  background-image: none;
}
.inv .rail {
  color: var(--d-text);
}
.inv .rail.log {
  color: #8e8a7c;
}
.inv .rail.log span:first-child {
  color: var(--d-text);
}
.inv .rail.log::after {
  background: var(--d-bg);
  box-shadow: inset 0 0 0 1.5px var(--d-text);
}
.inv .rail .i {
  color: var(--d-soft);
}
.inv h3,
.inv h2 {
  color: #f6f2e8;
}
.inv .close h2 {
  letter-spacing: -0.015em;
}
.inv .lede,
.inv .cap {
  color: #a8a497;
}
.inv p:not(.rail) {
  color: var(--d-soft);
}
.inv .arg p:not(.rail):not(.note):not(.grouphd) {
  color: #c6c1b3;
}
.inv .cap {
  color: #8b8779;
  border-top-color: var(--d-rule);
}
.inv .r0 {
  border-top-color: #4a463d;
}
.inv .r1 {
  border-top-color: #4a463d;
}
.inv .r2 {
  border-top-color: var(--d-rule);
}
.inv .note {
  color: #8e8a7c;
}
.inv .field input {
  background: transparent;
  border-color: rgba(232, 227, 214, 0.6);
  color: var(--d-text);
}
.inv .field input::placeholder {
  color: #8e8a7c;
}
.inv button.cta {
  background: #fbf8f1;
  border-color: #fbf8f1;
  color: var(--d-bg);
}
.inv button.cta:hover {
  background: #fffdf6;
  border-color: #fffdf6;
}
.inv .offer {
  color: var(--d-soft);
}
.inv .sig .wordmark {
  color: var(--d-text);
}
.inv .sig .meta {
  color: var(--d-soft);
}
.inv .sig .meta a:hover {
  color: var(--d-text);
}
.inv .faq-mini-label {
  color: var(--d-soft);
}
.inv .faq-mini summary {
  color: var(--d-text);
}
.inv .faq-mini summary:hover {
  color: #fffdf6;
}
.inv .faq-mini p {
  color: var(--d-soft);
}
.inv .faq-mini summary::after {
  color: #8e8a7c;
}
.inv .foot-info .mail {
  color: var(--d-soft);
}
.inv .foot-info .mail:hover {
  color: var(--d-text);
}

/* ---------- the close (CTA) section ---------- */
.close {
  padding: 98px 0 68px;
}
.close h2 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  word-spacing: -0.05em;
  max-width: none;
  margin: 0 0 0 -2px;
}
.close .when {
  margin: 14px 0 0;
  font: 400 12.5px/20px var(--mono);
  color: #a8a497;
}
.close > .bc {
  grid-row: 1;
}
.close > .b {
  grid-row: 2;
  margin-top: 36px;
}
.close form.snap {
  margin-top: 0;
}
.close .nx {
  grid-row: 2;
  grid-column: 3;
  align-self: start;
  justify-self: start;
  padding-left: var(--gut);
  margin-top: 36px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  height: 56px;
}
.close .nl {
  margin: 0;
  line-height: 20px;
}
.inv .close .nl {
  color: var(--d-soft);
}
.close .nl .t {
  font: 400 13px/24px var(--mono);
}
.close .nc {
  margin: 0;
  font: 500 44px/1 var(--mono);
  letter-spacing: -0.03em;
}
.inv .close .nc {
  color: #f6f2e8;
}
.close .nc .u {
  font-size: 0.42em;
  letter-spacing: 0;
  margin: 0 0 0 0.05em;
  color: #c6c1b3;
}
.inv .rail.log span + span,
.inv .close .nl {
  color: #a8a497;
}
.close .field {
  flex: 1 1 auto;
}

/* ---------- spine clock (in the close section, col 1 / rail) ---------- */
/* Mimics the inspiration's vertical time-spine: a node on the border,
     "now" + label, a dashed run, another node, "next" + label. Sized so
     the bottom node lands roughly at the H2's second-line baseline. */
.close > .a {
  position: relative;
  /* Override .band's align-items:baseline — without this, .a gets
     pushed down to the H2's first baseline and the spine-clock's
     top dot ends up well below the cream/dark border. */
  align-self: start;
}
.spine-clock {
  position: absolute;
  left: 0;
  right: 0;
  /* The close section has 98px of top padding. The spine-clock sits
     inside .a, so we pull it up by 98px to land the rail at the
     section's top edge (= the cream/dark border). The top dot is
     then 7px above the rail so its centre lands exactly on the
     border. */
  top: -98px;
  height: 170px;
}
.spine-clock .spine-rail {
  /* Anchor the rail at the right edge of .a — the same x as the
     page-spine line — so the localised dashed run and the page-spine
     share one vertical. */
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
}
.spine-clock .spine-dot {
  position: absolute;
  /* 14px dot centred on the right edge of .a (= page-spine line).
     `right: -7px` puts the dot's right edge 7px past the rail so its
     centre lands exactly on it. */
  right: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--d-bg);
  box-shadow:
    inset 0 0 0 2px var(--d-text),
    0 0 0 3px var(--d-bg); /* dark gap, then cream ring on the inverted ground */
}
.spine-clock .spine-dot-now {
  top: -7px;
} /* sits exactly on the cream/dark border */
.spine-clock .spine-dot-next {
  bottom: -7px;
}
.spine-clock .spine-line {
  /* 1px dashed centred on the right edge of .a — `right: -0.5px`
     puts the dashed border's right edge 0.5px past the rail so the
     1px line is centred on the rail (= page-spine). */
  position: absolute;
  right: -0.5px;
  top: 8px;
  bottom: 8px;
  border-left: 1px dashed rgba(232, 227, 214, 0.55);
}
.spine-clock .spine-labels {
  /* Labels live to the LEFT of the dashed rail, right-aligned within
     that band so the text sits flush against the rail. */
  position: absolute;
  left: 0;
  right: 22px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}
.spine-clock .spine-time {
  display: block;
  font: 400 23px/30px var(--display);
  font-variation-settings: "opsz" 22;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--d-text);
  font-feature-settings: "tnum" 1;
}
.spine-clock .spine-key {
  display: block;
  margin-top: 2px;
  font: 400 12.5px/17px var(--mono);
  letter-spacing: 0;
  color: #8e8a7c;
}

/* ---------- footer ---------- */
footer {
  padding: 40px 0 56px;
}
.sig .wordmark {
  color: var(--ink);
}
.copy {
  margin: 18px 0 0;
  font: 400 12px/22px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8e8a7c;
  text-align: right;
}

/* ---------- footer: FAQ + brand info, two columns only ---------- */
/* No rail column for the wordmark — it heads the brand column instead,
     so the footer is genuinely two zones (FAQ, brand info) under the single
     hairline above the footer, not three. */
.foot-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0 var(--gut);
}
.faq-mini {
  padding-right: var(--gut);
  border-right: 1px solid var(--d-rule);
}
.faq-mini-label {
  margin: 0 0 16px;
  font: 400 11px/16px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-soft);
}
.faq-mini-item {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--d-rule);
  margin-bottom: 14px;
}
.faq-mini-item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.faq-mini summary {
  cursor: pointer;
  font: 400 13px/22px var(--text);
  color: var(--d-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  letter-spacing: -0.005em;
}
.faq-mini summary::-webkit-details-marker {
  display: none;
}
.faq-mini summary::after {
  content: "+";
  color: #8e8a7c;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.faq-mini-item[open] summary::after {
  content: "–";
}
.faq-mini p {
  margin: 8px 0 0;
  font: 400 13.5px/21px var(--text);
  color: #a8a497;
  max-width: 46ch;
}
.foot-info {
  padding-left: var(--gut);
  display: flex;
  flex-direction: column;
}
.foot-info .wordmark {
  margin: 0 0 26px;
}
.foot-info .meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 400 15px/24px var(--text);
  letter-spacing: 0;
}
.foot-info .meta a {
  text-decoration: none;
}
.foot-info .meta-note {
  display: block;
  margin: 18px 0 0;
  font: 400 12px/18px var(--mono);
  letter-spacing: 0;
  color: var(--muted);
  max-width: 46ch;
}
.foot-info .mail {
  display: block;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--d-rule);
  font: 400 13px/22px var(--mono);
  text-decoration: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
     SNAPSHOT PANEL (rendered by landing.js into #snapshot-zone)
     Editorial restyle: hairline borders, no rounded corners,
     mono labels, serif figures, red is the only color accent.
     ============================================================ */

/* The snapshot-zone is grid-placed in cols 2-3 of the hero band. Empty
    until the user submits, then it carries the snapshot + track card. */
#snapshot-zone {
  grid-column: 2 / -1;
  grid-row: 3;
  margin-top: 34px;
  min-width: 0; /* let inner grid items shrink as needed */
}
#snapshot-zone:empty {
  display: none;
}

/* The panel itself — single article element per snapshot. */
.snap-card {
  margin: 0 0 0;
  padding: 22px 0 26px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.snap-card:first-child {
  margin-top: 0;
}
.snap-card-head {
  margin: 0 0 16px;
}
.snap-card-section {
  margin: 0 0 8px;
  font: 400 11px/16px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.snap-card-title {
  margin: 0;
  font: 400 30px/1.04 var(--display);
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.snap-card-domain {
  margin: 6px 0 0;
  font: 400 13px/22px var(--mono);
  color: var(--ink-soft);
}
.snap-card-deck {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 25px;
  max-width: var(--measure);
}
.snap-card-deck.mono {
  font-family: var(--mono);
  font-size: 13px;
}

/* Loading state */
.snap-loading .snap-card-title {
  font-style: italic;
}
.snap-loading-bar {
  height: 2px;
  background: var(--r2);
  margin: 18px 0 12px;
  overflow: hidden;
}
.snap-loading-bar i {
  display: block;
  height: 2px;
  width: 22%;
  background: var(--ink);
  animation: snap-slide 1.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes snap-slide {
  0% {
    margin-left: -22%;
  }
  100% {
    margin-left: 100%;
  }
}
.snap-loading-step {
  margin: 0;
  font: 400 13px/22px var(--mono);
  color: var(--muted);
}

/* Error state */
.snap-error .snap-card-title {
  color: var(--red);
}

/* The 6 tiles grid — single hairline row, single hairline between columns. */
.snap-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--r2);
  border-bottom: 1px solid var(--r2);
  margin: 20px 0 0;
}
.snap-stat {
  padding: 14px 16px 13px;
  border-right: 1px solid var(--r2);
}
.snap-stat:nth-child(3n) {
  border-right: 0;
}
.snap-stat .k {
  display: block;
  margin: 0 0 6px;
  font: 400 11px/16px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.snap-stat .v {
  display: block;
  font: 500 28px/1.04 var(--display);
  font-variation-settings: "opsz" 36;
  color: var(--ink);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  letter-spacing: -0.025em;
}
.snap-stat .v .snap-val-num {
  display: block;
}
.snap-stat .v .snap-val-text {
  display: block;
  font: 400 17px/24px var(--text);
  font-variation-settings: "opsz" 16;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.snap-stat .v small {
  display: block;
  margin-top: 4px;
  font: 400 12px/18px var(--mono);
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* Two-column list section */
.snap-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  margin: 24px 0 0;
}
.snap-cols + .snap-cols {
  margin-top: 24px;
}
.snap-list .snap-key {
  display: block;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--r2);
  font: 400 11px/16px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.snap-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.snap-rows li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--r2);
  font-size: 14.5px;
}
.snap-rows li:last-child {
  border-bottom: 0;
}
.snap-rows .name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.snap-rows .name a {
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.snap-rows .name a:hover {
  color: var(--red);
}
.snap-rows .name .sub {
  font: 400 11px/16px var(--mono);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.snap-rows .val {
  font: 400 13px/22px var(--mono);
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.snap-rows .val .old {
  color: var(--muted);
  text-decoration: line-through;
  margin-right: 4px;
}
.snap-rows .val .delta {
  color: var(--red);
  margin-left: 6px;
}
.snap-rows .snap-empty {
  color: var(--muted);
  font-style: italic;
}

/* Tags (vendor / type) */
.snap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.snap-tag {
  font-size: 12.5px;
  border: 1px solid var(--r2);
  border-radius: 0;
  padding: 3px 10px;
  color: var(--ink-soft);
  background: transparent;
}
.snap-tag b {
  color: var(--ink);
  font-weight: 500;
  margin-right: 6px;
  font-family: var(--mono);
}

/* The "now track this shop" CTA card — sits BELOW the snapshot, no
     eyebrow, no white box, no top border. The eye should flow from
     "here's the catalog you just saw" straight into "track it" with no
     container weight in between. The bottom hairline + the trailing
     border on the snapshot above together close the panel. */
.snap-track-card {
  border-top: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding-top: 14px;
  margin-top: 6px;
}
.snap-track-card .snap-card-section {
  display: none;
}
.snap-track-card .snap-card-title {
  font-style: italic;
}
.track-form {
  margin-top: 18px;
}
.track-form .field input {
  background: transparent;
}
.snap-track-fine {
  margin: 14px 0 0;
  font: 400 13px/21px var(--mono);
  color: var(--muted);
  letter-spacing: 0;
}
.snap-track-fine b {
  color: var(--ink);
  font-weight: 500;
}
.snap-track-success {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: transparent;
  font: 400 15px/24px var(--text);
  color: var(--ink);
}
.snap-track-success a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.snap-track-success a:hover {
  color: var(--red);
}
.snap-track-error {
  margin: 14px 0 0;
  color: var(--red);
  font: 400 14px/22px var(--mono);
}

/* ============================================================
     RESPONSIVE
     ============================================================ */
@media (max-width: 1180px) {
  .reg .ds {
    padding-left: calc(var(--gut) + 146px);
  }
  .reg .ds .pr,
  .reg .hc .pr {
    width: 168px;
  }
  .reg .ds .ch {
    width: 108px;
  }
  .reg dd.c {
    padding-left: calc(var(--gut) + 146px + 168px + 108px);
  }
  .reg .ex {
    grid-template-columns: 70px 92px 76px;
  }
  .mast .links {
    grid-column: 2/-1;
    justify-content: flex-end;
    gap: 28px;
  }
}
@media (max-width: 1080px) {
  :root {
    --gut: 28px;
  }
  h1 .o {
    margin-left: 0;
  }
  h1 {
    text-wrap: balance;
  }
}
@media (max-width: 900px) {
  .ruled,
  .inv .ruled {
    background-image: none;
  }
  /* The rest of the spine is already gone (.ruled background-image: none
     above). Hide the local spine-clock at the top of the close section so
     the dashed rail and now/next dots don't sit orphaned above the footer
     on narrow viewports — there is no rail column to anchor them on. */
  .spine-clock {
    display: none;
  }
  .rail.log::after {
    display: none;
  }
  .rail.log {
    text-align: left;
  }
  .arg.one .top,
  .arg.one .plot {
    grid-row: auto;
  }
  .arg.one .plot {
    margin-top: 40px;
  }
  .ax .tk.mi b,
  .ax .pt.was i {
    display: none;
  }
  .ax .br .dl {
    font-size: 19px;
    line-height: 24px;
  }
  .hero > .b,
  .hero > .c {
    margin-top: 24px;
  }
  .close .nx {
    grid-row: auto;
    grid-column: auto;
    justify-self: start;
    text-align: left;
    margin-top: 28px;
  }
  .close > .b,
  .close > .bc {
    grid-row: auto;
  }
  .figs .dx {
    display: none;
  }
  .arg.one {
    grid-template-columns: 1fr;
  }
  .ledger.wide div {
    grid-template-columns: 90px 1fr;
    font-size: 13px;
  }
  .ledger.wide div span:last-child {
    display: none;
  }
  .chead {
    display: block;
  }
  .key {
    white-space: normal;
    display: block;
    margin-top: 12px;
  }
  .mast {
    display: flex;
  }
  .mast .links {
    margin-left: auto;
    padding-left: 0;
  }
  .band {
    grid-template-columns: 1fr;
  }
  .band > .a {
    grid-column: auto;
    padding: 0 0 16px !important;
  }
  .band > .b,
  .band > .c,
  .band > .bc {
    grid-column: auto;
    padding: 0;
    border-left: 0;
  }
  .arg .row2.b,
  .arg .row2.c {
    grid-column: auto;
    margin-top: 18px;
  }
  .arg .c .pair {
    justify-items: start;
  }
  .hero .c {
    padding-top: 30px;
  }
  .reg > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .reg dt {
    line-height: 22px;
  }
  .reg .nm,
  .reg .ds,
  .reg dd.c {
    grid-column: auto;
    grid-row: auto;
    padding-left: 0;
  }
  .reg > .row::after {
    left: 0;
  }
  .reg > .row.hdr {
    display: none;
  }
  .reg .ds .pr,
  .reg .ds .ch {
    display: inline;
    width: auto;
  }
  .reg .ds .ch::before {
    content: " · ";
  }
  .reg dd.c {
    padding-left: 0;
  }
  .reg > .row.grp:not(.hdr + .row)::before {
    left: 0;
  }
  .reg .ex {
    max-width: 280px;
  }
  .snap-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .snap-stat:nth-child(3n) {
    border-right: 1px solid var(--r2);
  }
  .snap-stat:nth-child(2n) {
    border-right: 0;
  }
  .snap-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .foot-split {
    grid-template-columns: 1fr;
    gap: 28px 0;
  }
  .faq-mini {
    padding-right: 0;
    border-right: 0;
  }
  .foot-info {
    padding-left: 0;
  }
}
@media (max-width: 620px) {
  .wrap {
    padding: 0 22px;
  }
  .mast {
    padding: 26px 0 18px;
  }
  .mast .toc {
    display: none;
  }
  .figs .who .mc {
    display: none;
  }
  .headline {
    padding: 32px 0 26px;
  }
  .hero,
  .arg.one,
  .close {
    padding: 52px 0;
  }
  .sect {
    padding-top: 52px;
  }
  .tail {
    height: 52px;
  }
  h1 {
    font-size: clamp(2.1rem, 9.2vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.018em;
    word-spacing: normal;
  }
  .deck {
    font-size: 18px;
    line-height: 28px;
  }
  form.snap {
    flex-direction: column;
    max-width: none;
  }
  .field input {
    border-right: 1px solid var(--r2);
    border-bottom: 0;
  }
  button.cta {
    width: 100%;
    padding: 0 22px;
  }
  h3,
  .inv h3 {
    font-size: 1.6rem;
  }
  .cap {
    white-space: normal;
  }
  .sig {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .sig .meta {
    margin: 0;
    justify-content: flex-start;
  }
  .copy {
    text-align: left;
  }
  .snap-stats {
    grid-template-columns: 1fr;
  }
  .snap-stat {
    border-right: 0 !important;
    border-bottom: 1px solid var(--r2);
  }
  .snap-stat:last-child {
    border-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   /de additions — everything above this line is the English page's inline
   <style>, copied verbatim. Only /de loads this file.
   ========================================================================== */

/* h1 keeps the original size from the rules above (max 6.4625rem = 103.4px). */
.hero .deck {
  font-size: 19px;
  line-height: 29px;
  margin-bottom: 4px;
}
.hero .offer.fine .link-inline {
  white-space: nowrap;
}

/* masthead: small EN switch */
.mast .links a.lang {
  font: 500 12px/24px var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.mast .links a.lang:hover {
  color: var(--red);
}

/* ---------- hero: the price-line chart (replaces the email specimen) ---------- */
.pchart {
  margin: 0;
}
.pchart .pc-key {
  margin: 0 0 8px;
  font: 400 11px/16px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pchart .pc-head {
  margin: 0;
  font: 400 clamp(1.7rem, 2.7vw, 2.2rem) / 1.05 var(--display);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.pchart .pc-head em {
  font-style: normal;
  color: var(--red);
}
.pchart .figs {
  margin-top: 22px;
}
.pchart .figs .fig.them {
  margin-left: 12.5%;
}
.pchart .figs .fig.you {
  margin-left: 57.5%;
}
.pchart .figs .who,
.pchart .figs .fig.them .who {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 2px;
}
.pchart .figs .fig .big {
  font-size: 2.3rem;
  line-height: 1;
  margin-left: -0.02em;
}
.pchart .figs .fig.them .big {
  font-size: 3.1rem;
  color: var(--red);
}
.pchart .figs .big .eu {
  font-size: 0.4em;
  letter-spacing: 0;
  vertical-align: 0.9em;
}
.pchart .figs .sub {
  margin-top: 5px;
  font: 400 11.5px/16px var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.pchart .ax {
  margin: 30px 0 60px;
}
.pchart .ax .tk b,
.pchart .ax .tk:first-child b {
  transform: translateX(-50%);
}
.pchart .ax .cut i {
  font-size: 12px;
}

/* ---------- 01–03: how it works ---------- */
.how-head {
  padding: 62px 0 16px;
}
.how-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.024em;
}
.step {
  position: relative;
  padding: 22px 0 24px;
}
.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(12.23629% + var(--gut));
  right: 0;
  height: 1px;
  background: var(--r2);
}
.step.last {
  padding-bottom: 52px;
}
.step h3 {
  font-size: clamp(1.5rem, 2.35vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  padding-right: 24px;
}
.step p {
  margin: 0;
  font-size: 16.5px;
  line-height: 26px;
  color: var(--ink-soft);
}

/* ---------- features: three compact panels ---------- */
.feat-head {
  padding: 54px 0 24px;
}
.feat-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.024em;
}
.feat {
  padding: 0 0 62px;
}
.panels {
  display: grid;
  grid-template-columns: 1.22fr 1fr 1.08fr;
  gap: 0 28px;
  align-items: start;
}
.panel {
  min-width: 0;
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}
.panel .pk {
  margin: 0 0 12px;
  font: 400 11px/16px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel .pt {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 24px;
  color: var(--ink-soft);
}

/* Vergleich: mini comparison table */
.mt {
  border-top: 1px solid var(--ink);
}
.mt .r {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) 82px;
  gap: 0 8px;
  padding: 9px 6px 9px 8px;
  border-bottom: 1px solid var(--r2);
  align-items: start;
}
.mt .r:last-child {
  border-bottom: 1px solid var(--ink);
}
.mt .r.h {
  padding: 8px 6px 7px 8px;
  font: 400 10px/13px var(--mono);
  color: var(--muted);
  border-bottom: 1px solid var(--r2);
}
.mt .n,
.mt .p,
.mt .s {
  display: block;
}
.mt .n {
  font: 400 14px/18px var(--text);
  color: var(--ink);
}
.mt .p {
  margin-top: 2px;
  font: 400 12px/16px var(--mono);
  color: var(--ink-soft);
}
.mt .s {
  font: 400 10.5px/15px var(--mono);
  color: var(--muted);
}
.mt .num {
  text-align: right;
  font: 400 12px/18px var(--mono);
  color: var(--ink-soft);
}
.mt .r.h .num {
  font: 400 10px/13px var(--mono);
  color: var(--muted);
}
.mt .r.hit {
  background: rgba(162, 58, 36, 0.07);
  box-shadow: inset 2px 0 0 var(--red);
}
.mt .r.hit .num {
  color: var(--red);
}

/* Preisverlauf: step chart */
.pv {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  overflow: visible;
}
.pv text {
  font: 400 10px var(--mono);
  fill: var(--muted);
}
.pv text.red {
  fill: var(--red);
}
.pv .sale rect {
  fill: rgba(162, 58, 36, 0.11);
}
.pv .gl {
  stroke: var(--r2);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.pv .axl {
  stroke: var(--ink);
  stroke-width: 1;
}
.pv .step-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: miter;
}
.pv .step-sale {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.4;
}
.pcap {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--r2);
  font: 400 12px/18px var(--mono);
  color: #57534a;
}

/* Alarme: trimmed alert specimen */
.al {
  font-family: var(--mono);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.al .k {
  display: block;
  font: 400 10.5px/16px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.al-top {
  padding: 10px 0 11px;
  border-bottom: 1px solid var(--ink);
}
.al-top .k {
  color: var(--red);
}
.al-top .v {
  display: block;
  margin-top: 2px;
  font: 400 16px/21px var(--text);
  color: var(--ink);
}
.al-top .v b {
  font-weight: 500;
}
.al-top .m {
  display: block;
  margin-top: 3px;
  font: 400 11px/16px var(--mono);
  color: var(--muted);
}
.al-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 10px;
  align-items: baseline;
  padding: 9px 0 10px;
  border-top: 1px solid var(--r2);
}
.al-top + .al-row {
  border-top: 0;
}
.al-row .n {
  justify-self: end;
  text-align: right;
  font: 400 12px/16px var(--mono);
  color: var(--ink);
  white-space: nowrap;
}
.al-row .n .old {
  color: var(--muted);
}
.al-row .n .d {
  color: var(--red);
  margin-left: 4px;
}
.al-row .v {
  grid-column: 1 / -1;
  font: 400 15px/20px var(--text);
  color: var(--ink);
}

/* ---------- footer FAQ: eight questions, so two columns to keep the footer short ---------- */
.faq-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--gut);
  align-content: start;
  align-items: start;
}
.faq-mini-label {
  grid-column: 1 / -1;
}
.faq-mini-item:nth-last-child(-n + 2) {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.faq-mini p {
  max-width: none;
}

/* ---------- close: founder note ---------- */
.close > .bc.founder {
  grid-row: 3;
  margin-top: 22px;
}
.close {
  padding-bottom: 56px;
}
.close .founder p {
  margin: 0;
  font: italic 400 17px/26px var(--text);
  color: var(--d-soft);
}

/* ---------- result card (rendered by landing.js: real snapshot + "Beispiel ansehen") ----------
   One compact card, styled like the Vergleich / Verlauf / Alarme panels above:
   mono kicker, hairline table, one line per block, one form. */
.cmp-card {
  padding: 22px 0 26px;
}
.cmp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.cmp-head > div {
  min-width: 0;
}
.cmp-meta {
  margin: 6px 0 0;
  font: 400 13px/22px var(--mono);
  color: var(--ink-soft);
}
.cmp-tag {
  flex: none;
  margin: 6px 0 0;
  padding: 2px 9px;
  border: 1px solid var(--ink);
  font: 500 11px/18px var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.cmp-tag.ex {
  border-color: var(--red);
  color: var(--red);
}
.cmp-block {
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}
.cmp-k {
  margin: 0 0 12px;
  font: 400 11px/16px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmp-line {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 0 18px;
  align-items: baseline;
}
.cmp-line .cmp-k {
  margin: 0;
}
.cmp-line p:last-child {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* the comparison table: their price filled, yours visibly empty */
.cmp-t {
  border-top: 1px solid var(--ink);
}
.cmp-t .r {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 0.7fr);
  gap: 0 16px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--r2);
  align-items: start;
}
.cmp-t .r:last-child {
  border-bottom: 1px solid var(--ink);
}
.cmp-t .r.h {
  padding: 8px 8px 7px;
  font: 400 10px/13px var(--mono);
  color: var(--muted);
}
.cmp-t .n {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font: 400 15px/20px var(--text);
  color: var(--ink);
}
.cmp-t .n a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--r2);
}
.cmp-t .n a:hover {
  color: var(--red);
  text-decoration-color: currentColor;
}
.cmp-t .sz {
  color: var(--muted);
}
.cmp-t .th .p,
.cmp-t .th .u {
  display: block;
}
.cmp-t .th .p {
  font: 400 13px/20px var(--mono);
  color: var(--ink);
}
.cmp-t .th .p s {
  color: var(--muted);
  margin-right: 2px;
}
.cmp-t .th .from {
  color: var(--muted);
}
.cmp-t .th .d {
  color: var(--red);
  margin-left: 4px;
  white-space: nowrap;
}
.cmp-t .th .u {
  font: 400 11.5px/16px var(--mono);
  color: var(--muted);
}
.cmp-t .you {
  padding-left: 14px;
  border-left: 1px dashed var(--r2);
  font: 400 13px/20px var(--mono);
  color: var(--muted);
}
.cmp-t .r.h .you {
  font: 400 10px/13px var(--mono);
}
.cmp-note {
  margin: 10px 0 0;
  font: italic 400 15px/23px var(--text);
  color: var(--muted);
}
.cmp-empty {
  margin: 0;
  padding: 4px 0 2px;
  font: italic 400 16px/25px var(--text);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* the form: own shop (optional) | email | button, one joined bar on desktop */
.cmp-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  margin: 26px 0 0;
}
.cmp-form .lb {
  display: block;
  margin: 0 0 6px;
  font: 400 11px/16px var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.cmp-form .field.comp {
  grid-column: 1 / -1;
  margin-bottom: 14px;
}
.cmp-form .field.comp input {
  border-right: 1px solid var(--ink);
}
.cmp-form .field.mail input {
  border-right: 0;
}
.cmp-form button.cta {
  width: 244px;
  padding: 0 18px;
}
.cmp-card .snap-track-fine {
  margin-top: 12px;
}
.cmp-card .snap-track-result:empty {
  display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  /* two columns: the comparison table gets the full width above the other two */
  .panels {
    grid-template-columns: 1fr 1fr;
    gap: 34px 28px;
  }
  .panel:first-child {
    grid-column: 1 / -1;
  }
  .mt .r {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) 76px;
  }
}
@media (max-width: 1080px) {
  .pchart .figs .fig .big {
    font-size: 2rem;
  }
  .pchart .figs .fig.them .big {
    font-size: 2.7rem;
  }
}
@media (max-width: 900px) {
  .faq-mini {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-mini-item:nth-last-child(2) {
    border-bottom: 1px solid var(--d-rule);
    margin-bottom: 14px;
    padding-bottom: 14px;
  }
  .how-head {
    padding: 54px 0 4px;
  }
  .step::before {
    left: 0;
  }
  .step {
    padding: 18px 0 20px;
  }
  .step.last {
    padding-bottom: 46px;
  }
  .step .a {
    padding: 0 0 6px !important;
  }
  .step .rail.log {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .step .rail.log span:first-child {
    font-size: 17px;
    line-height: 24px;
  }
  .step h3 {
    padding-right: 0;
    margin-bottom: 6px;
  }
  .feat-head {
    padding: 8px 0 20px;
  }
  .feat-head .a {
    padding: 0 0 4px !important;
  }
  .feat {
    padding-bottom: 54px;
  }
  .panels {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }
  .mt .r {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) 68px;
  }
  .pchart .figs .fig .big {
    font-size: 2.1rem;
  }
  .pchart .figs .fig.them .big {
    font-size: 2.9rem;
  }
  .pchart .ax {
    margin-bottom: 56px;
  }
  .close > .bc.founder {
    grid-row: auto;
    margin-top: 26px;
  }
  .hero .c {
    padding-top: 22px;
  }
  /* The base rule pins #snapshot-zone to grid columns 2-3 with an id selector,
     which beats the single-column band above and squeezes the card into a
     ~180px strip on phones. One column, natural row, full width. */
  #snapshot-zone {
    grid-column: auto;
    grid-row: auto;
    margin-top: 28px;
  }
  .cmp-line {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 14px;
  }
  .cmp-form button.cta {
    width: 210px;
    padding: 0 12px;
  }
}
@media (max-width: 620px) {
  h1 {
    font-size: clamp(1.9rem, 8.4vw, 2.5rem);
    line-height: 1.04;
  }
  /* result card: the table stacks (title on top, their price | your price below),
     the form becomes a column of full-width boxes, nothing scrolls sideways */
  .cmp-head {
    gap: 12px;
  }
  .cmp-block {
    margin-top: 18px;
  }
  .cmp-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 0;
  }
  .cmp-t .r.h {
    display: none;
  }
  .cmp-t .r {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 6px 14px;
    padding: 12px 0;
  }
  .cmp-t .n {
    grid-column: 1 / -1;
    -webkit-line-clamp: 3;
  }
  .cmp-t .th::before,
  .cmp-t .you::before {
    content: attr(data-l);
    display: block;
    font: 400 10px/14px var(--mono);
    color: var(--muted);
    margin-bottom: 1px;
  }
  .cmp-t .you {
    padding-left: 14px;
  }
  .cmp-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 0;
  }
  .cmp-form .field input,
  .cmp-form .field.mail input,
  .cmp-form .field.comp input {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }
  .cmp-form .field.comp {
    margin-bottom: 0;
  }
  .cmp-form button.cta {
    width: 100%;
    margin-top: 2px;
  }
  .hero .deck {
    font-size: 17.5px;
    line-height: 27px;
  }
  .mast .links {
    gap: 18px;
  }
  .pchart .pc-head {
    font-size: 1.65rem;
  }
  .pchart .ax .cut i {
    font-size: 11px;
  }
  .how-head {
    padding-top: 40px;
  }
  .step {
    padding: 14px 0 16px;
  }
  .step.last {
    padding-bottom: 36px;
  }
  .step h3 {
    font-size: 1.4rem;
    margin-bottom: 4px;
  }
  .step p,
  .panel .pt {
    font-size: 15.5px;
    line-height: 24px;
  }
  .feat-head {
    padding: 0 0 16px;
  }
  .feat {
    padding-bottom: 40px;
  }
  .panels {
    gap: 24px 0;
  }
  .panel .pt {
    margin-top: 12px;
  }
  .mt .n {
    font-size: 13.5px;
  }
  .mt .r {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .mt .s {
    display: none;
  }
  .close {
    padding-bottom: 44px;
  }
  .inv .close h2 {
    font-size: clamp(1.9rem, 8.4vw, 2.2rem);
  }
  .close .founder p {
    font-size: 15.5px;
    line-height: 24px;
  }
  .faq-mini-item,
  .faq-mini-item:nth-last-child(2) {
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .faq-mini-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .faq-mini summary {
    padding-bottom: 6px;
  }
  footer {
    padding: 32px 0 44px;
  }
}

/* ---------- 4th feature panel: out of stock, full width under the other three ---------- */
.panel.wide {
  grid-column: 1 / -1;
}
@media (min-width: 1181px) {
  .panels {
    row-gap: 40px;
  }
}
/* wider "sold out" column than the comparison table's fixed 82px */
.mt.oos .r {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 112px;
}

/* The German headline ("… oder ausverkauft ist") is longer than the English one: a slightly
   lower size cap keeps it at three lines, on desktop (max 88px instead of 103.4px) and on phones. */
@media (min-width: 901px) {
  h1 {
    font-size: clamp(2.4rem, 7.1806vw, 5.5rem);
  }
}
@media (max-width: 620px) {
  h1 {
    font-size: clamp(1.6rem, 7.8vw, 2.5rem);
  }
}

/* ---------- result card: price history | out of stock, side by side ---------- */
.cmp-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 40px;
  margin-top: 22px;
}
.cmp-duo .cmp-block {
  margin-top: 0;
}
.cmp-txt {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-soft);
  max-width: 60ch;
}
/* the sold-out list: name left, last known price right, hairlines like the tables above */
.cmp-oos {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.cmp-oos li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 6px 8px 8px;
  border-bottom: 1px solid var(--r2);
}
.cmp-oos li:last-child {
  border-bottom: 1px solid var(--ink);
}
.cmp-oos .n {
  min-width: 0;
  font: 400 14px/18px var(--text);
  color: var(--ink);
}
.cmp-oos .n a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--r2);
}
.cmp-oos .n a:hover {
  border-bottom-color: var(--ink);
}
.cmp-oos .p {
  flex: none;
  font: 400 12px/18px var(--mono);
  color: var(--ink-soft);
  white-space: nowrap;
}
.cmp-oos .p .from {
  color: var(--muted);
}
.cmp-oos li.more {
  font: italic 400 14px/18px var(--text);
  color: var(--muted);
  justify-content: flex-start;
}
@media (max-width: 760px) {
  .cmp-duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px 0;
  }
}