/* thetonnageclub.com: membership page. Loads after site.css and markets.css. */

.lede { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 36px 0 30px; border-bottom: 1px solid var(--rule); align-items: end; }
.lede h1 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 12px; text-wrap: balance; max-width: 22ch; }
.lede .lead { font-size: 17px; line-height: 1.5; max-width: 60ch; }
.lede .side { font-size: 14px; color: var(--slate); }
.lede .side b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.lede .side .btn { margin-top: 12px; }
.btn.sm { padding: 8px 12px; font-size: 13px; }

.msec { padding: 26px 0; border-top: 1px solid var(--rule); }
.msec .label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); font-weight: 600; margin: 0 0 14px; }

.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.steps .step-no { font-size: 12px; color: var(--accent); }
.steps h3 { font-size: 16px; margin: 4px 0 6px; }
.steps p { margin: 0; font-size: 14px; color: var(--slate); }

.month { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
.month > div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.month .v { font-size: 30px; font-weight: 500; line-height: 1.1; }
.month .l { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); margin-top: 4px; }
.fine { font-size: 13px; color: var(--slate); margin: 10px 0 0; max-width: 70ch; }

.plan { display: grid; grid-template-columns: 1fr; gap: 24px; }
.plan .price { font-size: 34px; font-weight: 500; line-height: 1.1; }
.plan .price small { font-size: 14px; color: var(--slate); font-weight: 400; margin-left: 4px; }
.plan .one { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); margin: 6px 0 14px; }
.incl { list-style: none; margin: 0; padding: 0; }
.incl li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.incl li::before { content: "\2713"; font-family: var(--mono); color: var(--accent); }
.guar { border: 1px solid var(--ink); border-radius: 2px; padding: 14px 16px; margin-top: 16px; }
.guar b { display: block; font-weight: 600; margin-bottom: 4px; }
.guar p { margin: 0; font-size: 14px; color: var(--slate); }

table.cmp { border-collapse: collapse; width: 100%; font-size: 15px; max-width: 560px; }
table.cmp td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--rule); }
table.cmp td.d { text-align: right; white-space: nowrap; }
table.cmp tr.total td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 600; }
table.cmp tr.us td { font-weight: 600; }
table.cmp tr.us td.d { color: var(--accent); }
table.cmp caption { text-align: left; font-size: 13px; color: var(--slate); caption-side: bottom; padding-top: 8px; }

.why { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.why p { margin: 0; max-width: 60ch; }
.why .map-cta { border: 1px solid var(--rule); border-radius: 2px; padding: 16px; }
.why .map-cta b { display: block; font-weight: 600; margin-bottom: 4px; }
.why .map-cta p { font-size: 14px; color: var(--slate); margin-bottom: 10px; }

@media (min-width: 880px) {
  .lede { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; }
  .lede .side { border-left: 1px solid var(--rule); padding-left: 24px; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .steps > div { padding-right: 20px; border-right: 1px solid var(--rule); margin-right: 20px; }
  .steps > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .month { grid-template-columns: repeat(3, 1fr); }
  .month > div { padding: 14px 20px 14px 0; border-right: 1px solid var(--rule); border-bottom: 0; margin-right: 20px; }
  .month > div:last-child { border-right: 0; margin-right: 0; }
  .plan { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
  .why { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
}