/* Module buying-guide design layer — /kb/category/{slug}.
*
* The presentation layer for Components/Pages/KbCategoryPage.razor. Global CSS,
* linked from App.razor, so the same two rules the sibling sheets state apply:
*
* 1. Nothing confines these rules to this page any more, so every selector is
* qkc- prefixed or a descendant of one. That holds for the rules that reach
* inside too: they hang off .qkc-panel__form, so they cannot
* touch the same form anywhere else on the site.
* 2. @keyframes carry the qkc- prefix for the same reason, so they cannot
* collide with the compiled Tailwind bundle or with home's qh-, the help
* center's qc-, pricing's qp- or the blog's qb- animations.
*
* These rules are unlayered and Tailwind v4's utilities live inside @layer, so
* they win regardless of specificity. Keep every selector class-based.
*
* This page is the destination of every card on /resources/help-center, so it
* is deliberately the same surface: pages/help-center.css's light gradient,
* aurora and card language continue here rather than handing the reader to the
* old dark .hero-section band mid-journey. Palette is the shared logo ramp —
* #4f46e5 → #7c3aed → #a22dea — and no hue from outside it appears.
*
* The hero's two buttons are home's .qh-btn / .qh-btn-ghost, reused verbatim
* rather than re-cut here; they are already built for a light hero.
*
* Reading order the layout is built around: hero (what this module is, with its
* artwork or a preview of the guide) → the guide itself as a numbered accordion
* with a jump rail → "buy these together" → the shortlist form, held in a
* sticky rail beside all of it so the conversion point never scrolls away.
*/
/* Fragment links from the jump rail land under the sticky 81px site header
* without this. It is scroll-padding on the scroll container rather than
* scroll-margin on the target because the inherited Next.js bundle makes
* an internal scroll container, and Chromium silently ignores
* scroll-margin-top when the scroller is . Declared on both html and
* body because which of the two actually scrolls is that bundle's to change;
* only the real container's value is read, so the other is inert rather than a
* second offset that would add. :has() keeps it to this page. */
html:has(.qkc-page),
body:has(.qkc-page) {
scroll-padding-top: 104px;
}
/* ── hero ───────────────────────────────────────────────────────────── */
.qkc-hero {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fff 0%, #fbfaff 46%, #f3f1fe 100%);
padding: 62px 0 58px;
}
.qkc-hero__aurora,
.qkc-hero__grid {
position: absolute;
inset: 0;
pointer-events: none;
}
.qkc-hero__aurora i {
position: absolute;
display: block;
border-radius: 50%;
filter: blur(90px);
opacity: .72;
animation: qkc-drift 26s ease-in-out infinite;
}
.qkc-hero__aurora i:nth-child(1) {
width: 680px;
height: 680px;
top: -380px;
right: -160px;
background: radial-gradient(circle, rgba(129, 140, 248, .3), transparent 62%);
}
.qkc-hero__aurora i:nth-child(2) {
width: 520px;
height: 520px;
bottom: -290px;
left: -180px;
animation-delay: -9s;
background: radial-gradient(circle, rgba(167, 139, 250, .26), transparent 62%);
}
.qkc-hero__aurora i:nth-child(3) {
width: 400px;
height: 400px;
top: 26%;
left: 44%;
animation-delay: -16s;
background: radial-gradient(circle, rgba(162, 45, 234, .15), transparent 62%);
}
@keyframes qkc-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-42px, 34px) scale(1.08); }
66% { transform: translate(34px, -24px) scale(.94); }
}
.qkc-hero__grid {
opacity: .5;
background-image: radial-gradient(circle at 1px 1px, rgba(79, 70, 229, .22) 1.1px, transparent 0);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 60% 52% at 30% 8%, #000, transparent 72%);
mask-image: radial-gradient(ellipse 60% 52% at 30% 8%, #000, transparent 72%);
}
.qkc-hero__inner {
position: relative;
z-index: 5;
}
/* Two columns only when there is something to put in the second one —
otherwise the hero renders as a half-empty gradient at desktop width, which
is how this page looked before it had artwork. */
.qkc-hero__split {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
align-items: center;
gap: 52px;
}
.qkc-hero__copy { min-width: 0; }
/* Single-column hero: the measure has to be capped by hand, because there is no
second column holding the line length down. */
.qkc-hero__inner > .qkc-hero__copy { max-width: 860px; }
/* ── breadcrumb ─────────────────────────────────────────────────────── */
.qkc-crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 22px;
padding: 0;
list-style: none;
font-size: 12.5px;
color: #94a3b8;
}
.qkc-crumbs a {
color: #64748b;
font-weight: 600;
transition: color .2s;
}
.qkc-crumbs a:hover { color: #4f46e5; }
.qkc-crumbs__sep {
color: #cbd5e1;
user-select: none;
}
.qkc-crumbs__now {
font-weight: 700;
color: #0f172a;
}
/* ── eyebrow ────────────────────────────────────────────────────────── */
.qkc-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 17px 8px 9px;
margin-bottom: 22px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(100deg, #4f46e5, #7c3aed 55%, #a855f7);
box-shadow: 0 12px 30px -12px rgba(99, 102, 241, .85);
}
.qkc-eyebrow__pip {
width: 22px;
height: 22px;
border-radius: 99px;
flex: 0 0 auto;
display: grid;
place-items: center;
color: #fff;
background: rgba(255, 255, 255, .22);
animation: qkc-pulse 2.8s ease-in-out infinite;
}
.qkc-eyebrow__pip svg { width: 12px; height: 12px; }
@keyframes qkc-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .38); }
50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}
/* ── hero copy ──────────────────────────────────────────────────────── */
.qkc-hero__title {
font-size: clamp(31px, 3.8vw, 48px);
line-height: 1.08;
letter-spacing: -.035em;
font-weight: 800;
color: #0b1020;
margin: 0 0 18px;
}
.qkc-accent {
background: linear-gradient(96deg, #4f46e5 0%, #7c3aed 46%, #a22dea 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.qkc-hero__lede {
font-size: clamp(15.5px, 1.2vw, 17px);
line-height: 1.7;
color: #64748b;
max-width: 620px;
margin: 0;
}
/* Module-specific destinations, kept as quiet links rather than a third and
fourth pill — the two buttons above are the site's standing pair and the
hero stops reading as a button rack. */
.qkc-hero__links {
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
margin-top: 22px;
}
.qkc-link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: 700;
color: #4f46e5;
transition: color .2s;
}
.qkc-link:hover { color: #a22dea; }
.qkc-link svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.qkc-link:hover svg { transform: translateX(3px); }
/* ── what the page contains, at a glance ────────────────────────────── */
.qkc-facts {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
margin: 30px 0 0;
padding: 0;
list-style: none;
}
.qkc-fact {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
font-weight: 600;
color: #475569;
}
.qkc-fact__ic {
width: 22px;
height: 22px;
flex: 0 0 auto;
border-radius: 99px;
display: grid;
place-items: center;
color: #7c3aed;
background: #f3eeff;
}
.qkc-fact__ic svg { width: 12px; height: 12px; }
/* ── hero aside: product artwork ────────────────────────────────────── */
.qkc-shot {
position: relative;
min-width: 0;
}
/* Glow behind the frame rather than a border on it, so a screenshot with a
white background does not sit flat against the gradient. */
.qkc-shot::before {
content: "";
position: absolute;
inset: 8% -6% -10% -6%;
border-radius: 40px;
pointer-events: none;
background: radial-gradient(ellipse at 50% 60%, rgba(124, 58, 237, .28), transparent 68%);
filter: blur(34px);
}
.qkc-shot__frame {
position: relative;
padding: 9px;
border-radius: 26px;
background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(246, 244, 255, .9));
border: 1px solid #e6e2fa;
box-shadow: 0 40px 80px -44px rgba(49, 32, 120, .55);
}
.qkc-shot__frame img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
/* ── hero aside: guide preview / companion preview ──────────────────── */
.qkc-aside {
position: relative;
overflow: hidden;
min-width: 0;
padding: 26px 26px 24px;
border-radius: 26px;
background: #fff;
border: 1px solid #eae9f6;
box-shadow: 0 36px 76px -46px rgba(49, 32, 120, .55);
}
.qkc-aside::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #4f46e5, #7c3aed 52%, #a22dea);
}
.qkc-aside__label {
display: block;
margin: 0 0 18px;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: #7c3aed;
}
.qkc-aside__list {
margin: 0;
padding: 0;
list-style: none;
}
.qkc-aside__list > li + li {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f3f1fb;
}
.qkc-aside__row {
display: flex;
align-items: flex-start;
gap: 11px;
min-width: 0;
}
.qkc-aside__pip {
width: 20px;
height: 20px;
margin-top: 1px;
flex: 0 0 auto;
border-radius: 99px;
display: grid;
place-items: center;
font-size: 10.5px;
font-weight: 800;
color: #6d28d9;
background: #f3eeff;
}
.qkc-aside__pip svg { width: 11px; height: 11px; }
.qkc-aside__q {
font-size: 13.5px;
line-height: 1.55;
font-weight: 600;
color: #334155;
min-width: 0;
transition: color .2s;
}
.qkc-aside__q:hover { color: #4f46e5; }
.qkc-aside__why {
display: block;
margin-top: 3px;
font-size: 12.5px;
line-height: 1.6;
font-weight: 400;
color: #94a3b8;
}
/* ── body layout ────────────────────────────────────────────────────── */
.qkc-main {
position: relative;
padding: 56px 0 92px;
background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
}
.qkc-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 372px;
align-items: start;
gap: 44px;
}
.qkc-guide { min-width: 0; }
/* No guide published, but companions to show. "Buy these together" is now the
whole left column rather than a coda to the accordion, and it is short — a
heading and three rows — so the form sits beside it at equal width instead of
below a full-bleed band of cards. Half and half, because neither side is the
subordinate one here: the cards are the only content and the form is the only
action. */
.qkc-layout--pair {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
}
/* No guide and nothing to buy alongside it: nothing to sit beside at all, so
one column and the panel keeps half the width and centres. Held against an
empty field a 372px column reads as a layout that failed to load rather than
a page whose guide is not written yet. */
.qkc-layout--solo {
grid-template-columns: minmax(0, 1fr);
gap: 46px;
}
.qkc-layout--solo .qkc-rail {
position: static;
width: 50%;
margin-inline: auto;
}
/* Neither layout has steps above the companions, so the rule and the space that
separated the two have nothing left to separate. */
.qkc-layout--pair .qkc-together,
.qkc-layout--solo .qkc-together {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* ── companions as rows, in the paired layout ───────────────────────── */
/* One per row rather than the desktop grid: three-across inside a half-width
column squeezes each card below the width of its own reason, and two-across
orphans the third at half width. As a row the card reads left to right —
plate and name, the reason, the link — and the auto column keeps all three
plates and names aligned on one edge. */
.qkc-layout--pair .qkc-mates {
grid-template-columns: minmax(0, 1fr);
gap: 13px;
}
.qkc-layout--pair .qkc-mate {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 18px;
padding: 15px 18px;
}
.qkc-layout--pair .qkc-mate:hover { transform: translateY(-2px); }
.qkc-layout--pair .qkc-mate__top { margin-bottom: 0; }
.qkc-layout--pair .qkc-mate__why { margin: 0; }
/* The separator and the auto top margin both belong to the stacked card, where
this row is the card's own footer. Here it is a third column. */
.qkc-layout--pair .qkc-mate__go {
margin-top: 0;
padding-top: 0;
border-top: 0;
white-space: nowrap;
}
.qkc-head {
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid #eeecf9;
}
.qkc-head__title {
font-size: 23px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -.025em;
color: #0b1020;
margin: 0 0 5px;
}
.qkc-head__sub {
font-size: 14px;
line-height: 1.7;
color: #64748b;
margin: 0;
max-width: 62ch;
}
/* ── jump rail ──────────────────────────────────────────────────────── */
/* Anchors point at the element, not at its answer, so the landing is
the question itself — visible whether or not that step happens to be open. */
.qkc-jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 22px;
padding: 0;
list-style: none;
}
.qkc-jump__chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px 7px 8px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 650;
color: #475569;
background: #fff;
border: 1px solid #e9e6f7;
transition: color .2s, border-color .2s, box-shadow .25s, transform .2s;
}
.qkc-jump__chip:hover {
color: #4f46e5;
border-color: #c7bff4;
transform: translateY(-1px);
box-shadow: 0 12px 24px -16px rgba(79, 70, 229, .8);
}
.qkc-jump__n {
width: 20px;
height: 20px;
flex: 0 0 auto;
border-radius: 99px;
display: grid;
place-items: center;
font-size: 10.5px;
font-weight: 800;
color: #6d28d9;
background: #f3eeff;
transition: color .2s, background .2s;
}
.qkc-jump__chip:hover .qkc-jump__n {
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
/* ── the guide itself ───────────────────────────────────────────────── */
.qkc-steps {
display: flex;
flex-direction: column;
gap: 14px;
}
.qkc-step {
position: relative;
overflow: hidden;
border-radius: 22px;
background: #fff;
border: 1px solid #eae9f6;
box-shadow: 0 20px 44px -34px rgba(15, 23, 42, .45);
transition: border-color .3s, box-shadow .3s;
}
.qkc-step::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
transform: scaleY(0);
transform-origin: top;
background: linear-gradient(180deg, #4f46e5, #7c3aed 52%, #a22dea);
transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.qkc-step:hover {
border-color: #ded9f8;
box-shadow: 0 28px 58px -38px rgba(79, 70, 229, .5);
}
.qkc-step[open] {
border-color: #d8d5f6;
box-shadow: 0 30px 64px -38px rgba(79, 70, 229, .55);
}
.qkc-step[open]::before { transform: scaleY(1); }
.qkc-step__sum {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 21px 22px;
cursor: pointer;
list-style: none;
}
/* The default disclosure triangle is replaced by .qkc-step__ic, so both the
WebKit pseudo-element and the modern marker have to go. */
.qkc-step__sum::-webkit-details-marker { display: none; }
.qkc-step__sum::marker { content: ""; }
.qkc-step__n {
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 800;
color: #6d28d9;
background: linear-gradient(135deg, #f3f0ff, #ede9fe);
border: 1px solid #e6e0fb;
transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.qkc-step[open] .qkc-step__n,
.qkc-step__sum:hover .qkc-step__n {
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-color: transparent;
box-shadow: 0 12px 24px -12px rgba(79, 70, 229, .9);
}
.qkc-step__txt {
min-width: 0;
flex: 1 1 auto;
}
.qkc-step__slot {
display: block;
margin-bottom: 4px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: #7c3aed;
}
.qkc-step__q {
font-size: 16px;
line-height: 1.45;
font-weight: 750;
letter-spacing: -.015em;
color: #0b1020;
margin: 0;
transition: color .2s;
}
.qkc-step__sum:hover .qkc-step__q { color: #4f46e5; }
.qkc-step__ic {
width: 30px;
height: 30px;
margin-top: 2px;
flex: 0 0 auto;
border-radius: 99px;
display: grid;
place-items: center;
color: #7c3aed;
background: #f6f1ff;
transition: color .25s, background .25s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.qkc-step__ic svg { width: 14px; height: 14px; }
.qkc-step[open] .qkc-step__ic {
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
transform: rotate(180deg);
}
.qkc-step__body {
padding: 0 24px 24px 72px;
animation: qkc-reveal .3s ease both;
}
@keyframes qkc-reveal {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: none; }
}
/* The answer is editor-authored HTML from kb_articles, so its elements are
styled here rather than by classes it will never carry. */
.qkc-answer {
font-size: 14.5px;
line-height: 1.78;
color: #475569;
}
.qkc-answer > :first-child { margin-top: 0; }
.qkc-answer > :last-child { margin-bottom: 0; }
.qkc-answer p { margin: 0 0 14px; }
.qkc-answer strong {
font-weight: 700;
color: #0f172a;
}
.qkc-answer a {
font-weight: 650;
color: #4f46e5;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color .2s;
}
.qkc-answer a:hover { color: #a22dea; }
.qkc-answer ul,
.qkc-answer ol {
margin: 0 0 14px;
padding-left: 20px;
}
.qkc-answer ul { list-style: disc; }
.qkc-answer ol { list-style: decimal; }
.qkc-answer li { margin: 0 0 7px; }
.qkc-answer li::marker { color: #a78bfa; }
.qkc-answer h2,
.qkc-answer h3,
.qkc-answer h4 {
font-size: 15.5px;
line-height: 1.4;
font-weight: 750;
letter-spacing: -.015em;
color: #0b1020;
margin: 22px 0 9px;
}
.qkc-answer table {
width: 100%;
margin: 0 0 14px;
border-collapse: collapse;
font-size: 13.5px;
}
.qkc-answer th,
.qkc-answer td {
padding: 9px 12px;
text-align: left;
border: 1px solid #eae9f6;
}
.qkc-answer th {
font-weight: 700;
color: #0f172a;
background: #faf9ff;
}
.qkc-answer blockquote {
margin: 0 0 14px;
padding: 2px 0 2px 16px;
border-left: 3px solid #ddd6fe;
color: #64748b;
}
/* ── "buy these together" ───────────────────────────────────────────── */
.qkc-together {
margin-top: 54px;
padding-top: 40px;
border-top: 1px solid #eeecf9;
}
.qkc-together__title {
font-size: 22px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -.025em;
color: #0b1020;
margin: 0 0 6px;
}
.qkc-together__lede {
font-size: 14px;
line-height: 1.7;
color: #64748b;
margin: 0 0 22px;
max-width: 62ch;
}
.qkc-mates {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.qkc-mate {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 20px 20px 16px;
border-radius: 20px;
background: #fff;
border: 1px solid #eae9f6;
box-shadow: 0 20px 44px -34px rgba(15, 23, 42, .45);
transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}
.qkc-mate::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(90deg, #4f46e5, #7c3aed 52%, #a22dea);
transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.qkc-mate:hover {
transform: translateY(-4px);
border-color: #d8d5f6;
box-shadow: 0 34px 68px -36px rgba(79, 70, 229, .5);
}
.qkc-mate:hover::before { transform: scaleX(1); }
.qkc-mate__top {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 11px;
min-width: 0;
}
/* The module's initials, not an icon set: there is a glyph-free row per module
in kb_categories and a hand-picked icon each would drift the day one is
added. Derived from the name, so a new row styles itself. */
.qkc-mate__mono {
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: 11px;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
color: #5b21b6;
background: linear-gradient(135deg, #f3f0ff, #ede9fe);
border: 1px solid #e6e0fb;
transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.qkc-mate:hover .qkc-mate__mono {
color: #fff;
background: linear-gradient(135deg, #7b5ee5, #a22dea);
border-color: transparent;
box-shadow: 0 12px 24px -12px rgba(140, 40, 220, .9);
}
.qkc-mate__name {
font-size: 15px;
line-height: 1.35;
font-weight: 750;
letter-spacing: -.015em;
color: #0b1020;
margin: 0;
min-width: 0;
transition: color .2s;
}
.qkc-mate:hover .qkc-mate__name { color: #4f46e5; }
.qkc-mate__why {
font-size: 13px;
line-height: 1.7;
color: #64748b;
margin: 0 0 14px;
flex: 1 1 auto;
}
.qkc-mate__go {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 13px;
border-top: 1px solid #f1eefb;
font-size: 12.5px;
font-weight: 700;
color: #7c3aed;
}
.qkc-mate__arrow {
width: 26px;
height: 26px;
flex: 0 0 auto;
border-radius: 99px;
display: grid;
place-items: center;
color: #7c3aed;
background: #f6f1ff;
transition: color .25s, background .25s, transform .25s;
}
.qkc-mate__arrow svg { width: 13px; height: 13px; }
.qkc-mate:hover .qkc-mate__arrow {
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
transform: translateX(3px);
}
/* A category with nothing published still renders its shell rather than
404ing — the URL is real and listed in the sitemap — but it renders no
placeholder in the guide column. A dashed "this guide is being written" box
announces the gap; the form beside it already gives the reader something to
do, so the column is simply dropped and .qkc-layout--solo takes over. */
/* ── shortlist rail ─────────────────────────────────────────────────── */
.qkc-rail {
position: sticky;
top: 96px;
min-width: 0;
}
.qkc-panel {
position: relative;
overflow: hidden;
padding: 26px 26px 28px;
border-radius: 26px;
background: #fff;
border: 1px solid #eae9f6;
box-shadow: 0 34px 74px -44px rgba(79, 70, 229, .6);
}
.qkc-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #4f46e5, #7c3aed 52%, #a22dea);
}
/* Bleeds out of the panel's top-right corner, clipped by the overflow above. */
.qkc-panel::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
top: -210px;
right: -110px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(162, 45, 234, .16), transparent 66%);
}
.qkc-panel__head {
position: relative;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.qkc-panel__ic {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 13px;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
box-shadow: 0 14px 28px -14px rgba(79, 70, 229, .95);
}
.qkc-panel__ic svg { width: 19px; height: 19px; }
.qkc-panel__title {
font-size: 17.5px;
line-height: 1.3;
font-weight: 800;
letter-spacing: -.02em;
color: #0b1020;
margin: 0;
}
.qkc-panel__lede {
position: relative;
font-size: 13.5px;
line-height: 1.7;
color: #64748b;
margin: 0 0 22px;
}
.qkc-panel__form { position: relative; }
/* LeadForm pairs its fields two-across at Tailwind's `sm:` breakpoint, which is
a VIEWPORT query — it fires on a wide screen no matter how narrow the box
holding the form is, so in this rail it was halving a 372px column into two
~170px inputs. Anchoring on .qkc-panel__form stops the override at this
page's panel, so no other page rendering LeadForm is touched. The class is
repeated for the specificity a scope attribute used to supply. The button
follows the fields to full width — a rail of full-width rows with one
shrink-to-fit control at the bottom reads as an alignment mistake. */
.qkc-panel__form.qkc-panel__form .grid { grid-template-columns: minmax(0, 1fr); }
.qkc-panel__form.qkc-panel__form .startFreeTrial,
.qkc-panel__form.qkc-panel__form .bookADemo { width: 100%; }
/* Once the panel is half of a desktop container it is wider than LeadForm's own
`sm:` breakpoint assumes, so the single-column override above is lifted back
off and the fields pair up as they do everywhere else. 1280px is where half
the container clears ~600px; below it the pairs would be narrower than the
rail they replaced. */
@media (min-width: 1280px) {
.qkc-layout--pair .qkc-panel__form.qkc-panel__form .grid,
.qkc-layout--solo .qkc-panel__form.qkc-panel__form .grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qkc-layout--pair .qkc-panel__form.qkc-panel__form .startFreeTrial,
.qkc-layout--solo .qkc-panel__form.qkc-panel__form .startFreeTrial { width: auto; }
}
.qkc-back {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 20px;
padding: 12px 20px;
border-radius: 14px;
font-size: 13.5px;
font-weight: 700;
color: #4338ca;
background: #fff;
border: 1px solid #e2ddf8;
box-shadow: 0 16px 34px -26px rgba(79, 70, 229, .8);
transition: color .2s, background .25s, border-color .2s, box-shadow .25s, transform .25s;
}
.qkc-back:hover {
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 26px 48px -24px rgba(79, 70, 229, .95);
}
.qkc-back svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.qkc-back:hover svg { transform: translateX(-3px); }
/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
.qkc-hero__split { gap: 38px; }
.qkc-layout:not(.qkc-layout--solo):not(.qkc-layout--pair) {
grid-template-columns: minmax(0, 1fr) 340px;
gap: 34px;
}
.qkc-layout--pair { gap: 30px; }
.qkc-mates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The row cannot hold a wrapping reason and a "Read its guide" label in
half of a 1180px container. The arrow keeps carrying the affordance. */
.qkc-layout--pair .qkc-mates { grid-template-columns: minmax(0, 1fr); }
.qkc-layout--pair .qkc-mate { column-gap: 14px; }
.qkc-layout--pair .qkc-mate__go span:first-child { display: none; }
}
@media (max-width: 1024px) {
/* Artwork above the copy would push the h1 below the fold, so the aside
drops underneath instead — and the rail stops being sticky, because a
panel that tracks the viewport once it is full-width covers the content
behind it. */
.qkc-hero__split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.qkc-layout { grid-template-columns: minmax(0, 1fr); gap: 46px; }
.qkc-rail { position: static; }
/* Half of a tablet column is narrower than the form needs; the panel takes
the width back once there is only one column to take it from. */
.qkc-layout--solo .qkc-rail { width: 100%; }
}
@media (max-width: 760px) {
.qkc-hero { padding: 46px 0 44px; }
.qkc-main { padding: 42px 0 62px; }
.qkc-hero__title { line-height: 1.14; }
.qkc-facts { gap: 10px 20px; }
.qkc-mates { grid-template-columns: minmax(0, 1fr); }
/* Back to a stacked card once the column is the screen — the three grid
columns become three rows, which is the card the desktop grid renders. */
.qkc-layout--pair .qkc-mate {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
row-gap: 11px;
padding: 18px 18px 14px;
}
.qkc-layout--pair .qkc-mate__go span:first-child { display: inline; }
.qkc-aside { padding: 22px 20px 20px; }
.qkc-panel { padding: 22px 20px 24px; }
/* Full-bleed rows once the column is the screen: a shrink-to-fit button
under full-width content reads as a mistake at this width. */
.qkc-back { width: 100%; justify-content: center; }
.qkc-step__sum { gap: 13px; padding: 18px 17px; }
.qkc-step__body { padding: 0 17px 20px 17px; }
.qkc-step__q { font-size: 15px; }
/* Six slot chips wrap into four rows on a phone and cost more height than
the guide they index. The steps are right underneath. */
.qkc-jump { display: none; }
}
/* The hero pair is home's .qh-btn / .qh-btn-ghost, which wrap rather than fill.
* Two pills of different widths on separate lines read as ragged, so on a phone
* they go full width and stack. Scoped through .qkc-page so home's own hero,
* which uses the same two classes, is untouched. */
@media (max-width: 560px) {
.qkc-page .qh-hero__actions {
gap: 12px;
margin-top: 30px;
}
.qkc-page .qh-hero__actions .qh-btn,
.qkc-page .qh-hero__actions .qh-btn-ghost {
width: 100%;
justify-content: center;
}
/* The ghost pill carries 15px of left padding for its circle and 26px on
the right, which is invisible while it shrinks to fit and reads as an
off-centre label the moment it is centred in a full-width box. */
.qkc-page .qh-hero__actions .qh-btn-ghost { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.qkc-hero__aurora i,
.qkc-eyebrow__pip { animation: none !important; }
.qkc-step__body { animation: none; }
.qkc-step,
.qkc-step::before,
.qkc-step__n,
.qkc-step__ic,
.qkc-mate,
.qkc-mate::before,
.qkc-mate__mono,
.qkc-mate__arrow,
.qkc-jump__chip,
.qkc-link svg,
.qkc-back,
.qkc-back svg {
transition: none;
}
.qkc-mate:hover,
.qkc-mate:hover .qkc-mate__arrow,
.qkc-jump__chip:hover,
.qkc-link:hover svg,
.qkc-back:hover,
.qkc-back:hover svg {
transform: none;
}
.qkc-step[open]::before { transform: scaleY(1); }
.qkc-mate:hover::before { transform: scaleX(1); }
.qkc-step[open] .qkc-step__ic { transform: rotate(180deg); }
}