/* Tools page: every tool, its price, and how to connect an AI. Tokens only, from ../styles.css. */
/* where each lead paragraph starts: the second column of the grid that follows */
.section-head:has(+ .connect-grid) { --lead: 9; }
.section-head:has(+ .group-grid--pic-start) { --lead: 5; }
.section-head:has(+ .group-grid--pic-end) { --lead: 10; }
.section-head:has(+ .builders-grid) { --lead: 8; }

/* ---------- inline code in running text ---------- */
main :is(p, li, figcaption) code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--step-small); overflow-wrap: anywhere; }

/* ---------- hero: facts and the jump list ---------- */
.hero-facts { grid-column: 1 / -1; margin-block-start: var(--block-gap); display: grid; gap: 1.5rem; }
.hero-facts .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-facts .figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.trial-note { max-inline-size: 44ch; }
.section-head > p { max-inline-size: 44ch; }
.page-hero .page-actions { margin-block-start: 1rem; }
/* the line is there from the first paint (reading "Checking…"), so its result never pushes the page down; without JS
   the noscript note stands in for it */
.price-state { display: flex; align-items: center; }
html:not(.js) .price-state { display: none; }
.jump { grid-column: 1 / -1; margin-block-start: 1rem; }
.jump ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.jump a { display: inline-flex; align-items: center; min-block-size: 44px; }

/* ---------- tool tables ---------- */
.tools-table .name { font-weight: 400; }
.tool-name { font-weight: 500; }
.tools-table .tag-text { margin-inline-start: 0.5em; }
table.data.tools-table .sub { font-weight: 400; font-size: var(--step-body); line-height: 1.4; color: inherit; max-inline-size: 44ch; }
.tools-table .ids-val { display: block; }
.tools-table .ids code { display: block; white-space: nowrap; }
.tools-table .ids-val > * + * { margin-block-start: 0.3rem; }
.tools-table :is(.no-mcp, .ids-note) { display: block; font-size: var(--step-small); color: var(--muted); }
.tools-table .num { font-weight: 500; }
.page-section--dark .tools-table :is(.no-mcp, .ids-note) { color: var(--on-dark-muted); }

/* table beside a picture */
.group-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: start; }
.group-grid--pic-end > .table-wrap { grid-column: 1 / span 8; }
.group-grid--pic-end > .group-pic { grid-column: 10 / span 3; }
.group-grid--pic-start > .group-pic { grid-column: 1 / span 3; }
.group-grid--pic-start > div { grid-column: 5 / span 8; }
.group-grid > .group-pic { position: sticky; inset-block-start: calc(var(--header) + 24px); }
.group-pic img { inline-size: 100%; border-radius: var(--radius); }
.group-pic figcaption { margin-block-start: 1rem; font-size: var(--step-small); color: var(--muted); max-inline-size: 36ch; }
.sources { margin-block-start: 2rem; max-inline-size: 44ch; }

/* products and proof: two short tables side by side */
.pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--section); align-items: start; }
.pair-item:first-child { grid-column: 1 / span 6; }
.pair-item:last-child { grid-column: 8 / span 5; }
.pair-title { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
.pair-sub { margin-block: 1.25rem 2.5rem; max-inline-size: 40ch; }

/* ---------- connect: dark band ---------- */
.connect-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: start; }
.connect-main { grid-column: 1 / span 7; }
.connect-main > .connect:first-child { margin-block-start: 0; max-inline-size: 560px; }
.connect-note { margin-block-start: 1rem; max-inline-size: 44ch; }
.connect-band .connect-code { background: color-mix(in oklch, var(--field-1-ink) 8%, transparent); }
.connect-band .button--quiet { background: color-mix(in oklch, var(--field-1-ink) 16%, transparent); color: var(--field-1-ink); }
.connect-band .button--quiet:focus-visible { outline-color: currentColor; }
.connect-band .button--quiet:active { background: color-mix(in oklch, var(--field-1-ink) 30%, transparent); }
.connect-aside { grid-column: 9 / span 4; position: sticky; inset-block-start: calc(var(--header) + 24px); }
.connect-aside img { inline-size: min(100%, 320px); }
.connect-aside figcaption { margin-block-start: 1.5rem; display: grid; justify-items: start; gap: 0.75rem; max-inline-size: 36ch; }
.connect-aside b { font-weight: 500; }

.picker { margin-block-start: 3.5rem; display: grid; gap: 2rem var(--gutter); }
.picker.is-tabbed { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); }
.picker.is-tabbed .app-check { grid-column: 1 / -1; }
.app-tabs:not([hidden]) { display: grid; align-content: start; justify-items: start; gap: 0.25rem; }
.app-tab { display: grid; grid-template-columns: 0.35em auto; column-gap: 0.5em; align-items: baseline; padding-block: 0.4rem; font-size: var(--step-lead); line-height: 1.15; color: var(--on-dark-muted); transition: color var(--t-hover) var(--ease-out); }
.app-tab::before { content: ''; grid-row: 1; inline-size: 0.35em; block-size: 0.35em; border-radius: 50%; background: currentColor; opacity: 0; align-self: center; transition: opacity var(--t-hover) var(--ease-out); }
.app-tab span { grid-column: 2; font-size: var(--step-small); color: var(--on-dark-muted); }
.app-tab[aria-selected='true'] { color: var(--field-1-ink); }
.app-tab[aria-selected='true']::before { opacity: 1; }
.app-tab:active { opacity: 0.75; }
.app-tab:focus-visible { outline-color: currentColor; }
.app-panels { display: grid; gap: var(--block-gap); }
.picker.is-tabbed .app-panels { display: block; }
.app-panel[hidden] { display: none; }
.app-panel h3 { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; margin-block-end: 1rem; }
.app-panel > p + .connect, .app-panel > p + p { margin-block-start: 0.75rem; }
.app-panel .connect { margin-block-start: 0.75rem; }
.app-steps { padding-inline-start: 1.3em; display: grid; gap: 0.75rem; }
.app-steps ::marker { font-weight: 500; }
.app-steps li { max-inline-size: 44ch; }
.app-panel b, .app-check b { font-weight: 500; }
.app-note { margin-block-start: 1rem; color: var(--on-dark-muted); max-inline-size: 44ch; }
.app-check { max-inline-size: 44ch; }

/* ---------- how paying works ---------- */
.paying-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: center; }
.paying-copy { grid-column: 1 / span 6; }
.pay-steps { margin-block-start: 2.5rem; padding-inline-start: 1.3em; display: grid; gap: 2rem; }
.pay-steps li::marker { font-size: var(--step-lead); font-weight: 500; }
.pay-steps h3 { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; }
.pay-steps p { margin-block-start: 0.4rem; max-inline-size: 44ch; }
.paying-actions { margin-block-start: 2.5rem; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.paying-pic { grid-column: 8 / span 5; padding: clamp(24px, 3vw, 48px); background: var(--field-2); border-radius: var(--radius); display: grid; justify-items: center; gap: 1.25rem; }
.paying-pic img { inline-size: min(100%, 320px); }
.paying-pic figcaption { font-size: var(--step-small); max-inline-size: 36ch; text-align: center; }

/* ---------- for builders: tone band ---------- */
.builders-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: start; }
.builders-cmds { grid-column: 1 / span 6; }
.builders-refs { grid-column: 8 / span 5; }
.builders-title { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; }
.builders-cmds > p { margin-block-start: 1rem; max-inline-size: 44ch; }
.builders-cmds > .cmd-label { margin-block-start: 1.75rem; }
.builders-cmds > .connect { margin-block-start: 0.6rem; }
.cmd-label b { font-weight: 500; }
.page-section--tone .connect-code { background: light-dark(var(--card), var(--bg)); }
.page-section--tone .button--quiet { background: var(--surface); }
.page-section--tone .button--quiet:active { background: color-mix(in oklch, var(--bg), var(--ink) 10%); }
.ref-rows { margin-block-start: 1rem; }
.ref-rows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 44px; }
.ref-rows span { font-size: var(--step-small); color: var(--muted); text-align: end; }
.builders-note { margin-block-start: 2rem; max-inline-size: 44ch; }

/* ---------- sellers ---------- */
.sellers-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: start; }
.sellers-copy { grid-column: 1 / span 7; }
.sellers-copy > p { margin-block: 1.5rem 2.5rem; max-inline-size: 44ch; }
.sellers-pic { grid-column: 9 / span 4; }

@media (hover: hover) and (pointer: fine) {
  .app-tab:hover { color: var(--field-1-ink); }
  .connect-band .button--quiet:hover { background: color-mix(in oklch, var(--field-1-ink) 24%, transparent); }
  .page-section--tone .button--quiet:hover { background: var(--field-2); }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .group-grid--pic-end > .table-wrap, .group-grid--pic-start > div { grid-column: 1 / -1; }
  .group-grid > .group-pic { grid-column: 1 / span 6; position: static; }
  .group-grid--pic-start > .group-pic { grid-row: 2; }
  .group-pic img { max-inline-size: 26rem; }
  .pair-item:first-child, .pair-item:last-child { grid-column: 1 / -1; }
  .connect-main { grid-column: 1 / -1; }
  .connect-aside { grid-column: 1 / span 6; position: static; }
  .paying-copy { grid-column: 1 / -1; }
  .paying-pic { grid-column: 1 / span 8; }
  .builders-cmds, .builders-refs { grid-column: 1 / -1; }
  .sellers-copy { grid-column: 1 / -1; }
  .sellers-pic { grid-column: 1 / span 6; }
}

/* ---------- tables stack (shared .stack layout), with the routes under their label ---------- */
@media (max-width: 900px) {
  table.data.stack.tools-table tr:first-child { border-block-start: 2px solid currentColor; }
  table.data.stack.tools-table td.ids { display: block; text-align: start; padding-block: 8px 3px; }
  table.data.stack.tools-table td.ids::before { display: block; max-inline-size: none; margin-block-end: 4px; }
  .tools-table .ids code { white-space: normal; }
  .page-section--dark table.data.stack td::before { color: var(--on-dark-muted); }
  .connect-code { white-space: pre-wrap; overflow-wrap: anywhere; padding-block: 0.75rem; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .hero-facts { margin-block-start: 1.5rem; }
  .hero-facts .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-grid > .group-pic, .connect-aside, .sellers-pic, .paying-pic { grid-column: 1 / -1; }
  .picker.is-tabbed { grid-template-columns: minmax(0, 1fr); }
  .app-tabs:not([hidden]) { display: flex; gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; justify-items: normal; }
  .app-tab { flex: none; white-space: nowrap; }
  .app-tab span { display: none; }
  .paying-actions .button { inline-size: 100%; --btn-h: 52px; }
}