/* =============================================================================
   ADHDity — 09-support.css
   Section: 27. Support Page (.ar-support)
   ============================================================================= */

.ar-support { font-family: inherit; color: var(--ink, #111827); }
.ar-support * { box-sizing: border-box; }
.ar-support__wrap { max-width: 980px; margin: 0 auto; padding: 24px 16px 32px; }

.ar-support__head { position: relative; }
.ar-support__logo { display: inline-block; margin-bottom: 10px; }
.ar-support__logo img { height: 28px; width: auto; display: block; opacity: .9; }
.ar-support__logo:hover { opacity: .85; }
.ar-support__logo:hover img { opacity: 1; }

.ar-support__title-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.ar-support__title { margin: 0; font-size: clamp(26px, 4.8vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #2F2F2F; text-align: center; }
.ar-support__title-img { width: 72px; height: auto; object-fit: contain; transform: translateY(2px); opacity: .95; }

@media (min-width: 768px) { .ar-support__title-img { width: 74px; } }
@media (max-width: 420px) { .ar-support__title-row { flex-direction: column; gap: 10px; } .ar-support__title-img { width: 66px; transform: none; } }

.ar-support__sub { margin: 0 auto; text-align: center; max-width: 760px; font-size: 15px; font-weight: 600; line-height: 1.65; color: rgba(17,24,39,.65); }

.ar-support__grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 860px) { .ar-support__grid { grid-template-columns: 1fr 1fr; gap: 16px; } }

.ar-supportcard { background: #FFFFFF; border: none; border-radius: 24px; padding: 22px 22px; box-shadow: 0 10px 30px rgba(15,23,42,0.08); transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) { .ar-supportcard:hover { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(15,23,42,0.10); } }

.ar-supportcard__top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ar-supportcard__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 18px; background: #F1F5F9; border: 1px solid rgba(15,23,42,0.08); }
.ar-supportcard__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: #0F172A; }
.ar-supportcard__text { margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.6; color: rgba(17,24,39,.78); }
.ar-supportcard__list { margin: 10px 0 14px; padding-left: 18px; font-size: 15px; font-weight: 600; line-height: 1.6; color: rgba(17,24,39,.65); }
.ar-supportcard__list li { margin: 6px 0; }
.ar-supportcard__list--compact li { margin: 4px 0; }
.ar-supportcard__tiny { margin: 10px 0 0; font-size: 14px; font-weight: 600; line-height: 1.6; color: rgba(17,24,39,.55); }
.ar-supportcard__callout { margin-top: 12px; padding: 12px 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(17,24,39,.10); border-radius: 16px; color: rgba(17,24,39,.78); font-size: 15px; font-weight: 600; line-height: 1.6; }
.ar-supportcard__fields { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(17,24,39,.10); }
.ar-supportcard__fieldsTitle { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(17,24,39,.55); margin-bottom: 8px; }

.ar-supportbtn { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 14px; padding: 12px 18px; border-radius: 999px; border: 1px solid transparent; text-decoration: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ar-supportbtn:focus { outline: none; }
.ar-supportbtn:focus-visible { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18); }
.ar-supportbtn--primary { background: #3B82F6; color: #fff; border-color: #3B82F6; }
.ar-supportbtn--secondary { background: #F3F4F6; color: #374151; border-color: #E5E7EB; }
@media (hover: hover) { .ar-supportbtn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(59,130,246,0.16); } .ar-supportbtn--secondary:hover { transform: translateY(-1px); background: #E5E7EB; border-color: #D1D5DB; box-shadow: 0 10px 18px rgba(17,24,39,0.08); } }

.ar-supporttiers { display: flex; gap: 10px; margin: 14px 0 8px; flex-wrap: wrap; }
.ar-tier { position: relative; }
.ar-tier input { position: absolute; opacity: 0; pointer-events: none; }
.ar-tier__content { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid #E5E7EB; background: #FFFFFF; font-size: 14px; color: #374151; cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .12s ease; }
.ar-tier__icon { font-size: 15px; line-height: 1; }
.ar-tier:hover .ar-tier__content { border-color: #D1D5DB; background: #F9FAFB; color: #111827; transform: translateY(-1px); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.ar-tier input:checked + .ar-tier__content { background: #2563EB; border-color: #2563EB; color: #FFFFFF; box-shadow: 0 2px 6px rgba(37,99,235,0.25); transform: none; }
.ar-supporthint { font-size: 13px; color: #DC2626; margin-top: 4px; opacity: 0; transition: opacity .15s ease; }
.ar-supporthint.is-visible { opacity: 1; }

.ar-support__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(17,24,39,.10); text-align: center; }
.ar-support__back { font: inherit; color: inherit; text-decoration: none; font-weight: inherit; }
.ar-support__back:not(.ar-backlink__a) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-size: 16px; color: rgba(17,24,39,.65); }
.ar-support__back:not(.ar-backlink__a):hover, .ar-support__back:not(.ar-backlink__a):focus-visible { text-decoration: none !important; color: rgba(17,24,39,.85); }