/* Homepage only. Layout with ka.css tokens; no new colors. */

/* hero: headline and lede on the left, Ways to start on the right */
.home .hero .sub{max-width:56ch}
.hero-ways .kicker{margin-bottom:12px}
.hero-ways a.more{margin-top:10px}
@media (max-width:960px){.hero-ways{max-width:560px}}
/* the quiz, under the Ways card: a quieter row in the same frame (the /services/ AI tools group has its twin) */
.ways-quiz{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:52px;margin-top:10px;padding:10px 16px;border:1px dashed var(--line-2);border-radius:var(--r-sm);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-hover) var(--ease-ui),border-color var(--dur-hover) var(--ease-ui)}
.wq-q{font:600 var(--fs-ui)/1.3 var(--disp);color:var(--ink)}
.wq-a{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font:600 var(--fs-sm)/1.3 var(--sans);color:var(--blue)}
.wq-a::after{content:"\2192";content:"\2192" / "";transition:translate var(--dur-hover) var(--ease-ui)}
.ways-quiz:hover{color:inherit;border-color:var(--tint-line);background:color-mix(in srgb,var(--tint) 70%,transparent)}
@media (hover:hover) and (pointer:fine){.ways-quiz:hover .wq-a::after{translate:3px 0}}
.ways-quiz:active{background:var(--tint-2)}
/* who runs it: a byline under the buttons */
.hero-by{display:flex;align-items:center;gap:14px;max-width:54ch;margin-top:30px;font-size:var(--fs-sm);line-height:1.55;color:var(--mut)}
.hero-by img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--tint);box-shadow:0 0 0 3px var(--surface),0 6px 16px color-mix(in srgb,var(--ink) 14%,transparent)}
.hero-by a{color:var(--ink);font-weight:600;text-decoration:none}
.hero-by a:hover{color:var(--blue);text-decoration:underline}
@media (max-width:640px){.hero-by{align-items:flex-start;margin-top:24px;font-size:13.5px}.hero-by img{width:40px;height:40px;margin-top:2px}}
/* the free library, said once on the first screen, under the byline */
.hero-lib{max-width:54ch;margin-top:14px;font-size:var(--fs-sm);line-height:1.55;color:var(--mut)}
.hero-lib a.more{white-space:nowrap}
@media (max-width:640px){.hero-lib{font-size:13.5px}}

/* who does the work */
.home .principal .lead-mark{background:var(--tint)}

/* services: the group overview is generated (services.css) */

/* Portfolio: the section head beside the /work/ system map (work.css), the four cards below (a deck on phones) */
.work-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:28px 56px;align-items:center}
.work-head .sysmap{width:100%}
.home #work-preview .workgrid{margin-top:36px}
@media (max-width:960px){.work-head{grid-template-columns:1fr}.work-head .sysmap{max-width:30rem}}

/* how we work: the heading holds while the four terms pass on wide screens */
.home #method .h2{max-width:16ch}
@media (min-width:861px){.home #method .split>div:first-child{position:sticky;top:132px}}

/* Insights: the hub's contents card beside the heading (its hero layout), then one real item of each kind,
   each under a numbered sub-head in the hub's format with its "All N" link. The cards are the hub's own
   (insights.css) and the library's (charts.css); ops/build_insights.py fills them (home_insights_html) */
.hi-head{display:grid;gap:28px 64px;align-items:center}
.hi-head .lede{margin-bottom:0}
@media (min-width:961px){.hi-head{grid-template-columns:minmax(0,1fr) minmax(0,23rem)}}
@media (max-width:960px){.hi-head .ii{max-width:32rem}}
/* here the rows open each section's page, so the chevron points ahead, and on phones the row keeps its name
   and count (the lede above says what each kind is) */
.hi-head .ii-row::after{rotate:none}
@media (hover:hover) and (pointer:fine){.hi-head .ii-row:hover::after{translate:3px 0}}
@media (max-width:600px){.hi-head .ii-row{min-height:54px;padding-block:8px}.hi-head .ii-t span{display:none}.hi-head .ii-c b{display:inline;margin-right:4px;font-size:var(--fs-lg)}}
.hi-part{margin-top:clamp(44px,5vw,64px)}
.hi-sub{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;margin-bottom:16px}
.hi-sub .kicker{margin:0}
.hi-sub>a.more{flex:none}
/* the article and the news wire side by side from 1000px */
.hi-pair{display:grid;gap:0 24px}
@media (min-width:1000px){.hi-pair{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.ib-one{grid-template-columns:minmax(0,1fr)}
.hi-pair .ib-lead .ib-h{font-size:var(--fs-xl)}
.hi-all{display:flex;justify-content:center;max-width:none;margin-top:clamp(32px,4vw,44px)}
@media (max-width:600px){.hi-all .btn{width:100%}}

/* Portfolio: "Built to work together", the card under the four systems (eco.js plays it in once). Each tool
   joins every tool before it; the bars count the connections as tools are added (0, 1, 3, 6, then a dashed 10
   if a fifth joins). Static and complete without JS. */
.eco{margin-top:clamp(28px,4vw,40px);padding:clamp(22px,4vw,40px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "m" "r";gap:20px clamp(28px,4vw,56px);box-shadow:inset 4px 0 0 var(--blue2),var(--sh)}
@media (min-width:861px){.eco{grid-template-columns:minmax(0,1fr) minmax(0,30rem);grid-template-areas:"t m" "r m";align-items:center}}
.eco-text{grid-area:t}
.eco-text h3{font-size:var(--fs-2xl);max-width:24ch;margin-bottom:10px}
.eco-text p{font-size:var(--fs-ui);max-width:58ch}
.eco-map{grid-area:m;margin:0}
.eco-map svg{display:block;width:100%;max-width:460px;height:auto;margin-inline:auto;overflow:visible}
.eco-s1{stop-color:var(--blue)}
.eco-s2{stop-color:var(--blue2)}
.eco-sky circle{fill:var(--sky);opacity:.45}
.eco-sky .b{opacity:.8}
.eco-edges path{fill:none;stroke:var(--blue2);stroke-width:2;stroke-linecap:round;opacity:.65}
.eco-ghost path{fill:none;stroke:var(--line-2);stroke-width:1.6;stroke-dasharray:5 6}
.eco-tile{fill:url(#eco-gr);stroke:var(--surface);stroke-width:8;paint-order:stroke}
.eco-opus .eco-tile{fill:var(--ink)}
.eco-next .eco-tile{fill:var(--surface);stroke:var(--blue2);stroke-width:1.6;stroke-dasharray:4 4}
.eco-ico{fill:none;stroke:var(--surface);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eco-plus{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round}
.eco-l{font:600 19px var(--disp);fill:var(--ink);text-anchor:middle}
.eco-next .eco-l{font-weight:500;fill:var(--mut)}
.eco-spark{fill:var(--sky)}
.eco-meter{grid-area:r}
.eco-read{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 14px;font:500 var(--fs-sm)/1.2 var(--sans);color:var(--mut)}
.eco-read b{margin-right:6px;font:700 30px/1 var(--disp);letter-spacing:-.02em;color:var(--blue)}
.eco-bars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;max-width:26rem}
.eco-bars li{display:flex;flex-direction:column;align-items:center}
.eco-bars b{margin-bottom:4px;font:700 var(--fs-sm)/1 var(--disp);color:var(--ink)}
.eco-bars i{display:block;width:62%;height:calc(var(--v) * 9px);min-height:2px;border-radius:6px 6px 0 0;background:var(--grad)}
.eco-bars li>span{align-self:stretch;padding-top:6px;border-top:1px solid var(--line-2);text-align:center;font-size:var(--fs-xs);color:var(--mut);white-space:nowrap}
.eco-if b{color:var(--mut)}
.eco-if i{background:var(--tint);border:1.6px dashed var(--blue2);border-bottom:0}
.eco-note{margin-top:12px;max-width:52ch;font-size:var(--fs-sm);color:var(--mut)}