/* Sketch Landing — FAQs. Layout around the Suite accordion (.skfaq-item). */

.sklpq__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.sklpq__aside { position: relative; }
.sklpq__aside .sklp-h2 { font-size: clamp(30px, 3.1vw, 46px); max-width: 16ch; }
.sklpq__cta-actions { margin-top: 18px; }
@media (min-width: 981px) {
	.sklpq__aside { position: sticky; top: 96px; }
}
/* The Suite section root carries its own padding and font; inside this layout it is just the list. */
.sklpq .skfaq { padding: 0; width: auto; }
.sklpq .skfaq-item__panel { max-width: none; }

/* ── Accordion rows ──
   BeTheme's be.css styles every <button> (5px radius) and every button:hover
   (its own grey text on an off-white background) at higher specificity than the
   Suite's class rule, which is what turned a hovered question white with grey
   text and square corners inside the rounded card. The question button is
   pinned transparent in every state; the card keeps its background, and the
   hover lives on the arrow instead. */
.sklpq .skfaq-item { border-radius: 18px; overflow: hidden; }
.sklpq .skfaq-item__btn,
.sklpq .skfaq-item__btn:hover,
.sklpq .skfaq-item__btn:focus,
.sklpq .skfaq-item__btn:active,
.sklpq .skfaq-item__btn[aria-expanded="true"] {
	background: transparent;
	background-image: none;
	border: 0;
	border-radius: 18px;
	box-shadow: none;
	color: var(--skfaq-heading);
	text-decoration: none;
	transform: none;
}
/* A little less tall: the question text and arrow still have room around them. */
.sklpq .skfaq-item__btn {
	padding: clamp(16px, 1.9vw, 22px) clamp(20px, 2.3vw, 28px);
	gap: 18px;
	line-height: 1.3;
}
.sklpq .skfaq-item__btn:focus-visible {
	outline: 3px solid var(--skfaq-accent);
	outline-offset: -3px;
}
.sklpq--dark .skfaq-item__btn:focus-visible { outline-color: #fff; }

/* Arrow: the hover state. Light theme: indigo → navy. Navy theme: lime → white.
   The chevron always flips to the opposite colour, so it never disappears. */
.sklpq .skfaq-item__icon {
	transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}
.sklpq .skfaq-item__btn:hover .skfaq-item__icon,
.sklpq .skfaq-item__btn:focus-visible .skfaq-item__icon {
	filter: none;
	background: var(--lp-ink-2);
	color: #fff;
}
.sklpq--dark .skfaq-item__btn:hover .skfaq-item__icon,
.sklpq--dark .skfaq-item__btn:focus-visible .skfaq-item__icon {
	background: #fff;
	color: var(--lp-ink-2);
}

/* Expanded: air between the question and its answer, and a balanced bottom.
   The panel animates max-height from 0 to its scrollHeight, which includes
   this padding, so nothing jumps. */
.sklpq .skfaq-item__answer {
	padding: 6px clamp(20px, 2.3vw, 28px) clamp(22px, 2.4vw, 28px);
	max-width: 64ch;
}
.sklpq--dark .skfaq-item__answer { max-width: 60ch; }

.sklpq__cta {
	margin-top: clamp(24px, 3vw, 40px);
	padding: clamp(22px, 2.4vw, 32px);
	border-radius: var(--lp-radius-lg);
	background: var(--lp-ink-2);
	color: #fff;
}
.sklpq--dark .sklpq__cta { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.sklpq__cta-title {
	margin: 0 0 10px;
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #fff;
}
.sklpq__cta-text { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; }
.sklpq__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sklpq__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.18s ease;
}
.sklpq__phone:hover { color: var(--lp-lime); }
.sklpq__phone:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }

/* Navy variant of the accordion: lime circle, dark chevron. */
.sklpq--dark .skfaq-item__icon { color: var(--lp-ink-2); }

@media (max-width: 980px) {
	.sklpq__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.sklpq .skfaq-item__icon { transition: none; }
}