/* ===== Services page, redesigned 2026-11-11 ===== */
.svc2 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* summary strip */
.svc2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.svc2-stat { display: grid; gap: 2px; padding: 16px 18px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.svc2-stat small { font-size: 12px; color: var(--ink-3); }
.svc2-stat b { font: 400 32px/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.svc2-stat span { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc2-stat:first-child { background: var(--grad); color: #fff; }
.svc2-stat:first-child small, .svc2-stat:first-child span, .svc2-stat:first-child b { color: #fff; }
.svc2-stat:first-child small, .svc2-stat:first-child span { opacity: .85; }

/* toolbar */
.svc2-bar { margin-bottom: 12px; }
.svc2-sort { position: relative; display: inline-flex; align-items: center; height: 40px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-1); }
.svc2-sort > .ic { position: absolute; right: 12px; pointer-events: none; color: var(--ink-3); }
.svc2-sort select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 36px 0 14px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; outline: none; border-radius: 12px; }
.svc2-sort select:focus-visible { box-shadow: 0 0 0 2px var(--brand); }

/* legend */
.svc2-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 20px; font-size: 12px; color: var(--ink-3); }
.svc2-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* Microooo's pick badge */
.svc2-badge-pick { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-ink); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.svc2-badge-pick .ic { width: 13px; height: 13px; }
:root[data-theme="dark"] .svc2-badge-pick { background: rgba(224,104,47,.16); color: #f3a57c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .svc2-badge-pick { background: rgba(224,104,47,.16); color: #f3a57c; } }

/* sections */
.svc2 .store-rail { top: 0; }
.svc2 .rail-in > button[data-empty] { opacity: .45; }
.svc2-sec { margin-bottom: 28px; scroll-margin-top: 16px; }
.svc2-sec-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; min-width: 0; }
.svc2-sec-h h2 { margin: 0; font: 500 18px var(--display); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc2-sec-h .n { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.svc2-ic { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); box-shadow: var(--shadow-1); color: var(--ink-2); }
.svc2-hint { font-size: 12px; white-space: nowrap; }
.svc2-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px; align-items: start; }
.svc2-body.no-pick { grid-template-columns: minmax(0, 1fr); }

/* the pick */
.svc2-pick { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(224,104,47,.35); cursor: pointer; min-width: 0; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.svc2-pick:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 18px 40px -16px rgba(207,79,39,.28), inset 0 0 0 1.5px rgba(224,104,47,.55); }
.svc2-pick:focus-visible, .svc2-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.svc2-pick-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.svc2-pick-h .tn { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.svc2-pick-h b { font: 500 18px/1.2 var(--display); letter-spacing: -.015em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc2-pick p { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-2); }
.svc2-pick-f { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.svc2-price { display: grid; gap: 1px; font-size: 13px; color: var(--ink); min-width: 0; }
.svc2-price small { font-size: 11.5px; color: var(--ink-3); }
.svc2-go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); transition: transform .25s var(--ease); }
.svc2-pick:hover .svc2-go { transform: rotate(-45deg) scale(1.05); }
.svc2-pick-f .grow { flex: 1; }

/* the alternatives */
.svc2-alts { min-width: 0; }
.svc2-alts-h { font-size: 12px; color: var(--ink-3); margin: 0 0 8px 2px; }
.svc2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.svc2-tile { position: relative; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 12px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-card); cursor: pointer; min-width: 0; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.svc2-tile:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 14px 30px -14px rgba(0,0,0,.16); }
.svc2-tile .mono-tile { flex: none; }
.svc2-tile .tn { flex: 1; min-width: 0; display: grid; gap: 1px; }
.svc2-tile .tn b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc2-tile .tn small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc2-tags { flex: none; display: flex; transition: opacity .15s var(--ease); }
.svc2-def { position: absolute; right: 10px; top: 50%; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(-50%) scale(.96); pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.svc2-tile:hover .svc2-def, .svc2-tile:focus-within .svc2-def { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.svc2-tile:hover .svc2-tags, .svc2-tile:focus-within .svc2-tags { opacity: 0; }
.svc2-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; color: var(--ink-2); background: var(--panel); box-shadow: var(--shadow-1); transition: color .15s var(--ease); }
.svc2-more:hover { color: var(--ink); }
.svc2-foot { font-size: 12px; margin-top: 24px; }

/* entrance */
@media (prefers-reduced-motion: no-preference) {
  .svc2-sec { animation: svc2In .45s var(--ease) both; }
  .svc2-sec:nth-child(2) { animation-delay: 40ms; } .svc2-sec:nth-child(3) { animation-delay: 80ms; } .svc2-sec:nth-child(n+4) { animation-delay: 120ms; }
}
@keyframes svc2In { from { opacity: 0; transform: translateY(6px); } }

/* responsive */
@media (max-width: 1280px) { .svc2-body { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .svc2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc2-body { grid-template-columns: minmax(0, 1fr); }
  .svc2-pick p { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 860px) {
  .svc2-bar .seg { width: 100%; }
  .svc2-sort { width: 100%; } .svc2-sort select { width: 100%; }
  .svc2-legend { gap: 8px 14px; }
  .svc2-hint { display: none; }
}
@media (max-width: 480px) {
  .svc2-stat { padding: 14px; }
  .svc2-stat b { font-size: 26px; }
  .svc2-grid { grid-template-columns: minmax(0, 1fr); }
  .svc2-def { opacity: 1; transform: translateY(-50%); pointer-events: auto; position: static; transform: none; flex: none; }
  .svc2-tile:hover .svc2-tags, .svc2-tile .svc2-tags { display: none; }
}
@media (hover: none) { .svc2-def { opacity: 1; pointer-events: auto; position: static; transform: none; flex: none; } .svc2-tags { display: none; } }
/* phones: the main column never grows past the screen */
.svc2 .store > *, .svc2-sec, .svc2-body > *, .svc2-main { min-width: 0; }
.svc2-badge-pick { max-width: 100%; }

/* header (owner 2026-11-11: "showing the search … on the right side … much better, nicer"): title left, search right;
   one row under it: filter, the legend, sort */
.svc2-search { flex: 0 1 380px; min-width: 240px; }
.svc2-search input { width: 100%; height: 42px; border-radius: 12px; }
.svc2-bar2 { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.svc2-bar2 .svc2-legend { flex: 1; min-width: 0; margin: 0; justify-content: center; }
.svc2-bar2 .svc2-sort { margin-left: auto; }
@media (max-width: 1180px) { .svc2-bar2 .svc2-legend { order: 3; flex-basis: 100%; justify-content: flex-start; } }
@media (max-width: 700px) { .svc2-search { flex-basis: 100%; } }

/* Tidier arrangement (owner 2026-11-11: "badly arranged"): every category is one white panel, the pick on the left and the
   alternatives in a three-column grid of equal tiles beside it, "Show all" in the panel header; single-service categories
   share one panel; filter left and sort right in one row; the key lives under the category list. */
.svc2-bar2 { justify-content: space-between; }
.svc2-sec { padding: 18px; border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-card); margin-bottom: 14px; }
.svc2-sec-h { margin-bottom: 14px; }
.svc2-sec-h .svc2-more { margin: 0 0 0 auto; height: 30px; box-shadow: inset 0 0 0 1px var(--line-2); background: none; }
.svc2-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.svc2-body.no-pick { grid-template-columns: minmax(0, 1fr); }
.svc2-pick { box-shadow: inset 0 0 0 1.5px rgba(224,104,47,.45); background: linear-gradient(180deg, rgba(224,104,47,.05), rgba(224,104,47,0) 60%), var(--panel); }
.svc2-pick:hover { transform: none; box-shadow: inset 0 0 0 1.5px rgba(224,104,47,.7), var(--shadow-1); }
.svc2-alts { display: flex; flex-direction: column; }
.svc2-alts-h { margin: 0 0 8px 2px; }
.svc2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.svc2-sec .svc2-tile { background: var(--bg, #f4f3f1); box-shadow: none; min-height: 72px; }
.svc2-sec .svc2-tile:hover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.svc2-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; }
.svc2-mini .svc2-sec-h { margin-bottom: 10px; }
.svc2-key { display: grid; gap: 8px; margin: 10px 4px 4px; padding: 12px; border-radius: 14px; background: var(--bg, #f4f3f1); font-size: 12px; color: var(--ink-3); }
.svc2-key b { font-weight: 500; color: var(--ink-2); font-size: 12px; }
.svc2-key > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1380px) { .svc2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .svc2-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .svc2-grid { grid-template-columns: minmax(0, 1fr); } .svc2-sec { padding: 14px; } }
/* "Make default" sits where the In use / Free tier badge was: the hidden badge must not catch the click (scan 2026-11-12) */
.svc2-def { z-index: 2; }
.svc2-tile:hover .svc2-tags, .svc2-tile:focus-within .svc2-tags { pointer-events: none; }
/* Microooo's pick keeps its own height beside a long list of alternatives (owner 2026-11-12), and no hover lift */
.svc2-pick { align-self: start; }
.svc2-pick:hover { transform: none; }