/* Layout: a story from one north star. Light sections alternate with deep bands (as on hugomgomes.com).
   Colour carries meaning everywhere: amber = the human, blue = the network. */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef2f7; --line:#d9e0ea; --ink:#0b1220; --ink-2:#47546a; --ink-3:#5f6b80;
  --net:#1f5fd1; --net-soft:#d8e5fb; --hum:#b45f00; --hum-soft:#fbe6c8; --on-net:#ffffff;
  --band:#0b1526; --on-band:#eef3fa; --on-band-2:#a9b8cc; --band-line:#22314a; --net-b:#7cb0ff; --hum-b:#ffb547;
  --f-sans:"Geist", "Segoe UI", system-ui, sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px));
  --r:18px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#080c12; --surface:#101824; --surface-2:#142032; --line:#1f2b3c; --ink:#e9eef5; --ink-2:#9aa8bb; --ink-3:#8593a8;
  --net:#7cb0ff; --net-soft:#1b3150; --hum:#ffb547; --hum-soft:#3b2a12; --on-net:#06121f;
  --band:#0d1626; --on-band:#eef3fa; --on-band-2:#a9b8cc; --band-line:#22314a; --net-b:#7cb0ff; --hum-b:#ffb547; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#080c12; --surface:#101824; --surface-2:#142032; --line:#1f2b3c; --ink:#e9eef5; --ink-2:#9aa8bb; --ink-3:#8593a8;
  --net:#7cb0ff; --net-soft:#1b3150; --hum:#ffb547; --hum-soft:#3b2a12; --on-net:#06121f;
  --band:#0d1626; --on-band:#eef3fa; --on-band-2:#a9b8cc; --band-line:#22314a; --net-b:#7cb0ff; --hum-b:#ffb547; color-scheme:dark;
}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--net);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.tag{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.lede{font-size:1.1875rem;color:var(--ink-2);max-width:62ch;line-height:1.55}
.src{font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3);white-space:nowrap}
.hum{color:var(--hum)} .net{color:var(--net)}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);text-decoration:none;font-weight:600;cursor:pointer}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn:hover{opacity:.9}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mk{display:block;font-weight:700;font-size:1.25rem;letter-spacing:-.03em}
.brand .mk s{text-decoration-color:var(--hum);text-decoration-thickness:2px;color:var(--ink-2)}
.brand .by{font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3);border-left:1px solid var(--line);padding-left:12px;letter-spacing:.06em;text-transform:uppercase}
nav.links{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:.875rem}
nav.links a{text-decoration:none;color:var(--ink-2);padding-block:10px}
nav.links a:hover{color:var(--ink)}
nav.links a[aria-current]{color:var(--ink);font-weight:600}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;padding-block:72px 64px;align-items:center}
@media (max-width:960px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
.hero .copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.6rem);letter-spacing:-.045em}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.art{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px;min-width:0}
.art figcaption{font-size:.8125rem;color:var(--ink-3);padding:10px 6px 2px;font-family:var(--f-mono)}
@media (prefers-reduced-motion: no-preference){
  .pod{animation:glide 6s linear infinite}
  .pod.b{animation-delay:-1.5s}.pod.c{animation-delay:-3s}.pod.d{animation-delay:-4.5s}
  @keyframes glide{from{transform:translateX(-160px)}to{transform:translateX(0)}}
}

.manifesto{font-family:var(--f-mono);font-size:.875rem;line-height:1.5;color:var(--ink-2);border-left:3px solid var(--hum);padding:2px 0 2px 14px;max-width:52ch}
/* north star band */
.band{background:var(--band);color:var(--on-band)}
.band .wrap{padding-block:72px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}
@media (max-width:860px){.band .wrap{grid-template-columns:minmax(0,1fr)}}
.band .tag{color:var(--on-band-2)}
.band blockquote{margin:0;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.2;letter-spacing:-.025em;font-weight:500}
.band blockquote .h{color:var(--hum-b)} .band blockquote .m{color:var(--net-b)}
.band p{color:var(--on-band-2)}

/* sections */
section.s > .wrap{padding-block:96px;display:flex;flex-direction:column;gap:36px}
section.alt{background:var(--surface);border-block:1px solid var(--line)}
.sh{display:flex;flex-direction:column;gap:14px;max-width:820px}
.sh h2{font-size:clamp(2rem,4.2vw,3.2rem)}
.next{font-family:var(--f-mono);font-size:.8125rem;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:18px}
.next a{color:var(--net);text-decoration:none}

/* provocations */
.provs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.prov{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
section.alt .prov{background:var(--bg)}
.prov .pic{background:var(--surface-2);padding:18px;display:grid;place-items:center;height:170px}
.prov .pic svg{height:130px;width:auto}
.prov .body{padding:20px;display:flex;flex-direction:column;gap:10px}
.prov h3{font-size:1.25rem;line-height:1.2}
.prov p{color:var(--ink-2);font-size:.9375rem}
.prov .why{font-size:.875rem;color:var(--ink);border-top:1px solid var(--line);padding-top:10px}

/* weak link */
.chain{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.traits{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
.trait{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);align-items:start}
.trait .ic{width:40px;height:40px;border-radius:10px;background:var(--hum-soft);color:var(--hum);display:grid;place-items:center}
.trait h3{font-size:1.0625rem;letter-spacing:-.01em}
.trait p{color:var(--ink-2);font-size:.9375rem;margin-top:4px}
.trait .imp{display:block;margin-top:8px;font-size:.875rem;color:var(--ink)}
.trait .imp b{color:var(--hum);font-weight:600}



/* trust network walkthrough: one delivery as a journey of five steps, each "today -> tomorrow" */
.jr-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.875rem;color:var(--ink-2)}
.jr-key span{display:inline-flex;align-items:center;gap:8px}
.jr-key i{width:12px;height:12px;border-radius:4px;display:inline-block}
.jr-key .k1{background:var(--hum)} .jr-key .k2{background:var(--net)}
.jr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.jr::before{content:"";position:absolute;left:10%;right:10%;top:15px;border-top:2px dashed var(--line)}
.st{display:flex;flex-direction:column;gap:12px;min-width:0;position:relative}
.st .dot{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--f-mono);font-size:.8125rem;margin:0 auto;position:relative}
.st.gap .dot{background:var(--hum);color:var(--bg)}
.st .card{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.st.gap .card{border:1.5px dashed var(--hum)}
.st .stage{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.st .row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:start}
.st .row svg{width:52px;height:auto;display:block}
.st .pn{display:flex;gap:10px;align-items:flex-start}
.st .pn .pi{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--net-soft);color:var(--net);font-family:var(--f-mono);font-style:normal;font-size:.8125rem}
.st .pn b{display:block;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.2}
.st .pn span{display:block;font-size:.8125rem;color:var(--ink-2);line-height:1.3}
.st .tt{font-size:.875rem;line-height:1.45;padding-left:10px;border-left:3px solid}
.st .tt em{display:block;font-style:normal;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.st .t1{border-color:var(--hum);color:var(--ink-2)} .st .t1 em{color:var(--hum)}
.st .t2{border-color:var(--net);color:var(--ink);font-weight:500} .st .t2 em{color:var(--net);font-weight:400}
.st .now{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;font-size:.8125rem;color:var(--ink-2);line-height:1.4}
.st .now > span{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.st.gap .now,.st.gap .now > span{color:var(--hum)}
@media (max-width:1040px){
  .jr{grid-template-columns:minmax(0,1fr);gap:18px}
  .jr::before{left:15px;right:auto;top:16px;bottom:16px;border-top:0;border-left:2px dashed var(--line)}
  .st{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;row-gap:6px}
  .st .dot{margin:0;grid-row:1/3}
  .st .stage{text-align:left;align-self:center}
  .st .card{grid-column:2}
  .st .pic{max-width:300px}
}
/* pickers: a grid of summary tiles; clicking one opens its panel under that row */
.picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;align-items:stretch}
.picker.jobs{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,box-shadow .2s,transform .2s}
section.alt .tile{background:var(--bg)}
.tile:hover{border-color:var(--ink-3)}
.tile.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.tile:has(button:focus-visible){outline:2px solid var(--net);outline-offset:3px}
.tile h3{font-size:1.375rem;letter-spacing:-.02em;line-height:1.15}
.tile h3 button{background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;text-align:left;cursor:pointer}
.tile h3 button:focus-visible{outline:none}
.tile h3 button::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tile h3 button::before{content:"+";float:right;margin-left:12px;font-family:var(--f-mono);font-weight:400;color:var(--net)}
.tile.on h3 button::before{content:"−"}
.tile > p{color:var(--ink-2);font-size:.9375rem}
.tile .ic{width:40px;height:40px;border-radius:10px;background:var(--hum-soft);color:var(--hum);display:grid;place-items:center}
.tile .n{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tile .stat{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px;margin-top:auto}
.tile .stat b{font-family:var(--f-mono);font-size:1.5rem;font-weight:500;color:var(--hum);letter-spacing:-.02em}
.tile .stat span{font-size:.8125rem;color:var(--ink-2);line-height:1.4}
.tile .more{font-size:.8125rem;color:var(--ink-3)}
.tile .shift{font-size:1.0625rem;color:var(--ink);font-weight:500;line-height:1.35;margin-top:auto}
.tile .shift i{font-style:normal;color:var(--net)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:.75rem;padding:4px 10px;border-radius:999px;background:var(--hum-soft);color:var(--ink)}
.chips span.up{background:var(--net-soft)}
.panel{grid-column:1/-1;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:24px;min-width:0}
section.alt .panel{background:var(--bg)}
@media (prefers-reduced-motion: no-preference){.panel.show{animation:rise .25s ease-out}@keyframes rise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}}
.panel-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:860px){.panel-top{grid-template-columns:minmax(0,1fr)}.panel{padding:20px}}
.pt-copy{display:flex;flex-direction:column;gap:12px}
.pt-copy h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.pt-copy p{color:var(--ink-2);font-size:1.0625rem}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.case{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
@media (max-width:860px){.feature{grid-template-columns:minmax(0,1fr);gap:16px}}
.feature .pic{border-radius:12px;overflow:hidden;min-width:0}
.feature .pic svg{width:100%;height:auto}
.feature .ft{display:flex;flex-direction:column;gap:10px;padding:4px 12px 4px 0;min-width:0}
@media (max-width:860px){.feature .ft{padding:0 4px 4px}}
.feature .ct{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.feature h4{margin:0;font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.feature p{font-size:1rem;color:var(--ink-2)}
.feature .lb{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.feature .weak{font-size:.9375rem;color:var(--ink);border-top:1px solid var(--line);padding-top:10px}
.feature .weak b{color:var(--hum)}
.case .ct{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.case h4{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.case p{font-size:.9375rem;color:var(--ink-2)}
.case .lb{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.case .weak{font-size:.875rem;color:var(--ink);border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
.case .weak b{color:var(--hum)}
.badge{display:inline-block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--net-soft);color:var(--ink)}
.when{border-radius:14px;padding:16px;background:var(--surface-2)}
.when .tag{display:block;margin-bottom:6px}
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative}
@media (max-width:760px){.flow{grid-template-columns:minmax(0,1fr)}}
.flow > div{border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.flow p{font-size:1rem}
.f-now{background:var(--hum-soft)} .f-now .tag{color:var(--hum)}
.f-net{background:var(--net-soft)} .f-net .tag{color:var(--net)}
.f-job{background:var(--surface-2);border:2px solid var(--hum)} .f-job .tag{color:var(--hum)}
.f-job a{color:var(--net);font-weight:600}
.newjobs{display:flex;flex-direction:column;gap:14px}
.newjobs h3{font-size:1.5rem}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.roles div{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--net);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.roles b{font-weight:600}
.roles span{font-size:.875rem;color:var(--ink-2)}

/* trust network centrepiece */
.tn{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px;display:flex;flex-direction:column}
.tn-head,.tn-row{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center}
.tn-head{padding-bottom:12px;border-bottom:1px solid var(--line);font-size:.8125rem;color:var(--ink-2)}
.tn-head .scale{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3)}
.tn-key{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tn-key .k{position:static;transform:none}
.tn-row{padding:18px 0;border-bottom:1px solid var(--line)}
.tn-row.strong{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--net) 6%,transparent))}
.tn-name b{display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.tn-name span{font-size:.875rem;color:var(--ink-2)}
.track{position:relative;height:36px;border-radius:999px;background:linear-gradient(90deg,var(--hum-soft),var(--net-soft))}
.k{position:absolute;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-family:var(--f-mono);font-size:.75rem;font-style:normal;font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.k.h{background:var(--hum);color:#fff} .k.n{background:var(--net);color:var(--on-net)}
.tn-why{font-size:.9375rem;color:var(--ink-2)}
.tn-why b{font-weight:600}
.tn-note{font-size:.8125rem;color:var(--ink-3);padding-top:14px}
.tn-note a{color:var(--net)}
.insight{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.4;letter-spacing:-.015em;max-width:900px;border-left:4px solid var(--hum);padding-left:20px}
.insight b{color:var(--hum)}
@media (max-width:820px){.tn-head,.tn-row{grid-template-columns:minmax(0,1fr);gap:12px}.tn-head .scale{display:none}}

/* multiply */
.mult{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:start}
@media (max-width:900px){.mult{grid-template-columns:minmax(0,1fr)}}
.strengths{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.strengths div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.strengths b{font-weight:600;font-size:1.0625rem}
.strengths span{color:var(--ink-2);font-size:.875rem;text-align:right}
.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.sector{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px}
section.alt .sector{background:var(--bg)}
.sector .x{font-family:var(--f-mono);font-size:.75rem;color:var(--net)}
.sector h3{font-size:1.125rem;letter-spacing:-.01em}
.sector p{color:var(--ink-2);font-size:.9rem}

/* markets */
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.model{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.model .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.model h3{font-size:1.25rem;line-height:1.2}
.model .yr{font-family:var(--f-mono);font-size:1rem;color:var(--net);white-space:nowrap}
.model p{color:var(--ink-2);font-size:.9375rem}
.model details{border-top:1px solid var(--line);padding-top:8px}
.model summary{cursor:pointer;font-size:.875rem;font-weight:600;padding:8px 0;list-style:none}
.model summary::-webkit-details-marker{display:none}
.model summary::after{content:" +";color:var(--net)}
.model details[open] summary::after{content:" −"}
.model .road{background:var(--surface-2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.model .rt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--net)}
.model .road ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.model .road li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;font-size:.875rem;color:var(--ink-2)}
.model .road li>span{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3);padding-top:2px}
.model dl{margin:4px 0 0;display:grid;gap:10px}
.model dt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.model dd{margin:2px 0 0;font-size:.9375rem}

/* journey */
.journey{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:26px}
.stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.stops::before{content:"";position:absolute;left:10%;right:10%;top:23px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--hum),var(--net))}
.stops li{display:flex}
.stop{width:100%;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 6px 6px;text-align:center}
.stop .dot{width:48px;height:48px;border-radius:50%;background:var(--surface);border:3px solid var(--line);display:grid;place-items:center;font-family:var(--f-mono);font-size:.75rem;position:relative;z-index:1;transition:border-color .2s,background-color .2s}
.stop .y{font-family:var(--f-mono);font-size:1.125rem;font-weight:500}
.stop .t{font-size:.875rem;color:var(--ink-2);line-height:1.3;max-width:18ch}
.stop[aria-pressed="true"] .dot{border-color:var(--net);background:var(--net);color:var(--on-net)}
.stop[aria-pressed="true"] .t{color:var(--ink);font-weight:600}
@media (max-width:720px){
  .stops{grid-template-columns:minmax(0,1fr);gap:4px}
  .stops::before{left:23px;right:auto;top:24px;bottom:24px;width:3px;height:auto;background:linear-gradient(var(--hum),var(--net))}
  .stop{flex-direction:row;text-align:left;gap:14px;padding:4px 0}
  .stop .t{max-width:none}
}
.detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;border-top:1px solid var(--line);padding-top:24px}
@media (max-width:860px){.detail{grid-template-columns:minmax(0,1fr)}}
.detail h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.detail .ex{font-size:1.0625rem;color:var(--ink-2);margin-top:12px}
.detail ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.detail li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;font-size:.9375rem}
.detail li b{font-family:var(--f-mono);font-size:.75rem;font-weight:500;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;padding-top:3px}
.side{display:flex;flex-direction:column;gap:14px}
.box{border-radius:14px;padding:16px;background:var(--surface-2)}
.box .tag{margin-bottom:6px}
.box.human{background:var(--hum-soft)}
.box.human .tag{color:var(--hum)}
.mk{display:flex;flex-wrap:wrap;gap:6px}
.mk span{font-size:.8125rem;padding:5px 10px;border-radius:999px;background:var(--net-soft);color:var(--ink)}
.threads{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.thread{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px}
.thread h3{font-size:1.25rem}
.thread ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.thread li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;font-size:.9375rem}
.thread li > span{font-family:var(--f-mono);font-size:.8125rem;color:var(--ink-3);padding-top:2px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:900px){.pillars{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px}
section.alt .pillar{background:var(--bg)}
.pillar .n{font-family:var(--f-mono);font-size:.75rem;color:var(--net)}
.pillar h3{font-size:1.125rem;letter-spacing:-.01em}
.pillar p{color:var(--ink-2);font-size:.9rem}

/* credits, authors */
.credits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.credits li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.credits .who{font-size:1.125rem;font-weight:600;line-height:1.25}
.credits .work{font-family:var(--f-mono);font-size:.75rem;color:var(--net)}
.credits p{color:var(--ink-2);font-size:.9375rem}
.credits a{font-size:.875rem;font-weight:600;align-self:flex-start;padding-block:6px}
.authors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.author{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:start}
.author img,.author .ph{width:110px;height:122px;border-radius:14px;object-fit:cover}
.author .ph{border:2px dashed var(--line);display:grid;place-items:center;text-align:center;font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3);padding:8px}
.author h3{font-size:1.3rem}
.author .rl{font-family:var(--f-mono);font-size:.75rem;color:var(--net)}
.author p{color:var(--ink-2);font-size:.9375rem;margin-top:6px}
.author .todo{color:var(--hum)}
.reach{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.email{font-family:var(--f-mono);font-size:.875rem;user-select:all;padding:12px 16px;border:1px solid var(--line);border-radius:999px}
.copied{font-size:.8125rem;color:var(--ink-2)}
.author .reach{margin-top:14px;gap:8px}
.author .reach .btn{min-height:40px;padding:0 16px;font-size:.875rem}
.author .email{padding:9px 14px;font-size:.8125rem;overflow-wrap:anywhere}
@media (max-width:480px){.author{grid-template-columns:1fr}.author img{width:96px;height:106px}}
footer .wrap{padding-block:28px 44px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:.8125rem;color:var(--ink-3)}
/* cards in a row share rows, so matching parts (Today, Tomorrow, footers...) line up across the row */
.tile,.case,.sector,.model,.credits li,.pillar,.roles div{display:grid;grid-template-rows:subgrid;align-content:start}
.picker.reasons .tile{grid-row:span 6}
.picker.jobs .tile{grid-row:span 5}
.case{grid-row:span 5}
.sector,.pillar{grid-row:span 3}
.model,.credits li{grid-row:span 4}
.roles div{grid-row:span 2}
.tile .stat,.tile .shift,.case .weak,.st .now{margin-top:0}
@media (min-width:1041px){
  .st{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:12px}
  .st .card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px}
}

/* ---- multi-page site: page heads, explore grid, next card, footer map ---- */
.phead .wrap{padding-block:64px 8px;display:flex;flex-direction:column;gap:20px}
.crumb{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--ink-2);text-decoration:none}
.phead h1{font-size:clamp(2.4rem,5.2vw,4.2rem);letter-spacing:-.045em;max-width:18ch}
.phead h1 .net{color:var(--net)} .phead h1 .hum{color:var(--hum)}
.onpage{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.onpage a{font-size:.875rem;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:var(--surface)}
.onpage a:hover{border-color:var(--ink-3)}
.phead + section.s > .wrap{padding-top:56px}

.xgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.xcard{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.xcard:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.xcard .n{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3)}
.xcard h3{font-size:1.5rem;letter-spacing:-.02em}
.xcard .q{font-size:1.0625rem;font-weight:500;line-height:1.35}
.xcard p{color:var(--ink-2);font-size:.9375rem}
.xcard .go{margin-top:auto;padding-top:8px;font-size:.875rem;font-weight:600;color:var(--net)}
.xfeat{text-decoration:none;color:inherit;border-color:var(--net);box-shadow:0 0 0 1px var(--net) inset}
.xfeat:hover{opacity:.96}
.xfeat .badge{align-self:flex-start}
.xfeat .go{font-size:.9375rem;font-weight:600;color:var(--net)}
section.s.byline > .wrap{padding-block:48px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px 28px}
.byline .ph2{display:flex}
.byline .ph2 img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--surface)}
.byline .ph2 img + img{margin-left:-14px}
.byline p{flex:1;min-width:240px;font-size:1.0625rem;color:var(--ink-2)}
.byline p b{color:var(--ink)}

section.nextpage > .wrap{padding-block:0 96px}
.nextcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;text-decoration:none;color:var(--ink);background:var(--band);color:var(--on-band);border-radius:24px;padding:28px 32px}
.nextcard .tag{color:var(--on-band-2);grid-column:1}
.nextcard b{grid-column:1;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.nextcard span:not(.tag){grid-column:1;color:var(--on-band-2)}
.nextcard i{grid-column:2;grid-row:1 / span 3;font-style:normal;font-size:2rem;color:var(--net-b)}
.nextcard:hover i{transform:translateX(4px)}

footer .wrap{flex-direction:column;align-items:flex-start}
.fmap{display:flex;flex-wrap:wrap;gap:4px 20px}
.fmap a{color:var(--ink-2);text-decoration:none;padding-block:8px}
.fmap a:hover{color:var(--ink)}

/* ---- delegated B2C ---- */
.wide-art svg{width:100%;height:auto;display:block}
.roles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.roles3{grid-template-columns:minmax(0,1fr)}}
.r3{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px}
.r3 h3{font-size:1.375rem}
.r3 p{font-size:.9375rem;color:var(--ink-2)}
.r3.hum{background:var(--hum-soft)} .r3.hum .tag{color:var(--hum)}
.r3.net{background:var(--net-soft)} .r3.net .tag{color:var(--net)}
.r3.open{background:var(--surface);border:1.5px dashed var(--hum)} .r3.open .tag{color:var(--hum)}
.dlevels{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:16px}
.dlevels h3{font-size:1.375rem}
.dlevels ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
@media (max-width:860px){.dlevels ol{grid-template-columns:minmax(0,1fr)}}
.dlevels li{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--surface-2)}
.dlevels li:nth-child(4){background:var(--net-soft)}
.dlevels li .n{font-family:var(--f-mono);font-size:.75rem;color:var(--net)}
.dlevels li b{font-size:1.0625rem;letter-spacing:-.01em}
.dlevels li span:last-child{font-size:.875rem;color:var(--ink-2)}
.dlevels > p{font-size:.9375rem;color:var(--ink-2)}

.pcards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1040px){.pcards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pc.gap{border:1.5px dashed var(--hum)}
.pc h3{font-size:1.125rem;display:flex;align-items:center;gap:10px}
.pc .pi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--net-soft);color:var(--net);font-family:var(--f-mono);font-size:.8125rem;font-weight:500}
.pc.gap .pi{background:var(--hum-soft);color:var(--hum)}
.pc .t1,.pc .t2{font-size:.875rem;line-height:1.45;padding-left:10px;border-left:3px solid}
.pc em{display:block;font-style:normal;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.pc .t1{border-color:var(--hum);color:var(--ink-2)} .pc .t1 em{color:var(--hum)}
.pc .t2{border-color:var(--net);color:var(--ink);font-weight:500} .pc .t2 em{color:var(--net);font-weight:400}
.pc .now{border-top:1px solid var(--line);padding-top:10px;font-size:.8125rem;color:var(--ink-2);line-height:1.4}
.pc .now > span{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--net);margin-bottom:2px}
.pc.gap .now > span{color:var(--hum)}

.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.sides{grid-template-columns:minmax(0,1fr)}}
.side-col{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px}
.side-col ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:.9375rem}
.side-col.closing{background:var(--hum-soft)} .side-col.closing .tag{color:var(--hum)}
.side-col.opening{background:var(--net-soft)} .side-col.opening .tag{color:var(--net)}
.impl{display:flex;flex-direction:column;gap:14px}
.impl h3{font-size:1.5rem}
.impl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.impl-grid{grid-template-columns:minmax(0,1fr)}}
.impl-grid div{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--net);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px}
.impl-grid span{font-size:.9rem;color:var(--ink-2)}

.stairs svg{width:100%;height:auto;display:block}
@media (max-width:1040px){.stairs{display:none}}
.levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1040px){.levels{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}
.lv{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.lv.l0{border-color:var(--hum)}
.lv.l3{border-color:var(--net)}
.lv.l4{border:1.5px dashed var(--net)}
.lv .lh{display:flex;align-items:center;gap:10px}
.lv .ln{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;background:var(--surface-2);color:var(--ink)}
.lv.l0 .ln{background:var(--hum-soft);color:var(--hum)}
.lv.l3 .ln,.lv.l4 .ln{background:var(--net-soft);color:var(--net)}
.lv h3{font-size:1.25rem}
.lv .q{font-weight:500;line-height:1.35}
.lv .need,.lv .pl,.lv .test{font-size:.875rem;color:var(--ink-2);line-height:1.45}
.lv em{display:block;font-style:normal;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.lv .test{border-top:1px solid var(--line);padding-top:10px}

.mlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.ml{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.ml:hover{border-color:var(--net)}
.ml .yr{font-family:var(--f-mono);color:var(--net)}
.ml h3{font-size:1.1875rem;line-height:1.2}
.ml p{font-size:.9rem;color:var(--ink-2)}

/* cards side by side keep their inner parts aligned (site rule) */
@media (min-width:1041px){
  .pcards .pc{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px}
  .levels .lv{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:10px}
}
@media (min-width:861px){
  .roles3 .r3{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}
  .dlevels li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:4px}
  .impl-grid div{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:6px}
}
.xgrid .xcard{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px}
.xgrid .xcard .go{padding-top:0}
.mlinks .ml{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}
/* phone: wide diagrams keep a readable size and scroll sideways inside their own box */
@media (max-width:720px){
  .wide-art,#shops .feature .pic{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .wide-art svg,#shops .feature .pic svg{min-width:660px}
}
section.alt .pc{background:var(--bg)}
section.alt .r3.open{background:var(--bg)}

/* page head with a pillar radar chart on the right (The idea) */
.phead.split .wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px 64px;align-items:center}
.phead.split .copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.pkg{min-width:0}
.pkg svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 22px rgba(11,18,32,.08))}
@media (prefers-reduced-motion: no-preference){
  .pkg .shape{transform-box:view-box;transform-origin:228px 160px;animation:pkgrow .9s cubic-bezier(.2,.7,.2,1) both}
  .pkg .shape.n{animation-delay:.25s}
  @keyframes pkgrow{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
}
@media (max-width:760px){
  .phead.split .wrap{grid-template-columns:minmax(0,1fr)}
  .phead.split .copy{display:contents}
  .phead.split .crumb{order:1} .phead.split h1{order:2} .phead.split .pkg{order:3;max-width:320px;width:100%;justify-self:start} .phead.split .lede{order:4} .phead.split .onpage{order:5}
}