/* Dialed · Membership. Page layout only, loaded after site.css.
   Two things carry the page. The proof block draws one real black diamond on a time line — the sweep that found it, the
   window a member had, the morning it sold out, the Thursday the free list reads it — and then states the saving as
   arithmetic against the year price. The comparison is a four-column desk: the row names on the left and the three lanes
   beside them, every cell carrying a real value rather than a tick, the member lane a lit laminate tile with its price and
   its billing segment at the top. Below 821px the desk becomes three cards with the member card first. Every colour is a
   site.css token; nothing here switches membership on. */

[data-page="membership"] .lede { max-width: 66ch; }
[data-page="membership"] .bh { margin-bottom: var(--s4); }

/* ---------------------------------------------------------------- the proof: the timing, drawn */
.proof-sec { margin-top: var(--s8); }
.tl-fig { margin: 0 0 var(--s6); }
.tl { position: relative; width: 100%; min-width: 0; }
.tl svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl-fig[hidden] { display: none; }

/* the drawing's parts, each from a token: the day's axis and its break, the member's open window, the free list's wait,
   the grade glyph, and the board's three tabs (the amber sweep clock, the red GONE, the ink THURSDAY). */
.tl .tl-ax, .tl .tl-tick, .tl .tl-brk { stroke: var(--line); fill: none; }
.tl .tl-ax, .tl .tl-tick { stroke-width: 1; }
.tl .tl-brk { stroke-width: 1.5; }
.tl .tl-bar { stroke: var(--green); stroke-width: 10; stroke-linecap: butt; fill: none; }
.tl .tl-wait { stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; fill: none; }
.tl .tl-gl { fill: var(--g-black); stroke: var(--g-black); stroke-width: 1.5; stroke-linejoin: round; }
.tl .tl-lane { font-family: var(--font-semi); font-stretch: 100%; font-size: 12px; font-weight: 700; letter-spacing: .12em; fill: var(--fg-3); }
.tl .tl-word { font-family: var(--font-semi); font-stretch: 100%; font-size: 12px; font-weight: 800; letter-spacing: .14em; font-variant-numeric: tabular-nums lining-nums; }
.tl .tl-f-amber { fill: var(--amber); } .tl .tl-w-amber { fill: var(--on-amber); }
.tl .tl-f-red { fill: var(--red); } .tl .tl-w-red { fill: var(--on-red); }
.tl .tl-f-ink { fill: var(--fg); } .tl .tl-w-ink { fill: var(--bg); }

/* the three stops in words, under the drawing */
.tl-stops { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); border-top: 2px solid var(--fg); }
.tl-stop { margin: 0; padding-top: var(--s3); min-width: 0; }
.tl-stop .fig { font-size: var(--t3); }
.tl-stop p { margin: var(--s2) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--fg-2); }
.tl-cap { margin: var(--s3) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--fg-2); max-width: 72ch; }
.tl-cap .glyph { margin-right: 3px; }

/* ---------------------------------------------------------------- the proof: the money, as arithmetic */
/* the totals block's tint and figures, re-laid as MSRP less today is saved, against the year; the operators are words */
.sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5); padding: var(--s4) var(--s5) var(--s4); }
.sum .fig { font-size: var(--t4); }
.sum-op { font-family: var(--font-semi); font-stretch: 100%; font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tint-fg); align-self: center; }
.sum figcaption { flex: 1 1 100%; font-size: var(--t-1); line-height: 1.5; margin: 0; color: var(--tint-fg); }
.sum figcaption .glyph { margin-right: 3px; }
/* the sweep clock is the board's: amber is a fill with ink on it, so the time sits on the band. In First Chair the band and
   the tint are near one colour, so it moves to a lit tile (the Amber Fill Rule); the dark selectors mirror site.css. */
.sum .fig.sweep { display: inline-block; padding: 1px 7px 2px; margin: 0 0 0 1px; font-size: var(--t1); vertical-align: -2px; border-radius: var(--radius); background: var(--band); color: var(--amber); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sum .fig.sweep { background: var(--tile); color: var(--tile-fg); } }
:root[data-theme="dark"] .sum .fig.sweep { background: var(--tile); color: var(--tile-fg); }

.proof-tag { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-2); line-height: 1.5; color: var(--fg-3); margin: var(--s3) 0 0; max-width: 84ch; }
.proof-tag .tab { flex: none; }

/* ---------------------------------------------------------------- the comparison: three lanes, row by row */
.cmp-sec { margin-top: var(--s5); }

/* the phone reading, and the floor for anything without subgrid: three cards, the member card first, each row a name
   beside its value. */
.cmp { display: flex; flex-direction: column; gap: var(--s4); }
.cmp-keys { display: none; }
.cmp-lane { min-width: 0; padding: var(--s4); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule); }
.cmp-lane[data-lane="member"] { order: -1; background: var(--bg); box-shadow: inset 0 0 0 2px var(--fg); }

.cmp-top h3 { font-size: var(--t2); margin: 0; }
.cmp-price { margin: var(--s2) 0 0; }
.cmp-price .fig { font-size: var(--t6); }
.cmp-sub { margin: var(--s3) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--fg-2); max-width: 44ch; }
.cmp-top .seg { margin-top: var(--s3); }
.cmp-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s4) 0 var(--s4); }
.cmp-act .tab[hidden] { display: none; }
.cmp-note { margin: 0; font-size: var(--t-1); font-weight: 600; line-height: 1.4; color: var(--fg-2); }
.cmp-act .btn { white-space: normal; text-align: center; text-wrap: balance; padding-block: 8px; }
.cmp-lane.is-current .lane-act { display: none; }

.cmp-cell { margin: 0; padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--s3); align-items: start; }
.cmp-lane > .cmp-cell:first-of-type { border-top: 2px solid var(--fg); }
.cmp-lane > .cmp-cell:last-child { border-bottom: 0; padding-bottom: 0; }
.cmp-k { font-family: var(--font-semi); font-stretch: 100%; font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; color: var(--fg-2); }
.cmp-v { display: block; font-size: var(--t0); font-weight: 700; line-height: 1.3; color: var(--fg); text-wrap: pretty; }
.cmp-n { display: block; margin-top: 5px; font-size: var(--t-1); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.cmp-lane[data-lane="member"] .cmp-v { font-weight: 800; }
/* a drawn mark, not a glyph character, and only where the row is genuinely yes or no */
.cmp-mk { width: .78em; height: .78em; margin-right: 6px; vertical-align: -.02em; flex: none; }
.cmp-no { color: var(--fg-3); }
.cmp-yes { color: var(--fg); }

.cmp-fine { margin: var(--s5) 0 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg-3); max-width: 84ch; }

/* ---------------------------------------------------------------- the desk, from 821px up */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 821px) {
    /* one grid: the row names, then the three lanes. Each lane takes the grid's own rows through subgrid, so a row's
       name and its three values sit on one line however long the copy runs. */
    .cmp { display: grid; grid-template-columns: minmax(0, .62fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto repeat(9, auto); column-gap: var(--s2); align-items: stretch; }
    .cmp-keys, .cmp-lane { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
    .cmp-keys { display: grid; grid-column: 1; padding-right: var(--s4); }
    .cmp-lane { padding: 0 var(--s4); border-radius: 0; box-shadow: none; }
    .cmp-lane[data-lane="free"] { grid-column: 2; }
    .cmp-lane[data-lane="member"] { grid-column: 3; order: 0; border-radius: var(--radius); background: var(--bg); box-shadow: inset 0 0 0 2px var(--fg); }
    .cmp-lane[data-lane="founding"] { grid-column: 4; }

    .cmp-key { margin: 0; padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--rule); font-family: var(--font-semi); font-stretch: 100%; font-size: var(--t1); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; color: var(--fg); }
    .cmp-keys > .cmp-key:first-of-type { border-top: 2px solid var(--fg); }
    .cmp-keys > .cmp-key:last-child { border-bottom: 0; }
    .cmp-lane > .cmp-cell:last-child { padding-bottom: var(--s4); }

    .cmp-top { padding: var(--s4) 0 var(--s2); }
    .cmp-cell { display: block; }
    .cmp-k { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  }
  /* between 821 and 1100 a column is too narrow for two prices side by side; the segment stacks and keeps its 44px cells */
  @media (min-width: 821px) and (max-width: 1100px) {
    .cmp-top .seg { flex-direction: column; align-items: stretch; }
    .cmp-top .seg button + button { border-left: 0; border-top: 1.5px solid var(--line); }
    .cmp-price .fig { font-size: var(--t5); }
    .cmp-key { font-size: var(--t0); }
  }
}

/* ---------------------------------------------------------------- the promise and the questions */
.mem-prose { margin-top: var(--s8); }
.mem-prose > h2:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- breakpoints */
@media (max-width: 820px) {
  .proof-sec, .mem-prose { margin-top: var(--s7); }
  .tl-stops { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tl-stop { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  .tl-stops > .tl-stop:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 560px) {
  .sum { padding: var(--s4); gap: var(--s3) var(--s4); }
  .sum .fig { font-size: var(--t3); }
  .cmp-price .fig { font-size: var(--t5); }
  .cmp-lane { padding: var(--s4) var(--s3); }
  .cmp-cell { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .cmp-act .btn { width: 100%; }
  .cmp-top .seg { display: flex; }
  .cmp-top .seg button { flex: 1 1 0; }
}

/* ===== motion. Tokens from site.css :root; every rule has its reduced-motion path at the end. ===== */
/* the time line is the price chart's moment, in the same vocabulary: the member's window draws along its own length over
   --dur-3, then the marks, the tabs and the free list's wait land after it over --dur-2. It runs on the first paint and on
   new data only; a resize redraw paints the end state. */
.tl .tl-bar.is-draw { stroke-dasharray: var(--len); animation: m-dash var(--dur-3) var(--ease-out) both; }
.tl .is-land { animation: m-land var(--dur-2) var(--ease-out) both; animation-delay: var(--dur-3); transform-box: fill-box; transform-origin: center; }
.tl .is-fade { animation: m-fade var(--dur-2) ease-out both; animation-delay: var(--dur-3); }
/* the lane the viewer is in wears the CURRENT tab; the member lane's ring and fill are the emphasis, not a state */
.cmp-lane { transition: box-shadow var(--dur-2) ease-out, background-color var(--dur-2) ease-out; }

@media (prefers-reduced-motion: reduce) {
  .tl .tl-bar.is-draw, .tl .is-land, .tl .is-fade { animation: none; }
  .tl .tl-bar.is-draw { stroke-dasharray: none; }
  .cmp-lane { transition: none; }
}