/* Hallmark · shape: Ledger (C2): a split hero (the words, the price, the trial and Discord, the platform's live figures as a ruled strip) beside the organizer's week dealt with a player's phone on the one accent panel, the plan's contents as ruled rows beside one compact offer, a bento of four real captures over a ruled index of the other features, every game's mark on a band, the store strip with one verdict set large over two organizers' quotes, the questions on a band, the close as a split · 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: buy · hero: Split (owner decision 18) · nav: kept, navbar-solid · footer: kept, footer-simple · imagery: product photography on the isolated stack (plans/055-marketing-pages/photo-subscribe/RECIPE.md) and crops of the other pages' captures · signature: the one plan, $12 a month, beside everything it runs
 * axes: dark/grotesk-sans/cool · posture: restrained (flat panels; the accent on the hero panel's edge, the head's second line, the picked billing, the checklist marks, links and focus) · v1.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, a pricing page drifts to any SaaS; the hero is a real organizer's week beside a player's phone, the plan states one price plainly, and the index names every TopDeck surface in TO words */
/* Hallmark · finish-review: subagents (plans/055-marketing-pages/subscribe/REVIEW.md, 14 findings; DESIGN-REVIEW.md, 6 decisions) · all resolved with the owner on Oct 27 */
/* Hallmark · waive 38iii · the hero head's second line in the accent · the owner kept /subscribe's headline and its accent on Oct 27 2026 (DESIGN.md Variants, INVENTORY §8 item 33) */
/* Hallmark · waive 23 · the accent paints about 8% of the first screen · the same accented headline line the owner kept; without it the fold sits under 5% */
/* 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 58 · the hero's two-sentence lead and its figures strip, the plan's ten-row checklist (two rows answer the buyer's game and EventLink questions beside the price), and the proof's three quotes · the owner's call on Oct 27 (DESIGN.md Variants): the lead carries the search terms the fixed H1 leaves out, and quotes are word for word (ruling 14) */
/* Hallmark · answered F20 · the hero actions: two buttons, then their terms on a row of their own, by design */
/* 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 · td-btn-secondary's 500 comes from enhancements.css and the price's 800 is the one big figure DESIGN.md allows; the page itself sets 400, 600 and 700 */
@import url("./tokens.css");
@import url("./base.css?v3");

/* ---------- Page grid: twelve columns inside Bootstrap's container ---------- */

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

.td-mk .sb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

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

.td-mk .sb-note {
  font-size: var(--text-sm);
  color: var(--td-text-secondary);
}

.td-mk .sb-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 .sb-link:hover {
  color: var(--td-text-primary);
}

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

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

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

/* The page's one accent edge: the hero panel, holding the dealt pair */
.td-mk .sb-panel--hero {
  border: 2px solid var(--td-accent);
}

.td-mk .sb-shot picture,
.td-mk .sb-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Hero (Split): the words, the price, the actions and the figures left; the pair right ---------- */

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

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

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

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

.td-mk .sb-hero h1 {
  max-width: none;
  line-height: 1.05;
}

@media (min-width: 60.01rem) {
  .td-mk .sb-hero h1 {
    font-size: min(var(--text-display), 6.4vw);
  }
}

/* The owner's headline: its second line in the accent */
.td-mk .sb-accent {
  display: block;
  color: var(--td-accent);
}

.td-mk .sb-hero .lead {
  max-width: 40ch;
}

/* The trial and the Discord side by side, the terms under them */
.td-mk .sb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.td-mk .sb-hero__actions > .sb-note {
  flex-basis: 100%;
}

.td-mk .sb-hero__actions .td-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* The platform, counted live: a ruled strip under the actions */
.td-mk .sb-hero__proof {
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: max-content;
  max-width: 100%;
  margin: var(--space-xs) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .sb-hero__proof > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline: var(--space-lg);
}

.td-mk .sb-hero__proof > div:first-child {
  padding-left: 0;
}

.td-mk .sb-hero__proof > div + div {
  border-left: 1px solid var(--td-border-default);
}

.td-mk .sb-hero__proof dd {
  order: -1;
  margin: 0;
  font-size: var(--text-title);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--td-text-primary);
}

.td-mk .sb-hero__proof dt {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--td-text-secondary);
}

.td-mk .sb-panel--hero {
  grid-column: 7 / span 6;
}

/* ---------- Plans: what the plan includes beside one compact offer ---------- */

.td-mk .sb-plans {
  padding-block: var(--space-2xl) var(--section-gap-s);
  border-top: 1px solid var(--td-border-default);
}

/* The jump target is the plan, under the sticky navbar */
.td-mk .sb-plans__body {
  scroll-margin-top: calc(76px + var(--space-lg));
}

.td-mk .sb-plans__grid {
  grid-template-rows: auto 1fr;
  align-items: start;
  row-gap: var(--space-xl);
}

/* Left: the head, then the plan's contents as ruled one-line rows */
.td-mk .sb-plans__text {
  grid-column: 1 / span 6;
  grid-row: 1;
  display: grid;
  gap: var(--space-md);
}

.td-mk .sb-included {
  grid-column: 1 / span 6;
  grid-row: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-mk .sb-included li {
  display: grid;
  grid-template-columns: 1.25em minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--td-border-default);
  color: var(--td-text-primary);
}

.td-mk .sb-included li:last-child {
  border-bottom: 1px solid var(--td-border-default);
}

.td-mk .sb-included .fa-solid {
  font-size: var(--text-sm);
  color: var(--td-accent);
}

/* Right: the buy box and its terms, centred on the left column */
.td-mk .sb-plans__offer {
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  gap: var(--space-lg);
}

.td-mk .sb-plan {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-2xl);
  border-color: var(--td-border-emphasis);
  background: var(--td-surface-3);
  text-align: center;
}

/* The TopDeck logo, then the billing switch, over a hairline */
/* The card's stack is centred: the logo, the switch, the price, the action */
.td-mk .sb-plan__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--td-border-default);
}

.td-mk .sb-plan__logo {
  display: block;
  width: auto;
  height: 28px;
}

.td-mk .sb-plans__op {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--td-text-secondary);
}

/* Monthly or yearly: two radios dressed as one control */
.td-mk .sb-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  min-width: 0;
  margin: 0;
  padding: var(--space-2xs);
  border: 0;
  border-radius: var(--td-radius-sm);
  background: var(--td-surface-1);
}

.td-mk .sb-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.td-mk .sb-switch label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 40px;
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--td-radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--td-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--td-duration-fast) var(--td-ease-out), background-color var(--td-duration-fast) var(--td-ease-out), border-color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .sb-switch label:hover {
  color: var(--td-text-primary);
}

.td-mk .sb-switch input:checked + label {
  border-color: var(--td-accent);
  background: var(--td-card-bg);
  color: var(--td-text-primary);
}

/* The saving rides on the switch, so annual sells itself without a badge */
.td-mk .sb-switch__save {
  font-weight: 600;
  color: var(--color-success);
}

.td-mk .sb-switch input:disabled + label {
  cursor: progress;
}

.td-mk .sb-switch input:focus-visible + label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The picked billing's price and button; monthly without :has() */
.td-mk .sb-plan__option {
  display: grid;
  gap: var(--space-sm);
}

.td-mk .sb-plan__option[data-plan="annual"],
.td-mk .sb-plan:has(#bill-annual:checked) .sb-plan__option[data-plan="monthly"] {
  display: none;
}

.td-mk .sb-plan:has(#bill-annual:checked) .sb-plan__option[data-plan="annual"] {
  display: grid;
}

.td-mk .sb-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* The page's one big figure (DESIGN.md: Inter 800, tight, tabular) */
.td-mk .sb-price__amount {
  font-size: clamp(4.5rem, 4vw + 2.5rem, 7rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--td-text-primary);
}

.td-mk .sb-price__per {
  font-size: var(--text-lead);
  color: var(--td-text-secondary);
}

.td-mk .sb-plan__save {
  color: var(--td-text-secondary);
}

.td-mk .sb-plan__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* Each action fills the card's width (the trial, or the dashboard over the
   portal once subscribed), its terms centred under it */
.td-mk .sb-plan__actions .sb-cta {
  flex: 1 1 100%;
  justify-content: center;
}

.td-mk .sb-plan > .sb-note {
  text-align: center;
}

.td-mk .sb-plan__actions .td-btn-primary[aria-busy="true"] {
  cursor: progress;
}

.td-mk .sb-plan__error {
  flex-basis: 100%;
  font-size: var(--text-sm);
  color: var(--color-error);
}

/* Back from Stripe without finishing: the help, quietly, at the top of the card */
.td-mk .sb-plan__back {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--td-border-default);
  border-radius: var(--td-radius-sm);
  font-size: var(--text-sm);
  color: var(--td-text-secondary);
}

.td-mk .sb-plan__state {
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--td-text-primary);
}

/* ---------- Tournament management: four enlarged fragments, then a ruled row ---------- */

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

/* The head and its lead, centred over the symmetric grid */
.td-mk .sb-features__head {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  margin-inline: auto;
  text-align: center;
}

/* One line where it fits, as on the old page */
.td-mk .sb-features__head h2 {
  max-width: none;
}

/* Two by two, parted by hairlines; no boxes */
.td-mk .sb-feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--td-border-default);
}

.td-mk .sb-feat {
  position: relative;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
}

.td-mk .sb-feat:nth-child(even) {
  border-left: 1px solid var(--td-border-default);
}

.td-mk .sb-feat:nth-child(n + 3) {
  border-top: 1px solid var(--td-border-default);
}

/* The picture, the sentence and the link share one column and one left edge */
.td-mk .sb-feat__body {
  display: grid;
  gap: var(--space-md);
  width: min(100%, 460px);
  margin-inline: auto;
}

/* One piece of the product, set large, dissolving into the page at its foot */
.td-mk .sb-feat__shot {
  height: 340px;
  margin-bottom: var(--space-sm);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-paper) 55%, transparent);
  mask-image: linear-gradient(to bottom, var(--color-paper) 55%, transparent);
}

.td-mk .sb-feat__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* A fragment cut from inside a list gets the card's own edge back: the
   app's border and its rounded top (the foot fades) */
.td-mk .sb-feat__shot--framed img {
  border: 1px solid var(--td-border-emphasis);
  border-bottom: 0;
  border-radius: var(--td-radius-lg) var(--td-radius-lg) 0 0;
}

/* The name as a title, its line under it */
.td-mk .sb-feat__text {
  display: grid;
  gap: var(--space-2xs);
}

.td-mk .sb-feat__name {
  max-width: none;
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.td-mk .sb-feat__text p {
  max-width: none;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--td-text-secondary);
}

/* The page it opens, named; the whole cell is the link */
.td-mk .sb-feat__link {
  justify-self: start;
  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 .sb-feat__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.td-mk .sb-feat:hover .sb-feat__link {
  color: var(--td-text-primary);
}

/* The other features: five small cards, each one a link */
.td-mk .sb-index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.td-mk .sb-index li {
  display: flex;
}

.td-mk .sb-index__card {
  flex: 1;
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  color: var(--td-text-secondary);
  text-decoration: none;
  transition: border-color var(--td-duration-fast) var(--td-ease-out), background-color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .sb-index__card:hover {
  border-color: var(--td-border-emphasis);
  background: var(--td-surface-3);
}

.td-mk .sb-index__card:active {
  background: var(--td-surface-2);
}

/* The icon names the thing; the chevron says it opens */
.td-mk .sb-index__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.td-mk .sb-index__icon {
  font-size: var(--text-lg);
  color: var(--td-text-secondary);
}

.td-mk .sb-index__go {
  font-size: var(--text-sm);
  color: var(--td-text-secondary);
  transition: color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .sb-index__card:hover .sb-index__go {
  color: var(--td-accent);
}

.td-mk .sb-index__name {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--td-text-primary);
}

.td-mk .sb-index__line {
  font-size: var(--text-sm);
  line-height: 1.45;
}

@media (max-width: 79.99rem) {
  .td-mk .sb-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 60rem) {
  .td-mk .sb-feats {
    grid-template-columns: minmax(0, 1fr);
  }

  .td-mk .sb-feat:nth-child(even) {
    border-left: 0;
  }

  .td-mk .sb-feat:nth-child(n + 2) {
    border-top: 1px solid var(--td-border-default);
  }

  .td-mk .sb-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .td-mk .sb-feat {
    padding: var(--space-xl) 0;
  }

  .td-mk .sb-feat__shot {
    height: auto;
    max-height: 340px;
  }

  .td-mk .sb-index {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  /* On a phone each card is one row: the icon, the name over its line, the chevron */
  .td-mk .sb-index__card {
    grid-template-columns: 1.75em minmax(0, 1fr) auto;
    grid-template-areas: "icon name go" "icon line go";
    align-items: center;
    column-gap: var(--space-sm);
    padding: var(--space-md);
  }

  .td-mk .sb-index__top {
    display: contents;
  }

  .td-mk .sb-index__icon {
    grid-area: icon;
  }

  .td-mk .sb-index__go {
    grid-area: go;
  }

  .td-mk .sb-index__name {
    grid-area: name;
  }

  .td-mk .sb-index__line {
    grid-area: line;
  }
}

/* ---------- Games: every game's own mark, centred, on a band ---------- */

.td-mk .sb-games {
  padding-block: var(--section-gap-s);
  background: var(--td-surface-2);
  text-align: center;
}

.td-mk .sb-games h2 {
  margin-inline: auto;
}

.td-mk .sb-games__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
  max-width: 72rem;
  margin: var(--space-2xl) auto 0;
  padding: 0;
  list-style: none;
}

.td-mk .sb-games__logos a {
  display: block;
  padding: var(--space-2xs);
  border-radius: var(--td-radius-sm);
  transition: background-color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .sb-games__logos a:hover {
  background: var(--td-surface-3);
}

.td-mk .sb-games__logos a:active {
  background: var(--td-card-bg);
}

.td-mk .sb-games__logos img {
  display: block;
  width: auto;
  max-width: none;
  height: 44px;
}

.td-mk .sb-games__ask {
  margin-top: var(--space-2xl);
  color: var(--td-text-secondary);
}

/* ---------- Proof: the store strip, one verdict set large, then two organizers ---------- */

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

.td-mk .sb-pull {
  max-width: 54rem;
  margin: var(--space-2xl) 0 0;
}

.td-mk .sb-pull blockquote {
  margin: 0;
}

.td-mk .sb-pull blockquote p {
  max-width: none;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--td-text-primary);
  text-wrap: balance;
  hanging-punctuation: first;
}

.td-mk .sb-pull figcaption,
.td-mk .sb-quote figcaption {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-md);
}

.td-mk .sb-pull figcaption {
  margin-top: var(--space-lg);
}

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

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

.td-mk .sb-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
  margin-top: var(--space-2xl);
}

.td-mk .sb-quote {
  display: grid;
  align-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-xl);
}

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

.td-mk .sb-quote blockquote p {
  max-width: none;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--td-text-primary);
}

/* ---------- Questions: a band, each opening its answer in place ---------- */

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

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

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

.td-mk .sb-faq__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: start;
}

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

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

.td-mk .sb-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 .sb-faq__item summary::-webkit-details-marker {
  display: none;
}

.td-mk .sb-faq__item summary:hover {
  color: var(--td-accent);
}

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

.td-mk .sb-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 .sb-faq__item[open] .sb-faq__mark {
  transform: rotate(180deg);
}

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

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

/* ---------- Close: a split, the statement left, the action and the help right ---------- */

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

.td-mk .sb-close__grid {
  align-items: end;
  row-gap: var(--space-xl);
}

.td-mk .sb-close__text {
  grid-column: 1 / span 7;
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

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

.td-mk .sb-close .lead {
  text-wrap: balance;
}

.td-mk .sb-close__act {
  grid-column: 9 / span 4;
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.td-mk .sb-close__help {
  max-width: 48ch;
  color: var(--td-text-secondary);
}

/* ---------- After checkout ---------- */

.td-mk .sb-done {
  display: grid;
  align-items: center;
  min-height: calc(70svh - 76px);
  padding-block: var(--section-gap-s);
}

.td-mk .sb-done__text {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
  max-width: 44rem;
}

.td-mk .sb-done h1 {
  font-size: var(--text-section);
  letter-spacing: var(--tracking-section);
}

/* ---------- Under 80rem: the offer takes six columns ---------- */

@media (max-width: 79.99rem) {
  .td-mk .sb-plans__offer {
    grid-column: 7 / span 6;
  }

  .td-mk .sb-plan {
    padding: var(--space-xl);
  }
}

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

@media (max-width: 60rem) {
  .td-mk .sb-hero__text,
  .td-mk .sb-panel--hero,
  .td-mk .sb-plans__text,
  .td-mk .sb-plans__offer,
  .td-mk .sb-included,
  .td-mk .sb-close__text,
  .td-mk .sb-close__act {
    grid-column: 1 / -1;
  }

  .td-mk .sb-hero {
    min-height: 0;
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .td-mk .sb-panel--hero {
    width: 100%;
    max-width: 40rem;
  }

  /* The head, the offer, then what it includes */
  .td-mk .sb-plans__grid {
    grid-template-rows: none;
  }

  .td-mk .sb-plans__text,
  .td-mk .sb-plans__offer,
  .td-mk .sb-included {
    grid-row: auto;
  }

  .td-mk .sb-plans__offer,
  .td-mk .sb-included {
    max-width: 40rem;
  }

  .td-mk .sb-faq__list,
  .td-mk .sb-quotes {
    grid-template-columns: minmax(0, 1fr);
  }

  .td-mk .sb-faq__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .td-mk .sb-faq__item:last-child {
    border-bottom: 1px solid var(--td-border-default);
  }
}

/* ---------- Under 40rem: full-width actions, the terms under the trial ---------- */

@media (max-width: 40rem) {
  .td-mk .sb-hero h1 {
    font-size: clamp(2rem, 10.4vw, 2.75rem);
  }

  .td-mk .sb-hero__actions > .sb-cta {
    flex: 1 1 100%;
    justify-content: center;
  }

  .td-mk .sb-hero__actions > .sb-note {
    order: 1;
  }

  .td-mk .sb-hero__actions > .td-btn-secondary {
    order: 2;
  }

  .td-mk .sb-hero__proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .td-mk .sb-hero__proof > div {
    padding-inline: var(--space-sm);
  }

  .td-mk .sb-panel--hero {
    max-width: 26rem;
  }

  .td-mk .sb-plan {
    padding: var(--space-lg);
  }

  .td-mk .sb-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-self: stretch;
  }

  .td-mk .sb-plan .sb-cta {
    width: 100%;
  }

  .td-mk .sb-games__logos {
    gap: var(--space-sm) var(--space-md);
  }

  .td-mk .sb-games__logos img {
    height: 40px;
  }

  .td-mk .sb-pull blockquote p {
    font-size: var(--text-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-mk .sb-link,
  .td-mk .sb-switch label,
  .td-mk .sb-feat__link,
  .td-mk .sb-index__card,
  .td-mk .sb-index__go,
  .td-mk .sb-games__logos a,
  .td-mk .sb-faq__item summary,
  .td-mk .sb-faq__mark {
    transition: none;
  }
}