/* Clarity Core widgets: Services (bento / list) and FAQs. Uses the theme tokens with fallbacks. */
.cl-services { --_ink: var(--cm-ink, #0D1117); --_muted: var(--cm-muted, #566070); --_line: var(--cm-line, #DFE3E9); --_surface: var(--cm-surface, #fff); --_accent: var(--cm-accent, #BF1E2E); width: 100%; }

/* Bento */
.cl-services--bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.cl-svc { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(24px, 2.4vw, 36px); border: 1px solid var(--_line); border-radius: 20px; background: var(--_surface); color: var(--_ink); text-decoration: none !important; min-height: 260px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cl-svc:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(13, 17, 23, .22); border-color: #C9CFD8; }
.cl-svc:focus-visible { outline: 2px solid var(--_accent); outline-offset: 3px; }
.cl-svc--feature { grid-column: span 4; }
.cl-svc--dark { grid-column: span 2; background: var(--cm-night, #0B0F14); border-color: var(--cm-night, #0B0F14); color: var(--cm-night-ink, #E8ECF2); }
.cl-svc--plain { grid-column: span 2; }
.cl-svc--wide { grid-column: span 6; background: #FBF2F3; border-color: rgba(191, 30, 46, .22); }
.cl-svc__head { display: flex; flex-direction: column; gap: 18px; }
.cl-svc__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: var(--cm-bg, #F4F5F7); color: var(--_accent); }
.cl-svc--dark .cl-svc__icon { background: rgba(255, 255, 255, .07); color: var(--cm-accent-night, #F2545B); }
.cl-svc__title { margin: 0 !important; font: 600 clamp(1.25rem, 1.05rem + .6vw, 1.6rem)/1.15 var(--cm-font, sans-serif) !important; letter-spacing: -0.02em; color: inherit !important; }
.cl-svc--feature .cl-svc__title, .cl-svc--wide .cl-svc__title { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem) !important; }
.cl-svc__body { display: flex; flex-direction: column; gap: 12px; }
.cl-svc__tag { font-weight: 500; font-size: 1.02rem; line-height: 1.4; color: inherit; }
.cl-svc__sum { font-size: .98rem; line-height: 1.6; color: var(--_muted); max-width: 62ch; }
.cl-svc--dark .cl-svc__sum { color: var(--cm-night-muted, #9AA4B2); }
.cl-svc__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-top: 6px; }
.cl-svc--wide .cl-svc__points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-svc__point { display: flex; gap: 8px; align-items: flex-start; font-size: .94rem; line-height: 1.45; color: var(--_ink); }
.cl-svc__point svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--_accent); }
.cl-svc__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 500; font-size: .98rem; color: inherit; }
.cl-svc__more svg { width: 18px; height: 18px; transition: transform .2s ease; }
.cl-svc:hover .cl-svc__more svg { transform: translateX(4px); }
.cl-svc--wide { flex-direction: row; align-items: flex-start; gap: clamp(24px, 4vw, 64px); }
.cl-svc--wide .cl-svc__head { flex: 0 0 34%; }
.cl-svc--wide .cl-svc__body { flex: 1 1 auto; }

/* List */
.cl-services--list { display: flex; flex-direction: column; border-top: 1px solid var(--_line); }
.cl-svc--row { align-items: start; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); border: 0; border-bottom: 1px solid var(--_line); border-radius: 0; background: transparent; padding: clamp(28px, 3.5vw, 48px) 0; min-height: 0; }
.cl-svc--row:hover { transform: none; box-shadow: none; border-color: var(--_line); }
.cl-svc--row:hover .cl-svc__title { color: var(--_accent) !important; }
.cl-svc--row .cl-svc__head { flex-direction: row; align-items: center; gap: 16px; }
.cl-svc--row .cl-svc__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem) !important; }

/* FAQ */
.cl-faq { width: 100%; border-top: 1px solid var(--cm-line, #DFE3E9); }
.cl-faq__item { border-bottom: 1px solid var(--cm-line, #DFE3E9); }
.cl-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font: 600 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.35 var(--cm-font, sans-serif); color: var(--cm-ink, #0D1117); letter-spacing: -0.01em; }
.cl-faq__q::-webkit-details-marker { display: none; }
.cl-faq__q:hover { color: var(--cm-accent, #BF1E2E); }
.cl-faq__icon { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cm-line, #DFE3E9); }
.cl-faq__icon::before, .cl-faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .2s ease; }
.cl-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.cl-faq__item[open] .cl-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.cl-faq__a { padding: 0 56px 26px 0; color: var(--cm-muted, #566070); font-size: 1rem; line-height: 1.7; max-width: 75ch; }
.cl-faq__a p { margin: 0 0 .8em; }
.cl-faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.cl-services--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-svc--feature, .cl-svc--wide { grid-column: span 2; }
	.cl-svc--dark, .cl-svc--plain { grid-column: span 1; }
	.cl-svc--wide { flex-direction: column; }
	.cl-svc--wide .cl-svc__head { flex: none; }
	.cl-svc--wide .cl-svc__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-svc--row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 767px) {
	.cl-services--bento { grid-template-columns: minmax(0, 1fr); }
	.cl-svc--feature, .cl-svc--wide, .cl-svc--dark, .cl-svc--plain { grid-column: span 1; min-height: 0; }
	.cl-svc__points, .cl-svc--wide .cl-svc__points { grid-template-columns: minmax(0, 1fr); }
	.cl-faq__a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .cl-svc, .cl-svc:hover { transition: none; transform: none; } }