/* =========================================================================
 * MXDR Service — the FAQ block (key faq).
 *
 * A dark section between Measured Results and Related Resources: on the left
 * the eyebrow, an Outfit 300 heading, the description, the outline
 * .lmx-ms-btn button and decorative lines; on the right the accordion with
 * thin dividers, a +/− sign and the answer with a teal vertical line. The
 * tokens are those of blocks 4–6 (page.css): --lmx-ms-font / --lmx-ms-display,
 * accent #52C7C6, the --ms-scale scale and --lmx-section-padding-x side
 * padding.
 *
 * The panel height is animated on click only (block6-faq.js toggles .is-anim
 * and height); nothing transitions at rest. The rows appear through the .is-in
 * class on .lmx-fq-inner (IntersectionObserver), as in block 5.
 * ====================================================================== */

.lmx-fq-inner{position:relative;width:100%;min-height:100vh;background:#000 !important;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;color:#fff;--ms-scale:1;--fq-accent:#52C7C6;--fq-line:rgba(255,255,255,.14)}
.lmx-fq-inner *{box-sizing:border-box}

/* --- background: barely visible geometric lines (CSS, no images) ---------- */
/* overflow:hidden is mandatory: the rotated ::after line would otherwise
   inflate the section's scrollHeight, and on desktop the section would become
   a nested scroller intercepting the wheel before the snap. */
.lmx-fq-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(112deg,transparent 0 44%,rgba(82,199,198,.07) 44% calc(44% + 1px),transparent calc(44% + 1px) 100%),linear-gradient(68deg,transparent 0 31%,rgba(255,255,255,.035) 31% calc(31% + 1px),transparent calc(31% + 1px) 100%),linear-gradient(112deg,transparent 0 63%,rgba(255,255,255,.03) 63% calc(63% + 1px),transparent calc(63% + 1px) 100%),linear-gradient(68deg,transparent 0 58%,rgba(82,199,198,.045) 58% calc(58% + 1px),transparent calc(58% + 1px) 100%),radial-gradient(55% 45% at 28% 22%,rgba(82,199,198,.07),transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
.lmx-fq-bg::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.016) 0 1px,transparent 1px 36px)}
.lmx-fq-bg::after{content:'';position:absolute;left:36%;top:-12%;width:1px;height:124%;background:linear-gradient(180deg,transparent,rgba(82,199,198,.18) 40%,transparent 88%);transform:rotate(22deg);transform-origin:top}

/* --- grid ------------------------------------------------------------------- */
.lmx-fq-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:max(40px,calc(120px * var(--ms-scale,1)));align-items:center;padding:max(24px,calc(56px * var(--ms-scale,1))) 0}

/* --- left column (tokens of blocks 1, 4, 5) -------------------------------- */
.lmx-fq-intro{min-width:0}
.lmx-fq-eyebrow{display:block;font-size:max(11px,calc(14px * var(--ms-scale,1)));font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--fq-accent)}
.lmx-fq-title{margin:max(10px,calc(22px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(30px,calc(66px * var(--ms-scale,1))) !important;line-height:1.05 !important;letter-spacing:-.01em;color:#fff !important;text-wrap:balance}
.lmx-fq-desc{margin:max(10px,calc(22px * var(--ms-scale,1))) 0 0 !important;max-width:calc(470px * var(--ms-scale,1));font-family:var(--lmx-ms-font) !important;font-size:max(13px,calc(18px * var(--ms-scale,1))) !important;line-height:1.6 !important;font-weight:300;color:rgba(255,255,255,.66) !important}
.lmx-fq-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:max(10px,calc(16px * var(--ms-scale,1)));margin-top:max(18px,calc(40px * var(--ms-scale,1)))}
/* Touch: even when squeezed hard the button stays at least 44×44. */
.lmx-fq-inner .lmx-fq-cta{min-height:44px;min-width:44px}
/* “View More Questions” is the secondary button next to the main one: the same
   metrics but without a fill, so that it does not argue with “Talk to a
   Specialist”. */
.lmx-fq-inner .lmx-fq-cta--more{border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.86) !important;background:transparent;gap:10px}
.lmx-fq-inner .lmx-fq-cta--more:hover,.lmx-fq-inner .lmx-fq-cta--more:focus-visible{border-color:var(--fq-accent);color:#fff !important}
.lmx-fq-inner .lmx-fq-cta--more svg{display:block;width:16px;height:16px}
.lmx-fq-lines{display:block;width:min(100%,calc(340px * var(--ms-scale,1)));height:auto;margin-top:max(26px,calc(96px * var(--ms-scale,1)));color:var(--fq-accent);overflow:visible}

/* --- accordion ---------------------------------------------------------------- */
.lmx-fq-acc{min-width:0;border-top:1px solid var(--fq-line)}
.lmx-fq-item{border-bottom:1px solid var(--fq-line);opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 70ms)}
.lmx-fq-inner.is-in .lmx-fq-item{opacity:1;transform:none}
.lmx-fq-q{margin:0 !important;padding:0 !important;font:inherit !important;line-height:inherit !important;letter-spacing:0}
.lmx-fq-btn{display:flex;align-items:center;justify-content:space-between;gap:max(16px,calc(28px * var(--ms-scale,1)));width:100%;min-height:44px;margin:0;padding:max(15px,calc(25px * var(--ms-scale,1))) max(4px,calc(8px * var(--ms-scale,1))) max(15px,calc(25px * var(--ms-scale,1))) max(12px,calc(26px * var(--ms-scale,1)));background:none;border:0;border-radius:0;box-shadow:none;color:#fff;font-family:var(--lmx-ms-font);font-weight:400;font-size:max(16px,calc(22px * var(--ms-scale,1)));line-height:1.3;letter-spacing:0;text-align:left;text-transform:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:color .2s ease}
.lmx-fq-btn:hover{color:var(--lmx-ms-accent-hi,#83DAD9)}
.lmx-fq-btn:focus{outline:none}
.lmx-fq-btn:focus-visible{outline:2px solid var(--fq-accent);outline-offset:-2px}
.lmx-fq-btn-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.lmx-fq-icon{position:relative;flex:0 0 auto;width:max(18px,calc(24px * var(--ms-scale,1)));height:max(18px,calc(24px * var(--ms-scale,1)));color:var(--fq-accent)}
.lmx-fq-icon-h,.lmx-fq-icon-v{position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.lmx-fq-icon-v{transform:rotate(90deg)}
.lmx-fq-item.is-open .lmx-fq-icon-v{transform:rotate(0deg);opacity:0}

.lmx-fq-panel{overflow:hidden}
.lmx-fq-panel[hidden]{display:none}
.lmx-fq-panel.is-anim{transition:height .36s cubic-bezier(.4,0,.2,1);will-change:height}
.lmx-fq-panel-in{padding:0 max(12px,calc(26px * var(--ms-scale,1))) max(18px,calc(30px * var(--ms-scale,1)));opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}
.lmx-fq-item.is-open .lmx-fq-panel-in{opacity:1;transform:none;transition-delay:.06s}
.lmx-fq-a{margin:0 !important;padding-left:max(14px,calc(24px * var(--ms-scale,1)));border-left:1px solid var(--fq-accent);max-width:64ch;font-family:var(--lmx-ms-font) !important;font-size:max(14px,calc(18px * var(--ms-scale,1))) !important;line-height:1.6 !important;font-weight:300;color:rgba(255,255,255,.72) !important}

/* --- desktop: the section is one screen; a growing answer scrolls inside --- */
@media (min-width:1025px){
.lmx-fq-inner{display:grid;align-content:center;align-content:safe center;height:100%;min-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.lmx-fq-inner::-webkit-scrollbar{display:none}
}

/* --- narrow screens: text first, then the questions; height follows content - */
@media (max-width:1024px){
.lmx-fq-inner{min-height:0;height:auto;padding:84px var(--lmx-section-padding-x) 64px}
.lmx-fq-grid{grid-template-columns:minmax(0,1fr);row-gap:40px;padding:0}
.lmx-fq-title{font-size:40px !important}
.lmx-fq-desc{max-width:none;font-size:16px !important}
.lmx-fq-lines{margin-top:36px;width:min(100%,260px)}
.lmx-fq-btn{font-size:18px;padding:18px 4px 18px 12px;gap:16px}
.lmx-fq-panel-in{padding:0 4px 20px 12px}
.lmx-fq-a{font-size:15px !important;max-width:none}
}
@media (max-width:480px){
.lmx-fq-title{font-size:32px !important}
.lmx-fq-btn{font-size:17px}
}

/* --- less motion: everything at once, no transitions ------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-fq-item{opacity:1;transform:none;transition:none}
.lmx-fq-panel-in{transform:none}
.lmx-fq-inner *{transition:none !important;animation:none !important}
}