/* Hallmark · shape: Map / Diagram (C2, draw a54f15), taken as the program's own map, words beside the product throughout: a split hero (what's on offer beside the program's figures on the one accent panel), the analytics (every store's numbers wide, every event beside what it counts), the platform's scale on a band, the four live programs beside their head, the five modules as a stepper (the list left of its panel), the award rules, the kit orders, five questions, the close · genre: modern-minimal · theme: brand · paper: oklch(17.6% 0.014 258) · accent: oklch(71.3% 0.117 253) · display: Inter 700 (the /subscribe heads) · body: Inter · job: hire (sales-led: Email us, the publisher_contact event, in the hero and at the close) · draw: a54f15 (nav and footer stay the shared chrome; the hero swapped from Ledge to a split, owner Oct 27, DESIGN.md 18) · hero: Split, the head, one line and the actions on six columns, the Overview's first two columns of figures on the other six in the page's one accent-edged panel · nav: kept, navbar-solid (sticky bar: mark left, sentence-case links, Sign in and Sign up right) · footer: kept, footer-simple (wordmark, one line, Discord and YouTube marks; Company and Support columns; app-store buttons) · imagery: product photography on the isolated stack (plans/055-marketing-pages/publishers): TopDeck's demo program "TopDeck Card Game" seeded as a mid-size publisher (147 stores in nine countries, 7,031 players) with fictional stores and the promo cast, flat 3x captures shown at 1.2x their CSS size or more, every foot on a line no text crosses, the workspace's own phone and tablet layouts for narrow screens; the four live programs' marks in their own colours; the shared store-logo strip; no phones, no photographs · signature: the program's figures (147 stores, 7,031 players, both rising) beside the line that says what's on offer
 * axes: dark/grotesk-sans/cool · posture: restrained (flat panels; the accent on the hero panel's edge, the picked module, links and focus) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, a publisher page drifts to a feature list; analytics leads, shown in the real workspace on one fictional program, and the live programs are links a buyer can open */
/* Hallmark · hero-review: none separate; the finish review read the hero cold (first pass) · finish-review: subagent, first pass · 8 findings · 8 resolved; this revision (owner, Oct 27) rebuilt the hero as a split and made analytics the main story · gap: on a phone the stores list shows at 0.97x (12px labels read 11.6px), the narrowest layout that keeps store names whole */
/* Hallmark · waive 1 · Inter display with JetBrains Mono declared as --font-outlier · Inter 700 is the owner's choice, the /subscribe heads and the face of the shared TopDeck navbar and footer */
/* Hallmark · waive 29 · the zero-offset accent glow on the td-btn-primary hover only · the glow-lift button is the TopDeck signature the owner kept; panels, fields and washes carry no glow */
/* Hallmark · waive 39b · td-btn-primary and td-btn-secondary stand 56px · the shared TopDeck button recipe from enhancements.css keeps one height in the hero, the navbar and every page */
/* Hallmark · waive 30b · around-icons only in the navbar sign-in link and the back-to-top button · the TopDeck page body uses Font Awesome alone; the navbar and footer partials are shared chrome */
/* Hallmark · answered F4 · the navbar Sign up is the chrome's .btn-primary; the TopDeck page body uses td-btn-primary only */
/* Hallmark · answered F16 · the accent scrollbar comes from enhancements.css and head.pug; DESIGN.md Wiring step 2 took scrollbar-color out of base.css so the site's own stays */
/* Hallmark · answered F19 · the fourth weight is 500 on td-btn-secondary, the shared TopDeck recipe from enhancements.css; the page itself sets 400, 600 and 700 */
@import url("./tokens.css");
@import url("./base.css?v3");

/* ---------- Shared ---------- */

:where(.td-mk) figure { margin: 0; }
:where(.td-mk) :is(ul, ol, dl, dd) { margin: 0; padding: 0; list-style: none; }
.td-mk .lead { font-weight: 400; }

.td-mk .pb-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
}

.td-mk .pb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.td-mk .pb-cta { white-space: nowrap; }

.td-mk .pb-link {
  color: var(--td-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .pb-link:hover { color: var(--td-text-primary); }
.td-mk .pb-link:active { color: var(--td-text-secondary); }

/* A capture fills its frame: a <picture> is a plain box */
.td-mk picture,
.td-mk picture > img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Panels: flat, a 1px border, no shadow of their own ---------- */

.td-mk .pb-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--td-border-default);
  border-radius: var(--td-radius-lg);
  background: var(--td-card-bg);
}

/* A ruled list: an icon beside each name, a short line under it */
.td-mk .pb-list > div {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .pb-list > div:last-child { border-bottom: 1px solid var(--td-border-default); }

.td-mk .pb-list dt {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--td-text-primary);
}

/* The rows name things, not states: their icons stay neutral */
.td-mk .pb-list dt .fa-solid {
  flex-shrink: 0;
  width: 1.25em;
  text-align: center;
  color: var(--td-text-secondary);
}

.td-mk .pb-list dd {
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

/* ---------- Hero (split): the words beside the figures ---------- */

.td-mk .pb-hero {
  display: grid;
  align-items: center;
  min-height: calc(100svh - 76px);
  padding-block: var(--space-2xl);
}

.td-mk .pb-hero > .container { width: 100%; }

.td-mk .pb-hero__grid { align-items: center; }

.td-mk .pb-hero__text {
  grid-column: 1 / span 6;
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.td-mk .pb-hero h1 { max-width: 14ch; }

.td-mk .pb-hero .lead { max-width: 30ch; text-wrap: balance; }

.td-mk .pb-hero .pb-actions { margin-top: var(--space-xs); }

/* The page's one accent edge: the Overview's first two columns of figures,
   edge to edge at 1.24x their CSS size (669px from 541) */
.td-mk .pb-panel--hero {
  grid-column: 7 / span 6;
  border: 2px solid var(--td-accent);
}

/* ---------- Analytics: every store wide, every event beside its words ---------- */

.td-mk .pb-data {
  padding-block: var(--section-gap) var(--section-gap-l);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .pb-data__grid { row-gap: var(--space-2xl); }

.td-mk .pb-data__head {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-md);
}

/* A wide table is the point: the stores at 1.2x their CSS size (1366 from
   1137), the countries beside them */
.td-mk .pb-panel--stores { grid-column: 1 / -1; }

.td-mk .pb-data__list {
  grid-column: 1 / span 4;
  align-self: center;
}

/* The events at 1.16x their CSS size (786 from 677) */
.td-mk .pb-panel--events {
  grid-column: 6 / -1;
  width: 100%;
  max-width: 786px;
  justify-self: end;
}

/* ---------- Proof: the stores, the platform's scale, a store's word ---------- */

.td-mk .pb-proof {
  padding-block: var(--section-gap-s);
  background: var(--td-surface-2);
}

.td-mk .pb-proof__grid { row-gap: var(--space-2xl); }

.td-mk .pb-proof__text {
  grid-column: 1 / span 7;
  display: grid;
  justify-items: start;
  gap: var(--space-md);
}

.td-mk .pb-quote { grid-column: 1 / span 9; }

.td-mk .pb-quote blockquote { margin: 0; }

.td-mk .pb-quote blockquote p {
  max-width: 28ch;
  font-size: var(--text-section);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--td-text-primary);
  text-wrap: balance;
}

/* The opening mark hangs into the margin only where the gutter can hold it */
@media (min-width: 88rem) {
  .td-mk .pb-quote blockquote p { text-indent: -0.42em; }
}

.td-mk .pb-quote figcaption {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}

.td-mk .pb-quote figcaption strong {
  font-weight: 600;
  color: var(--td-text-primary);
}

.td-mk .pb-quote figcaption span {
  font-size: var(--text-sm);
  color: var(--td-text-secondary);
}

/* The platform's scale: a figures row of four, hairlines between */
.td-mk .pb-figures {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.td-mk .pb-figures > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  padding-inline: var(--space-xl);
}

.td-mk .pb-figures > div:first-child { padding-left: 0; }
.td-mk .pb-figures > div + div { border-left: 1px solid var(--td-border-default); }

.td-mk .pb-figures dt {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

.td-mk .pb-fig {
  order: -1;
  margin: 0;
  font-size: var(--text-display-s);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--td-text-primary);
  white-space: nowrap;
}

/* ---------- Programs: the head over the live hubs, one row each ---------- */

.td-mk .pb-programs {
  padding-block: var(--section-gap) var(--section-gap-s);
}

.td-mk .pb-programs__lead { margin-top: var(--space-md); }
.td-mk .pb-programs__reach { margin-top: var(--space-2xl); }

.td-mk .pb-index {
  margin-top: var(--space-2xl);
  border-bottom: 1px solid var(--td-border-default);
}

.td-mk .pb-index__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: center;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--td-border-default);
}

/* Each mark in its own colours, 96px tall where the program is the subject
   (its art fills about 60px of the file's height) */
.td-mk .pb-index__mark {
  grid-column: 1 / span 3;
  width: auto;
  max-width: 100%;
  height: 96px;
  margin-left: calc(var(--space-lg) * -1);
}

.td-mk .pb-index__line {
  grid-column: 4 / span 5;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--td-text-primary);
  text-wrap: pretty;
}

/* The CookieRun line opens its announcement: a quiet underline that firms on hover */
.td-mk .pb-index__story {
  text-decoration: underline;
  text-decoration-color: var(--td-border-emphasis);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .pb-index__story:hover { text-decoration-color: currentColor; }
.td-mk .pb-index__story:active { color: var(--td-text-secondary); }

.td-mk .pb-index__host {
  grid-column: 9 / -1;
  justify-self: end;
}

/* ---------- The workspace: the list beside one capture ---------- */

.td-mk .pb-work {
  padding-block: var(--section-gap);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .pb-work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
}

.td-mk .pb-work__head { grid-column: 1 / span 7; }

.td-mk .pb-work__steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}

/* A module's name and line, one unit, the icon in its own column. The border
   is there from the start, clear, so the stepper only ever changes its colour. */
.td-mk .pb-step__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-lg) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
  border: 1px solid transparent;
  border-radius: var(--td-radius-lg);
}

/* The modules are things, not states: their icons stay neutral */
.td-mk .pb-step__icon {
  grid-row: 1;
  font-size: var(--text-md);
  text-align: center;
  color: var(--td-text-secondary);
}

.td-mk .pb-step h3 {
  grid-column: 2;
  max-width: none;
  font-size: var(--text-lg);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.td-mk .pb-step__row p {
  grid-column: 2;
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

.td-mk .pb-step,
.td-mk .pb-step__show { min-width: 0; }

.td-mk .pb-step__show { margin-top: var(--space-lg); }

/* A module: a 4:3 capture at 1.2x its CSS size, edge to edge; the panel's
   foot is where the screen continues */
.td-mk .pb-panel--station {
  width: 100%;
  max-width: 1022px;
  aspect-ratio: 4 / 3;
}

.td-mk .pb-panel--station img {
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* The run spans the grid under the head (partials/marketing-pin), from 80rem;
   its stage takes eight columns, so the 852px module captures show at about
   their own size */
.td-mk .pb-work__pin { grid-column: 1 / -1; }
.td-mk .pb-work__pin.is-pinned { margin-top: var(--space-2xl); }
.td-mk .pb-work__pin.is-pinned > .pb-work__steps { grid-column: 1 / span 4; }
.td-mk .pb-work__pin.is-pinned > .td-pin__stage { grid-column: 5 / -1; }
.td-mk .td-pin__stage > .pb-step__show { max-width: none; margin: 0; }
.td-mk .td-pin__stage .pb-panel--station { max-width: none; }


/* ---------- Rewards: the award rules beside three rows, on a band ---------- */

.td-mk .pb-rewards {
  padding-block: var(--section-gap-s);
  background: var(--td-surface-2);
}

.td-mk .pb-rewards__grid {
  align-items: center;
  row-gap: var(--space-2xl);
}

/* The sheet at 1.2x its CSS size (691px), from its title to Rule 1's
   placements; its foot is where the sheet continues */
.td-mk .pb-panel--awards {
  grid-column: 1 / span 7;
  width: 100%;
  max-width: 691px;
}

.td-mk .pb-rewards__text {
  grid-column: 8 / -1;
  display: grid;
  gap: var(--space-lg);
}

.td-mk .pb-rewards .pb-list { margin-top: var(--space-sm); }

/* ---------- Kits: the store orders under the head ---------- */

.td-mk .pb-kits {
  padding-block: var(--section-gap-s) var(--section-gap);
}

.td-mk .pb-kits__grid { row-gap: var(--space-2xl); }

.td-mk .pb-kits__head {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-md);
}

/* 837px of orders at 1.2x (1004px), edge to edge */
.td-mk .pb-panel--kits {
  grid-column: 1 / span 9;
  width: 100%;
  max-width: 1004px;
}

.td-mk .pb-kits__facts {
  grid-column: 10 / -1;
  align-self: start;
}

.td-mk .pb-kits__facts li {
  padding-block: var(--space-md);
  border-top: 1px solid var(--td-border-default);
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

/* ---------- Questions: the head beside five answers that open ---------- */

.td-mk .pb-faq {
  padding-block: var(--section-gap-s);
  background: var(--td-surface-2);
}

.td-mk .pb-faq__grid { row-gap: var(--space-xl); }

.td-mk .pb-faq__head { grid-column: 1 / span 7; }

/* Six questions in three columns, each opening its answer in place */
.td-mk .pb-faq__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: start;
}

.td-mk .pb-faq__item { border-top: 1px solid var(--td-border-default); }

.td-mk .pb-faq__item:nth-last-child(-n + 3) { border-bottom: 1px solid var(--td-border-default); }

.td-mk .pb-faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 44px;
  padding-block: var(--space-md);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--td-text-primary);
  list-style: none;
  cursor: pointer;
  transition: color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .pb-faq__item summary::-webkit-details-marker { display: none; }

.td-mk .pb-faq__item summary:hover { color: var(--td-accent); }
.td-mk .pb-faq__item summary:active { color: var(--td-text-secondary); }

.td-mk .pb-faq__mark {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--td-text-secondary);
  transition: transform var(--td-duration-base) var(--td-ease-out);
}

.td-mk .pb-faq__item[open] .pb-faq__mark { transform: rotate(180deg); }

.td-mk .pb-faq__item:not([open]) > p { display: none; }

.td-mk .pb-faq__item p {
  max-width: 60ch;
  padding-bottom: var(--space-lg);
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

/* ---------- Close: the conversation, set at the hero's size ---------- */

.td-mk .pb-close {
  padding-block: var(--section-gap) var(--section-gap-l);
}

.td-mk .pb-close__text {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.td-mk .pb-close h2 {
  max-width: 16ch;
  font-size: var(--text-display);
  letter-spacing: var(--tracking-display);
}

.td-mk .pb-close .lead {
  max-width: 40rem;
  text-wrap: balance;
}

.td-mk .pb-close .pb-actions { margin-top: var(--space-xs); }

.td-mk .pb-close__mail { color: var(--td-text-secondary); }

/* ---------- Under 80rem: the modules stack, each with its own panel ---------- */

@media (max-width: 79.99rem) {
  .td-mk .pb-step__show { max-width: 1022px; }
}

/* ---------- Under 75rem: the side-by-side captures take the row ----------
   In their columns they would show under their CSS size; stacked, each keeps
   1.2x (or the row) and its 13px text. */

@media (max-width: 75rem) {
  .td-mk .pb-data__list,
  .td-mk .pb-panel--events,
  .td-mk .pb-panel--awards,
  .td-mk .pb-rewards__text,
  .td-mk .pb-panel--kits,
  .td-mk .pb-kits__facts { grid-column: 1 / -1; }

  .td-mk .pb-panel--events { justify-self: start; }

  .td-mk .pb-data__list,
  .td-mk .pb-rewards__text { max-width: 40rem; }

  .td-mk .pb-kits__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-columns);
    max-width: 52rem;
  }

  .td-mk .pb-rewards__text { grid-row: 1; }
  .td-mk .pb-panel--awards { grid-row: 2; }
}

/* ---------- Under 60rem: every split stacks in reading order ---------- */

@media (max-width: 60rem) {
  .td-mk .pb-hero {
    min-height: 0;
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .td-mk .pb-hero__grid { row-gap: var(--space-2xl); }

  .td-mk .pb-hero__text,
  .td-mk .pb-panel--hero,
  .td-mk .pb-data__head,
  .td-mk .pb-proof__text,
  .td-mk .pb-figures,
  .td-mk .pb-kits__head,
  .td-mk .pb-work__head,
  .td-mk .pb-quote,
  .td-mk .pb-faq__head,
  .td-mk .pb-faq__list { grid-column: 1 / -1; }

  .td-mk .pb-kits__facts { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }

  .td-mk .pb-faq__list { grid-template-columns: minmax(0, 1fr); }
  .td-mk .pb-faq__item:nth-last-child(-n + 3) { border-bottom: 0; }
  .td-mk .pb-faq__item:last-child { border-bottom: 1px solid var(--td-border-default); }

  .td-mk .pb-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-xl);
    max-width: 40rem;
  }

  .td-mk .pb-figures > div:nth-child(3) { padding-left: 0; border-left: 0; }

  .td-mk .pb-index__row { row-gap: var(--space-xs); padding-block: var(--space-md); }
  .td-mk .pb-index__mark { grid-column: 1 / -1; height: 80px; margin-left: calc(var(--space-md) * -1); }
  .td-mk .pb-index__line,
  .td-mk .pb-index__host { grid-column: 1 / -1; justify-self: start; }

  /* Below the pin's width each module sits under its own step. Every capture
     with a phone crop (the workspace's own narrow layout, each ending on a
     clean line) shows it whole at its own shape, at no more than 26rem, so it
     reads 13px or more and keeps at least two source pixels per display
     pixel; the kit orders' narrower crop stops at 22rem. */
  .td-mk .pb-panel--station { aspect-ratio: auto; }

  .td-mk .pb-panel--station img { height: auto; object-fit: initial; }

  .td-mk .pb-panel--stores,
  .td-mk .pb-panel--events,
  .td-mk .pb-panel--station { max-width: 26rem; }

  .td-mk .pb-panel--kits { max-width: 22rem; }
}

/* The hero takes the phone layout of its figures under 52rem */
@media (max-width: 52rem) {
  .td-mk .pb-panel--hero { max-width: 26rem; }
}

/* ---------- Under 40rem: the workspace's phone layouts ---------- */

@media (max-width: 40rem) {
  .td-mk .pb-hero h1 { font-size: clamp(2.25rem, 11vw, 3rem); }

  .td-mk .pb-quote blockquote p { font-size: var(--text-xl); line-height: 1.3; }

  .td-mk .pb-figures > div { padding-inline: 0 var(--space-md); }
  .td-mk .pb-figures > div:nth-child(even) { padding-left: var(--space-md); }
  .td-mk .pb-figures > div:nth-child(odd) { border-left: 0; }

  .td-mk .pb-work__steps { gap: var(--space-2xl); }

  /* The award rules' phone crop: the coins for playing and placing */
  .td-mk .pb-panel--awards { aspect-ratio: auto; max-width: 26rem; }

  .td-mk .pb-close h2 { font-size: clamp(2.25rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .td-mk .pb-link,
  .td-mk .pb-index__story,
  .td-mk .pb-faq__item summary,
  .td-mk .pb-faq__mark { transition: none; }
}