/* ==========================================================================
   PRICING FAQ — illustrated accordion. Loaded by pricing.html only.

   Native <details>/<summary> underneath, so it works without JS and with the
   keyboard. pricing-hero.js adds the smooth height animation; while an item is
   collapsing it carries .is-closing so the "open" styling reverses in step.
   The illustration is drawn in em against the art column's width (cqi).
   ========================================================================== */
.fq-section {
  --fq-ease: cubic-bezier(.22, 1, .36, 1);
  --fq-navy: #0b1533; --fq-muted: #5a6a8a;
  position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(40px, 7vh, 96px) 0 clamp(56px, 8vh, 110px);
}
.fq-section::before, .fq-section::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.fq-section::before { width: 46vw; height: 40vw; left: -18vw; bottom: -22vw; background: radial-gradient(closest-side, rgb(124 58 237 / 8%), transparent); }
.fq-section::after { width: 30vw; height: 36vw; right: -14vw; bottom: -8vw; background: radial-gradient(closest-side, rgb(20 107 255 / 8%), transparent); }
.fq-shell { width: min(100% - 2 * clamp(12px, 1.8vw, 32px), 1600px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 33fr) minmax(0, 67fr); align-items: center; gap: clamp(20px, 3vw, 60px); }

/* --- Heading ------------------------------------------------------------- */
.fq-kicker { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(13px, .85vw, 15px); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #146bff; }
.fq-kicker::after { content: ''; width: 34px; height: 2px; border-radius: 2px; background: #146bff; }
.fq-head h2 { margin: 14px 0 0; font-size: clamp(32px, 3vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -.04em; color: var(--fq-navy); }
.fq-grad { background: linear-gradient(90deg, #146bff 0%, #2d6bff 60%, #5b4bf0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.fq-head p { margin: 14px 0 0; max-width: 680px; font-size: clamp(15.5px, 1.05vw, 19px); line-height: 1.55; color: var(--fq-muted); }

/* --- Accordion ----------------------------------------------------------- */
.fq-list { display: grid; gap: 14px; margin: clamp(24px, 3.4vh, 36px) 0 0 clamp(0px, 4.6vw, 96px); }
.fq-item {
  --c: #146bff; --t: #e8f0ff; --c-rgb: 20 107 255;
  position: relative; border-radius: 18px; background: rgb(255 255 255 / 94%);
  border: 1px solid #e7ecf6;
  box-shadow: 0 1px 2px rgb(20 40 90 / 4%), 0 14px 34px -26px rgb(30 60 130 / 30%);
  transition: border-color 320ms ease, box-shadow 380ms var(--fq-ease), transform 380ms var(--fq-ease);
}
.fq-item--green { --c: #10a76d; --t: #e2f7ee; --c-rgb: 16 167 109; }
.fq-item--violet { --c: #7c3aed; --t: #efe7ff; --c-rgb: 124 58 237; }
.fq-item--amber { --c: #e08a00; --t: #fff2d6; --c-rgb: 224 138 0; }
.fq-item--pink { --c: #e5487a; --t: #ffe6ee; --c-rgb: 229 72 122; }
.fq-item--cyan { --c: #0b9fc0; --t: #ddf5fb; --c-rgb: 11 159 192; }
.fq-item > summary { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); min-height: 78px; padding: 12px clamp(14px, 1.2vw, 20px); list-style: none; cursor: pointer; border-radius: inherit; }
.fq-item > summary::-webkit-details-marker { display: none; }
.fq-item > summary:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.fq-ico { display: grid; place-items: center; width: clamp(48px, 3.4vw, 58px); aspect-ratio: 1; flex-shrink: 0; border-radius: 16px; color: var(--c); background: var(--t); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%); transition: transform 420ms var(--fq-ease), background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.fq-ico svg { width: 48%; height: 48%; }
.fq-q-text { flex: 1; min-width: 0; font-size: clamp(15.5px, 1.05vw, 18.5px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--fq-navy); }
.fq-toggle { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: #eef3ff; transition: transform 460ms var(--fq-ease), background-color 300ms ease, box-shadow 300ms ease; }
.fq-toggle i { position: absolute; width: 15px; height: 2.4px; border-radius: 2px; background: #146bff; transition: background-color 300ms ease; }
.fq-toggle i + i { transform: rotate(90deg); }
.fq-answer { overflow: hidden; }
.fq-answer p { margin: 0; max-width: 78ch; padding: 0 clamp(18px, 2vw, 32px) 22px calc(clamp(14px, 1.2vw, 20px) + clamp(48px, 3.4vw, 58px) + clamp(14px, 1.4vw, 22px)); font-size: clamp(14.5px, .95vw, 16.5px); line-height: 1.65; color: var(--fq-muted); }

/* Hover + open */
@media (hover: hover) and (pointer: fine) {
  .fq-item:hover { transform: translateY(-2px); border-color: rgb(var(--c-rgb) / 28%); box-shadow: 0 1px 2px rgb(20 40 90 / 4%), 0 22px 44px -28px rgb(var(--c-rgb) / 45%); }
  .fq-item:hover .fq-ico { transform: rotate(-6deg) scale(1.06); }
  .fq-item:hover .fq-toggle { background: #e2ebff; }
}
.fq-item[open]:not(.is-closing) { border-color: rgb(var(--c-rgb) / 35%); box-shadow: 0 1px 2px rgb(20 40 90 / 4%), 0 26px 50px -30px rgb(var(--c-rgb) / 50%); }
.fq-item[open]:not(.is-closing) .fq-ico { color: #fff; background: var(--c); box-shadow: 0 10px 20px -10px rgb(var(--c-rgb) / 80%); }
.fq-item[open]:not(.is-closing) .fq-toggle { transform: rotate(135deg); background: var(--c); box-shadow: 0 8px 18px -8px rgb(var(--c-rgb) / 75%); }
.fq-item[open]:not(.is-closing) .fq-toggle i { background: #fff; }
.fq-item[open]:not(.is-closing)::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }

/* --- Illustration -------------------------------------------------------- */
.fq-art { position: relative; container-type: inline-size; min-width: 0; max-width: 560px; justify-self: center; width: 100%; }
.fq-art-par { --rx: 0deg; --ry: 0deg; position: relative; height: 0; padding-bottom: 92%; font-size: calc(100cqi / 50); transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 600ms var(--fq-ease); }
.fq-art.is-tracking .fq-art-par { transition-duration: 280ms; }
.fq-art-par > * { position: absolute; }
.fq-floor { left: 4em; top: 37.5em; width: 42em; height: 6.5em; border-radius: 50%; background: radial-gradient(closest-side, rgb(47 107 255 / 20%), rgb(124 58 237 / 6%) 60%, transparent); }
.fq-bubble { left: 6em; top: 7.4em; width: 28em; z-index: 1; }
.fq-bubble svg, .fq-chat svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1.6em 2em rgb(20 70 200 / 28%)); }
.fq-chat svg { filter: drop-shadow(0 1.4em 1.8em rgb(40 70 150 / 22%)); }
.fq-chat { left: 23.5em; top: 23em; width: 21em; z-index: 2; }
.fq-leaves { left: .5em; top: 24.5em; width: 11em; z-index: 3; overflow: visible; }
.fq-leaf { transform-box: fill-box; transform-origin: 50% 100%; }
.fq-q { transform-box: fill-box; transform-origin: 50% 60%; }
.fq-line { transform-box: fill-box; transform-origin: 0 50%; }
.fq-sq { border-radius: .8em; }
.fq-sq--y { left: 3em; top: 2.6em; width: 3.4em; height: 3.4em; background: linear-gradient(150deg, #ffd978, #f5b42a); box-shadow: 0 .6em 1.2em -.4em rgb(245 180 42 / 60%), inset 0 .15em 0 rgb(255 255 255 / 45%); }
.fq-sq--v { left: 42em; top: 17.5em; width: 3.2em; height: 3.2em; background: linear-gradient(150deg, #b99bff, #8b5cf6); box-shadow: 0 .6em 1.2em -.4em rgb(139 92 246 / 60%), inset 0 .15em 0 rgb(255 255 255 / 40%); }
.fq-dot { left: 45.5em; top: 7em; width: 1.3em; height: 1.3em; border-radius: 50%; background: #5b97ff; box-shadow: 0 0 0 .4em rgb(91 151 255 / 18%); }
.fq-sparks { left: 31em; top: .6em; width: 9em; overflow: visible; }
.fq-sparks path { stroke-dasharray: 40; }

/* --- Entrance (once) then idle motion ------------------------------------ */
.js .fq-section:not(.is-in) :is(.fq-a, .fq-item, .fq-art-par > *) { opacity: 0; }
.fq-section.is-in .fq-a { animation: fq-up 760ms var(--fq-ease) var(--d, 0ms) backwards; }
.fq-section.is-in .fq-item { animation: fq-in 720ms var(--fq-ease) backwards; animation-delay: calc(520ms + var(--i) * 110ms); }

.fq-section.is-in .fq-floor { animation: fq-fade 1200ms ease 150ms backwards; }
.fq-section.is-in .fq-bubble { animation: fq-pop 950ms cubic-bezier(.34, 1.3, .64, 1) 200ms backwards; }
.fq-section.is-in .fq-bubble svg { animation: fq-float 6s ease-in-out 1.4s infinite; }
.fq-section.is-in .fq-q { animation: fq-q-in 700ms var(--fq-ease) 700ms backwards, fq-wiggle 7s ease-in-out 3s infinite; }
.fq-section.is-in .fq-chat { animation: fq-slide 900ms var(--fq-ease) 560ms backwards; }
.fq-section.is-in .fq-chat svg { animation: fq-float 5.2s ease-in-out 2.2s infinite reverse; }
.fq-section.is-in .fq-line { animation: fq-line 700ms var(--fq-ease) backwards; }
.fq-section.is-in .fq-line--1 { animation-delay: 1050ms; } .fq-section.is-in .fq-line--2 { animation-delay: 1170ms; } .fq-section.is-in .fq-line--3 { animation-delay: 1290ms; }
.fq-section.is-in .fq-leaves { animation: fq-fade 400ms ease 800ms backwards, fq-sway 6s ease-in-out 2s infinite; transform-origin: 50% 100%; }
.fq-section.is-in .fq-leaf { animation: fq-grow 900ms var(--fq-ease) backwards; }
.fq-section.is-in .fq-leaf--1 { animation-delay: 850ms; } .fq-section.is-in .fq-leaf--3 { animation-delay: 950ms; } .fq-section.is-in .fq-leaf--2 { animation-delay: 1050ms; }
.fq-section.is-in .fq-sq--y { animation: fq-sq-pop 700ms cubic-bezier(.34, 1.5, .64, 1) 1000ms backwards, fq-drift 9s ease-in-out 1.8s infinite alternate; }
.fq-section.is-in .fq-sq--v { animation: fq-sq-pop 700ms cubic-bezier(.34, 1.5, .64, 1) 1150ms backwards, fq-drift 8s ease-in-out 2s infinite alternate-reverse; }
.fq-section.is-in .fq-dot { animation: fq-sq-pop 600ms cubic-bezier(.34, 1.5, .64, 1) 1250ms backwards, fq-pulse 3s ease-in-out 2s infinite; }
.fq-section.is-in .fq-sparks { animation: fq-fade 200ms ease 900ms backwards, fq-blink 3.4s ease-in-out 2.4s infinite; }
.fq-section.is-in .fq-sparks path { animation: fq-draw 600ms var(--fq-ease) backwards; }
.fq-section.is-in .fq-sparks path:nth-child(1) { animation-delay: 950ms; } .fq-section.is-in .fq-sparks path:nth-child(2) { animation-delay: 1050ms; } .fq-section.is-in .fq-sparks path:nth-child(3) { animation-delay: 1150ms; }

@keyframes fq-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes fq-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes fq-fade { from { opacity: 0; } }
@keyframes fq-pop { from { opacity: 0; transform: scale(.6) rotate(-10deg); } }
@keyframes fq-q-in { from { opacity: 0; transform: scale(.5); } }
@keyframes fq-wiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-9deg); } 96% { transform: rotate(6deg); } }
@keyframes fq-slide { from { opacity: 0; transform: translate(3em, 1em) scale(.92); } }
@keyframes fq-line { from { transform: scaleX(0); } }
@keyframes fq-grow { from { transform: scaleY(0); } }
@keyframes fq-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes fq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7em); } }
@keyframes fq-sq-pop { from { opacity: 0; scale: 0; } }
@keyframes fq-drift { from { transform: translate(0, 0) rotate(0); } to { transform: translate(.6em, -.8em) rotate(14deg); } }
@keyframes fq-pulse { 50% { box-shadow: 0 0 0 .8em rgb(91 151 255 / 6%); } }
@keyframes fq-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes fq-draw { from { stroke-dashoffset: 40; } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .fq-shell { grid-template-columns: minmax(0, 1fr); }
  .fq-art { max-width: 380px; order: -1; }
  .fq-list { margin-left: 0; }
  .fq-head { text-align: left; }
}
@media (max-width: 640px) {
  .fq-art { max-width: 280px; }
  .fq-item > summary { min-height: 66px; gap: 12px; }
  .fq-ico { width: 42px; border-radius: 12px; }
  .fq-toggle { width: 34px; height: 34px; }
  .fq-answer p { padding: 0 16px 18px 16px; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fq-section *, .fq-section *::before, .fq-section *::after { animation: none !important; }
  .js .fq-section:not(.is-in) :is(.fq-a, .fq-item, .fq-art-par > *) { opacity: 1; }
  .fq-art-par { transform: none !important; }
  .fq-item:hover, .fq-item:hover .fq-ico { transform: none; }
}