:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --alt:#eceff4;
  --ink:#0b0d14;
  --ink-2:#12151f;
  --ink-soft:#535a68;
  --line:#e0e4ea;
  --line-dark:rgba(255,255,255,.12);
  --on-dark:#eef0f5;
  --on-dark-soft:#9aa2b1;
  --accent:#1e36f5;
  --accent-deep:#1122c4;
  --accent-tint:rgba(30,54,245,.07);
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1140px;
  --pad:clamp(64px,9vw,116px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:var(--pad) 0}
section{scroll-margin-top:82px}
.s-dark{background:var(--ink);color:var(--on-dark)}
.s-alt{background:var(--alt)}

/* type -------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 20px;
  display:flex;align-items:center;gap:10px;
}
.s-dark .eyebrow{color:#8ea0ff}
.eyebrow::before{content:"//";opacity:.6}
.eyebrow-bits::before{display:none}

/* compact brand signature: active cells mirror the logo */
.bit-mark{
  --bit-neutral:#b8c0cc;--bit-active:var(--accent);
  position:relative;display:inline-block;width:13px;height:13px;flex:none;
}
.bit-mark::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:3px;background:var(--bit-neutral);
  box-shadow:
    5px 0 var(--bit-active),10px 0 var(--bit-neutral),
    0 5px var(--bit-neutral),5px 5px var(--bit-neutral),10px 5px var(--bit-active),
    0 10px var(--bit-active),5px 10px var(--bit-neutral),10px 10px var(--bit-neutral);
}
.s-dark .bit-mark{--bit-neutral:#596172;--bit-active:#8ea0ff}

h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:15ch}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
.lead{color:var(--ink-soft);font-size:1.06rem;max-width:56ch}
.lead + .lead{margin-top:16px}
.s-dark .lead{color:var(--on-dark-soft)}

/* logo -------------------------------------------------- */
.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.logo svg{width:24px;height:24px;flex:none}
.logo b{font-weight:600}

/* header ------------------------------------------------ */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav-links{display:flex;align-items:center;gap:30px;font-family:var(--mono);font-size:.82rem;letter-spacing:.02em}
.nav-links a:not(.btn){color:var(--ink-soft);transition:color .18s}
.nav-links a:not(.btn):hover{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.02em;
  padding:11px 18px;border-radius:8px;border:1px solid transparent;
  transition:transform .16s,background .16s,border-color .16s;
  cursor:pointer;
}
.btn .arw{transition:transform .16s}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:none;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.s-dark .btn-ghost{border-color:var(--line-dark);color:var(--on-dark)}
.s-dark .btn-ghost:hover{border-color:var(--on-dark)}
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-11px;padding:0;background:none;border:0;cursor:pointer;color:var(--ink)}
.menu-toggle .bars{position:relative;display:block;width:22px;height:2px;border-radius:2px;background:currentColor}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:100%;height:100%;border-radius:inherit;background:currentColor}
.menu-toggle .bars::before{top:-7px}
.menu-toggle .bars::after{top:7px}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{transition:transform .22s ease,background-color .18s ease}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-7px) rotate(-45deg)}

/* hero (v6: sparse. statement, one line, one CTA) -------- */
.hero{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;padding-top:clamp(72px,10vw,120px);padding-bottom:clamp(60px,7vw,90px)}
/* v6 headline is longer than v5's, so it sits a step smaller to keep the line breaks even */
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);letter-spacing:-.03em}
.hero h1 .hl{color:#fff}
.hero h1 .accent{color:#8ea0ff}
.hero .lead{margin-top:26px;font-size:1.12rem;max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* nine-bit grid signature ------------------------------- */
.grid-sig{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(340px,100%);margin-left:auto;aspect-ratio:1/1}
.cell{
  border:1px solid var(--line-dark);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  opacity:0;transform:scale(.86);
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:12px;
  font-family:var(--mono);font-size:.64rem;color:var(--on-dark-soft);letter-spacing:.04em;
}
.cell.on{background:var(--accent);border-color:var(--accent);color:#dfe4ff;box-shadow:0 0 34px rgba(30,54,245,.55)}
.js .grid-sig .cell{animation:pop .5s cubic-bezier(.2,.7,.3,1) forwards}
.js .grid-sig .cell:nth-child(1){animation-delay:.15s}
.js .grid-sig .cell:nth-child(2){animation-delay:.24s}
.js .grid-sig .cell:nth-child(3){animation-delay:.33s}
.js .grid-sig .cell:nth-child(4){animation-delay:.42s}
.js .grid-sig .cell:nth-child(5){animation-delay:.51s}
.js .grid-sig .cell:nth-child(6){animation-delay:.6s}
.js .grid-sig .cell:nth-child(7){animation-delay:.69s}
.js .grid-sig .cell:nth-child(8){animation-delay:.78s}
.js .grid-sig .cell:nth-child(9){animation-delay:.87s}
@keyframes pop{to{opacity:1;transform:scale(1)}}
/* no-js and reduced-motion: cells simply visible */
.no-js .cell{opacity:1;transform:none}

/* generic head block ------------------------------------ */
.head{max-width:60ch;margin-bottom:52px}
.head .lead{margin-top:18px}

/* selected work: two visual cases, followed by compact proof cards */
.cases{display:grid}
.case-feature{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);
  gap:64px;align-items:center;padding:56px 0 64px;border-top:1px solid var(--line);
}
.case-feature + .case-feature{padding-top:64px}
.case-n{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--accent);margin-bottom:12px}
.case-story h3{font-size:clamp(1.45rem,2.6vw,2rem)}
.case-summary{color:var(--ink-soft);font-size:1.05rem;line-height:1.6;margin-top:16px;max-width:46ch}
.case-detail{border-top:1px solid var(--line);color:var(--ink-soft);font-size:.94rem;line-height:1.6;margin-top:24px;padding-top:18px;max-width:48ch}
.proof-meta dt{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.case-outcome{border-left:2px solid var(--accent);display:grid;gap:3px;margin-top:30px;padding-left:16px}
.case-outcome span,.case-outcome small{font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.case-outcome strong{font-size:1.08rem;line-height:1.35;font-weight:600}
.case-outcome small{letter-spacing:.04em;text-transform:none}

.case-diagram{margin:0;min-width:0}
.diagram-frame{
  aspect-ratio:1.34/1;background:#f7f8fb;border:1px solid #d7dce5;border-radius:8px;
  display:grid;grid-template-rows:auto 1fr auto;gap:20px;padding:24px;
  box-shadow:0 12px 36px rgba(11,13,20,.05);
}
.diagram-head{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.diagram-status{display:inline-flex;align-items:center;gap:7px;color:var(--accent)}
.diagram-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.sdk-map{display:grid;grid-template-columns:minmax(84px,1fr) 38px minmax(96px,1fr) 38px minmax(82px,.9fr);align-items:center}
.diagram-node{border:1px solid #cfd5df;border-radius:6px;background:var(--surface);display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:94px;padding:14px}
.diagram-node strong{font-size:.95rem;line-height:1.2;font-weight:600}
.diagram-node-active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-tint);gap:0}
.diagram-node-active strong{margin-top:6px}
/* what the owned thing carries, inside the owned box: devices in case 02,
   landlords and tenants in case 01 */
.node-scale{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--accent-tint);
  font-family:var(--mono);font-size:.63rem;line-height:1.3;color:var(--accent);
}
.node-k{font-family:var(--mono);font-size:.61rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.diagram-node-active .node-k{color:var(--accent)}
.diagram-route{height:1px;background:rgba(30,54,245,.45);position:relative;transform-origin:left}
.diagram-route::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg)}
.device-cluster{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;aspect-ratio:1/1;padding:5px}
.device-cluster i{display:block;border:1px solid #cfd5df;border-radius:4px;background:var(--surface)}
.device-cluster i.on{border-color:var(--accent);background:var(--accent)}
.ownership-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px}
.ownership-track::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
.ownership-track span{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);text-align:center}
.case-diagram figcaption{font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--ink-soft);margin-top:10px}

/* case 02 diagram: what feeds the platform, the platform we own, what it runs
   on. Five column tracks on one row (stack, route, owned node, route, stack).
   .map-stack is general: reuse it for any future diagram of this shape. */
.estate-map{
  display:grid;gap:0;align-items:stretch;align-content:center;
  grid-template-columns:minmax(0,.95fr) 26px minmax(0,1.4fr) 26px minmax(0,1fr);
}
/* stacks top-align so their labels share one line; the 1px routes stay centred */
.estate-map > .diagram-route,.estate-core{align-self:center}
.map-stack{display:grid;align-content:start;gap:6px}
/* the label box holds two tight lines whatever the column width, so a wrapping
   label never pushes one stack's items out of line with its neighbours */
.map-stack .node-k{display:flex;align-items:flex-end;line-height:1.25;min-height:2.5em;margin-bottom:4px}
.map-stack > span:not(.node-k){
  border-left:2px solid #cfd5df;background:var(--surface);padding:7px 9px;
  font-family:var(--mono);font-size:.63rem;line-height:1.3;color:var(--ink-soft);
}
.map-stack-active > span:not(.node-k){border-left-color:var(--accent)}
.map-stack-active .node-k{color:var(--accent)}
/* the tail of a stack that is longer than the three items shown */
.map-stack > .stack-more{
  border-left-style:dashed;border-left-color:#cfd5df;background:none;color:#8b93a3;
}

/* compact proof cards: the shorter cases, full detail ----- */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:56px;border-top:1px solid var(--line)}
.proof-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px 24px;
}
.proof-card .case-n{margin:0}
.proof-card h3{font-size:1.05rem}
.proof-card > p{color:var(--ink-soft);font-size:.9rem;line-height:1.55}
/* margin-top:auto keeps the meta blocks pinned to the bottom of every card */
.proof-meta{display:grid;gap:12px;margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line)}
.proof-meta dd{margin:5px 0 0;font-family:var(--mono);font-size:.71rem;line-height:1.5;color:var(--ink-soft)}
/* Cards side by side share the grid's row tracks, so the meta rule lands at the
   same height in each one even when a card carries fewer meta entries. Cards
   stacked one per column own their own tracks, so no card grows to match another
   and no empty space is reserved. Falls back to the bottom-pinned rule above. */
@supports (grid-template-rows:subgrid){
  .proof-card{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:10px}
  .proof-meta{margin:0}
}

/* case motion follows the operational path once ---------- */
.js .case-feature .diagram-node,
.js .case-feature .device-cluster i,
.js .case-feature .map-stack > span,
.js .case-feature .node-scale,
.js .case-feature .ownership-track span{opacity:0;transform:translateY(6px)}
.js .case-feature .diagram-route,
.js .case-feature .ownership-track::before{transform:scaleX(0)}
.js .case-feature .diagram-route::after{opacity:0}
.js .case-feature.in .diagram-node,
.js .case-feature.in .device-cluster i,
.js .case-feature.in .map-stack > span,
.js .case-feature.in .node-scale,
.js .case-feature.in .ownership-track span{
  opacity:1;transform:none;transition:opacity .34s ease,transform .34s ease;
}
.js .case-feature.in .diagram-route,
.js .case-feature.in .ownership-track::before{transform:scaleX(1);transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.js .case-feature.in .diagram-route::after{opacity:1;transition:opacity .12s ease}

/* Mobile SDK: core -> owned SDK -> devices -> ownership */
.js .case-feature.in .sdk-map > .diagram-node:first-child{transition-delay:.08s}
.js .case-feature.in .sdk-map > .diagram-route-in{transition-delay:.22s}
.js .case-feature.in .sdk-map > .diagram-route-in::after{transition-delay:.5s}
.js .case-feature.in .sdk-map > .diagram-node-active{transition-delay:.46s}
.js .case-feature.in .sdk-map .node-scale{transition-delay:.62s}
.js .case-feature.in .sdk-map > .diagram-route-out{transition-delay:.6s}
.js .case-feature.in .sdk-map > .diagram-route-out::after{transition-delay:.88s}
.js .case-feature.in .device-cluster i{transition-delay:.82s}
.js .case-feature.in .device-cluster i:nth-child(2){transition-delay:.88s}
.js .case-feature.in .device-cluster i:nth-child(3){transition-delay:.94s}
.js .case-feature.in .device-cluster i:nth-child(4){transition-delay:1s}
.js .case-feature.in .device-cluster i:nth-child(5){transition-delay:1.06s}
.js .case-feature.in .device-cluster i:nth-child(6){transition-delay:1.12s}
.js .case-feature.in .device-cluster i:nth-child(7){transition-delay:1.18s}
.js .case-feature.in .device-cluster i:nth-child(8){transition-delay:1.24s}
.js .case-feature.in .device-cluster i:nth-child(9){transition-delay:1.3s}

/* Property platform: what feeds it -> the platform we own -> what it runs on */
.js .property-diagram .estate-inputs > span{transition-delay:.08s}
.js .case-feature.in .estate-map > .diagram-route-in{transition-delay:.24s}
.js .case-feature.in .estate-map > .diagram-route-in::after{transition-delay:.52s}
.js .case-feature.in .estate-core{transition-delay:.48s}
.js .case-feature.in .estate-core .node-scale{transition-delay:.72s}
.js .case-feature.in .estate-map > .diagram-route-out{transition-delay:.86s}
.js .case-feature.in .estate-map > .diagram-route-out::after{transition-delay:1.14s}
.js .property-diagram .estate-outputs > .node-k{transition-delay:.94s}
.js .property-diagram .estate-outputs > span{transition-delay:1s}
.js .property-diagram .estate-outputs > span:nth-child(3){transition-delay:1.06s}
.js .property-diagram .estate-outputs > span:nth-child(4){transition-delay:1.12s}
.js .property-diagram .estate-outputs > .stack-more{transition-delay:1.2s}

.js .case-feature.in .ownership-track::before{transition-delay:1.36s}
.js .case-feature.in .ownership-track span:nth-child(1){transition-delay:1.5s}
.js .case-feature.in .ownership-track span:nth-child(2){transition-delay:1.58s}
.js .case-feature.in .ownership-track span:nth-child(3){transition-delay:1.66s}

/* v6 statement: a deliberate pause in the page ----------- */
.statement{max-width:72ch}
.statement h2{font-size:clamp(2rem,4.4vw,3.4rem);max-width:20ch}
.statement .lead{margin-top:26px;font-size:1.15rem;max-width:62ch}

/* v6 duo: two related blocks side by side ---------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.tb{border-top:2px solid var(--accent);padding-top:16px}
.tb h3{font-size:1rem;margin-bottom:8px}
.tb p{color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.duo .tb h3{font-size:1.15rem;margin-bottom:10px}
.duo .tb p{font-size:1rem;line-height:1.6}

/* management chapter ------------------------------------ */
.management-chapter{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
  gap:clamp(52px,7vw,96px);align-items:start;
  margin-top:96px;padding-top:76px;border-top:1px solid var(--line);
  scroll-margin-top:84px;
}
.management-copy h2{max-width:15ch}
.management-copy .lead{margin-top:22px}
.management-flow{position:relative;display:grid;padding-top:5px}
.management-flow::before{content:"";position:absolute;left:6px;top:7px;bottom:4px;width:1px;background:var(--line);transform-origin:top}
.management-node{position:relative;padding:0 0 36px 30px}
.management-node:last-child{padding-bottom:0}
.management-marker{position:absolute;left:2px;top:3px;width:8px;height:8px;background:var(--line);box-shadow:0 0 0 2px var(--surface)}
.management-node-mid .management-marker{left:0;top:1px;width:13px;height:13px;background:transparent;box-shadow:none;--bit-neutral:#c9ced7}
.pmk{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.management-node-mid .pmk{color:var(--accent)}
.management-node p{color:var(--ink-soft);font-size:.97rem;line-height:1.55}
.management-node-mid p{color:var(--ink)}

.js .management-flow::before{transform:scaleY(0)}
.js .management-flow .management-node{opacity:0;transform:translateY(6px)}
.js .management-flow.in::before{transform:scaleY(1);transition:transform .7s cubic-bezier(.2,.7,.3,1) .08s}
.js .management-flow.in .management-node{opacity:1;transform:none;transition:opacity .34s ease,transform .34s ease}
.js .management-flow.in .management-node:nth-child(1){transition-delay:.22s}
.js .management-flow.in .management-node:nth-child(2){transition-delay:.46s}
.js .management-flow.in .management-node:nth-child(3){transition-delay:.7s}

/* capabilities: an unframed ruled matrix ---------------- */
.capability-matrix{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.capability{display:flex;flex-direction:column;gap:12px;min-height:280px;padding:34px 32px}
.capability + .capability{border-left:1px solid var(--line)}
.capability-index{display:flex;align-items:center;gap:11px;min-height:13px}
.capability .idx{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.08em}
.capability > p{color:var(--ink-soft);font-size:.98rem}
.capability-domains{margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.capability-domains .dom-label{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.capability-domains ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.capability-domains li{position:relative;padding-left:15px;font-family:var(--mono);font-size:.78rem;line-height:1.5;color:var(--ink-soft)}
.capability-domains li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.6}
.js .capability-matrix .bit-mark{opacity:0;transform:scale(.72)}
.js .capability-matrix.in .bit-mark{opacity:1;transform:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.js .capability-matrix.in .capability:nth-child(1) .bit-mark{transition-delay:.12s}
.js .capability-matrix.in .capability:nth-child(2) .bit-mark{transition-delay:.2s}
.js .capability-matrix.in .capability:nth-child(3) .bit-mark{transition-delay:.28s}

/* fit: quiet two-column qualification -------------------- */
.fit-layout{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:clamp(52px,8vw,112px);align-items:start}
.fit-head h2{max-width:10ch}
.fits{display:grid}
.fit-line{
  font-size:clamp(1.35rem,2vw,1.65rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.3;color:var(--ink);
  padding:25px 0;border-top:1px solid var(--line);
}
.fit-line:last-child{border-bottom:1px solid var(--line)}

/* cta --------------------------------------------------- */
.cta-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.cta-inner h2{color:#fff;max-width:18ch}
.cta-inner .lead{color:rgba(255,255,255,.9);margin-top:18px}
.cta-right{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cta-mail{font-family:var(--mono);font-size:.92rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px}
.cta-mail:hover{border-color:#fff}

/* footer ------------------------------------------------ */
footer{background:var(--ink);color:var(--on-dark-soft);padding:56px 0 40px;border-top:1px solid var(--line-dark)}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot .logo{color:var(--on-dark)}
.foot-links{display:flex;gap:26px;font-family:var(--mono);font-size:.84rem}
.foot-links a{color:var(--on-dark-soft);transition:color .18s}
.foot-links a:hover{color:#fff}
.foot-meta{margin-top:34px;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:#6b7280}

/* focus + motion floor ---------------------------------- */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.s-dark a:focus-visible,.hero a:focus-visible,footer a:focus-visible{outline-color:#8ea0ff}

.reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .cell{opacity:1!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .diagram-node,.device-cluster i,.map-stack > span,.ownership-track span,
  .node-scale,.management-node,.capability-matrix .bit-mark{opacity:1!important;transform:none!important}
  .diagram-route,.ownership-track::before,.management-flow::before{transform:none!important}
  .consent,.js .consent:not([hidden]){opacity:1!important;transform:none!important;transition:none!important}
  .diagram-route::after{opacity:1!important}
}

/* privacy notice: prose, on its own page ------------------
   h3 and p carry no margins globally, so the reading rhythm is set here. */
.legal{max-width:68ch}
.legal h3{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.legal h3:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p{margin-top:14px;color:var(--ink-soft);font-size:.98rem;line-height:1.65}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--accent-deep)}

/* cookie choice: a dark card, not a page-blocking overlay ---
   It is the only dark thing on a light page, so it reads as an aside rather
   than part of the section rhythm. Accent goes periwinkle here, as on every
   dark surface. */
.consent{
  position:fixed;left:24px;bottom:24px;z-index:60;width:min(420px,calc(100vw - 48px));
  background:var(--ink);color:var(--on-dark);border:1px solid var(--line-dark);border-radius:10px;
  padding:20px;box-shadow:0 18px 48px rgba(11,13,20,.28);
}
.consent p{font-size:.88rem;line-height:1.55;color:var(--on-dark-soft)}
.consent a{color:#8ea0ff;text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--on-dark)}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.consent .btn-ghost{border-color:var(--line-dark);color:var(--on-dark)}
.consent .btn-ghost:hover{border-color:var(--on-dark)}
/* the entrance follows the .reveal convention: motion only when it is welcome */
.js .consent{opacity:0;transform:translateY(10px)}
.js .consent:not([hidden]){opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}

/* responsive -------------------------------------------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .grid-sig{margin:0 auto;width:min(340px,100%)}
  .case-feature{grid-template-columns:minmax(0,.78fr) minmax(420px,1.22fr);gap:40px}
  .cta-inner{align-items:flex-start}
}
@media (max-width:820px){
  .case-feature{grid-template-columns:1fr;gap:40px;padding:48px 0 54px}
  .case-feature + .case-feature{padding-top:54px}
  .case-story{max-width:620px}
  .diagram-frame{max-width:620px}
  .proof-grid{grid-template-columns:repeat(2,1fr);padding-top:48px}
  .duo{grid-template-columns:1fr;gap:32px}
  .management-chapter{grid-template-columns:1fr;gap:42px;margin-top:76px;padding-top:60px}
  .management-copy{max-width:620px}
  .management-flow{max-width:620px}
  .capability-matrix{grid-template-columns:1fr}
  .capability{min-height:0;padding:30px 0}
  .capability + .capability{border-left:0;border-top:1px solid var(--line)}
  .capability-domains{margin-top:12px}
  .fit-layout{grid-template-columns:1fr;gap:32px}
  .fit-head h2{max-width:15ch}
}
@media (max-width:700px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 24px 16px}
  .nav-links.open a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .btn-primary{display:none}
  .nav-links.open .btn-primary{display:inline-flex;margin-top:12px;justify-content:center;padding:12px 18px;border-bottom:1px solid transparent}
  .menu-toggle{display:inline-flex}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:56px 0}
  .head{margin-bottom:34px}
  .hero-inner{padding-top:58px;padding-bottom:46px}
  .grid-sig{display:none}
  .hero h1{font-size:2.1rem;line-height:1.1}
  .hero .lead{font-size:1.05rem;margin-top:22px}
  .hero-cta{margin-top:28px}
  .case-feature{gap:32px;padding:38px 0 44px}
  .case-feature + .case-feature{padding-top:44px}
  .case-outcome{margin-top:24px}
  .diagram-frame{aspect-ratio:auto;min-height:340px;padding:18px;gap:16px}
  .sdk-map{grid-template-columns:minmax(66px,1fr) 20px minmax(76px,1fr) 20px minmax(64px,.9fr)}
  .diagram-node{min-height:82px;padding:10px}
  .diagram-node strong{font-size:.8rem}
  .node-k{font-size:.52rem}
  .device-cluster{gap:4px;padding:2px}
  /* the map becomes one vertical flow, routes rotated to point down */
  .property-diagram .diagram-frame{min-height:0}
  .estate-map{grid-template-columns:1fr;align-items:stretch}
  .estate-map > *{grid-column:1}
  .estate-map .diagram-route{width:1px;height:16px;justify-self:center;transform:none!important}
  .estate-map .diagram-route::after{right:auto;left:-3px;top:auto;bottom:-1px;transform:rotate(135deg)}
  .estate-core{min-height:0;padding:12px}
  .ownership-track{gap:4px}
  .ownership-track span{font-size:.56rem}
  .consent{left:12px;right:12px;bottom:12px;width:auto;padding:18px 16px}
  .consent-actions .btn{flex:1;justify-content:center}
  .proof-grid{grid-template-columns:1fr;gap:16px;padding-top:38px}
  .proof-card{padding:22px 20px}
  .management-chapter{margin-top:60px;padding-top:48px;gap:34px}
  .management-node{padding-left:24px}
  .capability{padding:26px 0}
  .fit-line{padding:22px 0}
}