/* JA — FAQ (navy band, Figma #2564:2590) * * Flat list on navy: no card chrome. White 30px serif questions (.ja-h4), * hairline dividers, plus/minus icons inverted for the dark band. Tabs are * the navy pill rail (ja-pillrail.css); accordion behaviour is .ja-acc in * assets/js/ja.js. Without JS every panel stays visible and .ja-faq__grouphd * shows — the .ja-js class (set by ja.js) is the scripted-state hook. */ .ja-faq__list { max-width: 1140px; margin: 0 auto; } /* Figma rows are 1140.5 inside 1220 */ /* Group label as a visible heading — no-JS navigation aid only. */ .ja-faq__grouphd { font-family: var(--ja-font-sans); font-size: 16px; font-weight: 700; letter-spacing: 1.12px; text-transform: uppercase; color: var(--ja-gold); margin: 38px 0 0; } .ja-faq__grouphd:first-child { margin-top: 0; } .ja-js .ja-faq__grouphd { display: none; } .ja-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; list-style: none; padding: 25px 0; } .ja-faq__item summary::-webkit-details-marker { display: none; } .ja-faq__item summary:focus-visible { outline: 2px solid var(--ja-gold); outline-offset: 4px; border-radius: 4px; } /* The Figma hairline; the 25px vertical padding gives the 25px gap. */ .ja-faq__item + .ja-faq__item { border-top: 1px solid var(--ja-rule); } .ja-faq__q { margin: 0; } /* .ja-h4 renders white via the .ja-section--navy companion */ /* Icon — the SVG assets are gold (#F0CB65) Figma art; render as-is. Swap needs more specificity than `.ja-faq__icon img` (0-1-1), otherwise the minus stays visible in closed rows and stacks under the plus. */ .ja-faq__icon { flex: none; width: 30px; height: 30px; } .ja-faq__icon img { width: 30px; height: 30px; display: block; } .ja-faq__icon .ja-faq__icon-minus { display: none; } details[open] .ja-faq__icon .ja-faq__icon-plus { display: none; } details[open] .ja-faq__icon .ja-faq__icon-minus { display: block; } /* Answer body — clipped so ja.js can animate height on open/close. */ .ja-faq__a { padding: 0 0 25px; overflow: hidden; } .ja-faq__a p { font-family: var(--ja-font-sans); font-size: 16px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.85); margin: 0 0 14px; } .ja-faq__a p:last-child { margin-bottom: 0; }