/* Motion layer for maxzzdiesel.com.
   Timing scale and patterns adapted from transitions.dev (free tier, used under its license:
   https://transitions.dev). Tabs sliding, panel reveal, accordion, text swap, badge pop. */
:root {
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --distance-micro: 4px;
  --distance-base: 8px;
  --blur-small: 2px;
}

/* Buttons: quicker response on hover, light press feedback */
.btn { transition-property: background-color, color, border-color, transform !important; transition-duration: 200ms !important; transition-timing-function: var(--ease-smooth-out) !important; }
.btn .ic { transition-duration: var(--duration-fast) !important; transition-timing-function: var(--ease-smooth-out) !important; }
.btn:active { transform: scale(0.98); }
.arrow-btn, .qp-step { transition-duration: 200ms !important; }
.arrow-btn:active, .qp-step:active { transform: scale(0.94); }

/* Tabs sliding: one pill travels between tabs instead of colors snapping */
.l-tablist.t-has-pill { position: relative; isolation: isolate; }
.l-tablist.t-has-pill .l-tab { position: relative; background: transparent !important; transition: color var(--duration-fast) var(--ease-in-out) !important; }
.l-tablist.t-has-pill .l-tab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #ffffff; z-index: -2; }
.t-pill {
  position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  background: #1e1e87;
  transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out), height var(--duration-fast) var(--ease-smooth-out);
  will-change: transform;
}

/* Panel reveal when the tab content changes */
@keyframes t-panel-in { from { opacity: 0; transform: translateY(var(--distance-base)); filter: blur(var(--blur-small)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes t-media-in { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.t-swap { animation: t-panel-in var(--duration-slow) var(--ease-smooth-out) both; }
.t-swap-media > * { animation: t-media-in var(--duration-slow) var(--ease-in-out) both; }

/* Accordion: height via grid rows, content fades in after the panel starts opening */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-slow) var(--ease-smooth-out); }
.t-acc-panel.is-open { grid-template-rows: 1fr; }
.t-acc-inner { overflow: hidden; min-height: 0; }
.t-acc-inner > * { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out); }
.t-acc-panel.is-open .t-acc-inner > * { opacity: 1; transform: none; transition-duration: var(--duration-fast); transition-delay: var(--duration-micro); }

/* Text swap: labels that change in place ("Add to my quote" -> "Added to your list") */
@keyframes t-text-in { from { opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); } to { opacity: 1; transform: none; filter: none; } }
.t-text-in { display: inline-block; animation: t-text-in var(--duration-quick) var(--ease-in-out) both; }

/* Quote list: panel opens a bit faster and smoother; count pops when it changes */
.qp { animation-duration: var(--duration-fast) !important; animation-timing-function: var(--ease-smooth-out) !important; }
@keyframes t-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.t-pop { animation: t-pop var(--duration-very-slow) var(--ease-bounce) !important; }

@media (prefers-reduced-motion: reduce) {
  .t-pill, .l-tablist.t-has-pill .l-tab, .t-acc-panel, .t-acc-inner > * { transition: none !important; }
  .t-swap, .t-swap-media > *, .t-text-in, .t-pop { animation: none !important; }
  .btn:active, .arrow-btn:active, .qp-step:active { transform: none; }
}

/* Language bar folds away once the page scrolls, so its light text never sits on light content */
.lang-bar{transition:height .3s cubic-bezier(.22,1,.36,1),opacity .2s ease}
html.mx-scrolled .lang-bar{height:10px !important;opacity:0;pointer-events:none;overflow:hidden}
html.mx-scrolled .lang-menu{display:none !important}
@media (prefers-reduced-motion:reduce){.lang-bar{transition:none}}

/* ===== Review fixes 14/11 ===== */
/* readable rhythm: the wrapper forced 28px line-height on every size */
.noise { line-height: 1.5 !important; }
h1, h2, h3 { text-wrap: balance; }

/* hover: brand colors with readable contrast (no orange flash) */
.b-red, .b-white, .qx-red { transition: background-color var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast), transform var(--duration-fast) var(--ease-smooth-out) !important; }
.b-red:hover, .qx-red:hover { background: #b71f2b !important; color: #ffffff !important; }
.b-white:hover { background: #1d2126 !important; color: #ffffff !important; }
.b-red:hover .ic, .b-white:hover .ic { background: #ffffff !important; color: #1d2126 !important; }
.b-white.nav-cta:hover, .nav-cta:hover { background: #b71f2b !important; color: #ffffff !important; }
.b-red .ic svg, .b-white .ic svg { transition: transform var(--duration-medium) var(--ease-smooth-out); }
.b-red:hover .ic svg, .b-white:hover .ic svg { transform: rotate(45deg); }
.rb-dl:hover span, .rb-dl:hover small { color: #5f656c !important; }
@media (hover: none) {
  .b-red:hover { background: #d32a37 !important; color: #ffffff !important; }
  .b-white:hover { background: #ffffff !important; color: #1d2126 !important; }
  .b-red:hover .ic svg, .b-white:hover .ic svg { transform: none; }
  .qx-add.in:hover { filter: none; }
}

/* nav over light content after scroll */
nav[aria-label="Main"] { background: rgba(29, 33, 38, 0.92) !important; }

/* small links that had no transition */
.nav-phone, .lang button, .qx-crumb a, .foot-link, .mn-link { transition: color var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast); }

/* Mobile menu: smaller type, tighter rows, CTA always reachable */
.mnav-panel { padding: 8px 20px 0 !important; transform-origin: top right; }
.mn-link { font-size: 16px !important; line-height: 22px; padding: 11px 0 !important; letter-spacing: -0.01em; }
.mn-h { line-height: 16px; margin: 16px 0 4px !important; }
.mn-lang a { min-height: 44px; display: inline-flex; align-items: center; }
.mn-cta { position: sticky; bottom: 0; background: #1d2126; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); margin-top: 12px !important; z-index: 2; }
@keyframes mn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mnav-panel .mn-link, .mnav-panel .mn-h { animation: mn-in .3s var(--ease-smooth-out) both; }
.mnav-panel > *:nth-child(2) { animation-delay: 30ms; } .mnav-panel > *:nth-child(3) { animation-delay: 60ms; }
.mnav-panel > *:nth-child(4) { animation-delay: 90ms; } .mnav-panel > *:nth-child(5) { animation-delay: 120ms; }
.mnav-panel > *:nth-child(n+6) { animation-delay: 150ms; }

/* Product lines block (home): sliding highlight, arrow turns, hover intent in the page script */
.co-list .t-pill { border-radius: 20px; transition-duration: var(--duration-medium) !important; }
.co-list.t-has-pill .co-tab { transition: color 200ms ease 60ms !important; filter: none !important; }
.co-list.t-has-pill .co-tab::before { background: #ffffff; }
.co-tab > span { transition: background-color 250ms ease, color 250ms ease !important; }
.co-tab > span svg { transition: transform var(--duration-medium) var(--ease-smooth-out); }
.co-tab[aria-selected="true"] > span svg { transform: rotate(45deg); }
@media (max-width: 760px) {
  .co-list { flex-direction: row !important; overflow-x: auto; scroll-snap-type: x proximity; gap: 8px !important; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .co-list::-webkit-scrollbar { display: none; }
  .co-list .co-tab { width: auto !important; height: 48px !important; min-height: 0 !important; min-width: 0 !important; flex: none; white-space: nowrap; font-size: 15px !important; padding: 0 6px 0 18px !important; border-radius: 50px !important; scroll-snap-align: start; }
  .co-list .co-tab > span:last-child { width: 36px !important; height: 36px !important; }
  .co-list .co-tab > span:first-child { white-space: nowrap; flex-shrink: 0; }
  .co-list .t-pill { border-radius: 50px; }
  .co-media { aspect-ratio: 4 / 3 !important; }
}

/* Courses / details accordions without JS: animate native <details> where supported */
:root { interpolate-size: allow-keywords; }
details.qx-more-d::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease-smooth-out), content-visibility .3s allow-discrete; }
details.qx-more-d[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .co-media > * { transition: none !important; }
  .mnav-panel .mn-link, .mnav-panel .mn-h { animation: none !important; }
  .co-tab > span svg { transition: none; }
}

/* Mobile rhythm: section spacing and headings sized for phones */
@media (max-width: 640px) {
  section[style*="padding: 120px 20px"], section[style*="padding: 130px 20px"] { padding-top: 72px !important; }
  section[style*="padding: 120px 20px;"], section[style*="padding: 120px 20px\""] { padding-bottom: 72px !important; }
  .rv[style*="margin-top: 64px"], div[style*="margin-top: 64px"] { margin-top: 36px !important; }
  div[style*="margin-top: 56px"] { margin-top: 32px !important; }
  h2[style*="clamp(32px"] { font-size: 30px !important; line-height: 1.1 !important; }
  p, li { text-wrap: pretty; }
}


/* es/pt: longer nav labels, drop the phone from the top bar */
html[lang="es"] .nav-phone,html[lang="pt-BR"] .nav-phone{display:none!important}
/* quote bubble sits above the HubSpot chat launcher (bottom-right) */
.qb{bottom:100px!important}
.qp{bottom:168px!important;max-height:calc(100vh - 200px)!important}
@media (max-width:640px){.qb{bottom:88px!important}.qp{bottom:150px!important;max-height:calc(100dvh - 170px)!important}}
/* scroll reveal fallback for browsers without scroll-driven animations (older iOS Safari) */
html.io .rv,html.io .l-subs > *,html.io .l-engs > *,html.io .l-brands > *,html.io .l-why > *,html.io .l-stats > *,html.io .l-feat > *,html.io .l-pair > *,html.io .l-steps > *,html.io .l-core > *,html.io .l-checks > *,html.io .l-tl > *,html.io .l-logos > *{animation:none!important;opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.25,.6,.3,1),transform .9s cubic-bezier(.25,.6,.3,1);transition-delay:var(--io-d,0s)}
html.io .io-in{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){html.io .rv,html.io .io-t{opacity:1!important;transform:none!important;transition:none!important}}
/* internal pages: same tab list as the home product lines block */
@media (min-width: 1201px) { .l-tabs .co-tab { min-height: 72px !important; border-radius: 20px !important; font-size: 18px !important; padding-left: 30px !important; } }
.l-tabs .co-tab:hover { filter: brightness(.97); }
@keyframes l-fade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.l-tabmedia img { animation: l-fade .55s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .l-tabmedia img { animation: none; } }
/* mobile header quote button: list icon + count (text is hidden at this width) */
.nav-cta .ic { position: relative; }
.nav-ic-list, .nav-cnt { display: none; }
.nav-cnt { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 50px; background: #d32a37; color: #fff; font: 600 11px/20px 'BDO Grotesk', Arial, sans-serif; text-align: center; box-shadow: 0 0 0 2px #1d2126; }
@media (max-width: 640px) {
  .nav-cta .ic > svg:not(.nav-ic-list) { display: none; }
  .nav-cta .ic .nav-ic-list { display: block; color: #1d2126; }
  .nav-cta .nav-cnt:not(:empty) { display: block; }
}
/* mobile bottom bar */
.mbar { display: none; }
@media (max-width: 640px) {
  .mbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 90; display: flex; gap: 8px; padding: 6px; border-radius: 50px; background: rgba(29,33,38,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 34px rgba(14,15,17,.3); font-family: 'BDO Grotesk', 'Helvetica Neue', Arial, sans-serif; animation: mbar-in .5s cubic-bezier(.2,.8,.2,1) .4s both; }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 50px; font-size: 15px; font-weight: 500; text-decoration: none; }
  .mbar-q { flex: 1; background: #d32a37; color: #fff; }
  .mbar-q .nav-ic-list { display: block; }
  .mbar-n { min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 50px; background: #fff; color: #d32a37; font: 600 12px/22px inherit; text-align: center; }
  .mbar-wa { padding: 0 16px; background: #fff; color: #1d2126; }
  .mbar-wa svg { color: #25d366; }
  html.has-mbar body { padding-bottom: 76px; }
  html.has-mbar .qb, html.has-mbar .qp ~ * .qb { display: none !important; }
  html.has-mbar .qp { bottom: 84px !important; }
  html.has-mbar #hubspot-messages-iframe-container { bottom: 72px !important; }
}
@keyframes mbar-in { from { opacity: 0; transform: translateY(20px); } }
@media (prefers-reduced-motion: reduce) { .mbar { animation: none; } }
/* mobile: one closing block per page (the call card and the how-to-order block repeat the CTA below) */
@media (max-width: 760px) { .call-blue, .l-how { display: none !important; } }
/* home hero on mobile: darker wash behind the text */
@media (max-width: 640px) { [style*="background: linear-gradient(90deg, rgba(14,15,17,0.9) 0%"], [style*="background: linear-gradient(90deg, rgba(14,15,17,0.88) 0%"] { background: linear-gradient(180deg, rgba(14,15,17,.45) 0%, rgba(14,15,17,.72) 40%, rgba(14,15,17,.88) 75%, rgba(14,15,17,.6) 100%) !important; } }

/* ===== transitions.dev pass (14/11) ===== */
/* error shake on invalid fields */
@keyframes m-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
.qx-f.bad .qx-in, .gt-in.bad, .px-in.bad, .m-bad { animation: m-shake .42s cubic-bezier(.36,.07,.19,.97) both; }
/* success check: circle pops, stroke draws */
@keyframes m-pop-in { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } to { transform: none; opacity: 1; } }
@keyframes m-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.qx-done-ic, .px-sck, .m-ok-ic { animation: m-pop-in .55s .1s cubic-bezier(.3,1.4,.5,1) both; }
.qx-done-ic path, .px-sck path, .m-ok-ic path { stroke-dasharray: 30; animation: m-draw .45s .45s cubic-bezier(.65,0,.35,1) both; }
/* notification badge / counters pop when the number changes (class added by motion.js) */
@keyframes m-badge { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.m-pop { animation: m-badge .45s cubic-bezier(.3,1.5,.5,1); }
/* icon swap on "add" buttons: content flips in when the part is already in the list */
@keyframes m-swap { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
.qx-add.in { animation: m-swap .3s cubic-bezier(.2,.8,.2,1); }
/* toast: slides up, replays on each new message */
.qx-toast.m-pop { animation: m-toast .35s cubic-bezier(.2,.8,.2,1); }
@keyframes m-toast { from { transform: translate(-50%, 10px) scale(.96); } to { transform: translate(-50%, 0); } }
/* page side-by-side: quote steps slide in the direction of travel */
@keyframes m-side-f { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes m-side-b { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.qx-wrap > div > .qx-card { animation: m-side-f .45s cubic-bezier(.2,.8,.2,1) both; }
.qx-wrap[data-dir="b"] > div > .qx-card { animation-name: m-side-b; }
/* skeleton while the parts catalog loads */
@keyframes m-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.qx-sk { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.qx-sk span { display: block; height: 64px; border-radius: 14px; background: linear-gradient(90deg, #eef0f2 0%, #f7f8f9 40%, #eef0f2 80%); background-size: 200% 100%; animation: m-shimmer 1.4s linear infinite; }
.qx-sk span:nth-child(2) { opacity: .8; } .qx-sk span:nth-child(3) { opacity: .6; } .qx-sk span:nth-child(4) { opacity: .4; }
/* toggle: B2B early access checkbox becomes a switch */
.qx-check input[type=checkbox] { appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 44px !important; height: 26px !important; margin: 0 !important; border-radius: 50px; background: #c9cdd2; cursor: pointer; transition: background-color .25s; }
.qx-check input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.qx-check input[type=checkbox]:checked { background: #d32a37; }
.qx-check input[type=checkbox]:checked::before { transform: translateX(18px); }
.qx-check input[type=checkbox]:focus-visible { outline: 2px solid #1e1e87; outline-offset: 2px; }
/* dropdown morph: the quote bubble grows into the quote panel */
@keyframes m-morph { from { clip-path: inset(calc(100% - 60px) 0 0 calc(100% - 210px) round 50px); opacity: .6; } to { clip-path: inset(0 0 0 0 round 26px); opacity: 1; } }
.qp { animation: m-morph .5s cubic-bezier(.2,.8,.2,1) both !important; transform-origin: bottom right; }
/* home account form: field icons like the access-request form */
.acct-form label { position: relative; }
.acct-form label::before { content: ""; position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: #9aa0a6; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; pointer-events: none; transition: background-color .2s; }
.acct-form label:focus-within::before { background: #1d2126; }
.acct-form input, .acct-form select { padding-left: 48px !important; }
.acct-form label:nth-of-type(1) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.acct-form label:nth-of-type(2) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.acct-form label:nth-of-type(3) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.acct-form label:nth-of-type(4) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M8 8h3M8 12h3M8 16h3M3 21h18'/%3E%3C/svg%3E"); }
.acct-form .m-bad-f { box-shadow: inset 0 0 0 1px #d32a37; border-radius: 18px; background: #fff8f8; }
.acct-form button.m-sent { background: #15803d !important; }
@media (prefers-reduced-motion: reduce) {
  .qx-f.bad .qx-in, .gt-in.bad, .px-in.bad, .m-bad, .qx-done-ic, .px-sck, .m-ok-ic, .qx-done-ic path, .px-sck path, .m-pop, .qx-add.in, .qx-wrap > div > .qx-card, .qp { animation: none !important; }
  .qx-sk span { animation: none; }
}
/* text fields: no blue focus outline (it doubled up with the field border); focus shows on the field itself */
input:not([type=checkbox]):not([type=radio]):focus-visible, select:focus-visible, textarea:focus-visible, .qx input:not([type=checkbox]):focus-visible, .qx select:focus-visible, .qx textarea:focus-visible { outline: none !important; }
.qx-search input:focus { border-color: #1d2126 !important; box-shadow: 0 0 0 3px rgba(29,33,38,.08); }
.qx .qx-in:focus { border-color: #1d2126; box-shadow: 0 0 0 3px rgba(29,33,38,.08); }
.acct-form label:focus-within { box-shadow: inset 0 0 0 1px #1d2126; border-radius: 18px; }

/* FAQ blocks (home + product pages) */
.fq-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:start}
.fq-k{display:inline-block;border:1px solid rgba(29,33,38,.2);color:#d32a37;border-radius:50px;padding:0 14px;font-weight:600;font-size:12px;line-height:25px;letter-spacing:.6px;text-transform:uppercase}
.fq-h h2{margin:18px 0 0;font-weight:600;color:#1d2126;font-size:clamp(30px,3.2vw,46px);line-height:1.1}
.fq-h p{margin:18px 0 0;max-width:420px}.fq-h a{color:#d32a37}
.fq-list{display:flex;flex-direction:column;gap:10px}
.fq-i{background:#fff;border-radius:20px;padding:0 26px;transition:box-shadow .3s}.fq-i:hover{box-shadow:0 10px 24px rgba(29,33,38,.06)}
.fq-i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:500;font-size:18px;color:#1d2126;line-height:1.35}
.fq-i summary::-webkit-details-marker{display:none}.fq-i summary:focus{outline:none}.fq-i:has(summary:focus-visible){outline:2px solid #1e1e87;outline-offset:3px}
.fq-ic{flex:none;width:36px;height:36px;border-radius:50%;background:#eef0f2;position:relative;transition:background-color .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.fq-ic::before,.fq-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:#1d2126;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .3s}
.fq-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq-i[open] .fq-ic{background:#1e1e87;transform:rotate(180deg)}.fq-i[open] .fq-ic::before,.fq-i[open] .fq-ic::after{background:#fff}.fq-i[open] .fq-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.fq-i p{margin:0;padding:0 50px 22px 0;line-height:1.6}
.fq-i::details-content{block-size:0;overflow:hidden;transition:block-size .35s cubic-bezier(.22,1,.36,1),content-visibility .35s allow-discrete}.fq-i[open]::details-content{block-size:auto}
@media (max-width:640px){#faq{padding-bottom:88px !important}}@media (max-width:900px){.fq-in{grid-template-columns:1fr;gap:28px}.fq-i{padding:0 18px}.fq-i summary{font-size:16px;padding:18px 0}.fq-i p{padding:0 0 18px}}
@media (prefers-reduced-motion:reduce){.fq-i::details-content,.fq-ic,.fq-ic::before,.fq-ic::after{transition:none}}

/* Guides: lists and spec tables */
.g-art a:not(.btn){color:#d32a37;text-decoration:underline;text-underline-offset:3px}
.g-art strong{color:#1d2126;font-weight:600}
.g-list{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.g-list li{position:relative;padding-left:22px;line-height:1.55}
.g-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:#d32a37}
.g-tw{margin:22px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;border:1px solid #e3e6e9}
.g-table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px;line-height:1.45}
.g-table th,.g-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #eceef0}
.g-table thead th{background:#1d2126;color:#fff;font-weight:600;font-size:13px;letter-spacing:.4px;text-transform:uppercase}
.g-table tbody th{color:#1d2126;font-weight:600;white-space:nowrap}
.g-table tbody tr:last-child th,.g-table tbody tr:last-child td{border-bottom:0}
.g-table tbody tr:nth-child(even){background:#f6f7f8}
@media (max-width:760px){.g-art .g-intro{font-size:17px}}
.g-lbl{display:none}
@media (max-width:760px){.g-tw{border:0;border-radius:0;overflow:visible}.g-table{min-width:0}.g-table thead{display:none}.g-table,.g-table tbody,.g-table tr,.g-table th,.g-table td{display:block}.g-table tr{background:#f6f7f8!important;border-radius:16px;padding:16px 18px;margin:0 0 10px}.g-table th,.g-table td{padding:0;border:0}.g-table tbody th{white-space:normal;font-size:17px;margin:0 0 10px}.g-table td{margin:0 0 10px}.g-table td:last-child{margin:0}.g-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#8a9099;margin:0 0 2px}}
/* hero slide dots: 24px touch targets, same 10px dots */
div:has(> button[aria-label^="Slide"]){gap:0 !important}
button[aria-label^="Slide"]{box-sizing:content-box !important;padding:0 !important;border:7px solid transparent !important;border-radius:17px !important;background-clip:padding-box !important}
.g-take{margin:28px 0 0;background:#fff;border-radius:24px;padding:26px 30px;box-shadow:inset 0 0 0 1px #f0d3d6}
.g-take-t{margin:0;font-family:'BDO Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:#d32a37}
.g-take .g-list{margin-top:14px}
.g-gloss{margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g-term{background:#f6f7f8;border-radius:16px;padding:16px 18px}
.g-term dt{font-weight:600;color:#1d2126}.g-term dd{margin:6px 0 0;font-size:15px;line-height:1.55}
.g-hub{margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g-art a.g-hub-i{text-decoration:none;color:inherit;position:relative;display:flex;flex-direction:column;gap:4px;background:#f6f7f8;border-radius:16px;padding:18px 60px 18px 18px;transition:background-color .25s,transform .25s}
.g-art a.g-hub-i:hover{background:#eceef0;transform:translateY(-2px)}
.g-hub-n{font-weight:600;color:#1d2126}.g-hub-d{font-size:14px;color:#5a5a60}
.g-hub-ic{position:absolute;right:16px;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:50%;background:#d32a37;color:#fff;display:flex;align-items:center;justify-content:center}
@media (max-width:760px){.g-gloss,.g-hub{grid-template-columns:1fr}.g-take{padding:22px 20px}}