/* The preview card (atlas M1): white, a 1 px line as its boundary, 0 radius, padding 24. A size container: under
   440 px the sample leaves the audience row; under 320 px it is compact (padding 16, the question at 17, no audience
   row, no persona). A card that links somewhere rises 1 px over a 1 px ink-3 line on hover, as a button does. */
.m1 { container-type: inline-size; position: relative; display: block; background: var(--page); color: var(--ink); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 var(--ink-3); transition: transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease); }
.m1.is-link { cursor: pointer; }
.m1.is-link:hover, .m1.is-link.is-hover, [data-state="hover"] .m1.is-link { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--ink-2), 0 1px 0 0 var(--ink-3); }
.m1.is-link:active, .m1.is-link.is-active { transform: none; box-shadow: inset 0 0 0 1px var(--ink); transition: none; }
.m1.is-link:focus-visible, .m1.is-link.is-focus, [data-state="focus"] .m1.is-link { outline: 2px solid var(--ink); outline-offset: 3px; }
.m1 .in { padding: var(--s5); }
.m1 .tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.m1 .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s2); box-shadow: inset 0 0 0 1px var(--line); font: 500 var(--label)/1 var(--sans); color: var(--ink); white-space: nowrap; }
.m1 .mq { margin-top: var(--s5); font: 400 24px/1.3 var(--serif); letter-spacing: -0.005em; text-wrap: balance; text-box: trim-both cap alphabetic; }
/* The audience row: the population icon, the audience, the Breakdown chip, the sample at the right; a hairline under. */
.m1 .aud { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s3); min-height: 44px; box-shadow: inset 0 -1px 0 var(--line); color: var(--ink); }
.m1 .aud .ico { flex: none; }
.m1 .aud .ui { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-box: none; line-height: 1.4; }
.m1 .aud .chip { height: 28px; margin: 8px 0; flex: none; font-size: 14px; }
.m1 .aud .an { margin-left: auto; white-space: nowrap; }
.m1 .view { margin-top: var(--s5); }
.m1 .ms { margin-bottom: var(--s4); font: 400 14px/1 var(--sans); color: var(--ink-2); text-box: trim-both cap alphabetic; }
.m1 .smp { margin-top: var(--s5); text-wrap: pretty; }
/* The proof body: the three rows of A.proof inside the card. */
.m1 .v-proof .ch-tally, .m1.v-proof .ch-tally { row-gap: var(--s5); }
.m1.v-proof .ch-tally.big .tv { font-size: 17px; }

/* Rows: two text options or a ranked list. The mark in label style, the option in Switzer 15, its share right-aligned in
   Switzer 500 tabular 17, the tally 12 below. */
.m1 .opts { display: grid; row-gap: var(--s5); }
.m1 .oh { display: flex; align-items: baseline; gap: var(--s3); }
.m1 .om { font: 500 var(--label)/1 var(--sans); color: var(--ink-2); min-width: 1.2ch; }
.m1 .ot { flex: 1; font: 400 var(--ui)/1.35 var(--sans); color: var(--ink); min-width: 0; text-wrap: pretty; }
.m1 .n { font-size: 17px; }
.m1 .opt .ch-meter { margin-top: var(--s3); }

/* Two tested pages side by side, each a size container so its text scales with it. */
.m1 .imgs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s3); }
.m1 .img .cap { margin-top: var(--s3); text-box: trim-both cap alphabetic; color: var(--ink-2); }
.m1 .im { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: end; margin-top: var(--s3); }
.pg { container-type: inline-size; aspect-ratio: 16 / 10; box-shadow: inset 0 0 0 1px var(--line); padding: 7% 8%; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; }
.pg .pgb { width: 100%; display: flex; align-items: center; gap: 4%; }
.pg .pgb b { font: 500 5cqw/1 var(--sans); margin-right: auto; }
.pg .pgb i { width: 8%; height: 1px; background: var(--ink-3); }
.pg .pgh { margin-top: auto; font: 400 9cqw/1.08 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.pg .pgs { margin-top: 4%; font: 400 4.6cqw/1.35 var(--sans); color: var(--ink-2); }
.pg .pgc { margin-top: 7%; margin-bottom: auto; background: var(--ink); color: var(--page); font: 500 4.4cqw/1 var(--sans); padding: 3.2% 5%; }

/* One number over its distribution. */
.m1 .one .big { font-size: 48px; text-box: trim-both cap alphabetic; }
.m1 .one .bl { margin-top: var(--s2); color: var(--ink-2); font-weight: 400; }
.m1 .ccurve { margin-top: var(--s5); height: min(96px, 22cqw); }   /* held before it is drawn; card.js draws at this height */
.m1 .ccurve > svg { display: block; }
.m1 .one .ch-axis { margin-top: var(--s3); }

/* Two prices. */
.m1 .prices { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
.m1 .pp { font: 500 36px/1 var(--sans); font-feature-settings: var(--num-features); text-box: trim-both cap alphabetic; white-space: nowrap; }
.m1 .pv { letter-spacing: var(--num-ls); }
.m1 .pp .pu { font: 400 var(--ui)/1 var(--sans); color: var(--ink-2); }
.m1 .price .im { margin-top: var(--s4); }

/* The breakdown inside a card: a tighter grid, the persona hidden while it is open (card.js). */
.m1 .bdv .ch-grid .gn .ui { font-size: 14px; }

/* narrow, the audience wraps to a second line rather than ending in an ellipsis beside the chip (marketing at 390) */
@container (max-width: 439px) { .m1 .aud .an { display: none; } .m1 .aud .ui { white-space: normal; } }
@container (max-width: 319px) {
  .m1 .in { padding: var(--s4); }
  .m1 .tag:not(:last-child) { display: none; }
  .m1 .mq { margin-top: var(--s4); font-size: 17px; line-height: 1.3; }
  .m1 .aud, .m1 .ch-persona { display: none; }
  .m1 .view { margin-top: var(--s4); }
  .m1 .opts { row-gap: var(--s4); }
  .m1 .ot { font-size: 14px; }
  .m1 .n { font-size: 15px; }
  .m1 .opt .ch-meter, .m1 .im { margin-top: var(--s2); }
  .m1 .pp { font-size: 24px; }
  .m1 .pp .pu { display: block; margin-top: var(--s2); text-box: trim-both cap alphabetic; }
  .m1 .prices { column-gap: var(--s3); }
  .m1 .one .big { font-size: 36px; }
  .m1 .smp { margin-top: var(--s4); }
}