/* Shared icon-heading row. Canonical geometry is defined only in the shared sprite. */
.benefit > .icon-heading,
.steps li > .icon-heading {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}
.icon-heading > .accent-marker {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.benefit .icon-heading > h3,
.steps .icon-heading > h3 { min-height: 0; margin: 0; }
.benefit > .icon-heading { font-size: 19px; min-height: 2.5em; }
@media (max-width: 760px) {
  .benefit { padding: 18px 17px; }
  .benefit > .icon-heading { font-size: 17px; }
  .benefit > .icon-heading,
  .steps li > .icon-heading { grid-template-columns: 18px minmax(0, 1fr); margin-bottom: 12px; }
  .icon-heading > .accent-marker { width: 18px; height: 18px; }
  .steps { gap: 18px; }
  .steps li > .icon-heading { margin-bottom: 6px; }
}
/* Preserve whole words beside icons in narrow cards instead of squeezing them. */
@media (max-width: 600px) { .benefit-grid { grid-template-columns: 1fr; } }

/* Canonical SVG utilities, shared by all routes and responsive layouts. */
.ui-icon{display:inline-block;flex:none;vertical-align:middle;pointer-events:none}
.utility-icon{width:16px;height:16px;color:inherit}
.art-bottom>.ui-icon{width:32px;height:32px}
.text-link,.back-link{gap:8px}
.back-link{display:inline-flex;align-items:center}
.mobile-nav summary .ui-icon{margin-left:6px}

.mobile-nav summary::marker{content:""}
.mobile-nav summary::-webkit-details-marker{display:none}
.tariff li>.list-icon{position:absolute;left:0;top:.4em;width:14px;height:14px;color:var(--accent)}
/* One native disclosure row; canonical create/plus turns into a close sign. */
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:22px 20px; }
.faq-list summary > .faq-toggle { width:20px; height:20px; flex:none; color:var(--text); transition:rotate var(--motion-hover) var(--motion-ease); }
.faq-list details[open] .faq-toggle { rotate:45deg; }
.faq-list details p { padding:0 20px 24px; }
@media(max-width:760px) { .faq-list summary { gap:16px; padding:20px 16px; } .faq-list details p { padding:0 16px 20px; } }