.support-page { width:min(calc(100% - 48px),1200px); margin:auto; padding:48px 0 80px; color:#161616; }
.support-page h1 { text-align:center; font-size:36px; font-weight:700; margin-bottom:48px; }
.support-page section { margin-bottom:72px; scroll-margin-top:110px; }
.support-page h2 { font-size:26px; font-weight:500; padding-bottom:24px; border-bottom:1px solid #e5e5e5; margin-bottom:32px; }
.contact-lines { font-size:20px; line-height:1.8; }
.contact-lines p { margin-bottom:20px; overflow-wrap:anywhere; }
#feedback>p { font-size:16px; line-height:1.6; margin-bottom:24px; }
#feedback-form { background:#f8f8f8; padding:24px; }
#feedback-message { width:100%; min-height:230px; border:0; background:transparent; resize:vertical; font:inherit; line-height:1.7; }
.feedback-actions { display:flex; gap:24px; align-items:center; justify-content:space-between; }
.feedback-actions p,#resource-status { font-size:14px; color:#777; line-height:1.6; }
.support-search { display:flex; align-items:center; gap:12px; width:min(100%,640px); margin:0 auto 32px; padding:8px 20px; border:1px solid #aaa; border-radius:40px; }
.support-search input { width:100%; border:0; font:inherit; outline:none; background:transparent; }
.support-search:focus-within { outline:2px solid #0091d2; }
.support-products { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid #e5e5e5; padding:16px 0; gap:24px; }
.support-product { display:flex; align-items:center; gap:20px; }
.support-product[hidden] { display:none; }
.support-product img { width:160px; height:140px; object-fit:cover; object-position:66% center; }
.support-product h3 { font-size:26px; margin:4px 0 16px; }
.support-product p { font-size:14px; }
.support-actions { display:flex; gap:12px; }
@media(max-width:767px) { .support-page { width:calc(100% - 40px); padding:32px 0 40px; } .support-page h1 { font-size:28px; margin-bottom:32px; } .support-page h2 { font-size:22px; padding-bottom:20px; margin-bottom:24px; } .support-page section { margin-bottom:48px; } .contact-lines { font-size:16px; } .support-products { grid-template-columns:1fr; } .support-product { gap:12px; flex-wrap:wrap; } .support-product img { width:120px; height:110px; } .support-product h3 { font-size:22px; } .feedback-actions { align-items:flex-start; flex-direction:column; gap:16px; } }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.resource-card { background:#f6f6f6; padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.resource-card[hidden] { display:none; }
.resource-card h3 { font-size:20px; line-height:1.5; font-weight:500; margin:0; }
.resource-card .cta { margin-top:auto; }
@media(max-width:767px) { .resource-grid { grid-template-columns:1fr; } .resource-card h3 { font-size:18px; } }
.resource-pickers { display:flex; flex-wrap:wrap; gap:12px; width:100%; margin-top:auto; }
.resource-picker { flex:1; min-width:128px; }
.resource-picker summary { list-style:none; cursor:pointer; }
.resource-picker summary::-webkit-details-marker { display:none; }
.resource-options { margin-top:16px; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.resource-options a { display:block; padding:12px 0; border-bottom:1px solid #ddd; }
.resource-options p { color:#777; }
.support-search { position:relative; z-index:5; }
.support-results { position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:360px; overflow-y:auto; background:#fff; border:1px solid #e5e5e5; border-radius:12px; box-shadow:0 8px 24px #00000014; padding:8px; }
.support-results[hidden] { display:none; }
.support-results a { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px; font-size:14px; line-height:1.6; }
.support-results a span { overflow-wrap:anywhere; }
.support-results small { color:#777; white-space:nowrap; font-size:12px; }
.support-results a:hover,.support-results a[aria-selected=true] { background:#f6f6f6; }
.support-results p { padding:12px; color:#777; font-size:14px; line-height:1.6; }
@media(max-width:767px) { .support-results { max-height:300px; } .support-results a { align-items:flex-start; flex-direction:column; gap:4px; } }
/* Compact product library with grouped controls. */
#manual-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.product-resource { padding:24px; gap:20px; }
.product-resource h3 { font-size:22px; font-weight:600; }
.resource-pickers { gap:12px; justify-content:flex-start; }
.resource-picker { flex:0 1 auto; min-width:0; }
.resource-picker .cta,.resource-unavailable { width:128px; min-width:0; }
.product-resource:has(details[open]) .resource-picker[open] { flex-basis:100%; }
.resource-unavailable,.resource-unavailable:hover,.resource-unavailable:focus { background:#d5d7da !important; color:#888 !important; cursor:not-allowed; opacity:1; }
.resource-picker[open] .resource-options { animation:resource-reveal 180ms ease-out; }
.support-results:not([hidden]) { animation:resource-reveal 180ms ease-out; transform-origin:top; }
@keyframes resource-reveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1100px) { #manual-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:649px) { #manual-list { grid-template-columns:1fr; gap:12px; } .product-resource { padding:20px; gap:16px; } .product-resource h3 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { .resource-picker[open] .resource-options,.support-results:not([hidden]) { animation:none; } }
.resource-pickers { display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:12px; margin-top:0; }
.resource-pickers > .cta { flex:0 1 128px; width:128px; min-width:0; padding-inline:8px; }
.resource-tab,.resource-tab:hover,.resource-tab:focus { background:#d5d7da; color:#555; }
.resource-tab[aria-expanded=true],.resource-tab[aria-expanded=true]:hover,.resource-tab[aria-expanded=true]:focus { background:var(--ao-blue,#0091d2); color:#fff; }
.product-panels { width:100%; }
.product-panels:has(> [hidden]):not(:has(> :not([hidden]))) { display:none; }
.product-panels .resource-options { margin-top:0; }
.product-panels .resource-options[hidden] { display:none; }
.product-panels .resource-options:not([hidden]) { animation:resource-reveal 180ms ease-out; }
@media(prefers-reduced-motion:reduce) { .product-panels .resource-options:not([hidden]) { animation:none; } }
/* Available controls start blue; only an unselected sibling turns gray. */
.resource-tab,.resource-tab:hover,.resource-tab:focus { background:var(--ao-blue,#0091d2); color:#fff; }
.resource-pickers:has(.resource-tab[aria-expanded=true]) .resource-tab[aria-expanded=false],
.resource-pickers:has(.resource-tab[aria-expanded=true]) .resource-tab[aria-expanded=false]:hover,
.resource-pickers:has(.resource-tab[aria-expanded=true]) .resource-tab[aria-expanded=false]:focus { background:#d5d7da; color:#555; }
.resource-tab,.resource-tab:hover,.resource-tab:focus,
.resource-tab[aria-expanded=true],.resource-tab[aria-expanded=true]:hover,.resource-tab[aria-expanded=true]:focus { background:#000; color:#fff; }
.resource-pickers:has(.resource-tab[aria-expanded=true]) .resource-tab[aria-expanded=false] { background:#d5d7da; color:#555; }
.tutorial-dialog { width:min(960px,calc(100vw - 32px)); max-height:90dvh; padding:24px; border:0; background:#fff; color:#111; }
.tutorial-dialog::backdrop { background:rgba(0,0,0,.8); }
.tutorial-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:16px; }
.tutorial-heading h2 { font-size:20px; margin:0; }
.tutorial-heading button { flex-shrink:0; font-size:30px; background:transparent; color:#111; padding:4px 12px; cursor:pointer; }
.tutorial-player { aspect-ratio:16/9; background:#000; }
.tutorial-player iframe { display:block; width:100%; height:100%; border:0; }
.tutorial-dialog > p { margin:16px 0 0; font-size:14px; }
.tutorial-source { text-decoration:underline; }
@media(max-width:600px) { .tutorial-dialog { padding:14px; }.tutorial-heading h2 { font-size:16px; } }