:root {
  /* Brand (kashif-brand-spec.md TOKEN TABLE) */
  --kashif-spruce: #003C33;
  --kashif-spruce-deep: #002620;
  --kashif-teal: #2FD4BE;       /* accent on dark ONLY — 1.86:1 on white */
  --kashif-teal-ink: #0A6156;   /* accent on light ONLY — 1.69:1 on spruce */
  --kashif-mist: #EAF5F2;

  /* Surfaces */
  --kashif-canvas: #FFFFFF;
  --kashif-soft-stone: #EEECE7;
  --kashif-card-border: #F2F2F2;
  --kashif-hairline: #D9D9DD;

  /* Text */
  --kashif-ink: #17171C;
  --kashif-text-secondary: #4B4B55;
  --kashif-muted: #6B6B78;
  --kashif-on-dark: #F4F4F6;
  --kashif-on-dark-muted: #A9A9BD;

  /* Score bands + severity — leaf green replaces the earlier success token,
     which sat only 14° of hue from the brand teal; 48° separation reads
     correctly under deuteranopia (brand spec position 3). */
  --kashif-score-low: #B30000;
  --kashif-score-mid: #9A6A00;
  --kashif-score-high: #2E7A33;

  /* System */
  --kashif-focus-ring: #4C6EE6; /* focus only — never a brand or state colour */

  /* Radii: media 22px, content cards 8px, pill CTAs 32px. Nothing else. */
  --kashif-radius-card: 8px;
  --kashif-radius-media: 22px;
  --kashif-radius-pill: 32px;

  --kashif-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --kashif-font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --kashif-font-arabic: 'Almarai', 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
}

.kashif-scope {
  background: var(--kashif-canvas);
  color: var(--kashif-ink);
  font-family: var(--kashif-font-body);
}

.kashif-scope h1, .kashif-scope h2, .kashif-scope h3 {
  font-family: var(--kashif-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Position 12: primary CTAs are spruce pills, not Cohere's near-black —
   12.40:1 with white type, safe at every size. */
.kashif-cta {
  display: inline-block;
  font-family: var(--kashif-font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 32px;
  background: var(--kashif-spruce);
  color: #FFFFFF;
  border: none;
  text-decoration: none;
}

.kashif-band {
  background: var(--kashif-spruce);
  color: var(--kashif-on-dark);
  padding: 48px 24px;
}

.kashif-card {
  border-radius: 8px;
  border: 1px solid var(--kashif-card-border);
  padding: 20px;
}

.kashif-media {
  border-radius: 22px;
  overflow: hidden;
}

/* Position 6: one link colour, always underlined — the underline (not hue)
   is what carries the affordance for colour-blind readers. On dark bands
   the teal role takes over (never teal-ink on spruce — 1.69:1, invisible). */
.kashif-scope a {
  color: var(--kashif-teal-ink);
  text-decoration: underline;
}
.kashif-band a, .kashif-scope .kashif-on-dark a {
  color: var(--kashif-teal);
}

[lang="ar"] {
  font-family: var(--kashif-font-arabic);
  letter-spacing: normal;
  line-height: 1.70;
}
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 {
  font-family: var(--kashif-font-arabic);
  letter-spacing: normal;
  line-height: 1.35;
}

.kashif-gauge-track { stroke: var(--kashif-soft-stone); stroke-width: 13; fill: none; }
.kashif-gauge-arc { stroke-width: 13; fill: none; stroke-linecap: round; }
.kashif-gauge-arc--quick { stroke-linecap: butt; }
.kashif-gauge-tick { stroke: var(--kashif-teal-ink); stroke-width: 2; }
.kashif-gauge-hatch-line { stroke: var(--kashif-ink); stroke-opacity: 0.35; stroke-width: 1; }
.kashif-gauge-svg--rtl { transform: scaleX(-1); }
.kashif-gauge-value { font-family: var(--kashif-font-body); font-variant-numeric: tabular-nums; font-weight: 500; }

.kashif-header { display: flex; align-items: center; padding: 20px 0 12px; }
.kashif-header a, .kashif-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.kashif-header a:hover, a.kashif-cta, a.kashif-cta:hover { text-decoration: none; }
.kashif-scope a.kashif-cta { color: #FFFFFF; }
.kashif-scope a.kashif-brand { text-decoration: none; }
.kashif-brand .kashif-mark { width: 32px; height: 32px; }
.kashif-wordmark { font-family: var(--kashif-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--kashif-spruce); }
.kashif-spark { display: block; color: var(--kashif-teal-ink); max-width: 100%; height: auto; margin: 10px 0 4px; }
.kashif-spark-label { color: var(--kashif-muted); font-size: 13px; margin: 0 0 12px; }
.kashif-topnav { display: inline-flex; align-items: center; gap: 18px; }
.kashif-cta--small { padding: 8px 18px; font-size: 13px; }
.kashif-scan-note { color: var(--kashif-muted); font-size: 14px; margin: 4px 0 12px; }
.kashif-live-result { margin: 20px 0; padding: 20px; border: 1px solid var(--kashif-card-border); border-radius: var(--kashif-radius-card); background: #FBFBFC; }
.kashif-live-score strong { font-family: var(--kashif-font-display); font-size: 44px; font-weight: 500; color: var(--kashif-spruce); font-variant-numeric: tabular-nums; }
.kashif-live-score span { color: var(--kashif-muted); }
.kashif-live-result ul { margin: 8px 0 14px; padding-inline-start: 20px; color: var(--kashif-text-secondary); }
.kashif-card--recommended { border: 2px solid var(--kashif-spruce); }
.kashif-badge { display: inline-block; background: var(--kashif-spruce); color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 999px; margin-bottom: 10px; }
/* Customer /app CTAs: brand pill by default (override the staff app.css button), with a quiet ghost variant for secondary actions like Sign out. */
main.narrow button { font-family: var(--kashif-font-body); font-size: 15px; font-weight: 500; padding: 11px 22px; border: none; border-radius: var(--kashif-radius-pill); background: var(--kashif-spruce); color: #FFFFFF; cursor: pointer; }
main.narrow button:hover { background: var(--kashif-spruce-deep); }
main.narrow button.kashif-ghost { background: transparent; color: var(--kashif-muted); padding-left: 0; padding-right: 0; }
main.narrow button.kashif-ghost:hover { background: transparent; color: var(--kashif-teal-ink); text-decoration: underline; }
.kashif-scan-status { min-height: 22px; margin: 10px 0 0; color: var(--kashif-teal-ink); font-weight: 500; }
.verified { color: var(--kashif-teal-ink); font-weight: 600; }
.verify { margin: 16px 0; padding: 16px; border: 1px solid var(--kashif-card-border); border-radius: var(--kashif-radius-card); background: #FBFBFC; }
.verify p { margin: 0 0 12px; color: var(--kashif-text-secondary); font-size: 15px; }
.verify code { display: block; overflow-x: auto; padding: 10px 12px; margin-bottom: 12px; background: var(--kashif-spruce); color: #fff; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }
.verify button { font-family: inherit; font-size: 14px; padding: 9px 20px; border: none; border-radius: var(--kashif-radius-pill); background: var(--kashif-spruce); color: #fff; cursor: pointer; }
.verify button:hover { background: var(--kashif-spruce-deep); }
.app-legal { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 48px auto 28px; padding-top: 18px; border-top: 1px solid var(--kashif-hairline); font-size: 14px; }
.app-legal a { color: var(--kashif-muted); text-decoration: none; }
.app-legal a:hover { color: var(--kashif-teal-ink); text-decoration: underline; }
.legal-effective { color: var(--kashif-muted); font-size: 14px; margin-top: -4px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.kashif-scope main > section { margin-block: 40px; }
/* Skip link: first tab stop, visible only on focus (WCAG 2.4.1). */
.kashif-skip { position: absolute; inset-inline-start: 16px; inset-block-start: -48px; z-index: 100; background: var(--kashif-spruce); color: #FFFFFF; padding: 10px 18px; border-radius: var(--kashif-radius-pill); text-decoration: none; transition: inset-block-start 0.15s ease; }
.kashif-scope a.kashif-skip { color: #FFFFFF; text-decoration: none; }
.kashif-skip:focus { inset-block-start: 12px; }
/* Sticky banner: white surface + hairline so content never scrolls through it. */
header.kashif-topbar { position: sticky; inset-block-start: 0; z-index: 50; background: var(--kashif-canvas); border-block-end: 1px solid var(--kashif-hairline); }
.kashif-topbar-inner { max-width: 940px; margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#scan { scroll-margin-block-start: 84px; }
/* Visible keyboard focus everywhere (brand focus token, never a brand colour). */
.kashif-scope a:focus-visible, .kashif-scope button:focus-visible, .kashif-scope input:focus-visible { outline: 2px solid var(--kashif-focus-ring); outline-offset: 2px; }
/* Scroll-reveal: classes are ADDED BY JS (progressive enhancement — no-JS
   visitors and reduced-motion users always see everything). */
.kashif-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.kashif-reveal.is-visible { opacity: 1; transform: none; }
.kashif-reveal .kashif-mock-arc { stroke-dasharray: 100; stroke-dashoffset: 100; }
.kashif-reveal.is-visible .kashif-mock-arc { animation: kashif-draw 1.1s 0.25s ease forwards; }
.kashif-reveal .kashif-trend-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.kashif-reveal.is-visible .kashif-trend-line { animation: kashif-draw 1.2s 0.2s ease forwards; }
@keyframes kashif-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kashif-reveal { opacity: 1; transform: none; transition: none; }
  .kashif-reveal .kashif-mock-arc, .kashif-reveal .kashif-trend-line { stroke-dashoffset: 0; animation: none; }
}
.kashif-cta { transition: background 0.15s ease; }
.kashif-cta:hover { background: var(--kashif-spruce-deep); }
.kashif-cta--inverted:hover { background: var(--kashif-mist); }
.lens-card { transition: border-color 0.15s ease; border: 1px solid transparent; }
.lens-card:hover { border-color: var(--kashif-hairline); }
.lens-card--ai, .lens-card--ai:hover { border-block-start: 3px solid var(--kashif-spruce); }
.kashif-scope h1 { font-size: clamp(28px, 5.2vw, 42px); line-height: 1.15; text-wrap: balance; }
.kashif-scope main > section h2 { text-wrap: balance; }
/* Glass touch on the sticky banner — the one translucency in an otherwise flat system. */
header.kashif-topbar { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Custom easing on reveals + CTA micro-interactions (60fps: transform/opacity only). */
.kashif-reveal { transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.kashif-cta { transition: background 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.kashif-cta:hover { transform: translateY(-1px); }
.kashif-cta:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .kashif-cta:hover, .kashif-cta:active { transform: none; } }
/* Audience-intent chips: the personalization zone. */
.kashif-audience { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.kashif-audience > span { color: var(--kashif-muted); font-size: 13px; }
.kashif-chip { font-family: inherit; font-size: 13px; padding: 6px 14px; border-radius: var(--kashif-radius-pill); border: 1px solid var(--kashif-hairline); background: transparent; color: var(--kashif-text-secondary); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.kashif-chip:hover { border-color: var(--kashif-teal-ink); color: var(--kashif-teal-ink); }
.kashif-chip.is-active { border-color: var(--kashif-spruce); background: var(--kashif-spruce); color: #FFFFFF; }
.kashif-audience-line { min-height: 24px; color: var(--kashif-teal-ink); font-weight: 500; margin: 4px 0 10px; }
/* Honest trust strip (replaces the fake-logo marquee a template would ask for). */
.kashif-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 14px 0 0; margin: 28px 0 0; border-block-start: 1px solid var(--kashif-card-border); }
.kashif-trust li { display: flex; align-items: center; color: var(--kashif-muted); font-size: 13px; }
/* Comparison matrix (pricing): semantic table, hairline rules, the Pro column
   carried on mist with the recommended border. Scrolls inside its own wrapper
   on narrow screens — the page never scrolls sideways. */
.kashif-matrix-wrap { overflow-x: auto; margin-top: 20px; }
.kashif-matrix { border-collapse: collapse; width: 100%; min-width: 520px; background: #FFFFFF; border-radius: var(--kashif-radius-card); }
.kashif-matrix th, .kashif-matrix td { text-transform: none; letter-spacing: normal; padding: 12px 16px; text-align: start; font-size: 14px; border-block-end: 1px solid var(--kashif-card-border); vertical-align: middle; }
.kashif-matrix thead th { font-family: var(--kashif-font-display); font-size: 16px; }
.kashif-matrix tbody th { font-family: var(--kashif-font-body); font-weight: 500; color: var(--kashif-text-secondary); }
[lang="ar"] .kashif-matrix tbody th { font-family: var(--kashif-font-arabic); }
.kashif-matrix .kashif-matrix-pro { background: var(--kashif-mist); }
.kashif-matrix thead .kashif-matrix-pro { border-block-start: 3px solid var(--kashif-spruce); }
.kashif-matrix-price { display: block; font-family: var(--kashif-font-display); font-variant-numeric: tabular-nums; font-size: 18px; margin-top: 2px; }
.kashif-matrix .kashif-badge { display: inline-block; margin: 0 0 6px; }
.kashif-matrix-cta-row td { border-block-end: none; padding-block: 16px; }
/* Audited-through-Kashif marquee: a gentle continuous loop of real names
   (duplicated track = seamless), pauses on hover; reduced-motion gets a
   static wrapped list. Flat — no fades, no logos, just type. */
.kashif-audited { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.kashif-audited-label { flex: none; color: var(--kashif-muted); font-size: 13px; font-weight: 600; }
.kashif-audited-viewport { overflow: hidden; flex: 1; min-width: 0; }
.kashif-audited-track { display: inline-flex; align-items: center; gap: 24px; white-space: nowrap; animation: kashif-marquee 36s linear infinite; will-change: transform; }
.kashif-audited-viewport:hover .kashif-audited-track { animation-play-state: paused; }
.kashif-audited-name { display: inline-flex; align-items: center; color: var(--kashif-ink); font-size: 15px; font-weight: 500; }
[dir="rtl"] .kashif-audited-track { animation-name: kashif-marquee-rtl; }
@keyframes kashif-marquee { to { transform: translateX(-50%); } }
@keyframes kashif-marquee-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .kashif-audited { flex-wrap: wrap; }
  .kashif-audited-track { animation: none; white-space: normal; flex-wrap: wrap; gap: 10px 20px; }
  .kashif-audited-track .kashif-audited-name:nth-child(n+9) { display: none; } /* the duplicate half */
}
/* The concierge: honest instant answers, bottom corner, collapsible. */
.kashif-concierge { position: fixed; inset-block-end: 18px; inset-inline-end: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#kashif-concierge-panel { width: min(360px, calc(100vw - 36px)); max-height: min(480px, 70vh); overflow-y: auto; background: var(--kashif-canvas); border: 1px solid var(--kashif-hairline); border-radius: var(--kashif-radius-card); padding: 16px; }
.kashif-concierge-heading { font-family: var(--kashif-font-display); font-weight: 500; font-size: 17px; margin: 0 0 4px; }
.kashif-concierge-note { color: var(--kashif-muted); font-size: 13px; margin: 0 0 10px; }
.kashif-concierge-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kashif-concierge-answer { background: var(--kashif-mist); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--kashif-ink); }
/* Brand-legal dark mode: the spruce-deep world with teal accents — NOT generic
   cyber-glass. The report artifacts (mock, chat card) stay white on purpose:
   paper documents in a dark room. */
@media (prefers-color-scheme: dark) {
  .kashif-scope { background: #00201B; color: var(--kashif-on-dark); }
  .kashif-scope h1, .kashif-scope h2, .kashif-scope h3 { color: var(--kashif-on-dark); }
  .kashif-scope a { color: var(--kashif-teal); }
  .kashif-wordmark { color: var(--kashif-on-dark); }
  .kashif-brand .kashif-mark path:first-of-type { stroke: #FFFFFF; stroke-opacity: 0.24; }
  .kashif-brand .kashif-mark path:nth-of-type(2) { stroke: var(--kashif-teal); }
  .kashif-brand .kashif-mark circle { fill: var(--kashif-teal); }
  header.kashif-topbar { background: rgba(0, 38, 32, 0.82); border-block-end-color: rgba(255, 255, 255, 0.12); }
  .kashif-subhead, .kashif-methodology, .kashif-scan-note, .kashif-mock-caption, .kashif-audience > span, .kashif-trust li, .kashif-currency, .kashif-step { color: var(--kashif-on-dark-muted); }
  .kashif-kicker, .kashif-audience-line { color: var(--kashif-teal); }
  .kashif-dial-marker, .kashif-dial-bullet { color: var(--kashif-teal); }
  .kashif-band--mist, .kashif-band--stone { background: #043027; }
  .lens-card, .kashif-pricing .kashif-card, .finding-row, #kashif-concierge-panel { background: #06251F; border-color: rgba(255, 255, 255, 0.10); color: var(--kashif-on-dark); }
  .lens-card p, .kashif-rows li, .kashif-faq-item p, .finding-row { color: var(--kashif-on-dark-muted); }
  .lens-card svg, .kashif-chip:hover { color: var(--kashif-teal); }
  .lens-card--ai, .lens-card--ai:hover { border-block-start-color: var(--kashif-teal); }
  .lens-card-tag { color: var(--kashif-teal); }
  .kashif-chip { border-color: rgba(255, 255, 255, 0.22); color: var(--kashif-on-dark-muted); }
  .kashif-chip:hover { border-color: var(--kashif-teal); }
  .kashif-chip.is-active { background: var(--kashif-teal); border-color: var(--kashif-teal); color: #00201B; }
  .kashif-trust { border-block-start-color: rgba(255, 255, 255, 0.10); }
  .kashif-audited-label { color: var(--kashif-on-dark-muted); }
  .kashif-audited-name { color: var(--kashif-on-dark); }
  .kashif-matrix { background: #06251F; }
  .kashif-matrix th, .kashif-matrix td { border-block-end-color: rgba(255, 255, 255, 0.10); }
  .kashif-matrix tbody th { color: var(--kashif-on-dark-muted); }
  .kashif-matrix .kashif-matrix-pro { background: #043027; }
  .kashif-matrix thead .kashif-matrix-pro { border-block-start-color: var(--kashif-teal); }
  .kashif-concierge-answer { background: #043027; color: var(--kashif-on-dark); }
  .kashif-scope input, .kashif-scope select { background: #06251F; color: var(--kashif-on-dark); border-color: rgba(255, 255, 255, 0.18); }
  .kashif-legend, .kashif-trend { background: #FFFFFF; border-radius: var(--kashif-radius-card); padding: 8px; }
  .kashif-scan-dial path[stroke="#EAF5F2"] { stroke: rgba(255, 255, 255, 0.15); }
  .kashif-scan-arc { stroke: var(--kashif-teal); }
  .kashif-live-result { background: #06251F; border-color: rgba(255, 255, 255, 0.10); }
  .kashif-live-score strong { color: var(--kashif-on-dark); }
  .kashif-badge { background: var(--kashif-teal); color: #00201B; }
  .kashif-card--recommended { border-color: var(--kashif-teal); }
}
.kashif-kicker { font-family: var(--kashif-font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--kashif-teal-ink); margin: 4px 0 6px; }
.kashif-band .kashif-kicker, .kashif-closing .kashif-kicker { color: var(--kashif-teal); }
[lang="ar"] .kashif-kicker { font-family: var(--kashif-font-arabic); font-weight: 700; letter-spacing: normal; }
.kashif-dial-marker { width: 40px; height: 40px; color: var(--kashif-teal-ink); display: block; }
.kashif-band .kashif-dial-marker { color: var(--kashif-teal); }
.kashif-dial-bullet { width: 14px; height: 14px; color: var(--kashif-teal-ink); margin-inline-end: 8px; flex: none; }
.kashif-band--mist { background: var(--kashif-mist); padding: 40px 24px; }
.kashif-band--stone { background: var(--kashif-soft-stone); padding: 40px 24px; }
.kashif-subhead { color: var(--kashif-text-secondary); font-size: 17px; max-width: 46ch; }
.kashif-methodology { color: var(--kashif-muted); font-size: 13px; margin-top: 14px; }
.kashif-step { color: var(--kashif-muted); font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.kashif-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 760px) { .kashif-hero-grid { grid-template-columns: 1fr; } }
.kashif-scan-slot { min-block-size: 480px; }
.kashif-report-mock { width: 100%; max-width: 480px; height: auto; display: block; }
.kashif-mock-caption { color: var(--kashif-muted); font-size: 13px; margin-top: 8px; }
.kashif-display { font-family: var(--kashif-font-display); font-variant-numeric: tabular-nums; }
.lens-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 20px; }
.lens-card { background: #FFFFFF; border-radius: var(--kashif-radius-card); padding: 20px; }
.lens-card svg { width: 24px; height: 24px; color: var(--kashif-teal-ink); }
.lens-card h3 { font-size: 16px; margin: 10px 0 6px; }
.lens-card p { color: var(--kashif-text-secondary); font-size: 14px; margin: 0; }
.lens-card--ai { border-block-start: 3px solid var(--kashif-spruce); }
.lens-card-tag { color: var(--kashif-teal-ink); font-size: 12px; font-weight: 600; margin: 6px 0 0; }
.kashif-ai-band, .kashif-closing { position: relative; overflow: hidden; }
.kashif-ghost-arc { position: absolute; width: 480px; height: 480px; inset-block-start: -180px; inset-inline-end: -140px; pointer-events: none; }
.kashif-ai-band > *, .kashif-closing > * { position: relative; }
.chat-card { background: #FFFFFF; border-radius: var(--kashif-radius-card); color: var(--kashif-ink); padding: 16px 20px; max-width: 420px; margin: 20px 0; }
.chat-tag { color: var(--kashif-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px; }
.chat-q { background: var(--kashif-mist); border-radius: 8px; padding: 8px 12px; display: inline-block; font-weight: 600; margin: 0 0 10px; }
.chat-a { margin: 0 0 10px; }
.chat-names span { display: block; height: 10px; border-radius: 4px; background: var(--kashif-soft-stone); margin-block-end: 6px; }
.chat-names span:nth-child(1) { width: 62%; }
.chat-names span:nth-child(2) { width: 48%; }
.chat-names span:nth-child(3) { width: 55%; }
.kashif-steps { list-style: none; padding: 0; margin: 20px 0; }
.kashif-steps li { display: flex; align-items: baseline; gap: 12px; margin-block-end: 10px; font-size: 17px; }
.kashif-step-num { font-family: var(--kashif-font-display); font-size: 26px; color: var(--kashif-teal); flex: none; }
.finding-row { display: flex; align-items: center; background: #FFFFFF; border-radius: var(--kashif-radius-card); padding: 12px 16px; margin-block-end: 10px; font-size: 14px; }
.finding-dot { width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 10px; flex: none; }
.finding-row--weak .finding-dot { background: var(--kashif-score-low); }
.finding-row--fair .finding-dot { background: var(--kashif-score-mid); }
.finding-row--strong .finding-dot { background: var(--kashif-score-high); }
.kashif-maker { color: var(--kashif-text-secondary); margin-top: 18px; }
.kashif-trend { text-align: start; }
.kashif-trend .kashif-trend, svg.kashif-trend { width: 100%; max-width: 360px; height: auto; display: block; margin-top: 16px; }
.kashif-legend { width: 100%; max-width: 300px; height: auto; display: block; margin: 12px 0; }
.kashif-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
@media (max-width: 640px) { .kashif-pricing-grid { grid-template-columns: 1fr; } }
.kashif-pricing .kashif-card { background: #FFFFFF; }
.kashif-rows { list-style: none; padding: 0; margin: 12px 0; }
.kashif-rows li { display: flex; align-items: center; margin-block-end: 8px; font-size: 14px; color: var(--kashif-text-secondary); }
.kashif-price { font-family: var(--kashif-font-display); font-size: clamp(28px, 5vw, 40px); font-variant-numeric: tabular-nums; margin: 4px 0; }
.kashif-currency { color: var(--kashif-muted); font-size: 13px; }
.kashif-ladder { margin-top: 18px; font-weight: 500; }
.kashif-closing { text-align: center; padding: 56px 24px; }
.kashif-closing-statement { font-family: var(--kashif-font-display); font-size: clamp(24px, 5vw, 36px); margin: 0 0 6px; }
[lang="ar"] .kashif-closing-statement { font-family: var(--kashif-font-arabic); }
.kashif-cta--inverted { background: #FFFFFF; color: var(--kashif-spruce); }
.kashif-scope a.kashif-cta--inverted { color: var(--kashif-spruce); }
.kashif-scan-dial { width: 120px; height: 120px; display: block; margin: 24px auto 12px; }
@keyframes kashif-scan { to { stroke-dashoffset: 0; } }
.is-scanning .kashif-scan-arc { animation: kashif-scan 60s linear forwards; }
@media (prefers-reduced-motion: reduce) { .is-scanning .kashif-scan-arc { animation: none; stroke-dashoffset: 50; } }
.kashif-tick.is-done { stroke: var(--kashif-score-high); }
.kashif-scan-line { text-align: center; color: var(--kashif-text-secondary); font-size: 14px; min-height: 22px; }
#kashif-scan-result:focus { outline: none; }
.kashif-faq-item h3 { display: flex; align-items: center; font-size: 17px; margin-block-end: 4px; }
.kashif-faq-item p { margin-block-start: 0; color: var(--kashif-text-secondary); }