/* 9order / SaaS Kits / UI UX Pro Max editorial-system extension
   Minimal Swiss information hierarchy + engineering-workbench layout.
   Existing 9order tokens and typographic voice remain authoritative. */
:root {
  --kits-ink:#17191d;
  --kits-muted:#56534e;
  --kits-quiet:#676159;
  --kits-paper:#f2eee6;
  --kits-white:#fbf9f4;
  --kits-line:#252529;
  --kits-orange:#ff5b35;
  --kits-soft:#ffe4da;
  --kits-surface:#eee9e1;
  --kits-max:1180px;
}
.kits-hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin:0 0 23px}
.kits-hero-action{display:inline-flex;gap:20px;align-items:center;justify-content:space-between;min-height:48px;border:1px solid rgba(255,255,255,.75);color:#f9f5ef;background:transparent;padding:12px 17px;font:600 11px/1.2 var(--mono,monospace);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;transition:background .18s,color .18s}
.kits-hero-action.is-primary{color:#191a1d;background:var(--kits-orange);border-color:var(--kits-orange)}
.kits-hero-action:hover{background:#f9f5ef;color:var(--kits-ink)}
.kits-hero-action.is-primary:hover{background:#ffab90;color:var(--kits-ink)}
.kits-hero-action:focus-visible,.kits-story-phase:focus-visible,.kits-story-lens-controls button:focus-visible,.kits-scar:focus-visible,.kits-story-cta:focus-visible,.kits-path a:focus-visible,.kits-note-nav a:focus-visible{outline:3px solid var(--kits-orange);outline-offset:3px}
.kits-hero .kits-hero-meta span{font-size:10px}
#kit-configurator,#how-it-works,#field-notes,.kits-case{scroll-margin-top:90px}

.kits-intro-text{max-width:510px;min-width:0}
.kits-intro-text p{max-width:none}
.kits-discovery-gate{margin-top:14px!important;border-left:3px solid var(--kits-orange);padding:9px 0 9px 14px;background:#f8e8dc;color:#38332d!important;font-size:14px!important;line-height:1.5}
.kits-discovery-gate a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.kits-roles{padding:41px 0 37px;border-bottom:1px solid var(--kits-line);background:var(--kits-white)}
.kits-roles-head{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start;margin-bottom:25px}
.kits-roles-head .kits-mono{color:var(--kits-muted);padding-top:8px}
.kits-roles-head h2{font-size:clamp(29px,3.5vw,47px);letter-spacing:-.055em;line-height:.98;margin:0}
.kits-roles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--kits-line)}
.kits-role{display:flex;flex-direction:column;min-width:0;padding:23px 24px 25px;border-right:1px solid var(--kits-line);background:#faf8f3}
.kits-role:last-child{border-right:0}
.kits-role.is-agent{background:var(--kits-soft)}
.kits-role.is-proof{color:#f5f1ec;background:var(--kits-ink)}
.kits-role-id{display:flex;align-items:center;justify-content:space-between;gap:20px;color:inherit;font:600 11px/1.3 var(--mono,monospace);letter-spacing:.04em}
.kits-role-symbol{font-size:25px;font-weight:600;line-height:1}
.kits-role h3{font-size:clamp(21px,2.1vw,30px);line-height:1.1;letter-spacing:-.04em;margin:32px 0 10px}
.kits-role p{font-size:15px;line-height:1.5;color:#56514c;margin:0}
.kits-role.is-proof p{color:#e1dcd7}
.kits-roles-foot{font-size:14px;color:var(--kits-muted);line-height:1.5;margin:17px 0 0;max-width:780px}

.kits-story-section{border-top:1px solid var(--kits-line);padding:74px 0 82px;background:var(--kits-paper);color:var(--kits-ink)}
.kits-story-head{display:grid;grid-template-columns:215px minmax(0,1fr);gap:35px;align-items:start;margin-bottom:34px}
.kits-story-head>.kits-mono{color:var(--kits-muted);padding-top:8px}
.kits-story-head h2{font-size:clamp(39px,5.5vw,73px);line-height:.94;letter-spacing:-.069em;margin:0}
.kits-story-head h2 em{font-style:normal;color:#d94a26}
.kits-story-head p{font-size:17px;line-height:1.55;max-width:760px;margin:18px 0 0;color:#494641}
.kits-story-head p a,.kits-story-source a{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.kits-story-workbench{border:1px solid var(--kits-line);background:#fffdfa}
.kits-story-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#e9e3d9;border-bottom:1px solid var(--kits-line)}
.kits-story-phase{min-width:0;min-height:95px;display:flex;flex-direction:column;gap:5px;text-align:left;padding:17px 14px 16px;border:0;border-right:1px solid var(--kits-line);background:transparent;color:var(--kits-ink);cursor:pointer;transition:background .18s ease}
.kits-story-phase:last-child{border-right:0}
.kits-story-phase span{font:600 10px var(--mono,monospace);color:var(--kits-muted);letter-spacing:.04em}
.kits-story-phase strong{font:700 14px/1.1 var(--display,sans-serif);letter-spacing:-.015em}
.kits-story-phase small{font:400 12px/1.25 var(--display,sans-serif);color:var(--kits-muted)}
.kits-story-phase.is-current{background:var(--kits-orange)}
.kits-story-phase.is-current span,.kits-story-phase.is-current small{color:#26211d}
.kits-story-phase:hover:not(.is-current){background:#f9efe4}
.kits-story-content{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(300px,.86fr);align-items:stretch}
.kits-story-learning{padding:32px clamp(20px,3vw,39px) 35px;min-width:0}
.kits-story-stage-line{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid #b5aea4;padding-bottom:18px;margin-bottom:23px}
.kits-story-stage-line .kits-mono{color:var(--kits-muted)}
.kits-story-owner{font:600 11px/1.5 var(--mono,monospace);background:#efe5db;padding:5px 8px;color:#3b3734}
.kits-story-learning h3{font-size:clamp(33px,3.6vw,52px);line-height:.98;letter-spacing:-.055em;margin:0 0 13px}
.kits-story-lead{font-size:17px;line-height:1.5;color:#4c4741;margin:0 0 23px;max-width:620px}
.kits-story-responsibilities{border-top:1px solid #bbb3a8}
.kits-story-responsibilities>div{display:grid;grid-template-columns:145px 1fr;gap:17px;align-items:start;border-bottom:1px solid #c4bdb3;padding:13px 0}
.kits-story-responsibilities span{font:600 11px/1.35 var(--mono,monospace);letter-spacing:.03em;color:#645d55}
.kits-story-responsibilities p{font-size:14px;line-height:1.5;color:#292925;margin:0}
.kits-story-danger{padding:15px 17px;background:#ffe9db;border-left:4px solid #dc4f2a;margin:19px 0}
.kits-story-danger .kits-mono{color:#93401f}
.kits-story-danger p{color:#3b312a;font-size:14px;line-height:1.5;margin:6px 0 0}
.kits-story-lens{border-top:1px solid #bcb2a6;padding-top:16px}
.kits-story-lens-top{display:flex;gap:15px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.kits-story-lens-top>.kits-mono{color:var(--kits-muted)}
.kits-story-lens-controls{display:flex;gap:4px;background:#ebe6de;border:1px solid #bbb2a8;padding:4px}
.kits-story-lens-controls button{min-height:38px;border:0;background:transparent;cursor:pointer;padding:9px 12px;color:#3b3732;font:600 11px var(--mono,monospace)}
.kits-story-lens-controls button.is-current{background:var(--kits-ink);color:#fffaf5}
.kits-story-lens p{font-size:15px;line-height:1.55;margin:12px 0 0;color:#39352f}
.kits-story-artifact{min-width:0;background:#1d2025;color:#f7f0e9;display:flex;flex-direction:column;border-left:1px solid var(--kits-line)}
.kits-story-artifact-head{min-height:55px;padding:17px 20px;border-bottom:1px solid #55565b;display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 10px/1.4 var(--mono,monospace);color:#e7e2dd}
.kits-story-artifact-head i{display:inline-block;border-radius:50%;width:8px;height:8px;background:#ff5b35;margin-right:7px}
.kits-story-artifact-head span:last-child{color:#efaa91;text-align:right}
.kits-story-artifact-path{font:600 12px/1.4 var(--mono,monospace);padding:23px 22px 10px;color:#f6a78d;overflow-wrap:anywhere}
.kits-story-artifact pre{font:13px/1.78 var(--mono,monospace);white-space:pre-wrap;overflow-wrap:anywhere;padding:10px 22px 25px;margin:0;color:#f5efe8;flex:1}
.kits-story-artifact-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #55565b;padding:18px 22px;color:#c4cbc7;font:600 11px/1.4 var(--mono,monospace);letter-spacing:.02em}
.kits-story-artifact-foot span:last-child{color:var(--kits-orange);font-size:22px}
.kits-story-source{font-size:13px;line-height:1.55;color:var(--kits-muted);margin:17px 0 0}
.kits-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}

.kits-scars{border-top:1px solid var(--kits-line);padding:72px 0 74px;background:#f9f6ef}
.kits-scar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--kits-line);border-left:1px solid var(--kits-line)}
.kits-scar{position:relative;min-height:336px;display:flex;flex-direction:column;padding:27px 30px;border-right:1px solid var(--kits-line);border-bottom:1px solid var(--kits-line);text-decoration:none;background:#fcfaf5;transition:background .18s}
.kits-scar:nth-child(2),.kits-scar:nth-child(3){background:#ede8df}
.kits-scar:hover{background:#ffe5d8}
.kits-scar-number,.kits-scar-rule{display:flex;justify-content:space-between;gap:20px;font:600 10px/1.4 var(--mono,monospace);letter-spacing:.04em}
.kits-scar-number span:last-child{color:#675d55}
.kits-scar h3{font-size:clamp(30px,3.8vw,47px);line-height:.98;letter-spacing:-.065em;margin:32px 0 13px}
.kits-scar p{font-size:15px;line-height:1.54;max-width:475px;color:#44403b;margin:0 0 22px}
.kits-scar-rule{display:block;font-size:11px;margin-top:auto;padding:12px 0;border-top:1px solid #c8bfb4;color:#a44327}
.kits-scar-link{display:flex;align-items:center;justify-content:space-between;gap:25px;font:600 11px var(--mono,monospace);text-transform:uppercase;padding-top:17px}
.kits-scar-link span{font-size:20px}
.kits-scars-end{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:22px}
.kits-scars-end p{font-size:15px;line-height:1.5;max-width:700px;color:var(--kits-muted);margin:0}
.kits-story-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:19px;border:1px solid var(--kits-line);background:var(--kits-ink);color:#f8f4ed;text-decoration:none;font:600 11px/1.25 var(--mono,monospace);text-transform:uppercase;padding:16px 19px;min-height:50px}
.kits-story-cta:hover{background:#3e4248}
.kits-story-cta span{font-size:16px}

.kits-paths{border-top:1px solid var(--kits-line);padding:76px 0 82px;background:var(--kits-paper)}
.kits-path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--kits-line)}
.kits-path{min-width:0;padding:29px 33px 32px;display:flex;flex-direction:column}
.kits-path.is-first{background:#faf6ee;border-right:1px solid var(--kits-line)}
.kits-path.is-senior{background:#24262b;color:#fff9f2}
.kits-path-kicker{display:flex;justify-content:space-between;gap:15px;font:600 11px/1.4 var(--mono,monospace)}
.kits-path h3{font-size:clamp(30px,3.8vw,48px);line-height:1.02;letter-spacing:-.055em;margin:40px 0 16px}
.kits-path p{font-size:16px;line-height:1.5;margin:0 0 20px;max-width:500px}
.kits-path.is-first p{color:#49443e}
.kits-path.is-senior p{color:#e5dfd8}
.kits-path ol{margin:0 0 30px;list-style-position:inside;padding:0}
.kits-path li{padding:9px 0;border-bottom:1px solid #b8b0a7;font-size:14px;line-height:1.4}
.kits-path.is-senior li{border-color:#55575b}
.kits-path a{margin-top:auto;border-top:1px solid currentColor;padding-top:19px;display:flex;justify-content:space-between;gap:15px;font:600 12px/1.4 var(--mono,monospace);text-transform:uppercase;text-decoration:none}
.kits-path a span{font-size:19px}
.kits-path a:hover{text-decoration:underline;text-underline-offset:4px}
.kits-after{background:#fbf9f4}

/* Long-form field notes — legible enough for learning, sharp enough for operators. */
.kits-notes-hero{background:#1d2025;color:#f8f3ed;padding:67px 0 60px;border-bottom:1px solid #070809}
.kits-notes-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:55px;align-items:end}
.kits-notes-hero .kits-mono{color:#f6a68e}
.kits-notes-hero h1{font-size:clamp(56px,8vw,105px);line-height:.91;letter-spacing:-.075em;margin:22px 0 0}
.kits-notes-hero h1 em{font-style:normal;color:#ff5b35}
.kits-notes-hero p{font-size:18px;line-height:1.53;color:#e0dcd6;margin:0}
.kits-notes-preface{border-bottom:1px solid var(--kits-line);padding:28px 0;background:#f2eee6}
.kits-notes-preface-grid{display:grid;grid-template-columns:220px 1fr;gap:32px}
.kits-notes-preface .kits-mono{color:#56534e}
.kits-notes-preface p{font-size:16px;line-height:1.6;margin:0;max-width:810px}
.kits-note-layout{display:grid;grid-template-columns:205px minmax(0,1fr);align-items:start;gap:48px;padding-top:58px;padding-bottom:76px}
.kits-note-nav{position:sticky;top:92px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--kits-line)}
.kits-note-nav strong{font:600 11px var(--mono,monospace);padding:13px 0;border-bottom:1px solid var(--kits-line)}
.kits-note-nav a{padding:13px 0;border-bottom:1px solid #bdb5a9;color:#35302e;font:600 12px/1.4 var(--mono,monospace);text-decoration:none}
.kits-note-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.kits-note-main{min-width:0}
.kits-case{margin-bottom:51px;padding-bottom:54px;border-bottom:1px solid var(--kits-line)}
.kits-case:last-child{margin-bottom:0;border-bottom:0;padding-bottom:0}
.kits-case-top{display:flex;justify-content:space-between;gap:22px;align-items:center;font:600 11px var(--mono,monospace);letter-spacing:.025em;margin-bottom:19px}
.kits-case-type{padding:7px 9px;background:#17191d;color:#fff6ed}
.kits-case-type.is-risk{background:#e1b39d;color:#31251e}
.kits-case h2{font-size:clamp(36px,5.4vw,70px);line-height:.97;letter-spacing:-.07em;margin:0 0 19px}
.kits-case-intro{font-size:18px;line-height:1.53;margin:0 0 27px;max-width:815px;color:#3e3a35}
.kits-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--kits-line);border-left:1px solid var(--kits-line)}
.kits-case-cell{padding:23px;border-bottom:1px solid var(--kits-line);border-right:1px solid var(--kits-line);background:#fbf9f4}
.kits-case-cell:nth-child(2),.kits-case-cell:nth-child(3){background:#ede8df}
.kits-case-cell>span{display:block;font:600 11px/1.4 var(--mono,monospace);letter-spacing:.04em;color:#8b492f;margin-bottom:13px}
.kits-case-cell h3{font-size:20px;line-height:1.15;letter-spacing:-.035em;margin:0 0 10px}
.kits-case-cell p{font-size:15px;line-height:1.6;color:#46423e;margin:0}
.kits-case-lesson{background:#24262b;color:#fbf7f2;margin-top:17px;padding:21px 23px}
.kits-case-lesson span{font:600 11px var(--mono,monospace);color:#f9a78c}
.kits-case-lesson p{font-size:17px;line-height:1.5;margin:9px 0 0}
.kits-case-exercise{margin-top:17px;padding:20px 23px;background:#ffdfcf;border-left:4px solid #eb5b32}
.kits-case-exercise span{font:600 11px var(--mono,monospace);color:#753b27}
.kits-case-exercise p{font-size:15px;line-height:1.55;margin:7px 0 0}
.kits-note-end{border-top:1px solid var(--kits-line);padding:50px 0 58px}
.kits-note-end-grid{display:flex;justify-content:space-between;gap:30px;align-items:center}
.kits-note-end h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.055em;line-height:1;margin:0 0 10px}
.kits-note-end p{font-size:16px;line-height:1.55;margin:0;max-width:680px}

@media(max-width:1050px){
 .kits-story-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
 .kits-story-phase:nth-child(3){border-right:0}
 .kits-story-phase:nth-child(-n+3){border-bottom:1px solid var(--kits-line)}
 .kits-story-content{grid-template-columns:minmax(0,1fr) minmax(275px,.85fr)}
 .kits-notes-hero-grid{gap:30px}
}
@media(max-width:900px){
 .kits-roles-head,.kits-story-head{grid-template-columns:1fr;gap:10px}
 .kits-roles-head h2{font-size:42px}
 .kits-story-head{margin-bottom:25px}
 .kits-story-content{grid-template-columns:1fr}
 .kits-story-artifact{border-left:0;border-top:1px solid var(--kits-line)}
 .kits-story-artifact pre{min-height:160px}
 .kits-note-layout{grid-template-columns:1fr;gap:24px}
 .kits-note-nav{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
 .kits-note-nav strong{grid-column:1/-1}
 .kits-note-nav a{padding:13px 7px;font-size:11px}
}
@media(max-width:620px){
 .kits-hero-actions{display:grid;grid-template-columns:1fr;margin-bottom:18px}
 .kits-hero-action{min-height:48px}
 .kits-roles{padding:29px 0 28px}
 .kits-roles-head h2{font-size:clamp(29px,9vw,42px)}
 .kits-roles-grid{grid-template-columns:1fr}
 .kits-role{padding:20px;border-right:0;border-bottom:1px solid var(--kits-line)}
 .kits-role:last-child{border-bottom:0}
 .kits-role h3{margin-top:17px}
 .kits-role-id{font-size:11px}
 .kits-story-section,.kits-scars,.kits-paths{padding:44px 0 47px}
 .kits-story-head h2{font-size:clamp(37px,10vw,54px)}
 .kits-story-head p{font-size:16px}
 .kits-story-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
 .kits-story-phase{min-height:88px;padding:12px 13px}
 .kits-story-phase:nth-child(n){border-right:1px solid var(--kits-line);border-bottom:1px solid var(--kits-line)}
 .kits-story-phase:nth-child(2n){border-right:0}
 .kits-story-phase:nth-child(n+5){border-bottom:0}
 .kits-story-learning{padding:24px 17px 27px}
 .kits-story-responsibilities>div{grid-template-columns:1fr;gap:5px}
 .kits-story-lens-controls{width:100%}
 .kits-story-lens-controls button{flex:1}
 .kits-story-artifact-head{font-size:9px;padding:15px}
 .kits-story-artifact-head span:last-child{font-size:9px}
 .kits-story-artifact-path{padding:18px 15px 7px}
 .kits-story-artifact pre{padding:10px 15px 25px;font-size:12px}
 .kits-scar-grid,.kits-path-grid{grid-template-columns:1fr}
 .kits-scar{min-height:270px;padding:24px}
 .kits-scar h3{margin-top:24px}
 .kits-scars-end{align-items:stretch;flex-direction:column}
 .kits-story-cta{width:100%}
 .kits-path.is-first{border-right:0;border-bottom:1px solid var(--kits-line)}
 .kits-path{padding:24px}
 .kits-path h3{margin-top:26px}
 .kits-notes-hero{padding:45px 0}
 .kits-notes-hero-grid{grid-template-columns:1fr;gap:24px}
 .kits-notes-hero h1{font-size:clamp(47px,11vw,65px)}
 .kits-notes-hero p{font-size:16px}
 .kits-notes-preface-grid{grid-template-columns:1fr;gap:11px}
 .kits-note-layout{padding-top:34px}
 .kits-note-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .kits-note-nav strong{grid-column:1/-1}
 .kits-case{margin-bottom:40px;padding-bottom:42px}
 .kits-case-grid{grid-template-columns:1fr}
 .kits-case-cell{padding:20px}
 .kits-case-top{flex-wrap:wrap}
 .kits-note-end-grid{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .kits-hero-action,.kits-story-phase,.kits-scar{transition:none!important}
}
@media print{
 .kits-hero-actions,.kits-story-phase,.kits-story-lens-controls,.kits-note-nav{display:none!important}
 .kits-story-artifact,.kits-case-lesson{background:#fff;color:#111}
 .kits-notes-hero{background:#fff;color:#111}
}


/* Idea → Solution entry — retain 9order editorial grids and existing Learn tokens. */
.kits-hero h1{font-size:clamp(42px,5.9vw,91px);letter-spacing:-.07em;max-width:930px}
#starting-points{scroll-margin-top:85px}
.solution-entry{background:#f3efe7;border-bottom:1px solid #17191d;padding:66px 0 68px}
.solution-entry-head{display:grid;grid-template-columns:215px minmax(0,1fr);gap:35px;align-items:start;margin-bottom:29px}
.solution-entry-head>.kits-mono{color:#5c554f;padding-top:7px}
.solution-entry-head h2{font-size:clamp(36px,5vw,67px);letter-spacing:-.07em;line-height:.95;margin:0}
.solution-entry-head p{font-size:17px;line-height:1.55;color:#46413c;max-width:755px;margin:18px 0 0}
.solution-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #17191d}
.solution-path{display:flex;flex-direction:column;min-width:0;min-height:322px;padding:25px 24px;border-right:1px solid #17191d;background:#fbf9f4;text-decoration:none;color:#17191d;transition:background .16s}
.solution-path:last-child{border-right:0}
.solution-path.is-lead{background:#ffe1d1}
.solution-path.is-dark{background:#23252a;color:#f8f4ee}
.solution-path:not(.is-dark):hover{background:#ffd1bd}
.solution-path.is-dark:hover{background:#35363b}
.solution-path-top,.solution-path-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 11px/1.4 var(--mono,monospace)}
.solution-path-top span:last-child{font-size:21px}
.solution-path h3{font-size:clamp(31px,3.1vw,43px);letter-spacing:-.065em;line-height:1.01;margin:41px 0 14px}
.solution-path p{font-size:15px;line-height:1.55;margin:0 0 26px;color:#4a4038}
.solution-path.is-dark p{color:#dfdbd4}
.solution-path-foot{margin-top:auto;border-top:1px solid currentColor;padding-top:17px}
.solution-path-foot span:last-child{font-size:18px}
.solution-possibilities{display:grid;grid-template-columns:1fr minmax(350px,1fr);gap:35px;border-top:1px solid #17191d;margin-top:26px;padding-top:24px}
.solution-possibilities>.kits-mono,.solution-possibilities .kits-mono{color:#5c514b}
.solution-possibilities p{font-size:15px;line-height:1.55;max-width:510px;color:#514941;margin:11px 0 0}
.solution-family-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start}
.solution-family-chips span{padding:12px 10px;border:1px solid #9c9489;background:#fbf9f4;font:600 11px/1.4 var(--mono,monospace)}
.solution-path:focus-visible{outline:3px solid #f45b34;outline-offset:4px;position:relative;z-index:1}
.kits-intro-text a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){
 .solution-entry-head{grid-template-columns:1fr;gap:11px}
 .solution-possibilities{grid-template-columns:1fr;gap:15px}
 .solution-path h3{font-size:clamp(27px,3.2vw,37px)}
 .solution-path{padding:21px 18px;min-height:338px}
}
@media(max-width:720px){
 .solution-entry{padding:42px 0 48px}
 .solution-entry-head h2{font-size:clamp(38px,9vw,54px)}
 .solution-paths{grid-template-columns:1fr}
 .solution-path{border-right:0;border-bottom:1px solid #17191d;min-height:0;padding:23px}
 .solution-path:last-child{border-bottom:0}
 .solution-path h3{font-size:37px;margin:20px 0 11px}
 .solution-path p{margin-bottom:24px}
 .solution-family-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
 .solution-possibilities{margin-top:23px}
}
@media(max-width:400px){
 .kits-hero h1{font-size:clamp(36px,9.3vw,44px)}
 .solution-path h3{font-size:33px}
 .solution-family-chips span{font-size:10px;padding:10px}
}
@media(prefers-reduced-motion:reduce){.solution-path{transition:none}}

/* Local mobile navigation: the existing training-library global nav is hidden <=620px. */
.idea-mobile-nav{display:none}
@media(max-width:620px){
 .idea-mobile-nav{position:sticky;top:0;z-index:25;background:#f2eee6;border-bottom:1px solid #17191d;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:12px max(17px,calc((100vw - 1180px)/2));min-height:50px}
 .idea-mobile-nav a{font:700 11px/1.3 var(--mono,ui-monospace,monospace);text-decoration:none;color:#17191d}
 .idea-mobile-nav a:first-child{font-size:14px}
 .idea-mobile-nav a:focus-visible{outline:3px solid #ff5b35;outline-offset:4px}
}


/* Example-first /kits showroom. The copy is visible without JavaScript. */
#kit-examples{scroll-margin-top:70px}
.kits-showroom{padding:75px 0 83px;background:#202226;color:#fff9f1;border-bottom:1px solid #111317}
.kits-showroom-head{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:start;margin-bottom:30px}
.kits-showroom-head>.kits-mono{padding-top:6px;color:#f9aa8e}
.kits-showroom-head h2{font-size:clamp(38px,5.7vw,79px);line-height:.94;letter-spacing:-.065em;margin:0}
.kits-showroom-head h2 em{font-style:normal;color:#ff9068}
.kits-showroom-head p{font-size:17px;line-height:1.55;max-width:760px;margin:21px 0 0;color:#ded6cd}
.kits-showroom-starts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #807e7a;margin-bottom:53px}
.kits-showroom-start{min-width:0;min-height:243px;padding:24px 27px 20px;color:#1c1c1e;text-decoration:none;background:#f2eee6;display:flex;flex-direction:column;align-items:flex-start;border-right:1px solid #807e7a}
.kits-showroom-start.is-own{color:#201b19;background:#ffd9c7;border-right:0}
.kits-showroom-start .kits-mono{color:#715c52}
.kits-showroom-start strong{font-size:clamp(27px,3.3vw,44px);line-height:1.02;letter-spacing:-.055em;margin:25px 0 11px}
.kits-showroom-start small{font-size:15px;line-height:1.48;max-width:440px;color:#514840}
.kits-showroom-start>span:last-child{font:700 11px/1.5 var(--mono,ui-monospace,monospace);margin-top:auto;padding-top:18px;color:#a54327}
.kits-showroom-start:hover{background:#fffaf2}
.kits-showroom-start.is-own:hover{background:#ffe8da}
.kits-example-list-head{display:grid;grid-template-columns:1fr minmax(280px,.7fr);align-items:end;gap:35px;margin-bottom:19px}
.kits-example-list-head .kits-mono{color:#f9a88d}
.kits-example-list-head h3{font-size:clamp(30px,4.2vw,53px);letter-spacing:-.055em;line-height:1.02;margin:9px 0 0}
.kits-example-list-head p{max-width:410px;font-size:14px;line-height:1.57;color:#d7cec5;margin:0}
.kits-example-list{border:1px solid #76736f}
.kits-example{border-bottom:1px solid #77746f}
.kits-example:last-child{border-bottom:0}
.kits-example>summary{list-style:none;cursor:pointer;min-height:101px;padding:20px 21px;display:grid;grid-template-columns:37px minmax(155px,.6fr) minmax(0,1.2fr) 25px;gap:18px;align-items:center;background:#25282d}
.kits-example>summary::-webkit-details-marker{display:none}
.kits-example[open]>summary{background:#38373a}
.kits-example>summary:hover{background:#424145}
.kits-example-index{color:#ffac90;font:700 11px var(--mono,ui-monospace,monospace)}
.kits-example-titles{display:flex;flex-direction:column;gap:6px}
.kits-example-titles strong{font-size:23px;line-height:1.05;letter-spacing:-.04em}
.kits-example-titles small{font-size:12px;color:#d8d0c9}
.kits-example-tease{font-size:14px;line-height:1.5;color:#e1d8cf}
.kits-example-toggle{font-size:27px;line-height:1;color:#ffb89d;text-align:center}
.kits-example[open] .kits-example-toggle{transform:rotate(45deg)}
.kits-example-content{background:#fbf8f1;color:#232225;padding:20px}
.kits-example-io,.kits-example-below{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.kits-example-panel{min-width:0;padding:24px 25px 28px;min-height:230px;border:1px solid #aa9e90}
.kits-example-panel.is-input{background:#f5eee5;border-right:0}
.kits-example-panel.is-output{background:#24282d;color:#fff8f0}
.kits-example-panel .kits-mono{font-size:10px;color:#765548}
.kits-example-panel.is-output .kits-mono{color:#ffb196}
.kits-example-panel blockquote{margin:20px 0 18px;padding:0;border:0;font-size:clamp(17px,2vw,23px);line-height:1.42;letter-spacing:-.024em;font-weight:600}
.kits-example-panel h4{font-size:clamp(22px,3vw,33px);line-height:1.08;letter-spacing:-.04em;margin:17px 0 11px}
.kits-example-panel p{font-size:15px;line-height:1.55;margin:0}
.kits-example-panel.is-input p{color:#6a5b50;font-size:13px}
.kits-example-panel.is-output small{display:block;font-size:12px;line-height:1.5;margin-top:19px;color:#ddd1c7}
.kits-example-below{border:1px solid #c4bdb4;border-top:0}
.kits-example-below>div{padding:19px 25px 23px;min-width:0}
.kits-example-below>div:first-child{border-right:1px solid #c4bdb4}
.kits-example-below .kits-mono,.kits-example-footer .kits-mono{font-size:10px;color:#85553d}
.kits-example-below p{font-size:14px;line-height:1.55;margin:9px 0 0;color:#4e453e}
.kits-example-footer{display:flex;justify-content:space-between;align-items:center;gap:22px;padding-top:17px}
.kits-example-footer p{font:600 11px/1.55 var(--mono,ui-monospace,monospace);margin:5px 0 0;color:#4d4741;overflow-wrap:anywhere}
.kits-example-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:12px 17px;background:#e95c34;color:#fff9f3;text-decoration:none;font:700 11px/1.35 var(--mono,ui-monospace,monospace);white-space:normal}
.kits-example-cta:hover{background:#b94322}
.kits-example-disclosure{font-size:13px;line-height:1.6;color:#d7cec5;margin:20px 0 0;max-width:1000px}
.kits-showroom a:focus-visible,.kits-showroom summary:focus-visible{outline:3px solid #ff9e7d;outline-offset:4px;position:relative;z-index:2}
@media(max-width:960px){
 .kits-showroom-head{grid-template-columns:1fr;gap:12px}
 .kits-example>summary{grid-template-columns:29px minmax(130px,.8fr) minmax(0,1fr) 22px;gap:12px}
 .kits-example-panel{padding:21px 18px;min-height:0}
}
@media(max-width:720px){
 .kits-showroom{padding:46px 0 50px}
 .kits-showroom-starts,.kits-example-io,.kits-example-below,.kits-example-list-head{grid-template-columns:1fr}
 .kits-showroom-start{border-right:0;border-bottom:1px solid #807e7a;min-height:198px;padding:20px}
 .kits-showroom-start.is-own{border-bottom:0}
 .kits-showroom-start strong{margin-top:17px}
 .kits-example-list-head{gap:12px}
 .kits-example>summary{grid-template-columns:27px minmax(0,1fr) 22px;padding:18px 15px;min-height:88px}
 .kits-example-tease{grid-column:2;grid-row:2;font-size:12px}
 .kits-example-toggle{grid-column:3;grid-row:1}
 .kits-example-content{padding:13px}
 .kits-example-panel.is-input{border-right:1px solid #aa9e90;border-bottom:0}
 .kits-example-panel{padding:19px}
 .kits-example-below>div:first-child{border-right:0;border-bottom:1px solid #c4bdb4}
 .kits-example-below>div{padding:17px 19px}
 .kits-example-footer{align-items:stretch;flex-direction:column}
 .kits-example-cta{justify-content:center}
}
@media(max-width:400px){.kits-example-titles strong{font-size:20px}.kits-showroom-head h2{font-size:clamp(35px,9.1vw,43px)}}
@media(prefers-reduced-motion:reduce){.kits-showroom-start,.kits-example-cta{transition:none}.kits-example-toggle{transform:none!important}}

/* Optional, real-markup sample output files; never presented as generated code. */
.kits-example-artifact{border:1px solid #8c8984;border-top:0;background:#292d32;color:#fff8f0}
.kits-example-artifact>summary{list-style:none;cursor:pointer;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;gap:15px;font:700 11px/1.45 var(--mono,ui-monospace,monospace);color:#ffd0b5}
.kits-example-artifact>summary::-webkit-details-marker{display:none}
.kits-example-artifact>summary span:last-child{font-size:22px;line-height:1}
.kits-example-artifact[open]>summary span:last-child{transform:rotate(45deg)}
.kits-example-artifact>summary:hover{background:#3d4248}
.kits-example-artifact>summary:focus-visible{outline:3px solid #ff9068;outline-offset:-4px}
.kits-example-artifact pre{margin:0;border-top:1px solid #71747a;padding:20px 21px;font:13px/1.7 var(--mono,ui-monospace,monospace);color:#f5eee7;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:720px){.kits-example-artifact pre{font-size:12px;padding:16px 13px}.kits-example-artifact>summary{padding:14px 12px}}

/* Showroom bridge into the local, explicitly non-AI prompt refiner. */
.kits-showroom-refine{border-top:1px solid #77746f;padding:14px 0 16px;margin:0 0 24px;font-size:14px;line-height:1.55;color:#e3d8ce}
.kits-showroom-refine a{color:#ffc1a7;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.kits-showroom-refine a:focus-visible{outline:3px solid #ff9e7d;outline-offset:4px}