/* Fetch next to the others (index.html #fetch-compare): one row per service, Orbita's first and marked, prices
   from each service's own pricing pages (21.10.2026). On a phone the table scrolls inside its frame, never the
   page. The lower half of the Fetch card: the band and the table share one frame, so no stripe of page shows
   between them (23.10.2026). Tokens first. */
.fetch-compare{
  --fc-pad: clamp(14px, 2.2vw, 24px);
  --fc-us: color-mix(in srgb, var(--purple) 8%, var(--sheet));
  --fc-us-edge: var(--coral);
  --fc-yes: var(--ink);
  --fc-label: 500 9.5px/1.35 "DM Mono", monospace;
  --fc-num: 500 12.5px/1.35 "DM Mono", monospace;
}
:root[data-theme=dark] .fetch-compare{--fc-us:color-mix(in srgb, var(--purple) 16%, var(--sheet))}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .fetch-compare{--fc-us:color-mix(in srgb, var(--purple) 16%, var(--sheet))}}
.fetch-band:has(+ .fetch-compare){border-radius:7px 7px 0 0}
.fetch-compare{padding:var(--fc-pad);border:1px solid var(--line);border-top:0;border-radius:0 0 7px 7px;background:var(--sheet)}
.fc-head{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:28px;align-items:end;margin-bottom:12px}
.fc-head h3{margin:0;font-size:24px;line-height:1.02;letter-spacing:-.055em;text-wrap:balance}
.fc-head p{margin:0;max-width:640px;color:var(--muted);font-size:13.5px;line-height:1.45;text-wrap:pretty}
.fc-scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:5px}
.fc-scroll:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.fc-table{width:100%;border-collapse:collapse}
.fc-table col.fc-c1{width:22%}.fc-table col.fc-cn{width:13%}.fc-table col.fc-ct{width:16%}
.fc-table th,.fc-table td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.fc-table thead th{border-top:0;padding-top:2px;padding-bottom:8px;color:var(--faint);font:var(--fc-label);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:bottom}
/* "Price per 1,000 pages" sits over its three columns, so no price reads as the price of a whole site. */
.fc-table thead .fc-group{padding-bottom:6px;border-bottom:1px solid var(--line);color:var(--muted)}
.fc-table thead tr+tr th{padding-top:7px}
.fc-table tbody th{min-width:150px;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.fc-table tbody th small{display:block;max-width:230px;margin-top:4px;color:var(--muted);font:var(--fc-label);letter-spacing:0}
.fc-table td{color:var(--muted);font-size:13px;line-height:1.35}
.fc-table td.fc-num{color:var(--ink);font:var(--fc-num);font-variant-numeric:tabular-nums;white-space:nowrap}
/* On a phone the names stay put while the prices scroll under them. */
.fc-table tbody th,.fc-table thead tr:first-child th:first-child{position:sticky;left:0;z-index:1;background:var(--sheet)}
.fc-table .fc-us th,.fc-table .fc-us td{background:var(--fc-us)}
.fc-table .fc-us th{box-shadow:inset 3px 0 0 var(--fc-us-edge)}
.fc-table .fc-us .fc-num b{font-size:15px;font-weight:600}
.fc-table .fc-yes{color:var(--fc-yes);font-weight:600}
.fc-note{margin:12px 0 0;color:var(--faint);font:var(--fc-label);text-wrap:pretty}
/* Narrow windows and zoomed pages: headings wrap and cells tighten so the table fits down to about 700px
   without a scrollbar of its own; below that, on a phone, it scrolls inside its frame. */
@media(max-width:900px){.fc-table{min-width:600px}.fc-table thead th{white-space:normal}.fc-table th,.fc-table td{padding-left:9px;padding-right:9px}.fc-table tbody th{min-width:132px}}
@media(max-width:720px){.fc-head{grid-template-columns:1fr;gap:8px}.fc-head h3{font-size:21px}}