/* Drone Kits page only. Every rule is scoped under .kits so nothing leaks into
   the other pages. Shared tokens, type, buttons and pills come from site.css. */

.kits .kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:var(--section-y) 0;border-top:1px solid var(--line)}
.kits .kit.flip .kit-art{order:2}
.kits .kit-index{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan2);margin:0 0 14px;display:block}
.kits .kit h2{margin-bottom:10px}
.kits .kit .pill{margin:4px 0 16px}
.kits .roles{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.kits .roles li{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink2);border:1px solid var(--line2);border-radius:6px;padding:7px 9px}

/* Photo and render placeholders. They are outlines, never product images. */
/* Normal flow, not a fixed box: the caption must never sit on top of the outline. */
.kits .ph-kit{margin:0;position:relative;border:1.5px dashed var(--line2);border-radius:14px;background:var(--navy2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px 20px;gap:14px;min-height:260px}
.kits .ph-kit svg{width:min(70%,260px);height:auto;display:block}
.kits .ph-kit .ph-line{stroke:var(--ink3);stroke-width:2;fill:none;stroke-dasharray:6 5}
.kits .ph-kit .ph-hinge{stroke:var(--cyan);stroke-width:1.5;fill:none;stroke-dasharray:2 4}
.kits .ph-kit .ph-fill{fill:var(--navy3);stroke:var(--line2);stroke-width:1.5}
.kits .ph-kit figcaption{font-size:13px;color:var(--ink3);text-align:center;margin:0;max-width:40ch}
.kits .ph-kit .ph-tag{position:absolute;top:14px;left:16px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--limited)}
.kits .ph-kit.wide svg{width:min(88%,360px)}

/* Illustrations supplied by Aveoni: framed like cards, captioned as illustrations. */
.kits .kit-photo{margin:0}
.kits .kit-photo img{width:auto;max-width:100%;max-height:460px;height:auto;display:block;margin:0 auto;border-radius:14px}
.kits .kit-photo figcaption{font-size:13px;color:var(--ink3);margin:10px 0 0}

/* Hero placeholder shows the three airframe outlines side by side. */
.kits .hero-art-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:center}
.kits .hero-art-row svg{width:100%;height:auto;display:block}

/* Philosophy numbering reuses .journey from site.css. */
.kits .principles{margin-top:24px}

/* Integration directions: dashed boundary, no connecting lines, no status pills. */
.kits .direction-note{margin-top:18px;padding:14px 16px;border:1px dashed var(--plan);border-radius:12px;color:var(--ink2);font-size:15px}
.kits .direction-note strong{color:var(--ink)}
.kits .direction-grid .card h3{font-size:17px}
.kits .direction-grid .card .lv-vision{margin-bottom:12px}

@media (max-width:860px){
  .kits .kit{grid-template-columns:1fr;gap:24px}
  .kits .kit.flip .kit-art{order:0}
}
@media (max-width:640px){
  .kits .hero-art-row{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .kits .ph-kit svg{width:100%}
}