/* unfolded.io landing, v10 "Signal" (Dot Studio handoff, Oct 24 2026). Dark only, no italics, no glow, square dots, Plex Sans + Plex Mono.
   No boxes except the Wire preview: sections are separated by spacing and "› label" lines. */
:root{--bg:#05080f;--surface:#0b1220;--border:#1a2738;--fg:#e7eef8;--muted:#8ea0b8;--dim:#64748c;--accent:#1c8cff;--violet:#8b5cf6;--xs:#3d4b60;--xl:#5b6b82;--bad:#f07171;--row:#0f1725;
  --sans:"IBM Plex Sans","Plex Sans FB",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono","Plex Mono FB",ui-monospace,SFMono-Regular,Menlo,monospace;--gap:150px}
/* Metric-matched fallbacks for IBM Plex (fix-pages Oct 23): until the web font arrives (display=swap) text is set in a local
   Arial / Courier-class face scaled to Plex's advance widths and line metrics, so the swap does not reflow content that is now
   there at first paint (CLS). Widths measured against Plex Sans 400/500/600/700 and Plex Mono; Plex ascent/descent 1.025/0.275. */
@font-face{font-family:"Plex Sans FB";font-weight:400;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo"),local("Helvetica");size-adjust:99.66%;ascent-override:102.85%;descent-override:27.59%;line-gap-override:0%}
@font-face{font-family:"Plex Sans FB";font-weight:500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo"),local("Helvetica");size-adjust:101.67%;ascent-override:100.82%;descent-override:27.05%;line-gap-override:0%}
@font-face{font-family:"Plex Sans FB";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold"),local("Helvetica Bold");size-adjust:96.55%;ascent-override:106.16%;descent-override:28.48%;line-gap-override:0%}
@font-face{font-family:"Plex Sans FB";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold"),local("Helvetica Bold");size-adjust:97.78%;ascent-override:104.83%;descent-override:28.12%;line-gap-override:0%}
@font-face{font-family:"Plex Mono FB";font-weight:400 700;src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono"),local("Cousine"),local("Menlo");size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body.ld{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;font-style:normal;overflow-x:hidden}
.ld i,.ld em{font-style:normal}
.ld a{color:inherit;text-decoration:none}
.ld a:focus-visible,.ld button:focus-visible,.ld input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wm{font:700 22px/1 var(--sans);letter-spacing:-.01em;color:var(--fg)}.wm b{color:var(--accent);font-weight:700}
canvas{display:block}

/* nav: wordmark + one link, sticky on scroll */
.nav{position:sticky;top:0;z-index:20;background:var(--bg)}
.navin{display:flex;align-items:center;justify-content:space-between;height:80px}
.navcta{font:500 14px/1 var(--sans);color:var(--fg)}
.navcta:hover{color:var(--accent)}

/* labels */
.lbl{display:flex;align-items:baseline;justify-content:flex-start;gap:16px;font:500 12px/1 var(--mono);color:var(--muted);margin:0 0 34px}
.lbl b{color:var(--accent);font-weight:500;margin-right:6px}
.lbl .tag{font-weight:400;color:var(--dim);margin-left:10px}
.lbl.sigh,.lbl.pvh{justify-content:space-between}
.lbl .signow,.lbl .pvlive{margin-left:0}
.mut{color:var(--muted)}
.sqs{display:inline-block;width:.19em;height:.19em;background:var(--accent);margin-left:.06em;vertical-align:baseline}

/* hero */
.top{position:relative;padding-top:76px}
.h1{margin:0;font:700 112px/1.05 var(--sans);font-size:clamp(46px,calc((min(100vw,1240px) - 40px) / 10.2),112px);letter-spacing:-.02em;color:var(--fg);white-space:nowrap;max-width:100%}
.h1a,.h1b{display:inline}
.sq{display:inline-block;width:.195em;height:.195em;background:var(--accent);margin-left:.075em;vertical-align:baseline}
.sub{margin:32px 0 0;font:400 22px/1.35 var(--sans);color:var(--muted)}
.cta{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;margin-top:30px;border-radius:8px;background:var(--accent);color:var(--bg)!important;font:600 16px/1 var(--sans)}
.cta:hover{background:#3d9dff}

/* the intro line (desktop): square -> right edge -> down -> along the preview's top edge, then gone */
.lh,.lv,.lt{position:absolute;display:none;background:var(--accent);pointer-events:none}
.lh{height:2px}.lv{width:2px}.lt{height:1px}
html.intro .lines .lh,html.intro .lines .lv,html.intro .lines .lt{display:block}
html.intro .lines.nopv .lv,html.intro .lines.nopv .lt{display:none}

/* signal grid */
.sig{margin-top:84px}
.sig .sigm{display:none}
.sigc{position:relative;height:var(--sigh,176px)}
.sigc canvas{width:100%;height:100%}
.sigt{position:relative;height:24px;margin-top:10px;font:400 11px/1 var(--mono);color:var(--dim)}
.sigt span{position:absolute;top:0}
.sigt span:nth-child(1){left:0}.sigt span:nth-child(2){left:25%}.sigt span:nth-child(3){left:50%}.sigt span:nth-child(4){left:75%}

/* Wire preview: the only boxed element (full-bleed top and bottom rules) */
.pv{margin-top:76px}
.pv[hidden]{display:none}
.pvh{margin-bottom:22px}
/* full-bleed hairlines: a 1px element whose spread shadow is clipped to its own height (shadows never add scroll width) */
.pvb{position:relative;padding:1px 0;clip-path:inset(0 -40px)} /* rules are column-width (Cato Oct 25); -40px keeps the blue top-row mark */
.pvb::before,.pvb::after,.pvr li+li::before,.xrow::before,.xrow::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--border);pointer-events:none}
.pvb::before{top:0}.pvb::after{bottom:0}
.pvr{list-style:none;margin:0;padding:0;position:relative}
.pvr li{position:relative}
.pvr li+li::before{top:0;background:var(--row)}
.pvr a{display:grid;grid-template-columns:96px 184px minmax(0,1fr) 64px;align-items:center;min-height:62px;padding:12px 0}
.pvr a:hover .h{color:#fff}
.pvr .t{font:400 13px/1 var(--mono);color:var(--dim)}
.pvr .s{font:500 12px/1.3 var(--mono);color:var(--sc,#1c8cff);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere;padding-right:16px}
.pvr .h{font:400 17px/1.4 var(--sans);color:var(--fg);white-space:normal;overflow-wrap:anywhere}
.pvr .n{font:700 15px/1 var(--mono);color:var(--dim);text-align:right}
.pvr .n.hot{color:var(--hc)}
@media (min-width:1300px){.pvr li:first-child a::before{content:"";position:absolute;left:-30px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--accent)}}
.pvsk .pvr .h{display:block;height:1.4em;max-width:60%;border-radius:4px;background:var(--surface)}.pvsk .pvr a{pointer-events:none}.pvsk .pvr li:first-child a::before{display:none}
.pvr.slide{animation:ld-slide 550ms cubic-bezier(.33,1,.68,1) both}
.pvr.slide li:first-child{animation:ld-fade 300ms linear both}
@keyframes ld-slide{from{transform:translateY(calc(-1 * var(--sl,62px)))}to{transform:none}}
.ld .more{display:block;width:max-content;margin:22px 0 0 auto;font:600 16px/1 var(--sans);color:var(--accent)}
.ld .more:hover{color:#3d9dff}

/* sections */
.sec{margin-top:var(--gap)}
.top + .sec{margin-top:200px}

/* about */
.since .sn{display:block;font:400 14px/1 var(--mono);color:var(--dim);margin-bottom:28px}
.about{display:grid;grid-template-columns:600px 1fr;align-items:end;gap:20px}
.acopy{font:500 30px/1.42 var(--sans);align-self:center;margin-top:42px}
.acopy p{margin:0}.acopy .a1{color:var(--fg)}.acopy .a2{color:var(--muted);margin-top:12px}
.dm{height:var(--dmh)}
#dm2018{--dmh:103px;width:375px}

/* channels */
.chs{display:grid;grid-template-columns:600px 1fr;gap:20px}
.ch{display:flex;flex-direction:column;align-items:flex-start}
.hd{display:inline-flex;align-items:center;gap:12px;font:600 21px/1.2 var(--sans);color:var(--fg)}
.hd b{font-weight:600}
.ico{width:22px;height:22px;flex:0 0 auto}
.c1 .ico{color:var(--accent)}.c2 .ico{color:var(--violet)}.ico.x{width:20px;height:20px;color:var(--xl)}
.cnt{--dmh:48px;margin-top:26px}
.ch .mem{margin-top:24px;font:500 18px/1.3 var(--sans);color:var(--muted)}
.ch .ds{margin-top:8px;font:400 18px/1.4 var(--sans);color:var(--muted)}
.ch:hover .mem{color:var(--fg)}
.xrow{position:relative;display:grid;grid-template-columns:620px 1fr auto;align-items:center;min-height:60px;margin-top:96px}
.xrow::before{top:-34px}.xrow::after{bottom:-1px}
.xrow{padding-bottom:26px}
.xrow .ds{font:400 18px/1.4 var(--sans);color:var(--muted)}
.xrow .fol{font:600 18px/1 var(--sans);color:var(--fg)}
.xrow:hover .fol{color:var(--accent)}

/* sponsors: slow sideways marquee between full-bleed hairlines */
.mq{position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);height:124px}
/* sponsors scroll inside the content column with soft edges (Cato Oct 25: column-width, centred) */
.mqv{overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
.mqi{display:flex;width:max-content;height:100%;animation:ld-mq var(--mqd,40s) linear infinite}
.mq:hover .mqi{animation-play-state:paused}
.mqt{display:flex;align-items:center;flex:0 0 auto;height:100%}
.spn{display:inline-flex;align-items:center;gap:12px;height:100%}
.spn .lderi{width:38px;height:38px}.spn .dtx{font:500 22px/1 var(--sans);color:var(--fg)}
.spn .l1i{height:34px;width:auto}.spn .lkt{height:34px;width:auto}
.mqs{display:inline-flex;align-items:center;gap:7px;margin:0 70px}
.mqs i{display:block;width:5px;height:5px;background:#1e2c40}.mqs i:nth-child(2){background:var(--dim)}
@keyframes ld-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* newsletter */
.nl{display:grid;grid-template-columns:700px 1fr;align-items:center}
.nlh{margin:0;font:700 66px/1.1 var(--sans);color:var(--fg);letter-spacing:-.015em}
.nlt p{margin:14px 0 0;font:400 21px/1.4 var(--sans)}
.ef{width:500px;max-width:100%}
.er{display:flex;gap:20px;align-items:center}
.in{flex:1;min-width:0;height:52px;padding:0 2px;background:transparent;color:var(--fg);border:0;border-bottom:1px solid var(--muted);border-radius:0;font:400 20px/1 var(--sans)}
.in::placeholder{color:var(--dim)}
.in:focus{outline:none;border-bottom-color:var(--accent)}
.in:focus-visible{outline:none}
.in.bad{border-bottom-color:var(--bad)}
.btn{flex:0 0 auto;height:52px;padding:0 22px;min-width:180px;border:0;border-radius:8px;background:var(--accent);color:var(--bg);font:600 17px/1 var(--sans);cursor:pointer}
.btn:hover{background:#3d9dff}.btn:disabled{opacity:.6;cursor:progress}
.msg{margin:10px 0 0;font:400 14px/1.4 var(--sans);color:var(--muted)}
.msg:empty{display:none}
.ok{display:flex;align-items:center;gap:10px;font:400 16px/1.4 var(--sans);color:var(--muted);min-height:52px;margin:0}
.ok::before{content:"";width:8px;height:8px;background:var(--accent);flex:0 0 auto}
.hpw{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* desk early access: a dark screen that assembles itself from squares */
.dk{display:grid;grid-template-columns:600px 1fr;align-items:start}
.dw{margin:0;font:700 96px/1 var(--sans);color:var(--fg);letter-spacing:-.02em}
.dkline{margin:22px 0 0;max-width:440px;font:500 26px/38px var(--sans);color:var(--fg)}
.dka{align-self:flex-start;margin-top:22px;padding:0;border:0;background:none;color:var(--accent);font:600 19px/1.4 var(--sans);cursor:pointer}
.dka:hover{color:#3d9dff}
.dkf{margin-top:18px}
.dkf[hidden]{display:none}
.dkl{display:flex;flex-direction:column}
.dkr{height:336px;margin-top:-6px}
.dkr canvas{width:100%;height:100%}

/* footer */
.ft{margin-top:var(--gap)}
.ftin{display:flex;align-items:center;justify-content:space-between;height:104px;border-top:1px solid var(--border)}
.ft .wm{font-size:18px}
.fl{font:400 12px/1 var(--mono);color:var(--dim)}
.fl a{color:var(--dim)}.fl a:hover{color:var(--muted)}

/* tablet */
@media (max-width:1100px){
  .about,.chs,.dk{grid-template-columns:1fr 1fr}
  .xrow{grid-template-columns:1fr 1fr auto}
  .nl{grid-template-columns:1fr;gap:28px}
  .acopy{font-size:24px}
  .pvr a{grid-template-columns:70px 150px minmax(0,1fr) 52px}
}
@media (max-width:900px){
  .about,.dk{grid-template-columns:1fr}
  .acopy{margin-top:28px}
  .dkr{margin-top:40px;height:280px}
}

/* mobile */
@media (max-width:720px){
  :root{--gap:100px}
  .wm{font-size:20px}
  .navin{height:64px}
  .top{padding-top:40px}
  .h1{font-size:clamp(40px,calc((100vw - 40px) / 5.6),62px);line-height:1.1;white-space:normal}
  .h1a,.h1b{display:block}
  .sq{margin-left:.08em}
  .sub{font-size:17px;margin-top:16px}
  .cta{height:46px;padding:0 20px;margin-top:26px}
  .lbl{margin-bottom:24px;font-size:11px}
  .sig{margin-top:54px}
  .sig .sigd,.sig .signow,.sigt{display:none}
  .sig .sigm{display:inline}
  .sigc{height:112px}
  .pv{margin-top:56px}
  .pvh{margin-bottom:18px}.pvh .pvlive{display:none}
  .pvr a{display:block;position:relative;padding:14px 0}
  .pvr .t,.pvr .s{display:inline;font-size:11px}
  .pvr .s{padding-left:14px;padding-right:0}
  .pvr .n{position:absolute;right:0;top:14px;font-size:13px;line-height:13px}
  .pvr .h{display:block;margin-top:7px;font-size:16px;font-weight:500;line-height:23px}
  .pvsk .pvr .h{height:46px;max-width:none}
  .pvr li:nth-child(n+7){display:none}
  .ld .more{font-size:15px;margin-top:20px}
  .top + .sec{margin-top:110px}
  .since .sn{font-size:12px;margin-bottom:16px}
  #dm2018{--dmh:41px;width:150px}
  .acopy{font-size:17px;line-height:26px;margin-top:22px}
  .acopy .a2{margin-top:8px}
  .chs{grid-template-columns:1fr;gap:56px}
  .hd{font-size:18px;gap:10px}.ico{width:18px;height:18px}.ico.x{width:16px;height:16px}
  .cnt{--dmh:34px;margin-top:20px}
  .ch .mem{margin-top:16px;font-size:15px}.ch .ds{font-size:15px;margin-top:6px}
  .xrow{grid-template-columns:1fr auto;grid-template-rows:auto auto;row-gap:10px;margin-top:66px;padding-bottom:22px}
  .xrow::before{top:-26px}
  .xrow .ds{grid-column:1 / -1;grid-row:2;font-size:15px}
  .xrow .fol{font-size:15px}
  .mq{height:88px}
  .mqv{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  .spn{gap:9px}.spn .lderi{width:26px;height:26px}.spn .dtx{font-size:16px}.spn .l1i,.spn .lkt{height:24px}
  .mqs{margin:0 42px;gap:0}.mqs i{width:5px;height:5px}.mqs i:nth-child(1),.mqs i:nth-child(3){display:none}
  .nlh{font-size:40px;line-height:48px}
  .nla,.nlb{display:block}
  .nlt p{font-size:17px;line-height:26px;margin-top:16px}
  .ef,.dkf{width:100%}
  .er{flex-direction:column;align-items:stretch;gap:22px}
  .in{height:46px;font-size:17px}
  .btn{width:100%;height:52px;font-size:16px}
  .dw{font-size:64px}
  .dkline{font-size:21px;line-height:30px;margin-top:18px}
  .dka{font-size:17px;margin-top:12px}
  .dkr{height:204px;margin-top:40px}
  .ftin{flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;height:auto;padding-top:30px;padding-bottom:36px}
  .fl{font-size:11px}
}

/* first-visit intro (html.intro set by /landing-intro.js; tap/scroll/key removes it). Times from page paint, ease-out cubic.
   Desktop (E3): headline + square land, the line draws right, then down to the Wire preview, runs left along its top edge and fades
   into the border colour, all by ~1.2 s; the signal columns rise at the same time (canvas, landing.js). Mobile: no line, the square
   drops with a small settle, the grid rises, the rows fade in. */
@keyframes ld-up10{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ld-up6{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ld-up4{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ld-fade{from{opacity:0}to{opacity:1}}
@keyframes ld-drop{0%{opacity:0;transform:translateY(-50px)}25%{opacity:1}70%{transform:translateY(0)}85%{transform:translateY(3px)}100%{opacity:1;transform:none}}
@keyframes ld-dropm{0%{opacity:0;transform:translateY(-30px)}25%{opacity:1}70%{transform:translateY(0)}85%{transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes ld-lh{0%{clip-path:inset(0 100% 0 0)}41%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes ld-lv{0%{clip-path:inset(0 0 100% 0)}33%{clip-path:inset(0 0 0 0)}67%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes ld-lt{0%{clip-path:inset(0 0 0 100%);background:var(--accent)}50%{clip-path:inset(0 0 0 0);background:var(--accent)}100%{clip-path:inset(0 0 0 0);background:var(--border)}}
html.intro .h1a,html.intro .h1b{display:inline-block;animation:ld-up10 300ms cubic-bezier(.33,1,.68,1) both}
html.intro .sq{animation:ld-drop 220ms cubic-bezier(.33,1,.68,1) 200ms both}
html.intro .lh{animation:ld-lh 340ms linear 380ms both}
html.intro .lv{animation:ld-lv 420ms linear 520ms both}
html.intro .lt{animation:ld-lt 600ms cubic-bezier(.33,1,.68,1) 660ms both}
html.intro .sub,html.intro .cta{animation:ld-up6 240ms cubic-bezier(.33,1,.68,1) 460ms both}
html.intro .sigh{animation:ld-fade 200ms cubic-bezier(.33,1,.68,1) 340ms both}
html.intro .sigt{animation:ld-fade 200ms cubic-bezier(.33,1,.68,1) 900ms both}
html.intro .pvh{animation:ld-fade 150ms cubic-bezier(.33,1,.68,1) 560ms both}
html.intro .pvr li{animation:ld-up4 150ms cubic-bezier(.33,1,.68,1) both;animation-delay:var(--d,600ms)}
html.intro .more{animation:ld-fade 200ms cubic-bezier(.33,1,.68,1) 900ms both}
@media (max-width:720px){html.intro .h1a,html.intro .h1b{display:block}html.intro .sq{animation-name:ld-dropm}html.intro .sub,html.intro .cta{animation-delay:420ms}html.intro .pvr li{animation-duration:160ms}}
@media (prefers-reduced-motion:reduce){html.intro *,html.intro *::before{animation:none!important}.mq{height:auto;min-height:124px}.mqi{animation:none;width:100%;height:auto;min-height:inherit;justify-content:center;align-items:center}.mqv{height:auto;min-height:inherit;display:flex}.mqt[aria-hidden]{display:none}.mqt{flex:1 1 auto;min-width:0;height:auto;flex-wrap:wrap;justify-content:center;row-gap:16px;padding:16px 0}.mqt>.mqs:last-child{display:none}.mqv{-webkit-mask-image:none;mask-image:none}.pvr.slide,.pvr.slide li{animation:none!important}}
@media (prefers-reduced-motion:reduce) and (max-width:720px){.mq{min-height:88px}.mqs{margin:0 20px}}
@media (max-width:720px){.lh,.lv,.lt{display:none!important}}