/* Service and question pages — the KMMS guide's card system, shared so every page looks the same. */

.card-w { background: #FFFFFF; border: 1px solid var(--line); border-radius: 28px; padding: 28px; }
.card-c { background: var(--canvas); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.pill-sm { font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.pill-v { background: var(--lilac); color: var(--violet); }
.pill-p { background: var(--pink-soft); color: var(--pink-text); }
.pill-s { background: var(--sand); color: var(--ink); }
.grid-340 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); }
.grid-300 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.sec-pad { padding: 96px 0; }
.sec-top0 { padding: 0 0 96px; }
.sec-band { padding: 96px 0; background: #FFFFFF; border-block: 1px solid var(--line); }
.sec-title { margin: 0 0 40px; }
.body-copy { margin: 14px 0 0; font-size: 16px; line-height: 25px; color: var(--stone); text-wrap: pretty; }
.body-copy strong, .answer-box strong { color: var(--ink); }
.card-h { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }

.hero-chips { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero-chips span { font-size: 13px; font-weight: 700; background: #FFFFFF; border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; }
.hero-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sub-h1 { margin: 0; font-size: clamp(38px,5.6vw,68px); line-height: 1.03; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }

/* short answer (question pages) */
.answer-box { background: #1D1B22; color: #FFFFFF; border-radius: 28px; padding: clamp(28px,4vw,44px); }
.answer-box .label { color: #F4CDDE; }
.answer-box .big { margin: 14px 0 0; font-size: clamp(22px,2.4vw,28px); line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; text-wrap: pretty; }
.answer-box p.more { margin: 14px 0 0; font-size: 16px; line-height: 25px; color: #DCD5E6; }
.answer-box strong { color: #FFFFFF; }

/* numbered cards */
.prep { background: var(--canvas); border: 1px solid var(--line); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform 300ms var(--ease-btn), border-color 300ms ease; }
.prep:hover { transform: translateY(-4px); border-color: var(--violet); }
.sec-band .prep { background: var(--canvas); }
.prep .num { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--violet); }
.prep h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.prep p { margin: 0; font-size: 15px; line-height: 23px; color: var(--stone); }
.prep ul, .ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.prep li, .ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 22px; font-weight: 600; }
.prep li::before, .ticks li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--pink); }
.prep .key { margin: 4px 0 0; align-self: flex-start; font-size: 14px; font-weight: 800; background: var(--ink); color: #FFFFFF; padding: 8px 14px; border-radius: 999px; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); }
.step { border-radius: 20px; padding: 22px 20px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; background: var(--sand); color: var(--ink); }
.step .n { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; opacity: .9; }
.step .t { font-size: 16px; line-height: 22px; font-weight: 700; }
.step.dark { background: #1D1B22; color: #FFFFFF; }
.step.violet { background: var(--violet); color: #FFFFFF; }
.step.pink { background: var(--pink); color: #FFFFFF; }

/* fact list */
.facts { display: grid; margin: 0; }
.fact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 16px; padding: 11px 0; border-top: 1px solid #EFEAE4; font-size: 15px; margin: 0; }
.fact dt { color: var(--stone); }
.fact dd { margin: 0; font-weight: 700; }

/* not-for list */
.nope { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nope li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px; font-size: 16px; line-height: 24px; }
.nope li strong { color: var(--pink-text); font-weight: 800; }

/* review quote */
.quote { margin: 0; border-radius: 28px; padding: clamp(28px,4vw,40px); display: flex; flex-direction: column; gap: 18px; }
.quote blockquote { margin: 0; font-size: clamp(20px,2.2vw,26px); line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.quote figcaption span.src { font-weight: 500; opacity: .75; }
.quote-v { background: var(--violet); color: #FFFFFF; }
.quote-p { background: var(--pink-wash); color: var(--ink); }
.quote-w { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line); }
.quote-d { background: #1D1B22; color: #FFFFFF; }

/* tutor card */
.tutor-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.tutor-card { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; padding: 20px; }
.tutor-card img { width: 96px; height: 96px; object-fit: cover; object-position: 50% 22%; border-radius: 16px; }
.tutor-card h3 { margin: 0; font-size: 20px; font-weight: 800; }
.tutor-card p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--stone); }

/* call to action */
.cta-box { background: var(--sand); border-radius: 40px; padding: clamp(28px,5vw,64px); display: grid; gap: 40px; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); align-items: center; }
.cta-box .cta-btns { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.cta-side { background: #FFFFFF; border-radius: 28px; padding: 28px; }
.cta-side p.small { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--stone); }
.can { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; }
.can span { flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; }

/* related links */
.related { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.related a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; padding: 22px; transition: border-color 300ms ease, transform 300ms var(--ease-btn); }
.related a:hover { border-color: var(--violet); color: var(--ink); transform: translateY(-3px); }
.related .k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.related strong { font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.related span.go { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--violet); }

.src-note { margin: 16px 0 0; font-size: 13px; color: var(--ash); }

/* ---------- in-depth guide sections ---------- */
.sec-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.sec-intro { margin: 14px auto 0; max-width: 640px; font-size: 17px; line-height: 26px; color: var(--stone); text-wrap: pretty; }

/* tip cards (unnumbered, for advice that is not a sequence) */
.tipgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.tip { background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.sec-band .tip { background: var(--canvas); }
.tip .kick { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.tip h3 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.tip p { margin: 0; font-size: 15px; line-height: 23px; color: var(--stone); }
.tip .ticks li { font-weight: 500; color: var(--ink); }

/* skill cards: why / build / practise */
.skillgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); }
.skill { background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.sec-band .skill { background: var(--canvas); }
.skill h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.skill-row { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid #EFEAE4; }
.skill-l { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.skill-row p { margin: 0; font-size: 15px; line-height: 23px; color: var(--stone); }
.skill .ticks li { font-weight: 500; }

/* phase plan (a real sequence) */
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.phase { background: var(--sand); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.sec-band .phase { background: var(--sand); }
.phase .when { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #FFFFFF; color: var(--violet); padding: 6px 12px; border-radius: 999px; }
.phase h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; }
.phase .ticks li { font-weight: 500; font-size: 14.5px; }
.phase-dark { background: #1D1B22 !important; color: #FFFFFF; }
.phase-dark .when { background: var(--pink); color: #FFFFFF; }
.phase-dark .ticks li::before { background: #F4CDDE; }

/* useful phrases */
.phrases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.phrase { background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; font-size: 15px; line-height: 22px; font-weight: 600; max-width: 100%; }
.sec-band .phrase { background: var(--lilac); border-color: var(--lilac-line); }

/* mistake -> fix rows */
.mistakes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mistake { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 16px; align-items: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px; }
.m-bad { font-size: 16px; font-weight: 800; color: var(--pink-text); }
.m-arrow { color: var(--ash); }
.m-fix { font-size: 15px; line-height: 22px; font-weight: 600; }
@media (max-width: 559px) { .mistake { grid-template-columns: 1fr; gap: 6px; } .m-arrow { display: none; } }

/* insight box and sources */
.insight-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.insight-list li { font-size: 16px; line-height: 25px; color: #DCD5E6; }
.srclist { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.srclist a { display: inline-block; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink); background: var(--sand); padding: 7px 12px; border-radius: 999px; }
.srclist a:hover { color: var(--violet); }

/* Four cards sit 2 x 2 instead of 3 + 1 */
.tipgrid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* Smaller review cards (used where reviews sit high on a keyword page) */
.quote-sm { padding: clamp(22px,3vw,28px); gap: 14px; }
.quote-sm blockquote { font-size: clamp(17px,1.6vw,19px); line-height: 1.45; }