/* ==========================================================================
   KC AI PET MATCH - DESIGN SYSTEM
   ==========================================================================

   Every value is a token. Nothing below hardcodes a colour outside :root, so
   the palette can be adjusted in one place and a component can never quietly
   drift off-brand.

   CONTRAST CONTRACT (measured against #000000):
     --kcai-white   #FEFEFE  ~20.4:1   AAA
     --kcai-silver  #C7D0D9  ~13.1:1   AAA
     --kcai-muted   #98A5B3  ~ 8.2:1   AAA (large) / AA
     --kcai-blue    #00A4FD  ~ 7.5:1   AA
     --kcai-slate   #657789  ~ 4.1:1   NON-TEXT ONLY - see below

   Electric blue is ~2.7:1 on white and MUST NOT be used as text on a light
   surface. There is deliberately no light-surface text token for it.

   --kcai-slate IS NOT A TEXT COLOUR. Measured on the published page it gave
   3.98:1 on a panel and 4.28:1 on the footer surface, against a 4.5:1
   requirement - so every place it was used for small text was a real AA
   failure: the footer disclaimer and copyright, the "Resource coming soon"
   labels, the closing CTA note and the breadcrumb separators. All of those now
   use --kcai-muted (8.2:1). Slate is reserved for borders, dividers, disabled
   affordances and other non-text pixels, where the 3:1 non-text threshold
   applies instead. If a new rule needs a dim text colour, --kcai-muted is the
   dimmest one that passes.
   ========================================================================== */

:root {
  /* ---- brand, sampled from the supplied logo ---- */
  --kcai-blue:        #00A4FD;
  --kcai-white:       #FEFEFE;
  --kcai-black:       #000000;

  /* ---- surfaces ---- */
  --kcai-elevated:    #080B0F;
  --kcai-panel:       #10151B;
  --kcai-charcoal:    #181F27;
  --kcai-border:      #2A3541;

  /* ---- text ---- */
  --kcai-silver:      #C7D0D9;
  --kcai-muted:       #98A5B3;
  --kcai-slate:       #657789;

  /* ---- functional ---- */
  --kcai-success:     #31C48D;
  --kcai-warning:     #F5A623;
  --kcai-urgent:      #E5484D;

  /* ---- derived (no new hues introduced) ---- */
  --kcai-blue-12:     rgba(0, 164, 253, 0.12);
  --kcai-blue-20:     rgba(0, 164, 253, 0.20);
  --kcai-blue-40:     rgba(0, 164, 253, 0.40);
  --kcai-white-08:    rgba(254, 254, 254, 0.08);
  --kcai-white-22:    rgba(254, 254, 254, 0.22);

  /* ---- type ---- */
  --kcai-font-head: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --kcai-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- spacing scale ---- */
  --kcai-s1: 4px;   --kcai-s2: 8px;   --kcai-s3: 12px;  --kcai-s4: 16px;
  --kcai-s5: 24px;  --kcai-s6: 32px;  --kcai-s7: 48px;  --kcai-s8: 64px;
  --kcai-s9: 96px;

  --kcai-radius:    12px;
  --kcai-radius-sm: 8px;
  --kcai-maxw:      1200px;

  --kcai-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ------------------------------------------------------------------ base */

body.kcai {
  background: var(--kcai-black);
  color: var(--kcai-silver);
  font-family: var(--kcai-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.kcai h1, body.kcai h2, body.kcai h3, body.kcai h4 {
  font-family: var(--kcai-font-head);
  color: var(--kcai-white);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--kcai-s4);
}

body.kcai h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 700; }
body.kcai h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 600; }
body.kcai h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }

body.kcai p { margin: 0 0 var(--kcai-s4); }
body.kcai a { color: var(--kcai-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.kcai a:hover { color: var(--kcai-white); }

/* Focus: a visible ring on every interactive element. box-shadow rather than
   outline so a rounded control is not clipped by an ancestor's overflow. */
body.kcai a:focus-visible,
body.kcai button:focus-visible,
body.kcai input:focus-visible,
body.kcai select:focus-visible,
body.kcai textarea:focus-visible,
body.kcai [tabindex]:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--kcai-black), 0 0 0 6px var(--kcai-blue);
  border-radius: var(--kcai-radius-sm);
}

.kcai-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--kcai-blue); color: #001018;
  padding: var(--kcai-s3) var(--kcai-s5);
  font-weight: 700; z-index: 999;
}
.kcai-skip:focus { left: var(--kcai-s4); top: var(--kcai-s4); }

/* ESCAPING THE BLOCK THEME'S CONSTRAINED LAYOUT.
   Twenty Twenty-Five wraps post content in `.is-layout-constrained`, which caps
   every direct child at the theme's content-size (~620px). Our page wrapper is
   such a child, so without this the entire site renders in a narrow column
   inside a wide black page. Releasing the wrapper lets each section span the
   viewport and `.kcai-wrap` do the measuring instead. */
body.kcai .kcai-page,
body.kcai .is-layout-constrained > .kcai-page,
body.kcai .wp-block-post-content > .kcai-page {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Same release, for the modular section blocks.
   A page built to the section standard is a RUN of top-level wp:group blocks
   rather than one wrapper, so every one of them is a direct child of the
   constrained container and every one of them needs releasing. `.kcaipm-sec` is
   carried by every section in addition to its own `.kcaipm-sec-<name>` class
   precisely so this rule can be written once and never chase a section list. */
body.kcai .kcaipm-sec,
body.kcai .is-layout-constrained > .kcaipm-sec,
body.kcai .wp-block-post-content > .kcaipm-sec {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
body.kcai .entry-content.has-global-padding { padding-left: 0; padding-right: 0; }

/* DUPLICATE H1.
   Twenty Twenty-Five renders the page title as an H1 through its post-title
   block, and every KCAI page also renders its own H1 in the hero - so each
   inner page shipped with two H1s carrying identical text. `display:none`
   rather than a visually-hidden class is deliberate: the heading is genuinely
   redundant, and display:none removes it from the accessibility tree too, so a
   screen-reader user hears the title once rather than twice. */
body.kcai .wp-block-post-title { display: none; }

.kcai-wrap { max-width: var(--kcai-maxw); margin: 0 auto; padding: 0 var(--kcai-s5); }
.kcai-section { padding: var(--kcai-s9) 0; }
.kcai-section--tight { padding: var(--kcai-s8) 0; }

/* THE PREFIX RULE - read this before adding a rule below.
   The base rules above are written `body.kcai h2`, `body.kcai p`, `body.kcai a`
   - specificity (0,1,1). A component rule written as a bare class is (0,1,0)
   and LOSES to them. So any rule whose subject element is a heading, a
   paragraph or an anchor MUST be prefixed with `body.kcai` to reach (0,2,0).
   No !important is needed, and none is used.
   This has now bitten three times: anchor buttons rendering blue-on-blue at
   v1.0.1, and at v1.4.0 the footer column headings rendering at full h2 display
   size and the footer paragraph margins reverting. Prefix it. */

body.kcai .kcai-eyebrow {
  font-family: var(--kcai-font-head); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--kcai-blue);
  margin: 0 0 var(--kcai-s3);
}
body.kcai .kcai-lede { font-size: 1.12rem; color: var(--kcai-muted); max-width: 62ch; }

/* Controlled silver-to-white heading gradient. Falls back to solid white where
   background-clip:text is unsupported. */
.kcai-gradient-head {
  background: linear-gradient(180deg, var(--kcai-white) 0%, #9FB0BF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .kcai-gradient-head { color: var(--kcai-white); -webkit-text-fill-color: currentColor; }
}

/* --------------------------------------------------------------- buttons */

/* EVERY button colour rule is prefixed with `body.kcai`, and that is
   load-bearing rather than stylistic.
   The base link rule above is `body.kcai a` at (0,1,1). A button rule written
   as `.kcai-btn--primary` is only (0,1,0), so the link rule wins and every
   anchor button renders its label in link-blue ON the blue fill - invisible.
   Prefixing takes these to (0,2,1) so they beat it. No !important needed.
   This is the same specificity trap the KCPSR matching plugin hit at v0.6.0. */

body.kcai .kcai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kcai-s2);
  min-height: 52px; padding: var(--kcai-s3) var(--kcai-s6);
  border-radius: var(--kcai-radius); border: 1px solid transparent;
  font-family: var(--kcai-font-body); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--kcai-ease), border-color .18s var(--kcai-ease), transform .18s var(--kcai-ease);
}
/* Dark text on blue: #001018 on #00A4FD is ~7.9:1. White on blue would be 2.7:1. */
body.kcai .kcai-btn--primary { background: var(--kcai-blue); color: #001018; }
body.kcai .kcai-btn--primary:hover { background: #3FBBFF; color: #001018; transform: translateY(-1px); }

body.kcai .kcai-btn--secondary { background: transparent; color: var(--kcai-white); border-color: var(--kcai-white-22); }
body.kcai .kcai-btn--secondary:hover { background: var(--kcai-white-08); border-color: var(--kcai-white); color: var(--kcai-white); }

body.kcai .kcai-btn--ghost { background: transparent; color: var(--kcai-blue); border-color: var(--kcai-blue-40); }
body.kcai .kcai-btn--ghost:hover { background: var(--kcai-blue-12); color: var(--kcai-white); }

body.kcai .kcai-btn--wide { width: 100%; }

/* Same reason: the nav and footer links sit inside `body.kcai a`. */
body.kcai .kcai-nav a { color: var(--kcai-silver); }
body.kcai .kcai-nav a:hover { color: var(--kcai-white); }
body.kcai .kcai-footer a { color: var(--kcai-silver); }
body.kcai .kcai-footer a:hover { color: var(--kcai-blue); }
body.kcai .kcai-header__logo { text-decoration: none; }

/* ---------------------------------------------------------------- panels */

.kcai-panel {
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  padding: var(--kcai-s6);
}
.kcai-panel--elevated { background: var(--kcai-elevated); }
.kcai-panel--edge {
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,164,253,0.10), 0 18px 40px rgba(0,0,0,0.55);
}
/* Subtle blue edge lighting along the top of a panel. */
.kcai-panel--edge::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--kcai-blue), transparent);
  opacity: .55;
}

.kcai-grid { display: grid; gap: var(--kcai-s5); }
.kcai-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kcai-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kcai-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ----------------------------------------------------------------- cards */

.kcai-card {
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .18s var(--kcai-ease), transform .18s var(--kcai-ease);
}
.kcai-card:hover { border-color: var(--kcai-blue-40); transform: translateY(-2px); }
.kcai-card__media {
  aspect-ratio: 4 / 3; background: var(--kcai-charcoal);
  display: flex; align-items: center; justify-content: center;
  color: var(--kcai-muted); font-size: .85rem;
}
.kcai-card__body { padding: var(--kcai-s4); display: flex; flex-direction: column; gap: var(--kcai-s2); }
body.kcai .kcai-card__title { font-family: var(--kcai-font-head); font-weight: 600; color: var(--kcai-white); margin: 0; font-size: 1.05rem; }
body.kcai .kcai-card__meta { color: var(--kcai-muted); font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------- status
   Colour is never the only signal: every chip carries a text label and a
   glyph, so the meaning survives greyscale and colour blindness. */

.kcai-status {
  display: inline-flex; align-items: center; gap: var(--kcai-s2);
  padding: 4px var(--kcai-s3); border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid currentColor; background: rgba(0,0,0,.35);
}
.kcai-status__glyph { font-size: .9em; line-height: 1; }
.kcai-status--lost     { color: var(--kcai-blue); }
.kcai-status--found    { color: var(--kcai-silver); }
.kcai-status--match    { color: var(--kcai-blue); background: var(--kcai-blue-12); }
.kcai-status--reunited { color: var(--kcai-success); }
.kcai-status--urgent   { color: var(--kcai-urgent); }
.kcai-status--private  { color: var(--kcai-muted); }
.kcai-status--review   { color: var(--kcai-warning); }

/* ------------------------------------------------------------------ steps */

.kcai-steps { counter-reset: kcai-step; }
.kcai-step { position: relative; padding-left: 56px; }
.kcai-step::before {
  counter-increment: kcai-step; content: counter(kcai-step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--kcai-font-head); font-weight: 700; font-size: 1rem;
  color: var(--kcai-blue); border: 1px solid var(--kcai-blue-40); background: var(--kcai-blue-12);
}

/* ----------------------------------------------------------------- header */

.kcai-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kcai-border);
}
.kcai-header__inner {
  max-width: var(--kcai-maxw); margin: 0 auto; padding: var(--kcai-s3) var(--kcai-s5);
  display: flex; align-items: center; gap: var(--kcai-s5); flex-wrap: wrap;
}
.kcai-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.kcai-header__logo-img { height: 44px; width: auto; display: block; }
.kcai-logo-fallback { font-family: var(--kcai-font-head); font-weight: 700; color: var(--kcai-white); }

/* The menu is one element so the burger's aria-controls points at exactly the
   thing that shows and hides. On desktop it is a row; on mobile the same
   element becomes a full-width stack under the logo. */
.kcai-header__menu {
  display: flex; align-items: center; gap: var(--kcai-s5);
  margin-left: auto;
}
.kcai-nav { display: flex; align-items: center; gap: var(--kcai-s5); }
.kcai-nav a {
  color: var(--kcai-silver); text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: var(--kcai-s2) 0; border-bottom: 2px solid transparent;
}
.kcai-nav a:hover { color: var(--kcai-white); border-bottom-color: var(--kcai-blue); }
.kcai-nav a[aria-current="page"] { color: var(--kcai-white); border-bottom-color: var(--kcai-blue); }
.kcai-header__actions { display: flex; gap: var(--kcai-s3); flex-shrink: 0; }
.kcai-header__actions .kcai-btn { min-height: 44px; padding: var(--kcai-s2) var(--kcai-s4); font-size: .9rem; }

.kcai-burger {
  display: none; background: transparent; border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius-sm); color: var(--kcai-white);
  width: 48px; height: 48px; margin-left: auto; cursor: pointer;
  align-items: center; justify-content: center;
}
/* One control, two glyphs: the open state shows a close icon, so the button
   always describes what pressing it will do. */
.kcai-burger__close { display: none; }
.kcai-header.is-open .kcai-burger__open { display: none; }
.kcai-header.is-open .kcai-burger__close { display: block; }

/* ------------------------------------------------------------------- hero */

.kcai-hero { position: relative; padding: var(--kcai-s9) 0 var(--kcai-s8); overflow: hidden; }
/* Very faint node/connection field. Static, low contrast, decorative only. */
.kcai-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,164,253,.10), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(0,164,253,.07), transparent 38%),
    radial-gradient(rgba(0,164,253,.16) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px;
  opacity: .5;
}
.kcai-hero__inner { position: relative; }
.kcai-hero__logo { max-width: 460px; width: 68%; height: auto; margin: 0 0 var(--kcai-s6); display: block; }
.kcai-hero__actions { display: flex; flex-wrap: wrap; gap: var(--kcai-s3); margin: var(--kcai-s6) 0 var(--kcai-s5); }
body.kcai .kcai-powered {
  font-family: var(--kcai-font-head); font-size: .95rem; font-weight: 600;
  color: var(--kcai-silver); margin: 0;
}
body.kcai .kcai-powered strong { color: var(--kcai-white); }

/* -------------------------------------------------------- action panels */

.kcai-action {
  display: flex; flex-direction: column; gap: var(--kcai-s3);
  padding: var(--kcai-s7) var(--kcai-s6);
  border-radius: var(--kcai-radius);
  background: var(--kcai-panel); border: 1px solid var(--kcai-border);
  position: relative; overflow: hidden;
}
/* Lost vs Found are separated by label, icon and weight - not by unrelated
   hues. Lost gets the blue rule, Found gets the silver rule. */
.kcai-action::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.kcai-action--lost::after  { background: var(--kcai-blue); }
.kcai-action--found::after { background: var(--kcai-silver); }
.kcai-action__icon { font-size: 1.8rem; line-height: 1; }
.kcai-action h3 { margin: 0; }

/* ------------------------------------------------------------------- FAQ */

.kcai-faq { border-top: 1px solid var(--kcai-border); }
.kcai-faq details { border-bottom: 1px solid var(--kcai-border); }
.kcai-faq summary {
  cursor: pointer; padding: var(--kcai-s5) 0; list-style: none;
  font-family: var(--kcai-font-head); font-weight: 600; color: var(--kcai-white);
  display: flex; justify-content: space-between; align-items: center; gap: var(--kcai-s4);
  min-height: 48px;
}
.kcai-faq summary::-webkit-details-marker { display: none; }
.kcai-faq summary::after { content: '+'; color: var(--kcai-blue); font-size: 1.5rem; flex-shrink: 0; }
.kcai-faq details[open] summary::after { content: '\2212'; }
.kcai-faq details > div { padding-bottom: var(--kcai-s5); color: var(--kcai-muted); }

/* ----------------------------------------------------------------- notice */

.kcai-notice {
  display: flex; gap: var(--kcai-s3); align-items: flex-start;
  border-radius: var(--kcai-radius); padding: var(--kcai-s4) var(--kcai-s5);
  border: 1px solid var(--kcai-warning); background: rgba(245,166,35,.08);
  color: var(--kcai-silver);
}
.kcai-notice strong { color: var(--kcai-warning); }
.kcai-notice--info { border-color: var(--kcai-blue-40); background: var(--kcai-blue-12); }
.kcai-notice--info strong { color: var(--kcai-blue); }

/* ----------------------------------------------------------------- footer */

.kcai-footer { border-top: 1px solid var(--kcai-border); padding: var(--kcai-s8) 0 var(--kcai-s6); background: var(--kcai-elevated); }
.kcai-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--kcai-s6); }

/* Column headings are H2s, not H4s. They are genuine second-level landmarks in
   the document outline, and jumping H1 -> H4 for styling reasons is exactly the
   heading-order defect this build set out to remove. The small-caps look is
   done in CSS, where appearance belongs. */
/* body.kcai prefix is load-bearing: this class sits on an <h2>, and without it
   `body.kcai h2 {font-size:clamp(1.6rem,3.4vw,2.4rem)}` wins and the footer
   column headings render as 38px display type. See THE PREFIX RULE above. */
body.kcai .kcai-footer__heading {
  font-family: var(--kcai-font-head);
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kcai-muted); margin: 0 0 var(--kcai-s3);
}
.kcai-footer ul { list-style: none; margin: 0; padding: 0; }
.kcai-footer li { margin-bottom: var(--kcai-s2); }
.kcai-footer a { color: var(--kcai-silver); text-decoration: none; }
.kcai-footer a:hover { color: var(--kcai-blue); text-decoration: underline; }

.kcai-footer__logo { max-width: 200px; width: 100%; height: auto; margin: 0 0 var(--kcai-s4); display: block; }
body.kcai .kcai-footer__name {
  font-family: var(--kcai-font-head); font-size: 1.05rem; font-weight: 700;
  color: var(--kcai-white); margin: 0;
}
body.kcai .kcai-footer__descriptor {
  font-family: var(--kcai-font-head); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kcai-blue);
  margin: var(--kcai-s1) 0 var(--kcai-s3);
}
body.kcai .kcai-footer__blurb { color: var(--kcai-muted); font-size: .92rem; max-width: 40ch; margin: var(--kcai-s4) 0 0; }
.kcai-footer .kcai-powered a { color: var(--kcai-silver); }
.kcai-footer .kcai-powered a:hover { color: var(--kcai-blue); }

.kcai-footer__legal {
  margin-top: var(--kcai-s7); padding-top: var(--kcai-s5);
  border-top: 1px solid var(--kcai-border); color: var(--kcai-muted); font-size: .85rem;
}
body.kcai .kcai-footer__legal p { margin: 0 0 var(--kcai-s3); }
body.kcai .kcai-footer__privacy { color: var(--kcai-muted); max-width: 96ch; }
body.kcai .kcai-footer__privacy strong { color: var(--kcai-silver); }
body.kcai .kcai-footer__copyright { margin-bottom: 0; }

/* ------------------------------------------------------------ responsive */

/* Footer links are inline text and rendered ~20px tall, under the 44px touch
   target minimum. Applied at the tablet breakpoint and below, because a 768px
   tablet is a touch device too - the first fix only covered <=700px and left
   768 failing. Measured at 375, 390, 768 and 1440. */
@media (max-width: 1023px) {
  body.kcai .kcai-footer li { margin-bottom: 0; }
  body.kcai .kcai-footer li a { display: inline-block; padding: 12px 0; min-height: 44px; }
}

@media (max-width: 1023px) {
  .kcai-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcai-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kcai-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* MOBILE NAVIGATION.
   The switch is at 980px, not 860: five navigation items plus the action button
   plus the logo stop fitting comfortably well before 860, and the row was
   crowding rather than wrapping. Above the breakpoint the burger does not
   exist; below it the burger is the only control and the menu is a full-width
   stack that scrolls if the viewport is short. */
@media (max-width: 980px) {
  .kcai-burger { display: flex; }
  .kcai-header__menu { display: none; }
  .kcai-header.is-open .kcai-header__menu {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; margin: 0; gap: var(--kcai-s2);
    padding-bottom: var(--kcai-s3);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .kcai-header.is-open .kcai-nav {
    flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  }
  .kcai-header.is-open .kcai-nav a {
    padding: var(--kcai-s3) 0; border-bottom: 1px solid var(--kcai-border);
    border-top: 0; min-height: 48px; display: flex; align-items: center;
  }
  .kcai-header.is-open .kcai-header__actions { width: 100%; margin-top: var(--kcai-s3); }
  .kcai-header.is-open .kcai-header__actions .kcai-btn { min-height: 52px; width: 100%; }
}
@media (max-width: 700px) {
  body.kcai { font-size: 16px; }
  .kcai-section { padding: var(--kcai-s8) 0; }

  .kcai-grid--2, .kcai-grid--3, .kcai-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .kcai-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .kcai-hero { padding: var(--kcai-s7) 0 var(--kcai-s6); }
  .kcai-hero__logo { width: 84%; }
  .kcai-hero__actions .kcai-btn { width: 100%; }
  .kcai-panel, .kcai-action { padding: var(--kcai-s5); }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  body.kcai *, body.kcai *::before, body.kcai *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .kcai-card:hover, .kcai-btn--primary:hover { transform: none; }
}

/* ------------------------------------------------------- forced colours */

@media (forced-colors: active) {
  .kcai-btn, .kcai-panel, .kcai-card, .kcai-status { border: 1px solid CanvasText; }
}