/* "Your options" (18 October 2026): doing it yourself, an agency or freelancer, and Bots & Pieces,
   side by side. Built by scripts/build-marketing-pages.mjs from content/options.json, on the service
   pages and the Automations and AI guide. Colours come only from the site tokens, so light, dark and
   glass all work. On a phone each row becomes its own card, with the column name above each answer,
   so the page never scrolls sideways. */
.svc-options{padding:55px 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.svc-options h2{margin:0;text-wrap:balance}
.svc-options .opt-intro{margin:10px 0 24px;color:var(--ink-soft)}
.opt-scroll{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.opt-table{width:100%;border-collapse:collapse;font-size:.94rem;line-height:1.45}
.opt-table th,.opt-table td{padding:14px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.opt-table thead th{border-top:0;background:var(--brand);color:var(--on-brand);font:600 .8rem/1.3 var(--body);letter-spacing:.02em}
.opt-table tbody th{width:19%;font-weight:600;color:var(--ink)}
.opt-table td{color:var(--ink-soft)}
.opt-table td.opt-us{color:var(--ink);font-weight:600;background:var(--glow);box-shadow:inset 3px 0 0 var(--signal)}
.opt-table thead th.opt-us{box-shadow:inset 3px 0 0 var(--signal)}
.opt-table td.opt-us a{color:var(--signal-text);font-weight:600;text-underline-offset:3px;white-space:nowrap}
.opt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.svc-options .opt-note{margin:14px 0 0;font-size:.86rem;color:var(--ink-soft);max-width:70ch}
.opt-sources{margin-top:10px;font-size:.86rem;color:var(--ink-soft)}
.opt-sources summary{cursor:pointer;width:fit-content;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--signal-text);text-underline-offset:3px}
.opt-sources summary:hover{text-decoration:underline}
.opt-sources summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
.opt-sources ul{margin:4px 0 0;padding-left:20px}
.opt-sources li+li{margin-top:4px}

/* Phones and narrow tablets: one card per row. The header row is hidden from sight only, and each
   answer carries its column name (data-col) above it. */
@media (max-width:760px){
  .svc-options{padding:40px 0}
  .opt-scroll{border:0;border-radius:0;background:none;overflow:visible}
  .opt-table,.opt-table tbody,.opt-table tr,.opt-table th,.opt-table td{display:block;width:auto}
  .opt-table thead tr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .opt-table tbody{display:grid;gap:12px}
  .opt-table tbody tr{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
  .opt-table tbody th{width:auto;border-top:0;padding:14px 16px 6px;font:600 1.02rem/1.3 var(--body)}
  .opt-table td{padding:10px 16px}
  .opt-table td::before{content:attr(data-col);display:block;margin-bottom:2px;font:700 .7rem/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid)}
  .opt-table td.opt-us::before{color:var(--signal-text)}
  .opt-table td.opt-us a{white-space:normal}
}