/* TOLLkit v2 — wallet page. Uses the shared tokens only. */
.section-head:has(+ .w-pair--flip) { --lead: 8; } /* leads start where the second column below starts */
.section-head:has(+ .w-rules) { --lead: 9; }

/* a picture beside its text; the picture leads unless the pair is flipped */
.w-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: center; }
.w-pair > .w-stage { grid-column: 1 / span 5; }
.w-pair > .w-pair-text { grid-column: 7 / span 6; }
.w-pair--flip > .w-pair-text { grid-column: 1 / span 6; grid-row: 1; }
.w-pair--flip > .w-stage { grid-column: 8 / span 5; grid-row: 1; }

/* the wallet's screens sit on a filled stage, never wider than 400px */
.w-stage { padding: clamp(24px, 3vw, 48px); background: var(--field-2); border-radius: var(--radius); display: grid; justify-items: center; gap: 1rem; }
.w-stage--quiet { background: var(--surface); }
.w-stage img { inline-size: 100%; max-inline-size: 400px; }
/* side by side, a screen is sized to the window's height so the text beside it isn't left floating in empty space */
@media (min-width: 1101px) {
  .w-stage img { block-size: min(72svh, 820px); inline-size: auto; max-inline-size: 100%; }
}
.w-stage figcaption { justify-self: stretch; font-size: var(--step-small); }
.page-section--dark .w-stage { background: color-mix(in oklch, var(--field-1-ink) 8%, transparent); }

/* overview */
.w-features { margin-block-start: 2rem; }
.w-features .val { text-align: end; }

/* lists of running text */
.w-list { list-style: disc; padding-inline-start: 1.2em; display: grid; gap: 0.85rem; }
.w-note { margin-block-start: 2rem; max-inline-size: 52ch; }
.w-more { margin-block-start: 2rem; }
.w-pair-text .figures { margin-block-end: 2.5rem; }

/* Autopilot: the half-hour cycle, then four plain facts */
.w-cycle { padding-inline-start: 1.4em; display: grid; gap: 1rem; font-size: var(--step-lead); line-height: 1.3; }
.w-cycle li::marker { color: var(--on-dark-muted); }
.w-facts { margin-block-start: var(--block-gap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gutter); }
.w-facts dt { font-weight: 500; }
.w-facts dd { margin-block-start: 0.4rem; }

/* Connect your AI */
.w-sub { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; margin-block-end: 1rem; }
.w-sub:not(:first-child) { margin-block-start: 2.5rem; }
.w-steps { padding-inline-start: 1.4em; display: grid; gap: 0.6rem; }

/* two-ended rows of plain text */
.w-ends { display: grid; gap: 0.25rem; }
.w-ends li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; flex-wrap: wrap; padding-block: 0.6rem; }
.w-ends li > :first-child { font-weight: 500; }
.w-ends li > :last-child { text-align: end; }

/* Limits: the vault across the page, then six rules */
.w-vault { block-size: 62svh; overflow: clip; }
.w-vault img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; }
.w-vault-credit { margin-block: 0.75rem var(--block-gap); }
.w-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--block-gap) var(--gutter); } /* thirds of the twelve columns, so the lead above lines up */
.w-rules dt { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; }
.w-rules dd { margin-block-start: 0.6rem; max-inline-size: 40ch; }

/* Fees: row headers read as names, not as column labels */
.w-fees tbody th { inline-size: 50%; /* with the half gutter in styles.css, the lead above starts on the next column */ padding-block: 14px; padding-inline-end: 1.5rem; font-size: var(--step-body); color: var(--ink); white-space: normal; vertical-align: top; border-block-end: 1px solid var(--line); }
.w-caveat { margin-block-start: 2.5rem; max-inline-size: 62ch; }

/* Get it and help */
.w-end { padding-block-start: var(--section); }
.w-end-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--section); align-items: start; }
.w-end-grid > :first-child { grid-column: 1 / span 6; }
.w-end-grid > :last-child { grid-column: 8 / span 5; }
.w-end-grid p { margin-block-start: 1.5rem; max-inline-size: 48ch; }
.w-end-grid .w-ends { margin-block-start: 1.5rem; }
.w-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .w-pair > .w-stage, .w-pair > .w-pair-text, .w-pair--flip > .w-pair-text, .w-pair--flip > .w-stage { grid-column: 1 / -1; grid-row: auto; }
  .w-pair > .w-stage { order: 2; }
  .w-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-end-grid > :first-child, .w-end-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .w-facts, .w-rules { grid-template-columns: 1fr; }
  .w-vault { block-size: 40svh; }
  .w-vault-credit { margin-block-end: 2.5rem; }
  .w-fees tbody th { inline-size: auto; }
}