/*
 * The Khalid pages' own finish, loaded only under /khalid/ (body.kh).
 * Khalid sells against Ghost, so these pages trade the site's ink outlines,
 * offset shadows, mono labels and pastel washes for a calmer finish: white
 * pages with one soft band colour, hairlines, a little rounding, one accent,
 * Inter Tight headlines and sentence-case buttons. Shared components keep
 * their markup; this file only restyles them inside body.kh.
 */
.kh {
    --paper: #ffffff;
    --kh-band: #f6f5f2;
    --kh-line: #e6e4df;
    --kh-ink: #14161a;
    --kh-ink-2: #3c4048;
    --kh-ink-3: #5f646d;
    --kh-accent: #4338ca;
    --kh-accent-soft: #f4f4fe;
    --kh-radius: 12px;
    --kh-shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 12px 32px -12px rgba(20, 22, 26, .14);
    --hairline: var(--kh-line);
    --ghost: var(--kh-accent);
    --ink: var(--kh-ink);
    --ink-3: var(--kh-ink-3);
    --periwinkle-tint: var(--kh-accent-soft);
    --amber-tint: #fdf7e8;
    --pink-tint: var(--kh-band);
    --orange-tint: #fdf1ec;
    background: #fff;
    color: var(--kh-ink-2);
}

/* One family for everything but code: Inter for text, Inter Tight for headlines. */
.kh main :not(pre, code, kbd, samp, pre *, .ib-mono, .ib-mono *) { font-family: var(--sans) !important; }
.kh main :is(h1, h2, .h-hero, .h-section) { font-family: var(--wordmark) !important; }
.kh :is(.h-hero, .h-section, .h-sub, h1, h2, h3) { color: var(--kh-ink); }
.kh .h-hero { font-weight: 600; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.02em; }
.kh .h-section { font-weight: 600; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -.015em; }
.kh main h3 { font-weight: 600; letter-spacing: -.01em; }
/* A section's grey first line becomes a small accent label above its headline;
   a page hero keeps it inline, in a quiet grey, as the start of one sentence. */
.kh .h-hero .ghost { display: inline !important; color: #8a8f98; }
.kh .h-section .ghost { display: block; margin-bottom: 14px; font: 600 15px/1.3 var(--sans) !important; letter-spacing: 0; color: var(--kh-accent); }
.kh .p-closing .h-section .ghost + br { display: none; }
.kh .lede { color: var(--kh-ink-3); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.kh main p, .kh main li { line-height: 1.6; }
.kh main a:not(.btn, .gl-card) { color: var(--kh-ink); text-decoration-color: color-mix(in srgb, var(--kh-accent) 45%, transparent); text-underline-offset: 3px; }
.kh main a:not(.btn, .gl-card):hover { color: var(--kh-accent); }

/* Micro labels: small caps in Inter, without the orange squares. */
.kh main :is(.cg-group th, .app-cap, .kt-group-h span, .kd-nav-h, .p-step-n) { letter-spacing: .04em; }
.kh main :is([class*="label"], [class*="eyebrow"], [class*="-key"], .lt-tag, .ln-when)::before { display: none !important; }
.kh main :is(.app-cap, .lt-tag, .lm-title, .cv-table-cap) { font: 600 12px/1.3 var(--sans) !important; letter-spacing: .05em; color: var(--kh-ink-3); }

/* Buttons: sentence case, rounded, solid ink. */
.kh .btn { height: 46px; padding: 0 20px; border-radius: 8px; font: 600 15px/1 var(--sans) !important; letter-spacing: 0; text-transform: none; border: 1px solid var(--kh-ink); transition: background-color .15s, border-color .15s, transform .15s; }
.kh .btn svg { width: 13px; height: 13px; }
.kh .btn-primary { background: var(--kh-ink); color: #fff; }
.kh .btn-primary:hover { background: #000; color: #fff; transform: translateY(-1px); }
.kh .btn-secondary { background: #fff; color: var(--kh-ink); border-color: var(--kh-line); }
.kh .btn-secondary:hover { background: var(--kh-band); color: var(--kh-ink); border-color: #d6d3cc; }
.kh .site-header .btn, .kh header .btn { height: 40px; font-size: 14px !important; }

/* Bands: white and one soft colour, no gradients, no washes. */
.kh .site-head { background: rgba(255, 255, 255, .92); }
.kh .hero-bg { display: none; }
.kh .p-hero { padding: 88px 0 72px; background: #fff; }
.kh .p-sec { padding: 104px 0; background: #fff; border: 0; }
.kh :is(.p-sec-white, .p-sec-blue, .p-sec-pink, .p-sec-amber, .p-sec-dots) { background: var(--kh-band); background-image: none; border: 0; }
.kh .p-sec-head { margin-bottom: 48px; gap: 14px; }
.kh :is(.p-closing, .closing) { background: var(--kh-band); }

/* Boxes: hairlines and a little rounding, never ink outlines or offset shadows. */
.kh main * { box-shadow: none !important; }
.kh main *:not(.btn) { border-color: var(--kh-line) !important; }
.kh main :is(.p-card, .ib-box, .spd, .sf-card, .sf2-us, .cc-side, .cc-us, .cv-two > div, .cv-disc, .cv-win, .cv-chip, .ln-cell, .kt-shot, .kd-guides > *, .km, .km-stack > *, .ss li, .p-steps li, .ft, .fact, .p-prose pre) { border-radius: var(--kh-radius); }
.kh main :is(.p-card, .ib-box, .spd, .cc-side, .cc-us, .cv-two > div) { background: #fff; }
.kh main :is(.ib-box, .spd) { overflow: hidden; }

/* Code boxes: a quiet panel, not a terminal with a black frame. */
.kh .ib-box { border: 1px solid var(--kh-line); }
.kh .ib-box :is(.ib-head, [class*="-head"]) { background: var(--kh-band); border-bottom: 1px solid var(--kh-line); }
.kh .ib-box :is(.ib-head, [class*="-head"]) * { text-transform: none; letter-spacing: 0; font-size: 13px; }
.kh .ib-box button { border-radius: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.kh .ib-mono, .kh pre, .kh code { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--kh-ink); }

/* Screens and template pictures carry the page: rounded, softly lifted. */
.kh .gl { gap: 24px; }
.kh .gl-card { border: 1px solid var(--kh-line); border-radius: var(--kh-radius); overflow: hidden; background: #fff; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.kh .gl-card:hover { transform: translateY(-3px); box-shadow: var(--kh-shadow) !important; border-color: var(--kh-line); }
.kh .gl-shot { border-bottom: 1px solid var(--kh-line); background: var(--kh-band); }
.kh .gl-text { padding: 16px 18px 20px; gap: 6px; }
.kh .gl-text b { font: 600 17px/1.3 var(--sans); color: var(--kh-ink); }
.kh .gl-text span { color: var(--kh-ink-3); font-size: 14.5px; line-height: 1.5; }
.kh .gl-all { background: var(--kh-accent-soft); }
.kh .gl-all .gl-text b, .kh .gl-arrow { color: var(--kh-accent); }
.kh :is(.kt-shot, .kt-shots img) { border-radius: var(--kh-radius); box-shadow: var(--kh-shadow) !important; }

/* The comparison table: plain rows, the Khalid column in a light accent. */
.kh .cg-table { border: 1px solid var(--kh-line); border-radius: var(--kh-radius); border-collapse: separate; }
.kh .cg-table thead th:first-child { border-top-left-radius: var(--kh-radius); }
.kh .cg-table thead th:last-child { border-top-right-radius: var(--kh-radius); }
.kh .cg-table thead th { background: #fff; border-bottom: 1px solid var(--kh-line); font: 600 17px/1.2 var(--sans) !important; color: var(--kh-ink); padding-top: 22px; padding-bottom: 20px; }
.kh .cg-table thead th.cg-us { background: var(--kh-accent-soft); color: var(--kh-accent); }
.kh .cg-table td.cg-us { background: color-mix(in srgb, var(--kh-accent-soft) 70%, #fff); }
.kh .cg-legend { font-size: 13px; color: var(--kh-ink-3); gap: 14px; }
.kh .cg-group th { background: var(--kh-band); color: var(--kh-ink-3); font: 600 12px/1 var(--sans) !important; text-transform: uppercase; letter-spacing: .06em; padding-top: 14px; padding-bottom: 14px; }
.kh .cg-row th { font-weight: 500; color: var(--kh-ink); }
.kh .cg-row :is(th, td) { border-bottom: 1px solid var(--kh-line); }
.kh .cg-text { color: var(--kh-ink-2); }
.kh .cg-mark { border: 0 !important; background: transparent !important; color: var(--kh-ink-3); border-radius: 50%; }
.kh .cg-mark.cg-yes { background: var(--kh-accent) !important; color: #fff; }
.kh .cg-mark.cg-part { background: #ecebe7 !important; color: var(--kh-ink-2); }
.kh .cg-mark.cg-no { background: transparent !important; color: #a3a7ae; }

/* Small buttons inside components: rounded, sentence case. */
.kh main button:not(.dad-btn), .kh main .mini-btn { border-radius: 6px; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }

/* Plain tables: one rounded frame of hairlines. */
.kh main table:not(.cg-table) { border-collapse: separate; border-spacing: 0; border: 1px solid var(--kh-line); border-radius: var(--kh-radius); overflow: hidden; background: #fff; }
.kh main table:not(.cg-table) tr:last-child > * { border-bottom: 0; }

/* Lanes, limits, surfaces and cost cards: calm fills. */
.kh .ln-total:not(.ln-us) b { color: var(--kh-ink-3); }
.kh .ln-total.ln-us b { color: var(--kh-accent); }
.kh .ln-cell.ln-hot { background: #fdf7e8; }
.kh .ln-cell.ln-us.ln-hot { background: var(--kh-accent-soft); }
.kh .spd { border: 1px solid var(--kh-line); }
.kh .spd > :first-child { background: var(--kh-band); }
.kh .cc-us { background: var(--kh-accent-soft); }
.kh .ss li { border: 1px solid var(--kh-line); background: #fff; padding: 22px 24px; }

/* FAQ: open rows divided by hairlines. */
.kh .faq summary { font-weight: 600; color: var(--kh-ink); }
.kh .faq summary span { border-radius: 50%; }

/* The landing page's hero: three real template home pages, fanned. */
.kh .kl-hero-stack { position: relative; aspect-ratio: 16 / 12; width: 100%; }
.kh .kl-hero-stack figure { position: absolute; margin: 0; width: 78%; border-radius: 10px; overflow: hidden; border: 1px solid var(--kh-line); background: #fff; box-shadow: 0 2px 4px rgba(20, 22, 26, .05), 0 24px 48px -16px rgba(20, 22, 26, .22) !important; }
.kh .kl-hero-stack figure::before { content: ""; display: block; height: 22px; background: #f3f2ef radial-gradient(circle at 12px 11px, #d9d6cf 3.5px, transparent 4px), #f3f2ef; border-bottom: 1px solid var(--kh-line); }
.kh .kl-hero-stack img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.kh .kl-hero-stack figure:nth-child(1) { left: 0; top: 0; z-index: 1; }
.kh .kl-hero-stack figure:nth-child(2) { left: 11%; top: 13%; z-index: 2; }
.kh .kl-hero-stack figure:nth-child(3) { left: 22%; top: 26%; z-index: 3; }
.kh .kl-hero-stack figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid var(--kh-line); font: 600 12px/1 var(--sans); color: var(--kh-ink); }

@media (max-width: 900px) {
    .kh .p-hero { padding: 56px 0 48px; }
    .kh .p-sec { padding: 72px 0; }
    .kh .p-sec-head { margin-bottom: 32px; }
    .kh .kl-hero-stack { aspect-ratio: auto; margin-top: 8px; }
    .kh .kl-hero-stack figure:not(:last-child) { display: none; }
    .kh .kl-hero-stack figure:last-child { position: relative; left: 0; top: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .kh .gl-card, .kh .btn { transition: none; }
    .kh .gl-card:hover, .kh .btn-primary:hover { transform: none; }
}

/* The footer: the same calm band, a hairline card, no pastel wash. */
.kh .sf-bg .blob { display: none; }
.kh .sf-card { border: 1px solid var(--kh-line) !important; border-radius: var(--kh-radius); box-shadow: none !important; }
.kh :is(.site-foot, .sf) { background: var(--kh-band); }