/* Service-list alternatives used by the comparison pages. */
.svc-section { position: relative; }
.svc-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.svc-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.svc-number { color: var(--ink-soft); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; }
.svc-arrow { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; transition: background-color 180ms ease, color 180ms ease; }

/* 08 — bento cards: visual grouping on desktop, two-column cards on mobile. */
.service-variant-bento .svc-bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.service-variant-bento .svc-bento-card { display: grid; min-height: 210px; align-content: space-between; gap: 20px; padding: 21px; background: var(--paper); color: var(--ink); transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
.service-variant-bento .svc-bento-card:hover, .service-variant-bento .svc-bento-card:focus-visible { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.service-variant-bento .svc-bento-card:hover .svc-number, .service-variant-bento .svc-bento-card:focus-visible .svc-number { color: rgba(244, 244, 241, 0.58); }
.service-variant-bento .svc-bento-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.service-variant-bento .svc-bento-card strong { display: block; max-width: 250px; font-size: 19px; line-height: 1.08; letter-spacing: -0.04em; }
.service-variant-bento .svc-bento-card small { display: block; max-width: 260px; margin-top: 9px; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.service-variant-bento .svc-bento-card:hover small, .service-variant-bento .svc-bento-card:focus-visible small { color: rgba(244, 244, 241, 0.66); }
.service-variant-bento .svc-bento-card .svc-icon { width: 38px; height: 38px; }

.service-variant-bento .svc-mobile-bento-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-variant-bento .svc-mobile-bento-card { display: grid; min-height: 148px; align-content: space-between; gap: 16px; padding: 15px; background: var(--white); border: 1px solid var(--line); }
.service-variant-bento .svc-mobile-bento-card .svc-icon { width: 34px; height: 34px; }
.service-variant-bento .svc-mobile-bento-card strong { display: block; font-size: 14px; line-height: 1.15; }
.service-variant-bento .svc-mobile-bento-card small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 10px; line-height: 1.35; }

/* 09 — split rows: fast scanning on desktop, compact single-column rows on mobile. */
.service-variant-rows .svc-rows-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 42px; border-top: 1px solid var(--ink); }
.service-variant-rows .svc-row-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 15px; align-items: center; min-height: 102px; padding: 14px; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 16px; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.service-variant-rows .svc-row-card strong { display: block; font-size: 17px; line-height: 1.15; }
.service-variant-rows .svc-row-card small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.service-variant-rows .svc-row-card:hover, .service-variant-rows .svc-row-card:focus-visible { background: var(--white); border-color: var(--line); box-shadow: 0 12px 24px rgba(17, 17, 17, 0.07); transform: translateY(-2px); }
.service-variant-rows .svc-row-card:hover .svc-arrow, .service-variant-rows .svc-row-card:focus-visible .svc-arrow { background: var(--ink); color: var(--paper); }
.service-variant-rows .svc-row-card .svc-icon { width: 40px; height: 40px; }

.service-variant-rows .svc-mobile-rows { border-top: 1px solid var(--line); }
.service-variant-rows .svc-mobile-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 30px; gap: 12px; align-items: center; min-height: 78px; padding: 11px 12px; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 14px; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.service-variant-rows .svc-mobile-row .svc-icon { width: 36px; height: 36px; }
.service-variant-rows .svc-mobile-row strong { display: block; font-size: 15px; line-height: 1.15; }
.service-variant-rows .svc-mobile-row small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 10px; line-height: 1.35; }
.service-variant-rows .svc-mobile-row:hover, .service-variant-rows .svc-mobile-row:focus-visible { background: var(--white); border-color: var(--line); box-shadow: 0 10px 22px rgba(17, 17, 17, 0.06); }

/* 10 — accordion: one strong interaction pattern that works at both widths. */
.service-variant-accordion .svc-accordion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.service-variant-accordion .svc-accordion-grid details { padding: 0 20px; background: var(--paper); border: 1px solid var(--line); }
.service-variant-accordion .svc-accordion-grid details[open] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.service-variant-accordion .svc-accordion-grid summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 12px; min-height: 78px; align-items: center; list-style: none; cursor: pointer; }
.service-variant-accordion .svc-accordion-grid summary::-webkit-details-marker { display: none; }
.service-variant-accordion .svc-accordion-grid summary strong { font-size: 16px; line-height: 1.15; }
.service-variant-accordion .svc-accordion-grid summary > span:last-child { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 18px; font-weight: 400; }
.service-variant-accordion .svc-accordion-grid details[open] summary > span:last-child { transform: rotate(45deg); }
.service-variant-accordion .svc-accordion-grid details p { max-width: 420px; margin: -3px 42px 20px 46px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.service-variant-accordion .svc-accordion-grid details[open] p { color: rgba(244, 244, 241, 0.66); }

.service-variant-accordion .svc-mobile-accordion { border-top: 1px solid var(--line); }
.service-variant-accordion .svc-mobile-accordion details { border-bottom: 1px solid var(--line); }
.service-variant-accordion .svc-mobile-accordion summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 12px; min-height: 64px; align-items: center; list-style: none; cursor: pointer; }
.service-variant-accordion .svc-mobile-accordion summary::-webkit-details-marker { display: none; }
.service-variant-accordion .svc-mobile-accordion summary strong { font-size: 15px; line-height: 1.15; }
.service-variant-accordion .svc-mobile-accordion summary > span:last-child { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 18px; }
.service-variant-accordion .svc-mobile-accordion details[open] summary > span:last-child { transform: rotate(45deg); }
.service-variant-accordion .svc-mobile-accordion p { margin: -3px 42px 17px 42px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }

@media (max-width: 719px) {
  .svc-bento-desktop, .svc-rows-desktop, .svc-accordion-desktop { display: none; }
}

@media (min-width: 720px) {
  .svc-bento-mobile, .svc-rows-mobile, .svc-accordion-mobile { display: none; }
}

@media (max-width: 380px) {
  .service-variant-bento .svc-mobile-bento-grid { grid-template-columns: 1fr; }
}