/* ============================================================================
   Big Dog Mining v2: page layer for /about.html, /newsletter/, /field-tools/
   and the reusable Pulse signup (_src/partials/signup.html.tpl).
   ----------------------------------------------------------------------------
   Loads after site.css and only adds. Same tokens, same radius scale
   (controls 8px, panels 12px, chips pill), transform and opacity motion only.
   ========================================================================== */

/* ------------------------------------------------------- Pulse signup --
   A single email field and one button. Ghost button by default, because on
   most screens Book a call is the primary; .optin--primary turns it amber
   (only on /newsletter/, where The Pulse is the primary). */
.optin {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .9rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line-strong); border-radius: var(--sc-r-md);
  background: linear-gradient(100deg, rgba(245, 165, 36, .07), rgba(255, 255, 255, .015) 55%), #0D0D0D;
}
.optin__k { margin: 0; font-family: "Geist Mono", var(--sc-font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.optin__h { margin: .45rem 0 0; font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.025em; color: var(--white); font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); line-height: 1.2; text-wrap: balance; }
.optin__form { display: flex; gap: .6rem; min-width: 0; }
.optin__field { flex: 1 1 auto; min-width: 0; }
.optin__field input {
  width: 100%; min-height: 48px; padding: .75rem 1rem; border-radius: var(--sc-r-sm);
  border: 1px solid var(--line-strong); background: #0A0A0A; color: var(--white);
  font: 400 1rem/1.2 var(--font-ui); transition: border-color 160ms;
}
.optin__field input::placeholder { color: #6F6D6A; }
.optin__field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 165, 36, .18); }
.optin__go { min-height: 48px; flex: none; }
.optin__err, .optin__done, .optin__fine { grid-column: 2; margin: 0; font-size: .86rem; line-height: 1.5; }
.optin__err { color: #FF8A80; }
.optin__done { color: var(--white); font-weight: 500; }
.optin__done::before { content: "\2713"; color: var(--gold); margin-right: .5em; }
.optin__fine { color: var(--dim); font-family: "Geist Mono", var(--sc-font-mono); font-size: .72rem; letter-spacing: .01em; }
.optin__fine a { color: var(--white); }
.optin [hidden] { display: none; }
.optin--primary .optin__go { background: var(--amber); color: #0B0B0B; border-color: transparent; }
.optin--primary .optin__go:hover { background: var(--amber-hi); }
@media (max-width: 860px) {
  .optin { grid-template-columns: 1fr; }
  .optin__err, .optin__done, .optin__fine { grid-column: 1; }
}
@media (max-width: 480px) { .optin__form { flex-direction: column; } .optin__go { width: 100%; } }

/* ============================================================== /about ==
   Hero art: Dan and Ben side by side, even, on one mine check-in card.
   Hover, focus or tap one person and their photo opens up while the other
   narrows, and the card underneath switches to that person. */
.duo { --duo-h: clamp(19rem, 30vw, 27rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: var(--duo-h) auto;
  gap: 0 .6rem; transition: grid-template-columns .5s cubic-bezier(.22, 1, .36, 1); }
.duo:has(.duo__p--dan:is(:hover, :focus-visible, :focus)) { grid-template-columns: minmax(0, 1.7fr) minmax(0, .6fr); }
.duo:has(.duo__p--ben:is(:hover, :focus-visible, :focus)) { grid-template-columns: minmax(0, .6fr) minmax(0, 1.7fr); }
.duo__p { position: relative; margin: 0; border-radius: var(--sc-r-md) var(--sc-r-md) 0 0; overflow: hidden; border: 1px solid var(--line-strong); border-bottom: 0;
  background: #0B0B0B; cursor: pointer; outline: none; }
.duo__p:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.duo__p img { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: contrast(1.04) saturate(.92); transition: filter .5s ease; }
.duo__p--dan img { object-position: 50% 40%; }
.duo__p--ben img { object-position: 50% 30%; }
.duo:has(.duo__p:is(:hover, :focus)) .duo__p:not(:hover, :focus) img { filter: contrast(1.02) saturate(.6) brightness(.6); }
.duo__p figcaption { position: absolute; left: .7rem; bottom: .6rem; padding: .2rem .5rem; border-radius: 4px; background: rgba(10, 10, 10, .72);
  font-family: "Geist Mono", var(--sc-font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.duo__tags { grid-column: 1 / -1; display: grid; }
.duo__tag { grid-area: 1 / 1; transition: opacity .3s ease, visibility .3s; }
.duo__tag--dan, .duo__tag--ben { opacity: 0; visibility: hidden; }
.duo:has(.duo__p--dan:is(:hover, :focus)) .duo__tag--team, .duo:has(.duo__p--ben:is(:hover, :focus)) .duo__tag--team { opacity: 0; visibility: hidden; }
.duo:has(.duo__p--dan:is(:hover, :focus)) .duo__tag--dan, .duo:has(.duo__p--ben:is(:hover, :focus)) .duo__tag--ben { opacity: 1; visibility: visible; }
.badge__tag { position: relative; z-index: 2; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--line-strong); border-radius: 0 0 var(--sc-r-md) var(--sc-r-md); background: #0E0E0E;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9); }
.badge__tag div { padding: .8rem 1rem; border-top: 1px solid #222; }
.badge__tag div:nth-child(odd) { border-right: 1px solid #222; }
.badge__tag div:nth-child(-n + 2) { border-top: 0; }
.badge__tag dt { font-family: "Geist Mono", var(--sc-font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.badge__tag dd { margin: .25rem 0 0; color: var(--white); font-family: var(--font-ui); font-weight: 500; font-size: .95rem; letter-spacing: -0.01em; }
.badge__tag div:first-child dd { color: var(--gold); }
@media (max-width: 860px) { .duo { max-width: 30rem; --duo-h: clamp(15rem, 62vw, 22rem); } }
@media (prefers-reduced-motion: reduce) { .duo, .duo__p img, .duo__tag { transition: none; } }

.ab-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-counts li > span { max-width: 24ch; }
@media (max-width: 860px) { .ab-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } .ab-counts li:last-child { grid-column: auto; } }

/* The crew: each person on a brass tally tag, the way the board underground
   shows who is below. */
.crew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.mate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line-strong); border-radius: var(--sc-r-md); background: #0D0D0D; scroll-margin-top: calc(var(--bar-h) + 2rem); }
.mate__body p { margin: 1rem 0 0; color: var(--muted); line-height: 1.65; text-wrap: pretty; }
.mate__body .person__k { margin: 0; }
.mate__body .h3 { margin-top: .5rem; }
.mate__cred { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: "Geist Mono", var(--sc-font-mono); font-size: .76rem; letter-spacing: .02em; }
.mate__body .mate__cred { margin-top: 1.4rem; color: var(--sc-ink-soft); }
.mate__cred a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.tally {
  position: relative; display: grid; place-items: center; align-content: center; width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #F7D58A, #C98F2E 48%, #8A5B17 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(0, 0, 0, .35), 0 10px 24px -8px rgba(0, 0, 0, .8);
  color: #2A1A05; font-family: "Geist Mono", var(--sc-font-mono); text-align: center;
}
.tally::before { content: ""; position: absolute; top: .45rem; left: 50%; width: .55rem; height: .55rem; margin-left: -.275rem; border-radius: 50%;
  background: #0D0D0D; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }
.tally b { display: block; margin-top: .55rem; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.tally small { display: block; margin-top: .15rem; font-size: .62rem; letter-spacing: .14em; opacity: .8; }
.crew__note { margin: 1.6rem 0 0; max-width: 60ch; color: var(--dim); font-family: "Geist Mono", var(--sc-font-mono); font-size: .76rem; line-height: 1.6; }
@media (max-width: 960px) { .crew { grid-template-columns: 1fr; } }
/* Even, side by side. Hover or focus one card and it comes forward while the
   other steps back, the same move as the hero. */
@media (min-width: 961px) {
  .crew { align-items: stretch; }
  .crew .mate { transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease, border-color .45s ease; }
  .crew:has(.mate:is(:hover, :focus-within)) .mate:is(:hover, :focus-within) { transform: scale(1.025); border-color: var(--gold); position: relative; z-index: 1; }
  .crew:has(.mate:is(:hover, :focus-within)) .mate:not(:hover, :focus-within) { transform: scale(.96); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .crew .mate { transition: none; } }
@media (max-width: 520px) { .mate { grid-template-columns: 1fr; gap: 1rem; } .tally { width: 3.8rem; height: 3.8rem; } }

/* Then and now: each person's photo crossfades from the mine to the office on
   its own (flip.js), offset between Dan and Ben. Hover or tap flips it by hand.
   Reduced motion: no autoplay, the miner photo shows with a Then / Now toggle. */
.mate__tag { --fw: clamp(8rem, 10vw, 9.5rem); position: relative; align-self: start; }
.mate__tag > .tally { position: absolute; right: -.9rem; top: calc(var(--fw) * 1.25 - 2.6rem); width: 3.6rem; height: 3.6rem; }
.mate__tag > .tally b { font-size: 1.05rem; }
.flip { position: relative; width: var(--fw); margin: 0; }
.flip__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sc-r-sm, 10px); background: #141414;
  box-shadow: 0 0 0 1px var(--line-strong), 0 18px 40px -18px rgba(0, 0, 0, .9); }
.flip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s ease; }
.flip__img--now { opacity: 0; }
.flip[data-state="now"] .flip__img--now { opacity: 1; }
.flip__hit { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.flip__hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.flip__cap { margin-top: .6rem; color: var(--sc-ink-soft); font-family: "Geist Mono", var(--sc-font-mono); font-size: .8125rem; letter-spacing: .04em; }
.flip__lbl { transition: opacity .5s ease; }
.flip__lbl[data-now], .flip[data-state="now"] .flip__lbl[data-then] { display: none; }
.flip[data-state="now"] .flip__lbl[data-now] { display: inline; }
.flip__toggle { display: none; margin-top: .5rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; width: max-content; }
.flip__toggle button { min-width: 3.4rem; min-height: 44px; padding: 0 .8rem; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font-family: "Geist Mono", var(--sc-font-mono); font-size: .8125rem; letter-spacing: .04em; cursor: pointer; }
.flip__toggle button[aria-pressed="true"] { background: var(--gold); color: #1A1204; }
.flip__toggle button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .flip__img, .flip__lbl { transition: none; }
  .flip__toggle { display: flex; }
  .flip__hit { display: none; }
}
@media (max-width: 520px) {
  .mate__tag { --fw: 9rem; justify-self: start; }
  .mate__tag > .tally { width: 3.2rem; height: 3.2rem; right: -1.1rem; top: calc(var(--fw) * 1.25 - 2.3rem); }
}

/* The road here: a rail down the left, stops along it, real photos. */
.road { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.road__head { position: sticky; top: calc(var(--bar-h) + 3rem); }
.road__list { list-style: none; margin: 0; padding: 0 0 0 2rem; position: relative; }
.road__list::before { content: ""; position: absolute; left: 4px; top: .6rem; bottom: .6rem; width: 1px;
  background: linear-gradient(to bottom, var(--line-strong), var(--line-strong) 85%, var(--gold)); }
.stop { position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem); }
.stop::before { content: ""; position: absolute; left: -2rem; top: .55rem; width: 9px; height: 9px; border-radius: 50%; background: #0D0D0D; border: 1.5px solid var(--gold); }
.stop:has(.stop__img)::before { top: 50%; margin-top: -4.5px; }
.stop--now::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(245, 165, 36, .18); }
.stop__img { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--line-strong); aspect-ratio: 4 / 3; background: #0B0B0B; }
.stop__img img { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: saturate(.85); transition: transform 700ms var(--sc-ease-out); }
.stop:hover .stop__img img { transform: scale(1.04); }
.stop__copy--wide { grid-column: 1 / -1; }
.stop__k { font-family: "Geist Mono", var(--sc-font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.stop .h3 { margin-top: .4rem; }
.stop p { margin: .55rem 0 0; color: var(--muted); line-height: 1.6; max-width: 48ch; }
@media (max-width: 960px) { .road { grid-template-columns: 1fr; } .road__head { position: static; } }
@media (max-width: 560px) { .stop { grid-template-columns: 1fr; gap: 1rem; } .stop:has(.stop__img)::before { top: .55rem; margin-top: 0; } .stop__img { max-width: 20rem; } }

/* Ben's record: his real photo, shown at or under its native 157px, and the
   facts from his public profile on a rail. */
.ben__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ben__head { position: sticky; top: calc(var(--bar-h) + 3rem); }
.ben__photo { margin: 0 0 1.6rem; width: 9rem; max-width: 157px; aspect-ratio: 1; border-radius: var(--sc-r-md); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: 0 0 0 4px #0D0D0D, 0 0 0 5px rgba(245, 165, 36, .35); background: #0B0B0B; }
.ben__photo img { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: saturate(.85) contrast(1.03); }
.ben__head .h2 { margin-top: .6rem; }
.ben__lede { margin: 1.2rem 0 0; max-width: 40ch; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.55; text-wrap: pretty; }
.ben__list { list-style: none; margin: 0; padding: 0; }
.ben__list li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--line-strong); }
.ben__list li:last-child { border-bottom: 1px solid var(--line-strong); }
.ben__k { padding-top: .3rem; font-family: "Geist Mono", var(--sc-font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.ben__list b { display: block; color: var(--white); font-family: var(--font-ui); font-weight: 500; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); letter-spacing: -0.02em; line-height: 1.3; }
.ben__list p { margin: .45rem 0 0; color: var(--muted); line-height: 1.6; max-width: 52ch; }
.ben__off .ben__k { color: var(--dim); }
@media (max-width: 960px) { .ben__grid { grid-template-columns: 1fr; } .ben__head { position: static; } }
@media (max-width: 560px) { .ben__list li { grid-template-columns: 1fr; gap: .35rem; } .ben__photo { width: 7.5rem; } }

/* Dan's line, set large, once on the site. */
.creed { margin: 0; max-width: 60rem; }
.creed blockquote { margin: 0; font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.035em; color: var(--white);
  font-size: clamp(1.9rem, 1.15rem + 2.7vw, 3.5rem); line-height: 1.1; text-wrap: balance; }
.creed blockquote::before { content: "\201C"; color: var(--gold); }
.creed blockquote::after { content: "\201D"; color: var(--gold); }
.creed figcaption { margin-top: 1.4rem; color: var(--sc-ink-soft); font-size: .95rem; }
.creed figcaption b { color: var(--white); font-weight: 600; }
.creed__plain { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); max-width: 58ch; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.55; text-wrap: pretty; }

/* ========================================================= /newsletter/ ==
   Hero: the signup is the primary here. The art is the latest issue as it
   lands in an inbox, linked to the issue itself. */
.optin--hero { margin-top: 2rem; display: block; padding: 0; border: 0; background: none; max-width: 34rem; }
.optin--hero .optin__err, .optin--hero .optin__done, .optin--hero .optin__fine { margin-top: .8rem; }
.optin--hero .optin__field input, .optin--hero .optin__go { min-height: 56px; }
.optin--hero .optin__go { padding-inline: 1.5rem; font-size: 1.02rem; }
.nl-acts { margin-top: 1.6rem; }
.nl-alt { color: var(--sc-ink-soft); font-size: .92rem; }
.nl-alt a, .nl-end a { color: var(--white); text-decoration-color: var(--amber); text-underline-offset: 3px; }
.nl-end { margin: 1.4rem 0 0; color: var(--sc-ink-soft); font-size: .95rem; }

.mail { display: block; max-width: 34rem; margin-left: auto; color: inherit; text-decoration: none; transform: rotate(1.2deg);
  transition: transform 500ms var(--sc-ease-out), border-color 300ms; }
.mail:hover { transform: rotate(0deg) translateY(-4px); border-color: rgba(245, 165, 36, .45); }
.mail__from { display: flex; flex-direction: column; line-height: 1.2; }
.mail__from b { font-weight: 600; color: var(--white); }
.mail__from small { color: var(--dim); font-family: var(--sc-font-mono); font-size: .7rem; }
.mail__when { margin-left: auto; font-family: var(--sc-font-mono); font-size: .72rem; color: var(--dim); }
.mail__body { padding: 1.2rem 1.25rem .6rem; }
.mail__subj { margin: 0; color: var(--white); font-weight: 500; font-size: 1.28rem; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.mail__by { margin: .5rem 0 0; color: var(--dim); font-size: .78rem; font-family: var(--sc-font-mono); }
.mail__secs { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.mail__secs li { padding: .75rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; line-height: 1.45; }
.mail__secs span { display: block; margin-bottom: .2rem; font-family: var(--sc-font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.mail__foot { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; border-top: 1px solid var(--line); background: var(--panel-2);
  font-family: var(--sc-font-mono); font-size: .7rem; color: var(--dim); }
.mail__foot span:first-child { color: var(--gold); }
.mail__foot span:first-child::after { content: " \2192"; }
@media (max-width: 860px) { .mail { margin-left: 0; transform: none; } }

/* The five parts of an issue, each beside what the last issue carried. */
.anat { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; }
.anat li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, .9fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: baseline;
  padding-block: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--line-strong); }
.anat li:last-child { border-bottom: 1px solid var(--line-strong); }
.anat__n { font-family: var(--sc-font-mono); color: var(--gold); font-size: .85rem; }
.anat .h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
.anat li p { margin: .5rem 0 0; color: var(--muted); line-height: 1.55; max-width: 44ch; }
.anat .anat__ex { margin: 0; padding-left: 1rem; border-left: 2px solid rgba(245, 165, 36, .5); color: var(--sc-ink-soft); font-size: .95rem; }
.anat__ex small { display: block; margin-bottom: .3rem; font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.anat__line { margin: clamp(1.8rem, 4vw, 2.5rem) 0 0; font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.02em; color: var(--white); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
@media (max-width: 860px) {
  .anat li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .anat .anat__ex { grid-column: 2; }
}
.nl-past { margin-top: 1.6rem; }

/* ======================================================== /field-tools/ ==
   Hero art: three tool banners stacked like core trays, and one real
   citation pulled from a tool, as proof the claim is literal. */
.ft-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.ft-jump a { display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; padding: .4rem .95rem; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--white); text-decoration: none; font-weight: 500; font-size: .92rem; transition: border-color 200ms, background 200ms; }
.ft-jump a span { font-family: var(--sc-font-mono); font-size: .72rem; color: var(--gold); }
.ft-jump a:hover { border-color: rgba(245, 165, 36, .55); background: rgba(255, 255, 255, .03); }

.cite-stack { position: relative; padding-bottom: 5.5rem; }
.cite-stack__card { display: block; width: 100%; height: auto; border-radius: var(--sc-r-md); border: 1px solid var(--line-strong); box-shadow: var(--sc-e3); }
.cite-stack__card + .cite-stack__card { margin-top: -6%; }
.cite-stack__card:nth-child(1) { width: 86%; margin-left: 14%; opacity: .55; }
.cite-stack__card:nth-child(2) { width: 93%; margin-left: 4%; opacity: .78; position: relative; }
.cite-stack__card:nth-child(3) { position: relative; }
.cite { position: absolute; left: 6%; right: 14%; bottom: 0; z-index: 2; padding: 1rem 1.15rem; }
.cite p { margin: 0; }
.cite__k { font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.cite__row { display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem !important; color: var(--white); font-size: .92rem; }
.cite__row b { font-family: var(--sc-font-mono); font-weight: 500; }
.cite__src { margin-top: .6rem !important; padding-top: .6rem; border-top: 1px solid var(--line); font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); }
.cite__src::before { content: "Source: "; color: var(--dim); }

.ft-groups { padding-bottom: clamp(3rem, 6vw, 5rem); }
.tgroup { padding-top: clamp(3.5rem, 7vw, 6rem); scroll-margin-top: calc(var(--bar-h) + 1rem); }
.tgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line-strong); }
.tgroup__h { margin: 0; font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.035em; color: var(--white); font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 1; }
.tgroup__h small { font-family: var(--sc-font-mono); font-size: .9rem; letter-spacing: 0; color: var(--gold); vertical-align: .9em; margin-left: .2rem; }
.tgroup__head p { margin: 0; color: var(--sc-ink-soft); }
.tools { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.tool a { display: flex; flex-direction: column; height: 100%; padding: .7rem .7rem 1.2rem; border-radius: var(--sc-r-md); border: 1px solid var(--line); background: #0D0D0D;
  color: inherit; text-decoration: none; transition: border-color 250ms, background 250ms; }
.tool a:hover { border-color: rgba(245, 165, 36, .45); background: #111; }
.tool__img { display: block; aspect-ratio: 900 / 223; border-radius: 8px; overflow: hidden; background: var(--sc-surface); }
.tool__img img { width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform 600ms var(--sc-ease-out); }
.tool a:hover .tool__img img { transform: scale(1.04); }
.tool__t { margin: 1rem .35rem 0; color: var(--white); font-family: var(--font-ui); font-weight: 500; font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.25; }
.tool__d { margin: .45rem .35rem 0; color: var(--sc-ink-soft); font-size: .9rem; line-height: 1.5; }
.tool__go { margin: auto .35rem 0; padding-top: 1rem; font-size: .86rem; font-weight: 600; color: var(--white); }
.tool__go::after { content: "\2192"; margin-left: .4em; color: var(--amber); display: inline-block; transition: transform 260ms var(--sc-ease-out); }
.tool a:hover .tool__go::after { transform: translateX(3px); }

/* Grids with no orphan cell: three across on desktop. Surface (7) widens its
   first and last cards to fill nine cells; on two columns only the first
   widens (eight cells). A wide card lays out sideways so its row stays the
   height of its neighbours. Safety (1) is one wide row card. */
@media (min-width: 1100px) {
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools--seven > .tool:first-child, .tools--seven > .tool:last-child { grid-column: span 2; }
  .tools--seven > .tool:first-child a, .tools--seven > .tool:last-child a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: 1fr auto auto; column-gap: 1.5rem; }
  .tools--seven > .tool:first-child .tool__img, .tools--seven > .tool:last-child .tool__img { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: auto; height: 100%; min-height: 9rem; }
  .tools--seven > .tool:first-child :is(.tool__t, .tool__d, .tool__go), .tools--seven > .tool:last-child :is(.tool__t, .tool__d, .tool__go) { grid-column: 2; }
  .tools--seven > .tool:first-child .tool__t, .tools--seven > .tool:last-child .tool__t { align-self: end; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools--seven > .tool:first-child { grid-column: span 2; }
}
@media (min-width: 700px) {
  .tools--one { grid-template-columns: 1fr; }
  .tools--one .tool a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
  .tools--one .tool__img { grid-column: 1; grid-row: 1 / span 3; }
  .tools--one :is(.tool__t, .tool__d, .tool__go) { grid-column: 2; }
  .tools--one .tool__t { margin-top: 0; font-size: 1.35rem; }
}

/* Your ROI: the two office tools lead the page, with our own receipts. */
.ft-jump .ft-jump__roi { border-color: rgba(245, 165, 36, .55); color: var(--white); background: rgba(245, 165, 36, .08); }
.roi { padding-bottom: 0; scroll-margin-top: calc(var(--bar-h) + 1rem); }
.roi__head { max-width: 48rem; }
.roi__head .h2 { margin-top: .8rem; text-wrap: balance; }
.roi__lede { margin: 1.2rem 0 0; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.55; max-width: 56ch; text-wrap: pretty; }
.roi__tools { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.roi__tool a { display: flex; flex-direction: column; height: 100%; padding: clamp(1rem, 2vw, 1.4rem); border-radius: var(--sc-r-md);
  border: 1px solid rgba(245, 165, 36, .38); color: inherit; text-decoration: none;
  background: linear-gradient(160deg, rgba(245, 165, 36, .08), rgba(255, 255, 255, .01) 45%), #0D0D0D;
  transition: transform 300ms var(--sc-ease-out), border-color 300ms; }
.roi__tool a:hover { transform: translateY(-4px); border-color: rgba(245, 165, 36, .7); }
.roi__img { display: block; aspect-ratio: 900 / 223; border-radius: 8px; overflow: hidden; background: var(--sc-surface); }
.roi__img img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.roi__k { margin-top: 1.2rem; font-family: "Geist Mono", var(--sc-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.roi__t { margin-top: .4rem; color: var(--white); font-family: var(--font-ui); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); letter-spacing: -0.03em; line-height: 1.15; }
.roi__d { margin-top: .55rem; color: var(--muted); line-height: 1.55; max-width: 44ch; }
.roi__go { margin-top: auto; padding-top: 1.2rem; font-weight: 600; color: var(--white); }
.roi__go::after { content: "\2192"; margin-left: .45em; color: var(--amber); display: inline-block; transition: transform 260ms var(--sc-ease-out); }
.roi__tool a:hover .roi__go::after { transform: translateX(4px); }
.roi__receipts { list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.roi__receipts li { padding: 1.3rem 1.4rem 0 0; display: flex; flex-direction: column; gap: .45rem; }
.roi__receipts li + li { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.roi__receipts b { font-family: var(--sc-font-mono); font-weight: 500; color: var(--gold); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; }
.roi__receipts span { color: var(--sc-ink-soft); font-size: .92rem; line-height: 1.5; max-width: 30ch; }
.roi__receipts b small { display: block; margin-bottom: .45rem; font-family: var(--mono, var(--sc-font-mono)); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.roi__ctas { margin-top: clamp(2rem, 4vw, 2.8rem); }
@media (max-width: 760px) {
  .roi__tools, .roi__receipts { grid-template-columns: 1fr; }
  .roi__receipts li, .roi__receipts li + li { padding: 1.1rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .roi__tool a, .roi__tool a:hover { transform: none; transition: none; } }

.ft-band { margin-top: 0; }
.ft-band .band__copy .h3 { margin: 0; color: var(--white); line-height: 1.2; }
.ft-tail { padding-top: 0; }
.nl-tail .optin__go { background: var(--amber); color: #0B0B0B; border-color: transparent; }
.nl-tail .optin__go:hover { background: var(--amber-hi); }
.trustn { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.trustn__list { list-style: none; margin: 0; padding: 0; }
.trustn__list li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--line-strong); }
.trustn__list b { font-family: var(--sc-font-mono); font-weight: 500; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); padding-top: .25rem; }
.trustn__list span { color: var(--muted); font-size: 1.06rem; line-height: 1.6; }
.trustn__list a { color: var(--white); text-decoration-color: var(--amber); text-underline-offset: 3px; }
.ft-note { margin: 1rem 0 0; color: var(--dim); font-family: var(--sc-font-mono); font-size: .74rem; }
@media (max-width: 860px) {
  .trustn { grid-template-columns: 1fr; }
  .trustn__list li { grid-template-columns: 1fr; gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mail, .mail:hover { transform: none; transition: none; }
  .stop__img img, .tool__img img, .stop:hover .stop__img img, .tool a:hover .tool__img img { transform: none; transition: none; }
}

/* Phones (mobile round, 2026-10-28): secondary text at 13px, labels at 12px,
   44px tap targets, 16px inputs so iOS does not zoom. Desktop untouched. */
@media (max-width: 760px) {
  .optin__field input { font-size: 1rem; }
  .optin__k, .optin__fine, .stop__k, .ben__k, .crew__note, .mate__cred, .mail__by { font-size: .8125rem; }
  .badge__tag dt, .mail__secs span, .mail__when, .mail__from small, .mail__foot, .anat__ex small { font-size: .75rem; }
  .mate__cred a { display: inline-flex; align-items: center; min-height: 44px; }
  .mate__cred { padding-top: .25rem; }
  .nl-alt a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Field Tools on phones (mobile round, 2026-10-28). Chips and labels at 12px
   or more, notes at 13px, and the jump pills and the disclaimer link at a
   44px target. Every selector here is a Field Tools class, so the other
   pages that share this file do not move. Desktop is untouched. */
@media (max-width: 760px) {
  .ft-jump a { min-height: 44px; }
  .ft-jump a span, .roi__k, .roi__receipts b small { font-size: 12px; }
  .trustn__list b, .ft-note { font-size: 13px; }
  .trustn__list a { padding-block: 11px; }
}