/* alt-modash: arranges landing-system pieces. The podium lives in the hero illustration only; the page is a ranked list. */
.bespoke-alt-modash .table-wrap { border: 0; border-radius: 0; background: none; margin: 0; overflow: visible; }
.bespoke-alt-modash a.ls-btn { color: #fff; text-decoration: none; }
.bespoke-alt-modash a.ls-btn--ghost { color: var(--ls-ink); }
.bespoke-alt-modash .ma-note { margin: 12px 0 0; }

/* hero illustration: a podium */
.bespoke-alt-modash .ma-hero-illo { margin: 0; }
.bespoke-alt-modash .ma-o * { stroke: var(--ls-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.bespoke-alt-modash .ma-o .f-paper { fill: var(--ls-paper); }
.bespoke-alt-modash .ma-o .f-blue { fill: var(--ls-blue); }
.bespoke-alt-modash .ma-o .f-peach { fill: var(--ls-peach); }
.bespoke-alt-modash .ma-o .f-yellow { fill: var(--ls-yellow); }
.bespoke-alt-modash .ma-o .f-mint { fill: var(--ls-mint); }
.bespoke-alt-modash .ma-o .f-lav { fill: var(--ls-lavender); }
.bespoke-alt-modash .ma-t text { font-family: var(--ls-font); font-size: 40px; font-weight: 800; fill: var(--ls-ink); }

/* short answer */
.bespoke-alt-modash .ma-short-h { font-size: clamp(26px, 2.6vw, 34px); }
.bespoke-alt-modash .ma-pick { border: 2px solid var(--ls-ink); }
.bespoke-alt-modash .ma-pick .ls-tag { margin-bottom: 14px; }
.bespoke-alt-modash .ma-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.bespoke-alt-modash .ma-ticks li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.45; color: var(--ls-ink); }
.bespoke-alt-modash .ma-ticks li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 3px solid var(--ls-blue-deep); border-bottom: 3px solid var(--ls-blue-deep); transform: rotate(-45deg); }
.bespoke-alt-modash .ma-stay { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--ls-radius-sm); background: var(--ls-lavender-tint); font-size: 16px; line-height: 1.5; color: var(--ls-text); }
.bespoke-alt-modash .ma-stay .ls-tag { margin-right: 8px; }

/* the ranking */
.bespoke-alt-modash .ma-rank { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.bespoke-alt-modash .ma-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0; background: var(--ls-paper); border: 1.5px solid var(--ls-line); border-radius: var(--ls-radius); overflow: hidden; }
.bespoke-alt-modash .ma-num { display: flex; align-items: flex-start; justify-content: center; padding-top: 24px; background: var(--ls-cream); border-right: 1.5px solid var(--ls-line); font-size: 44px; font-weight: 800; line-height: 1; color: var(--ls-ink); letter-spacing: -.03em; }
.bespoke-alt-modash .ma-body { padding: 24px 28px; min-width: 0; }
.bespoke-alt-modash .ma-body h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.bespoke-alt-modash .ma-best { font-size: 17px; color: var(--ls-ink); margin: 0 0 12px; }
.bespoke-alt-modash .ma-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bespoke-alt-modash .ma-facts div { border-top: 2px solid var(--ls-ink); padding-top: 8px; }
.bespoke-alt-modash .ma-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-muted); }
.bespoke-alt-modash .ma-facts dd { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ls-text); }
.bespoke-alt-modash .ma-body .ls-source { margin: 12px 0 0; }
.bespoke-alt-modash .ma-item--us { border: 2px solid var(--ls-ink); background: var(--ls-blue-tint); }
.bespoke-alt-modash .ma-item--us .ma-num { background: var(--ls-yellow); border-right: 2px solid var(--ls-ink); font-size: 56px; }
.bespoke-alt-modash .ma-proof { list-style: none; margin: 18px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bespoke-alt-modash .ma-proof li { background: var(--ls-paper); border-radius: var(--ls-radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.bespoke-alt-modash .ma-proof b { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ls-blue-deep); }
.bespoke-alt-modash .ma-proof span { font-size: 14px; line-height: 1.4; color: var(--ls-muted); }

/* price ladder */
.bespoke-alt-modash .ma-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.bespoke-alt-modash .ma-chart { margin: 0; }
.bespoke-alt-modash .ma-chart h3 { margin: 0 0 16px; }
.bespoke-alt-modash .ma-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bespoke-alt-modash .ma-bars li { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) 3.2em; gap: 12px; align-items: center; }
.bespoke-alt-modash .ma-bn { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ls-ink); }
.bespoke-alt-modash .ma-bn small { display: block; font-weight: 500; font-size: 12px; color: var(--ls-muted); }
.bespoke-alt-modash .ma-track { display: block; height: 22px; border-radius: 7px; background: var(--ls-cream); min-width: 0; }
.bespoke-alt-modash .ma-fill { display: block; height: 100%; border-radius: 7px; background: var(--ls-blue); }
.bespoke-alt-modash .ma-us .ma-fill { background: var(--ls-blue-deep); }
.bespoke-alt-modash .ma-bars b { text-align: right; font-size: 16px; color: var(--ls-ink); font-variant-numeric: tabular-nums; }

/* one creator, two readings */
.bespoke-alt-modash .ma-reading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: center; margin: 26px 0 22px; }
.bespoke-alt-modash .ma-reading .ls-tag { margin-bottom: 14px; }
.bespoke-alt-modash .ma-big { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.bespoke-alt-modash .ma-big b { font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ls-ink); }
.bespoke-alt-modash .ma-big span { font-size: 15px; color: var(--ls-muted); }
.bespoke-alt-modash .ma-arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ls-yellow); border: 2px solid var(--ls-ink); font-size: 24px; font-weight: 800; color: var(--ls-ink); }

/* table */
.bespoke-alt-modash .ma-table th[scope="row"] { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ls-ink); background: transparent; border-bottom: 1px solid var(--ls-line); vertical-align: top; }
.bespoke-alt-modash .ma-table tr.is-us th[scope="row"] { background: var(--ls-blue-tint); }
.bespoke-alt-modash .ma-table tr.ma-ref td, .bespoke-alt-modash .ma-table tr.ma-ref th { background: var(--ls-lavender-tint); }

/* jobs */
.bespoke-alt-modash .ma-jobs { list-style: none; margin: 22px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.bespoke-alt-modash .ma-job { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ls-line); }
.bespoke-alt-modash .ma-job b { font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ls-text); }
.bespoke-alt-modash .ma-job span { flex: none; font-weight: 800; font-size: 15px; color: var(--ls-ink); text-align: right; }
.bespoke-alt-modash .ma-job--us span { background: var(--ls-yellow); border-radius: 999px; padding: 2px 10px; }

/* try it */
.bespoke-alt-modash .ma-try { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.bespoke-alt-modash .ls-prompt p { margin: 0 0 14px; }

@media (max-width: 960px) {
  .bespoke-alt-modash .ma-two, .bespoke-alt-modash .ma-try { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bespoke-alt-modash .ma-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bespoke-alt-modash .ma-jobs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bespoke-alt-modash .ma-hero-illo { padding: 12px; }
  .bespoke-alt-modash .ma-ticks { grid-template-columns: minmax(0, 1fr); }
  .bespoke-alt-modash .ma-item { grid-template-columns: minmax(0, 1fr); }
  .bespoke-alt-modash .ma-num { justify-content: flex-start; padding: 12px 22px; border-right: 0; border-bottom: 1.5px solid var(--ls-line); font-size: 32px; }
  .bespoke-alt-modash .ma-item--us .ma-num { font-size: 36px; border-right: 0; border-bottom: 2px solid var(--ls-ink); }
  .bespoke-alt-modash .ma-body { padding: 18px 20px 20px; }
  .bespoke-alt-modash .ma-proof { grid-template-columns: minmax(0, 1fr); }
  .bespoke-alt-modash .ma-bars li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .bespoke-alt-modash .ma-bars .ma-track { grid-column: 1 / -1; grid-row: 2; }
  .bespoke-alt-modash .ma-reading { grid-template-columns: minmax(0, 1fr); }
  .bespoke-alt-modash .ma-arrow { justify-self: center; transform: rotate(90deg); }
  .bespoke-alt-modash .ma-big b { font-size: 30px; }
  .bespoke-alt-modash .ma-job { flex-direction: column; gap: 4px; }
  .bespoke-alt-modash .ma-job span { text-align: left; }
  .bespoke-alt-modash .ls-table-wrap { border: 0; background: none; overflow: visible; }
  .bespoke-alt-modash .ma-table, .bespoke-alt-modash .ma-table tbody, .bespoke-alt-modash .ma-table tr, .bespoke-alt-modash .ma-table td, .bespoke-alt-modash .ma-table th[scope="row"] { display: block; width: auto; }
  .bespoke-alt-modash .ma-table thead { display: none; }
  .bespoke-alt-modash .ma-table tr { background: var(--ls-paper); border: 1.5px solid var(--ls-line); border-radius: var(--ls-radius-sm); margin-bottom: 12px; overflow: hidden; }
  .bespoke-alt-modash .ma-table th[scope="row"] { background: var(--ls-cream); font-size: 17px; }
  .bespoke-alt-modash .ma-table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-muted); }
  .bespoke-alt-modash .ma-table tr td:last-child { border-bottom: 0; }
}