/* Inside HumanAmp (hand-off v0.7, §14.9). The job-flow diagram reuses the homepage founders diagram's
   marks, the counter reuses its split-flap readout, and the net reuses the HumanAmp OS living net. */
.ha-inner .ip-sec#how, .ha-inner .ip-sec#better { --ih-teal: #34A8AA; } /* the approved HumanAmp OS teal, not yet a token */

/* Hero: the headline, then how a job moves */
.ih-hero .ip-in { padding-top: clamp(56px, 7vw, 104px); }
.ih-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
.ih-head h1 { font: 800 clamp(40px, 5vw, 76px)/.98 var(--ha-font-sans); letter-spacing: -.048em; color: var(--ha-white); }
.ih-head h1 .lead { color: var(--ha-vapour); }
.ih-head .ip-lede { font: 500 clamp(18px, 1.55vw, 22px)/1.45 var(--ha-font-sans); color: var(--ha-vapour); max-width: 40ch; }
@media (max-width: 900px) { .ih-head { grid-template-columns: minmax(0, 1fr); } }

.ih-flow-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 1000px) { .ih-flow-row { grid-template-columns: minmax(0, 1fr); } }
.ih-flow-wrap { position: relative; }
.ih-flow { position: relative; min-height: 560px; }
.ih-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* The five steps: the one the drawing is showing is lit */
.ih-steps { counter-reset: ih; display: grid; gap: 4px; }
.ih-steps li { counter-increment: ih; position: relative; padding: 14px 0 14px 46px; font: 500 16.5px/1.45 var(--ha-font-sans); color: var(--ha-vapour); transition: color .4s; }
.ih-steps li::before { content: counter(ih); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 700 14px/1 var(--ha-font-sans); color: var(--ha-vapour); background: var(--ha-ink-raised); box-shadow: inset 0 0 0 1px rgba(199, 199, 204, .16); transition: background .4s, color .4s; }
.ih-steps li b { display: block; font: 800 19px/1.25 var(--ha-font-sans); letter-spacing: -.01em; color: var(--ha-white); }
.ih-steps.playing li { color: rgba(199, 199, 204, .62); }
.ih-steps.playing li b { color: var(--ha-vapour); transition: color .4s; }
.ih-steps.playing li.now, .ih-steps.playing li.now b { color: var(--ha-white); }
.ih-steps.playing li.now::before { background: var(--ha-bloom); color: var(--ha-ink); box-shadow: none; }
@media (max-width: 1000px) { .ih-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 28px; } }

/* Pause: automatic motion can always be stopped */
.ih-pause { position: absolute; right: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--ha-ink); color: var(--ha-vapour); font: 700 14px/1 var(--ha-font-sans); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(199, 199, 204, .22); }
.ih-pause[hidden] { display: none !important; }
.ih-pause:hover { color: var(--ha-white); box-shadow: inset 0 0 0 1px rgba(199, 199, 204, .5); }
.ih-pause:focus-visible { outline: 2px solid var(--ha-bloom); outline-offset: 3px; }
@media (max-width: 640px) { .ih-pause { position: relative; right: auto; top: auto; margin: 12px 0 0 auto; display: flex; } }
.ih-pause-i { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.ih-pause[aria-pressed="true"] .ih-pause-i { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* The drawing: the founders diagram's marks */
.ih-flow .card { fill: var(--ha-ink-raised); stroke: rgba(199, 199, 204, .16); stroke-width: 1; }
.ih-flow .sys-card { fill: none; stroke: rgba(52, 168, 170, .5); stroke-width: 1.2; }
.ih-flow .t1 { font: 800 17px var(--ha-font-sans); fill: var(--ha-white); letter-spacing: -.01em; }
.ih-flow .t3 { font: 600 12.5px var(--ha-font-sans); fill: var(--ha-vapour); }
.ih-flow.narrow .t1 { font-size: 15px; }
.ih-flow.narrow .t3 { font-size: 11px; }
.ih-flow .halo { fill: none; stroke: rgba(247, 241, 238, .9); stroke-width: 2.5; }
.ih-flow .assoc { fill: var(--ha-support-on-paper); stroke: rgba(247, 241, 238, .85); stroke-width: 1.6; }
.ih-flow .mesh { stroke: rgba(199, 199, 204, .1); stroke-width: 1; }
.ih-flow .ag { opacity: .75; transition: opacity .3s; }
.ih-flow .ag.lead, .ih-flow .ag.busy { opacity: 1; }
.ih-flow .talk { fill: none; stroke: rgba(199, 199, 204, .45); stroke-width: 1.2; stroke-linecap: round; }
.ih-flow .talk.hot { stroke: rgba(245, 137, 124, .9); stroke-width: 1.4; }
.ih-flow .talk.os { stroke: rgba(52, 168, 170, .8); }
.ih-flow .job { fill: none; stroke: rgba(245, 137, 124, .75); stroke-width: 1.4; stroke-linecap: round; }
.ih-flow .ask { fill: none; stroke: rgba(247, 241, 238, .4); stroke-width: 1.4; stroke-linecap: round; }
.ih-flow .net { fill: none; stroke: rgba(52, 168, 170, .42); stroke-width: 1.1; stroke-linecap: round; }
.ih-flow .feed { fill: none; stroke: rgba(245, 137, 124, .5); stroke-width: 1.3; stroke-linecap: round; }
.ih-flow .loop { fill: none; stroke: rgba(199, 199, 204, .45); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ih-flow .loop-head { fill: none; stroke: rgba(199, 199, 204, .6); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ih-flow .sys { fill: var(--ha-ink); stroke: var(--ih-teal); stroke-width: 1.3; transition: fill .3s; }
.ih-flow .sys.lit { fill: rgba(52, 168, 170, .55); }
.ih-flow .ring { fill: none; stroke: rgba(52, 168, 170, .25); stroke-width: 1.4; }
.ih-flow .dot { fill: var(--ih-teal); }
.ih-flow .dot.new { fill: var(--ha-bloom); }
.ih-flow .sig { fill: var(--ha-bloom); }
.ih-flow .sig.os { fill: var(--ih-teal); }
.ih-flow .sig.faint { fill: rgba(247, 241, 238, .85); }
.ih-flow .sig.boost { fill: var(--ha-bloom); r: 3.6px; }
.ih-flow .judge { fill: none; stroke: var(--ha-white); stroke-width: 1.5; }
.ih-flow .ripple { fill: none; stroke: var(--ih-teal); stroke-width: 1.4; }

/* Real jobs: the split-flap counter beside the heading, on paper */
.ih-jobs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; margin-bottom: clamp(28px, 3vw, 40px); }
#jobs .fd-count { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#jobs .fd-flaps { display: inline-flex; gap: 6px; }
#jobs .flap { position: relative; display: inline-block; width: .72em; height: 1.14em; line-height: 1.14em; text-align: center; overflow: hidden; border-radius: 8px; font: 600 clamp(44px, 4vw, 60px)/1.14 var(--ha-font-mono); color: var(--ha-white); background: var(--ha-ink-raised); box-shadow: inset 0 0 0 1px rgba(199, 199, 204, .16); }
#jobs .flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--ha-ink); box-shadow: 0 1px 0 rgba(199, 199, 204, .08); }
#jobs .flap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; z-index: 1; transform-origin: bottom; }
#jobs .flap.flick::before { animation: ihFlick .16s ease-in; }
@keyframes ihFlick { 0% { transform: scaleY(1); background: rgba(247, 241, 238, .14); } 100% { transform: scaleY(.05); background: rgba(41, 43, 47, .5); } }
@media (prefers-reduced-motion: reduce) { #jobs .flap::before { animation: none !important; } }
#jobs .fd-count-l { font: 600 15px/1.3 var(--ha-font-sans); color: var(--ha-support-on-paper); }

/* Each job as a short run from start to result, on one thread */
.ih-job dl { position: relative; display: grid; gap: 16px; margin: 20px 0 0; }
.ih-job dl::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: var(--ha-hairline); }
.ih-job dl > div { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 2px 8px; padding-left: 34px; }
.ih-job dl > div::before { content: ""; position: absolute; left: 3px; top: 2px; width: 16px; height: 16px; border-radius: 5px; background: var(--ha-card); box-shadow: inset 0 0 0 2px var(--ha-support-on-paper); }
.ih-job .ag::before { background: url(/design/founders-tile-mono.svg) center/16px no-repeat; box-shadow: none; }
.ih-job .pe::before { background: var(--ha-bloom); box-shadow: none; }
.ih-job .re::before { border-radius: 50%; background: var(--ha-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.6 3.6L18 8' fill='none' stroke='%23F7F1EE' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; box-shadow: none; }
.ih-job dt { font: 700 14px/1.4 var(--ha-font-sans); color: var(--ha-ink-soft); }
.ih-job dd { margin: 0; font: 500 15.5px/1.4 var(--ha-font-sans); color: var(--ha-support-on-paper); }
.ih-job .re dd { color: var(--ha-ink); font-weight: 700; }
@media (max-width: 420px) { .ih-job dl > div { grid-template-columns: minmax(0, 1fr); } }

/* It gets better: the living net beside the rules we work by */
.ih-better { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 88px); align-items: center; }
.ih-better .ip-p { margin-top: 14px; }
.ih-net-wrap { position: relative; width: 100%; max-width: 560px; justify-self: center; }
.ih-net { position: relative; aspect-ratio: 1; width: 100%; }
.ih-net canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ih-rules { display: grid; gap: 18px; margin-top: 28px; }
.ih-rules li { padding-left: 20px; border-left: 2px solid rgba(199, 199, 204, .2); font: 500 16.5px/1.45 var(--ha-font-sans); color: var(--ha-vapour); }
.ih-rules li b { display: block; font: 800 18px/1.3 var(--ha-font-sans); color: var(--ha-white); }
@media (max-width: 900px) { .ih-better { grid-template-columns: minmax(0, 1fr); } .ih-net-wrap { max-width: 420px; } }

.ih-call { margin-top: 28px; }