/* /supported-social-media-networks. Scoped under .nw, every class nw-.
   Motion only decorates: everything below .is-armed is the only place an
   element starts hidden, so no-JS and reduced motion get the final frame. */

.nw {
  --blue: #356dff; --blue-2: #2a57d6; --blue-3: #1e3ea8; --navy: #0b2161;
  /* --blue-t for small text (5.5:1 on white and the soft bands, AA), --blue-a
     for large accents (headline words, big numbers), where #356dff passes. */
  --blue-t: #2a57d6; --blue-a: #356dff;
  --ink: #0f172a; --body: #475569; --muted: #64748b; --faint: #94a3b8;
  --line: #e6ebf4; --line-2: #d5deee;
  --bg: #fff; --soft: #f6f8fd; --soft-2: #eef2f9; --card: #fff; --tint: #eef3ff;
  --sk: #e3e9f4; --sk-2: #cfd8e8; --ib: #dbe6ff;
  --green: #22c55e; --green-t: #15803d; --amber: #b45309; --amber-f: #f59e0b; --red: #b91c1c; --red-f: #dc2626;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 24px -14px rgba(15,23,42,.18);
  --shadow-l: 0 1px 2px rgba(15,23,42,.06), 0 24px 48px -24px rgba(15,23,42,.28);
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-in-out: cubic-bezier(.65,0,.35,1);
  --e-in: cubic-bezier(.55,0,.75,.2);
  --e-pop: linear(0, 0.0307, 0.1093, 0.2181, 0.3422, 0.4702, 0.5935, 0.7064, 0.805, 0.8877, 0.9539, 1.0045, 1.0408, 1.0646, 1.0781, 1.0833, 1.0822, 1.0766, 1.0681, 1.058, 1.0473, 1.0368, 1.0271, 1.0185, 1.0112, 1.0053, 1.0007, 0.9973, 0.9951, 0.9937, 0.9931, 0.9931, 0.9934, 0.9941, 1);
  --e-settle: linear(0, 0.0228, 0.0815, 0.1637, 0.2593, 0.3604, 0.4611, 0.5572, 0.6458, 0.7252, 0.7944, 0.8533, 0.9023, 0.9418, 0.973, 0.9966, 1.0139, 1.0257, 1.0332, 1.0372, 1.0384, 1.0376, 1.0355, 1.0324, 1.0287, 1.0248, 1.021, 1.0173, 1.0138, 1.0108, 1.0081, 1.0058, 1.0039, 1.0023, 1);
  --d-micro: 180ms; --d-ui: 420ms; --d-reveal: 760ms;
  background: var(--bg); color: var(--body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@supports not (transition-timing-function: linear(0, 1)) {
  .nw { --e-pop: cubic-bezier(.34,1.56,.64,1); --e-settle: cubic-bezier(.22,1.2,.36,1); }
}
.dark .nw {
  --blue-t: #7fa3ff; --blue-a: #7fa3ff; --ink: #f1f5f9; --body: #c3cede; --muted: #9fadc2; --faint: #7d8aa0;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.14);
  --bg: #0b1220; --soft: #0f182b; --soft-2: #17223a; --card: #131d33; --tint: rgba(53,109,255,.16);
  --sk: rgba(255,255,255,.1); --sk-2: rgba(255,255,255,.18); --ib: #22345f;
  --green-t: #4ade80; --amber: #fbbf24; --red: #f87171;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.7);
  --shadow-l: 0 1px 2px rgba(0,0,0,.4), 0 24px 48px -24px rgba(0,0,0,.8);
}
.nw *, .nw *::before, .nw *::after { box-sizing: border-box; }
.nw img { max-width: none; }
.nw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw a:focus-visible, .nw button:focus-visible, .nw summary:focus-visible, .nw [tabindex]:focus-visible, .nw textarea:focus-visible {
  outline: 2px solid #356dff; outline-offset: 3px;
}

/* ---------------------------------------------------------------- layout */
.nw-wrap { max-width: 78rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .nw-wrap { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .nw-wrap { padding-inline: 2rem; } }
.nw-sec { padding-block: 4.5rem; background: var(--bg); }
.nw-sec--soft { background: var(--soft); }
@media (min-width: 900px) { .nw-sec { padding-block: 6.5rem; } }
.nw-head { max-width: 46rem; }
.nw-head--c { margin-inline: auto; text-align: center; }
.nw-head--c .nw-kicker { justify-content: center; }
.nw-head--c .nw-lede { margin-inline: auto; }

.nw-kicker { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: .76rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-t); }
.nw-kicker::before { content: ''; width: 1.4rem; height: 2px; border-radius: 2px; background: currentColor; }
.nw-h1, .nw-h2 { margin: 0; color: var(--ink); font-weight: 820; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.nw-h1 { font-size: clamp(2.45rem, 5.6vw, 4.6rem); }
.nw-h2 { font-size: clamp(1.95rem, 3.7vw, 3.05rem); font-weight: 800; }
.nw-h1 em, .nw-h2 em { font-style: normal; color: var(--blue-a); }
.nw-lede { margin: 1.15rem 0 0; max-width: 44rem; font-size: 1.1rem; line-height: 1.65; color: var(--body); }

/* Masked words: real text, the inner span rises. */
.nw-w, .nw-p { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.nw-w > span { display: inline-block; }
.nw-nw { white-space: nowrap; }
.nw-mask em .nw-w { position: relative; -webkit-padding-end: .26em; padding-inline-end: .26em; -webkit-margin-end: -.26em; margin-inline-end: -.26em; }
.nw-mask em .nw-w:last-child { -webkit-padding-end: 0; padding-inline-end: 0; -webkit-margin-end: 0; margin-inline-end: 0; }
.nw-mask em .nw-w::after { content: ''; position: absolute; inset-inline: 0; bottom: .03em; height: .07em; border-radius: 2px; background: currentColor; opacity: .85; transform-origin: left center; }
[dir=rtl] .nw-mask em .nw-w::after { transform-origin: right center; }
.nw.is-armed .nw-mask .nw-w > span { transform: translateY(108%); }
.nw.is-armed .nw-mask .nw-p { opacity: 0; }
.nw.is-armed .nw-mask em .nw-w::after { transform: scaleX(0); }
.nw.is-armed .is-in .nw-mask .nw-w > span, .nw.is-armed .nw-mask.is-in .nw-w > span {
  transform: none; transition: transform 900ms var(--e-out) calc(var(--w) * 38ms + var(--md, 0ms));
}
.nw.is-armed .is-in .nw-mask .nw-p, .nw.is-armed .nw-mask.is-in .nw-p { opacity: 1; transition: opacity 500ms var(--e-out) calc(var(--w) * 38ms + 200ms); }
.nw.is-armed .is-in .nw-mask em .nw-w::after, .nw.is-armed .nw-mask.is-in em .nw-w::after {
  transform: none; transition: transform 700ms var(--e-in-out) calc(var(--w) * 38ms + var(--md, 0ms) + 520ms);
}

/* Generic rise for supporting copy and blocks. */
.nw.is-armed .nw-rise, .nw.is-armed .nw-reveal:not(.nw-head), .nw.is-armed .nw-head.nw-reveal > :not(.nw-mask) { opacity: 0; transform: translateY(16px); }
.nw.is-armed .nw-rise.is-in, .nw.is-armed .is-in .nw-rise, .nw.is-armed .nw-reveal.is-in:not(.nw-head), .nw.is-armed .nw-head.is-in > :not(.nw-mask) {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--e-out) calc(var(--d, 0) * 70ms + 80ms), transform 900ms var(--e-out) calc(var(--d, 0) * 70ms + 80ms);
}
.nw.is-armed .nw-head.is-in .nw-lede { --d: 4; }

/* ---------------------------------------------------------------- buttons */
.nw-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.nw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: .98rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--d-micro), border-color var(--d-micro), color var(--d-micro), transform var(--d-micro) var(--e-out); }
.nw-btn--p { background: var(--blue); color: #fff; }
.nw-btn--g { background: transparent; color: var(--ink); border-color: var(--line-2); }
.nw-btn--s { padding: .45rem .9rem; font-size: .85rem; }
.nw-btn:active { transform: scale(.97); }
.nw-arw { display: inline-flex; }
.nw-arw svg { width: 18px; height: 18px; transition: transform 260ms var(--e-out); }
[dir=rtl] .nw-arw { transform: scaleX(-1); }
@media (hover: hover) {
  .nw-btn--p:hover { background: var(--blue-2); color: #fff; }
  .nw-btn--g:hover { border-color: var(--blue); color: var(--blue-t); }
  .nw-btn:hover .nw-arw svg, .nw-link:hover .nw-arw svg, .nw-plug.has-link:hover .nw-arw svg { transform: translateX(4px); }
}
.nw-trust { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.1rem 0 0; padding: 0; font-size: .88rem; color: var(--muted); }
.nw-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.nw-trust svg, .nw-st svg { width: 15px; height: 15px; fill: none; stroke: var(--green-t); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nw-tag { display: inline-block; padding: .14rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--soft-2); color: var(--body); font-size: .7rem; font-weight: 650; line-height: 1.35; }
.nw-tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid #e6ebf4; box-shadow: var(--shadow); }
.nw-tile img { width: 58%; height: 58%; -o-object-fit: contain; object-fit: contain; }
.nw-tile--s { width: 40px; height: 40px; border-radius: 12px; }
.nw-tile--xs { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.dark .nw .nw-tile { border-color: rgba(255,255,255,.14); }
.nw-card { background: var(--card); border: 1px solid var(--line); border-radius: 1.2rem; box-shadow: var(--shadow); }

/* Odometer */
.nw-odo, .nw-num { --lh: 1.1em; }
.nw-odo { display: inline-block; font-variant-numeric: tabular-nums; }
.nw-odo-v { display: inline; }
/* One rolling digit. The hidden ghost digit gives the column its width and
   its baseline; the stack rides on top and is clipped with clip-path, which
   (unlike overflow: hidden) leaves the baseline alone, so a rolling number
   sits exactly where the plain number lands. */
.nw-odo-c { position: relative; display: inline-block; line-height: var(--lh); -webkit-clip-path: inset(-.06em 0); clip-path: inset(-.06em 0); }
.nw-odo-g { visibility: hidden; }
.nw-odo-s { position: absolute; inset-inline: 0; top: 0; display: flex; flex-direction: column; align-items: center; }
.nw-odo-s > span { height: var(--lh); line-height: var(--lh); }

/* ---------------------------------------------------------------- hero */
.nw-hero { padding-block: 7rem 4rem; background: var(--bg); }
.nw-hero-copy { max-width: 58rem; margin-inline: auto; text-align: center; }
.nw-hero-copy .nw-kicker { justify-content: center; }
.nw-hero-copy .nw-lede { margin-inline: auto; }
.nw-hero-copy .nw-actions, .nw-hero-copy .nw-trust { justify-content: center; }
.nw-crumbs ol { display: flex; justify-content: center; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .84rem; color: var(--muted); }
.nw-crumbs li + li::before { content: '/'; -webkit-margin-end: .5rem; margin-inline-end: .5rem; color: var(--faint); }
.nw-crumbs a { color: var(--muted); text-decoration: none; }
.nw-crumbs a:hover { color: var(--blue-t); }
.nw-h1 .nw-odo { color: var(--blue-a); --lh: 1.05em; }

.nw-stage { position: relative; height: 530px; margin-top: 2.5rem; --rx: min(43%, 480px); --ry: 228px; --cy: 47%; }
@media (min-width: 1180px) {
  .nw-hero { padding-block: 6.6rem 3.25rem; }
  .nw-hero > .nw-wrap { display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); align-items: center; gap: 2.5rem; }
  .nw-hero-copy { max-width: none; margin-inline: 0; text-align: start; }
  .nw-hero-copy .nw-kicker, .nw-hero-copy .nw-actions, .nw-hero-copy .nw-trust, .nw-hero .nw-crumbs ol { justify-content: flex-start; }
  .nw-hero-copy .nw-lede { margin-inline: 0; font-size: 1.06rem; }
  .nw-hero .nw-h1 { font-size: clamp(2.7rem, 4.15vw, 4.1rem); }
  .nw-stage { height: 580px; margin-top: 0; --rx: 40%; --ry: 236px; --cy: 46%; }
}
.nw-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nw-wires path { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke 260ms, opacity 260ms; }
.nw-wires path.is-hot, .nw-wires path.is-hl { stroke: var(--blue); }
.nw-stage.is-focus .nw-wires path:not(.is-hl) { opacity: .4; }
.nw.is-armed .nw-wires path { transition: stroke 260ms, opacity 260ms, stroke-dashoffset 700ms var(--e-in-out); }
.nw.is-armed .nw-wires path.is-off { stroke-dashoffset: 1; }

.nw-comp { position: absolute; left: 50%; top: var(--cy); z-index: 2; width: 272px; padding: 14px; transform: translate(-50%, -50%); background: var(--card); border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: var(--shadow-l); }
.nw-comp-top { display: flex; align-items: center; gap: 9px; }
.nw-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); }
.nw-av svg { width: 18px; height: 18px; fill: #fff; }
.nw-comp-brand { display: grid; gap: 4px; min-width: 0; flex: 1; }
.nw-comp-brand b { font-size: .8rem; font-weight: 750; color: var(--ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-comp-brand i { display: block; width: 46%; height: 6px; border-radius: 3px; background: var(--sk); }
.nw-comp-n { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--blue-t); font-size: .7rem; font-weight: 750; }
.nw-cap { margin: 12px 0; min-height: 3.9em; font-size: .86rem; line-height: 1.3; color: var(--ink); }
.nw-caret { display: none; width: 2px; height: 1.05em; -webkit-margin-start: 1px; margin-inline-start: 1px; vertical-align: -2px; background: var(--blue); }
.nw.is-armed .nw-stage.is-typing .nw-caret { display: inline-block; animation: nw-blink 1s steps(1) infinite; }
@keyframes nw-blink { 50% { opacity: 0; } }
.nw-img { height: 92px; border-radius: .75rem; overflow: hidden; -webkit-clip-path: inset(0 0 0 0 round .75rem); clip-path: inset(0 0 0 0 round .75rem); }
.nw-img svg { display: block; width: 100%; height: 100%; }
.nw-i0 { fill: #e6eeff; } .nw-i1 { fill: #356dff; } .nw-i2 { fill: #2a57d6; } .nw-i3 { fill: #1e3ea8; } .nw-i4 { fill: #fff; } .nw-i5 { fill: #0b2161; }
.dark .nw .nw-i0 { fill: #1d2c52; }
.nw.is-armed .nw-img { transition: -webkit-clip-path 720ms var(--e-out); transition: clip-path 720ms var(--e-out); transition: clip-path 720ms var(--e-out), -webkit-clip-path 720ms var(--e-out); }
.nw.is-armed .nw-stage.is-noimg .nw-img { -webkit-clip-path: inset(100% 0 0 0 round .75rem); clip-path: inset(100% 0 0 0 round .75rem); }
.nw-comp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.nw-comp-when { display: flex; gap: 6px; }
.nw-comp-when i { width: 34px; height: 22px; border-radius: 7px; background: var(--soft-2); border: 1px solid var(--line); }
.nw-comp-when i + i { width: 22px; }
.nw-sched { position: relative; display: inline-grid; height: 32px; padding-inline: 14px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .78rem; font-weight: 750; overflow: hidden; }
.nw-sched > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; transition: opacity 240ms, transform 360ms var(--e-out); }
.nw-sched svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nw-sched-b { opacity: 0; transform: translateY(70%); }
.nw-stage.is-sent .nw-sched { background: var(--blue-3); }
.nw-stage.is-sent .nw-sched-a { opacity: 0; transform: translateY(-70%); }
.nw-stage.is-sent .nw-sched-b { opacity: 1; transform: none; }
.nw-cursor { position: absolute; right: 30px; bottom: 6px; width: 18px; height: 20px; fill: var(--ink); stroke: #fff; stroke-width: 1.2; opacity: 0; pointer-events: none; z-index: 3; }
[dir=rtl] .nw-cursor { right: auto; left: 30px; transform: scaleX(-1); }

.nw-pill { position: absolute; left: 50%; top: calc(var(--cy) + 165px); z-index: 2; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 13px 6px 9px; transform: translateX(-50%); border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.nw-pill .nw-odo { --lh: 1.3em; color: var(--blue-t); }
.nw-pill-ck { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--green); fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nw-pill-ck path { stroke-dasharray: 1; }
.nw.is-armed .nw-pill { transition: opacity 360ms var(--e-out), transform 600ms var(--e-settle); }
.nw.is-armed .nw-pill-ck path { transition: stroke-dashoffset 420ms var(--e-in-out); }
.nw.is-armed .nw-stage.is-nopill .nw-pill { opacity: 0; transform: translate(-50%, 8px); }
.nw.is-armed .nw-stage.is-nock .nw-pill-ck path { stroke-dashoffset: 1; }

.nw-port { position: absolute; z-index: 2; --ang: var(--a); left: calc(50% + cos(var(--ang)) * var(--rx)); top: calc(var(--cy) + sin(var(--ang)) * var(--ry)); width: 86px; padding: 0; margin: 0; transform: translate(-50%, -24px); display: flex; flex-direction: column; align-items: center; background: none; border: 0; border-radius: 14px; font: inherit; cursor: pointer; }
.nw-port .nw-tile { position: relative; transition: border-color 200ms; }
.nw-pname { margin-top: 6px; max-width: 86px; color: var(--muted); font-size: .72rem; font-weight: 650; line-height: 1.15; text-align: center; }
.nw-badge { position: absolute; bottom: calc(100% - 50px + 54px); left: 50%; translate: -50% 0; padding: 3px 8px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .66rem; font-weight: 750; line-height: 1.3; white-space: nowrap; }
.nw-tip { position: absolute; top: calc(100% + 6px); left: 50%; z-index: 6; translate: -50% 0; padding: 6px 9px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: .72rem; font-weight: 650; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 160ms; }
.nw-port:hover .nw-tip, .nw-port:focus-visible .nw-tip { opacity: 1; }
.nw-port:hover .nw-tile, .nw-port:focus-visible .nw-tile { border-color: var(--blue); }
.nw-port:hover, .nw-port:focus-visible { z-index: 7; }
.nw.is-armed .nw-port .nw-tile, .nw.is-armed .nw-pname { transition: transform 620ms var(--e-pop), opacity 260ms var(--e-out), border-color 200ms; }
.nw.is-armed .nw-port.is-off .nw-tile { opacity: 0; transform: scale(.4); }
.nw.is-armed .nw-port.is-off .nw-pname { opacity: 0; transform: translateY(-6px); }
.nw.is-armed .nw-badge { transition: transform 520ms var(--e-pop), opacity 200ms; }
.nw.is-armed .nw-port.is-nob .nw-badge { opacity: 0; transform: translateY(6px) scale(.5); transition: transform 280ms var(--e-in), opacity 220ms; }
/* Side badges on wider screens. After the generic is-nob rule on purpose:
   same specificity, so the later rule decides the exit direction. */
@media (min-width: 761px) {
  .nw-port--r .nw-badge, .nw-port--l .nw-badge { bottom: auto; top: 13px; translate: none; }
  .nw-port--r .nw-badge { left: calc(50% + 30px); }
  .nw-port--l .nw-badge { left: auto; right: calc(50% + 30px); }
  .nw.is-armed .nw-port--r.is-nob .nw-badge { transform: translateX(-8px) scale(.5); }
  .nw.is-armed .nw-port--l.is-nob .nw-badge { transform: translateX(8px) scale(.5); }
}
.nw-pk { position: absolute; left: 0; top: 0; z-index: 1; width: 11px; height: 8px; border-radius: 2.5px; background: var(--blue); offset-rotate: auto; opacity: 0; pointer-events: none; }

.nw-pause { position: absolute; inset-inline-end: 0; bottom: 0; z-index: 8; display: none; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); }
.nw.is-armed .nw-pause { display: grid; }
.nw-pause svg { width: 14px; height: 14px; fill: currentColor; }
.nw-pause-g, .nw-pause[aria-pressed=true] .nw-pause-p { display: none; }
.nw-pause[aria-pressed=true] .nw-pause-g { display: block; }

@media (max-width: 760px) {
  .nw-hero { padding-block: 6.5rem 3rem; }
  .nw-stage { height: 440px; margin-top: 2.25rem; --ang: var(--am); --rx: calc(50% - 34px); --ry: 168px; --cy: 47%; }
  .nw-port { --ang: var(--am); }
  .nw-comp { transform: translate(-50%, -50%) scale(.6); }
  .nw-pill { top: auto; bottom: 0; font-size: .74rem; }
  .nw-port { width: 70px; transform: translate(-50%, -19px); }
  .nw-port .nw-tile { width: 38px; height: 38px; border-radius: 11px; }
  .nw-pname { max-width: 70px; font-size: .64rem; }
  /* No room for a badge above every tile on a phone: the format badge takes
     the name's place under the tile while the post is out, then the name
     comes back. Without motion the names stay and the badges stay hidden. */
  .nw-badge { bottom: auto; top: 43px; font-size: .6rem; padding: 2px 6px; }
  .nw:not(.is-armed) .nw-badge { display: none; }
  .nw.is-armed .nw-port:not(.is-nob):not(.is-off) .nw-pname { opacity: 0; transition: opacity 160ms; }
  .nw-pause { bottom: auto; top: -6px; width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------- explorer */
.nw-rail-wrap { margin-top: 2.5rem; }
.nw-rail { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; padding: .4rem; border-radius: 1.4rem; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.nw-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .45rem; border: 0; border-radius: 999px; background: none; color: var(--body); font: inherit; font-size: .88rem; font-weight: 650; cursor: pointer; transition: color 220ms; white-space: nowrap; }
.nw-tab-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #e6ebf4; }
.nw-tab-logo img { width: 16px; height: 16px; -o-object-fit: contain; object-fit: contain; }
.nw-tab[aria-selected=true] { background: var(--blue); color: #fff; }
.nw-rail.has-ind .nw-tab[aria-selected=true] { background: none; }
@media (hover: hover) { .nw-tab:hover { color: var(--ink); } .nw-tab[aria-selected=true]:hover { color: #fff; } }
/* Two tidy rows (7 + 6) on desktop; the indicator measures whatever the
   layout is, so it follows the grid as well as the phone's scroller. */
@media (min-width: 1100px) {
  .nw-rail { display: grid; grid-template-columns: repeat(7, auto); justify-content: space-between; }
}
.nw-ind { position: absolute; left: 0; top: 0; z-index: 0; display: none; border-radius: 999px; background: var(--blue); transform-origin: 0 0; }
.nw-rail.has-ind .nw-ind { display: block; }
@media (max-width: 760px) {
  .nw-rail-wrap { margin-inline: -1rem; padding-inline: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .nw-rail-wrap::-webkit-scrollbar { display: none; }
  .nw-rail { flex-wrap: nowrap; width: -moz-max-content; width: max-content; border-radius: 999px; }
  .nw-tab { scroll-snap-align: center; }
}

.nw-ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; margin-top: 2.5rem; align-items: start; }
/* Without JS the explorer is a plain stack: every network's facts, no rail. */
.nw:not(.nw-js) [data-nw-js-only] { display: none !important; }
.nw-js .nw-panel[data-nw-later] { display: none; }
.nw-pause--ex { inset-inline-end: 14px; bottom: 14px; top: auto; }
.nw-ex-stage { position: sticky; top: 96px; display: grid; place-items: center; height: 470px; border-radius: 1.4rem; background: var(--tint); border: 1px solid var(--line); }
.nw-frame { position: relative; width: var(--fw); height: var(--fh); border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-l); overflow: hidden; }
.nw.is-armed .nw-frame { transition: width 620ms var(--e-settle), height 620ms var(--e-settle), border-radius 620ms var(--e-settle); }
.nw-frame.is-reel { border-radius: 26px; }
.nw-frame-logo { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #e6ebf4; opacity: 0; transform: scale(.6); transition: opacity 260ms, transform 420ms var(--e-pop); }
.nw-frame-logo img { width: 16px; height: 16px; -o-object-fit: contain; object-fit: contain; }
.nw-frame-logo[data-net=instagram] { opacity: 1; transform: none; }
.nw-frame.has-js .nw-frame-logo:not(.is-cur) { opacity: 0; transform: scale(.6); }
.nw-frame.has-js .nw-frame-logo.is-cur { opacity: 1; transform: none; }

.nw-scene { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 0s 200ms; }
.nw-scene.is-cur { opacity: 1; visibility: visible; transition: opacity 360ms var(--e-out) 140ms; }
.nw-sk { display: block; flex: none; height: 8px; border-radius: 4px; background: var(--sk); }
.nw-sk--h { height: 14px; border-radius: 6px; background: var(--sk-2); }
.nw-sk--b { height: 11px; background: var(--sk-2); }
.nw-sav { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ib); }
.nw-sav--s { width: 14px; height: 14px; }
.nw-sc-top { display: flex; align-items: center; gap: 8px; flex: none; -webkit-padding-end: 36px; padding-inline-end: 36px; }
.nw-sc-txt { display: grid; gap: 6px; flex: none; }
.nw-blk { flex: none; border-radius: 12px; background: var(--ib); }
.nw-ctr { position: absolute; z-index: 2; padding: 3px 7px; border-radius: 999px; background: rgba(15,23,42,.74); color: #fff; font-size: .68rem; font-weight: 750; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Instagram: post with carousel dots, then a Reel. */
.nw-ig-media { position: relative; flex: 1; border-radius: 12px; background: var(--ib); overflow: hidden; transition: border-radius 400ms; }
.nw-ig-art i, .nw-tt-art i, .nw-pin-img i { position: absolute; display: block; border-radius: 50%; }
.nw-ig-art i:nth-child(1) { width: 34px; height: 34px; top: 22%; inset-inline-end: 22%; background: var(--blue); }
.nw-ig-art i:nth-child(2) { width: 150%; height: 70%; left: -40%; bottom: -38%; background: var(--blue-2); }
.nw-ig-art i:nth-child(3) { width: 120%; height: 60%; right: -50%; bottom: -36%; background: var(--blue-3); }
.nw-ig-media .nw-ctr { top: 10px; inset-inline-start: 10px; }
.nw-ig-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255,255,255,.92); opacity: 0; transform: scale(.6); transition: opacity 300ms, transform 520ms var(--e-pop); }
.nw-ig-play::after { content: ''; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--blue-3); }
.nw-ig-bar { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.45); overflow: hidden; opacity: 0; }
.nw-ig-bar i { display: block; height: 100%; background: #fff; transform-origin: left center; transform: scaleX(.35); }
[dir=rtl] .nw-ig-bar i { transform-origin: right center; }
.nw-ig-dots { display: flex; justify-content: center; gap: 4px; flex: none; }
.nw-ig-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); transition: background-color 200ms, transform 300ms var(--e-pop); }
.nw.is-armed .nw-scene.is-run .nw-ig-dots i:not(.on) { background: var(--sk-2); transform: scale(.7); }
.nw-sc-instagram .nw-sc-top, .nw-sc-instagram .nw-ig-dots, .nw-sc-instagram .nw-sc-txt { transition: opacity 260ms; }
.nw-sc-instagram.is-alt { padding: 0; }
.nw-sc-instagram.is-alt .nw-sc-top, .nw-sc-instagram.is-alt .nw-ig-dots, .nw-sc-instagram.is-alt .nw-sc-txt, .nw-sc-instagram.is-alt .nw-ctr { display: none; }
.nw-sc-instagram.is-alt .nw-ig-media { border-radius: 0; }
.nw-sc-instagram.is-alt .nw-ig-play { opacity: 1; transform: none; }
.nw-sc-instagram.is-alt .nw-ig-bar { opacity: 1; }
.nw-sc-instagram.is-alt .nw-ig-bar i { animation: nw-bar 2.6s linear forwards; }
@keyframes nw-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Facebook: comments stacking under the post. */
.nw-sc-facebook { gap: 8px; }
.nw-cm { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.nw-cm li { display: flex; align-items: center; gap: 6px; height: 18px; padding-inline: 6px; border-radius: 9px; background: var(--soft-2); transition: opacity 260ms var(--e-out), transform 420ms var(--e-settle); }
.nw-cm .nw-sk { height: 6px; }
.nw-cm .nw-sav--s { width: 11px; height: 11px; }
.nw.is-armed .nw-scene.is-run .nw-cm li:not(.on) { opacity: 0; transform: translateY(8px); }

/* TikTok: 9:16, action column, photo carousel stepper. */
.nw-sc-tiktok { background: #101828; color: #fff; }
.nw-tt-steps { display: flex; gap: 2px; flex: none; }
.nw-tt-steps i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.9); transition: background-color 120ms; }
.nw.is-armed .nw-scene.is-run .nw-tt-steps i:not(.on) { background: rgba(255,255,255,.22); }
.nw-sc-tiktok .nw-ctr { top: 28px; inset-inline-start: 16px; background: rgba(255,255,255,.16); }
.nw-tt-art { position: relative; flex: 1; border-radius: 12px; overflow: hidden; background: #1b2a4e; margin-top: 26px; }
.nw-tt-art i:nth-child(1) { width: 90px; height: 90px; top: 18%; left: 22%; background: var(--blue); }
.nw-tt-art i:nth-child(2) { width: 160%; height: 50%; left: -30%; bottom: -24%; background: var(--blue-3); }
.nw-tt-col { position: absolute; inset-inline-end: 22px; bottom: 92px; display: grid; gap: 12px; }
.nw-tt-col i { display: block; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.9); }
.nw-tt-col i:first-child { border-radius: 8px; }
.nw-tt-txt { display: grid; gap: 6px; flex: none; -webkit-padding-end: 50px; padding-inline-end: 50px; }
.nw-tt-txt .nw-sk { background: rgba(255,255,255,.4); }
.nw-sc-tiktok ~ .nw-frame-logo[data-net=tiktok] { box-shadow: none; }

/* LinkedIn: document pages turning. */
.nw-doc { position: relative; flex: 1; border-radius: 12px; background: var(--soft-2); perspective: 900px; }
.nw-doc-base, .nw-doc-pg { position: absolute; inset: 14px; display: grid; align-content: start; gap: 8px; padding: 14px; border-radius: 8px; background: var(--card); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 6px 14px -8px rgba(15,23,42,.25); }
.nw-doc-pg { z-index: var(--z); transform-origin: left center; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(-178deg); opacity: 0; }
[dir=rtl] .nw-doc-pg { transform-origin: right center; transform: rotateY(178deg); }
.nw-doc-pg b { display: block; height: 52px; border-radius: 6px; background: var(--ib); }
.nw.is-armed .nw-doc-pg { transition: transform 760ms var(--e-in-out), opacity 0s 380ms; }
.nw.is-armed .nw-scene.is-run .nw-doc-pg:not(.on) { transform: none; opacity: 1; transition: none; }
.nw-doc .nw-ctr { bottom: 22px; inset-inline-end: 22px; z-index: 9; }

/* YouTube: player and a title that types to its limit. */
.nw-yt-player { position: relative; flex: none; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--navy); overflow: hidden; }
.nw-yt-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 32px; margin: -16px 0 0 -23px; border-radius: 9px; background: rgba(255,255,255,.94); }
.nw-yt-play::after { content: ''; position: absolute; left: 18px; top: 9px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--navy); }
.nw-yt-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); }
.nw-yt-prog i { display: block; width: 38%; height: 100%; background: var(--blue); }
.nw-yt-title { display: flex; align-items: center; gap: 8px; flex: none; }
.nw-yt-type { flex: 1; height: 13px; border-radius: 6px; background: var(--sk-2); transform-origin: left center; }
[dir=rtl] .nw-yt-type { transform-origin: right center; }
.nw-yt-title .nw-ctr { position: static; background: var(--tint); color: var(--blue-t); }
.nw.is-armed .nw-yt-type { transition: transform 1500ms cubic-bezier(.3,.1,.3,1); }
.nw.is-armed .nw-scene.is-run .nw-yt-type:not(.on) { transform: scaleX(.04); }

/* X, Threads, Bluesky, Mastodon: a thread filling in. */
.nw-th-main { display: grid; gap: 10px; flex: none; padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.nw-th-main .nw-sc-top { -webkit-padding-end: 30px; padding-inline-end: 30px; }
.nw-th { position: relative; list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.nw-th::before { content: ''; position: absolute; inset-inline-start: 18px; top: -10px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--line-2); }
.nw-th li { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; padding-inline: 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); transition: opacity 260ms var(--e-out), transform 480ms var(--e-settle); }
.nw-th li .nw-sk { flex: 0 1 auto; height: 6px; }
.nw-th li b { -webkit-margin-start: auto; margin-inline-start: auto; color: var(--muted); font-size: .66rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.nw-th--tight { gap: 4px; }
.nw-th--tight li { height: 23px; }
.nw.is-armed .nw-scene.is-run .nw-th li:not(.on) { opacity: 0; transform: translateY(-10px) scale(.96); }

/* Pinterest */
.nw-pin-img { position: relative; flex: 1; border-radius: 18px; background: var(--ib); overflow: hidden; }
.nw-pin-img i:nth-child(1) { width: 70%; height: 46%; left: 15%; top: 16%; border-radius: 40% 40% 12px 12px; background: var(--blue-2); }
.nw-pin-img i:nth-child(2) { width: 30px; height: 30px; right: 18%; top: 10%; background: var(--blue); }
.nw-pin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.nw-pin-board { display: inline-flex; align-items: center; gap: 6px; width: 60%; height: 26px; padding-inline: 8px; border-radius: 999px; background: var(--soft-2); border: 1px solid var(--line); }
.nw-pin-board i { width: 12px; height: 12px; border-radius: 4px; background: var(--blue); flex: none; }
.nw-pin-link { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); }
.nw.is-armed .nw-pin-img { transition: -webkit-clip-path 760ms var(--e-out); transition: clip-path 760ms var(--e-out); transition: clip-path 760ms var(--e-out), -webkit-clip-path 760ms var(--e-out); -webkit-clip-path: inset(0 0 0 0 round 18px); clip-path: inset(0 0 0 0 round 18px); }
.nw.is-armed .nw-pin-board, .nw.is-armed .nw-pin-link { transition: transform 520ms var(--e-pop), opacity 200ms; }
.nw.is-armed .nw-scene.is-run .nw-pin-img:not(.on) { -webkit-clip-path: inset(100% 0 0 0 round 18px); clip-path: inset(100% 0 0 0 round 18px); }
.nw.is-armed .nw-scene.is-run .nw-pin-board:not(.on), .nw.is-armed .nw-scene.is-run .nw-pin-link:not(.on) { opacity: 0; transform: scale(.5); }

/* Google Business Profile: the call-to-action button cycles. */
.nw-gb-btn { position: relative; flex: none; height: 38px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .82rem; font-weight: 750; overflow: hidden; }
.nw-gb-btn span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(100%); transition: transform 460ms var(--e-out), opacity 260ms; }
.nw-gb-btn span.is-show { opacity: 1; transform: none; }
.nw-gb-btn span.is-was { transform: translateY(-100%); }

/* Telegram: channel bubble with an album. */
.nw-sc-telegram { background: var(--soft-2); }
.nw-tg-head { display: flex; align-items: center; gap: 8px; flex: none; padding-bottom: 10px; border-bottom: 1px solid var(--line); -webkit-padding-end: 36px; padding-inline-end: 36px; }
.nw-tg-bubble { display: grid; gap: 8px; align-self: start; width: 88%; margin-top: 4px; padding: 6px 6px 10px; border-radius: 16px; border-end-start-radius: 5px; background: var(--card); box-shadow: var(--shadow); }
.nw-tg-album { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.nw-tg-album i { aspect-ratio: 1; border-radius: 6px; background: var(--ib); transition: transform 520ms var(--e-pop), opacity 220ms; }
.nw-tg-album i:nth-child(1) { border-start-start-radius: 12px; background: var(--blue); }
.nw-tg-album i:nth-child(2) { border-start-end-radius: 12px; }
.nw-tg-album i:nth-child(4) { background: var(--blue-2); }
.nw-tg-bubble .nw-sc-txt { padding-inline: 6px; }
.nw-tg-bubble .nw-ctr { position: static; justify-self: end; -webkit-margin-end: 4px; margin-inline-end: 4px; background: var(--tint); color: var(--blue-t); }
.nw.is-armed .nw-scene.is-run .nw-tg-album i:not(.on) { opacity: 0; transform: scale(.6); }

/* WordPress: an article. */
.nw-sc-wordpress { gap: 9px; }
.nw-sc-wordpress > .nw-sk--h:first-child { -webkit-margin-end: 34px; margin-inline-end: 34px; }
.nw-wp-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: none; }
.nw-wp-chips i { width: 50px; height: 16px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); transition: transform 520ms var(--e-pop), opacity 200ms; }
.nw-wp-chips i.is-cat { background: var(--blue); border-color: transparent; }
.nw.is-armed .nw-sc-wordpress .nw-blk { transition: -webkit-clip-path 700ms var(--e-out); transition: clip-path 700ms var(--e-out); transition: clip-path 700ms var(--e-out), -webkit-clip-path 700ms var(--e-out); -webkit-clip-path: inset(0 0 0 0 round 12px); clip-path: inset(0 0 0 0 round 12px); }
.nw.is-armed .nw-scene.is-run .nw-sc-wordpress .nw-blk:not(.on), .nw.is-armed .nw-sc-wordpress.is-run .nw-blk:not(.on) { -webkit-clip-path: inset(0 0 100% 0 round 12px); clip-path: inset(0 0 100% 0 round 12px); }
.nw.is-armed .nw-scene.is-run .nw-wp-chips i:not(.on) { opacity: 0; transform: scale(.4); }

/* Panels */
.nw-panel:focus-visible { border-radius: .75rem; }
.nw-pan-h { display: flex; align-items: center; gap: .75rem; margin: 0; color: var(--ink); font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.nw-pan-lede { margin: .8rem 0 1.25rem; font-size: 1.06rem; line-height: 1.6; }
.nw-facts { margin: 0; border-top: 1px solid var(--line); }
.nw-fact { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.nw-fact dt { padding-top: .15rem; color: var(--muted); font-size: .74rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.nw-fact dd { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.55; }
.nw-num { font-weight: 780; color: var(--blue-t); font-variant-numeric: tabular-nums; }
.nw-num { --lh: 1.55em; }
.nw-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.nw-chips li { padding: .25rem .7rem; border-radius: 999px; background: var(--tint); color: var(--blue-t); font-size: .82rem; font-weight: 680; }
.nw-pan-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: 1.4rem; }
.nw-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--blue-t); font-weight: 720; text-decoration: none; }
.nw-link--s { color: var(--muted); font-size: .9rem; font-weight: 620; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
@media (hover: hover) { .nw-link--s:hover { color: var(--blue-t); } }
@media (max-width: 900px) {
  .nw-ex { grid-template-columns: 1fr; gap: 2rem; }
  .nw-ex-stage { position: relative; top: 0; height: 440px; }
}
@media (max-width: 520px) { .nw-fact { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------------------------------------------------------------- fit */
.nw-fit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; margin-top: 2.5rem; align-items: start; }
.nw-fit-in { position: sticky; top: 96px; }
.nw-fit-card { padding: 1.25rem; }
.nw-fit-l { display: block; margin-bottom: .55rem; color: var(--ink); font-size: .9rem; font-weight: 720; }
.nw-fit-ta { display: block; width: 100%; min-height: 11.5rem; padding: .85rem 1rem; border: 1px solid var(--line-2); border-radius: .85rem; background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.55; resize: vertical; }
.nw-fit-ta:focus { border-color: var(--blue); }
.nw-fit-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .8rem; }
.nw-fit-n { color: var(--ink); font-weight: 760; font-variant-numeric: tabular-nums; }
.nw-fit-btns { display: flex; gap: .5rem; }
.nw-fit-sum { margin: .7rem 0 0; color: var(--muted); font-size: .9rem; }
.nw-foot { list-style: none; display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.nw-fit-rows { list-style: none; display: grid; gap: .5rem; margin: 0; padding: 0; }
.nw-fr { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; grid-template-areas: "net lim st" "track track track"; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; border-radius: .95rem; background: var(--card); border: 1px solid var(--line); }
.nw-fr-net { grid-area: net; display: flex; align-items: center; gap: .6rem; min-width: 0; color: var(--ink); font-size: .93rem; font-weight: 720; }
.nw-fr-lim { grid-area: lim; color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.nw-fr-st { grid-area: st; font-size: .82rem; font-weight: 720; }
.nw-fr-track { grid-area: track; position: relative; height: 6px; border-radius: 3px; background: var(--soft-2); overflow: hidden; }
.nw-fr-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--blue); transform-origin: left center; transform: scaleX(var(--f)); }
[dir=rtl] .nw-fr-fill { transform-origin: right center; }
.nw-fr-notch { display: none; position: absolute; top: 0; bottom: 0; inset-inline-end: 7px; width: 2px; background: var(--card); }
.nw-fr.is-close .nw-fr-fill { background: var(--amber-f); }
.nw-fr.is-over .nw-fr-fill { background: var(--red-f); }
.nw-fr.is-over .nw-fr-notch { display: block; }
.nw-st { display: none; align-items: center; gap: .3rem; }
.nw-fr.is-fits .nw-st--fits { display: inline-flex; color: var(--green-t); }
.nw-fr.is-close .nw-st--close { display: inline-flex; color: var(--amber); }
.nw-fr.is-over .nw-st--over { display: inline-flex; color: var(--red); }
.nw.is-armed .nw-fr { transition: opacity 500ms var(--e-out) calc(var(--i) * 35ms), transform 700ms var(--e-out) calc(var(--i) * 35ms), border-color 200ms; }
.nw.is-armed .nw-fr-fill { transition: transform 380ms var(--e-settle) calc(var(--i) * 35ms + 260ms), background-color 200ms; }
.nw.is-armed .nw-fit-rows.is-live .nw-fr-fill { transition-delay: 0s; }
.nw.is-armed .nw-fit-rows:not(.is-in) .nw-fr { opacity: 0; transform: translateX(-18px); }
.nw.is-armed [dir=rtl] .nw-fit-rows:not(.is-in) .nw-fr, [dir=rtl].nw.is-armed .nw-fit-rows:not(.is-in) .nw-fr { transform: translateX(18px); }
.nw.is-armed .nw-fit-rows:not(.is-in) .nw-fr-fill { transform: scaleX(0); }
@media (max-width: 900px) {
  .nw-fit { grid-template-columns: 1fr; gap: 2rem; }
  .nw-fit-in { position: static; }
}
@media (max-width: 520px) { .nw-fr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "net st" "lim lim" "track track"; gap: .3rem .75rem; } }

/* ---------------------------------------------------------------- after */
.nw-tbl-wrap { margin-top: 2.5rem; overflow-x: auto; border-radius: 1.2rem; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.nw-tbl { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; }
.nw-tbl th, .nw-tbl td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; transition: opacity 200ms; }
.nw-tbl thead th { background: var(--soft); color: var(--muted); font-size: .72rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.nw-tbl tbody tr:last-child > * { border-bottom: 0; }
.nw-tbl .nw-tbl-net { position: sticky; inset-inline-start: 0; z-index: 1; text-align: start; white-space: nowrap; background: var(--card); box-shadow: inset -1px 0 0 var(--line); }
[dir=rtl] .nw-tbl .nw-tbl-net { box-shadow: inset 1px 0 0 var(--line); }
.nw-tbl thead .nw-tbl-net { background: var(--soft); }
.nw-tbl-net .nw-tile { display: inline-grid; vertical-align: middle; }
.nw-tbl-net .nw-tag { max-width: 10.5rem; white-space: normal; }
.nw-tbl-name { display: inline-flex; max-width: 11.5rem; flex-direction: column; align-items: flex-start; gap: .25rem; -webkit-margin-start: .6rem; margin-inline-start: .6rem; vertical-align: middle; color: var(--ink); font-size: .92rem; font-weight: 720; white-space: normal; }
.nw-dot { display: block; width: 12px; height: 12px; margin: 0 auto .35rem; border-radius: 50%; background: var(--blue); }
.nw-dot--no { margin-bottom: 0; background: none; box-shadow: inset 0 0 0 1.5px var(--sk-2); }
.nw-cell-l { display: block; color: var(--body); font-size: .8rem; line-height: 1.3; }
.nw-tbl td .nw-tag { margin-top: .4rem; }
.nw.is-armed .nw-dot { transition: transform 560ms var(--e-pop) calc(var(--k) * 28ms); }
.nw.is-armed .nw-tbl-wrap:not(.is-in) .nw-dot { transform: scale(0); }
/* The sticky first column stays opaque, or scrolled cells would show
   through it; its contents dim instead. */
.nw-tbl.is-cross .is-dim:not(.nw-tbl-net) { opacity: .42; }
.nw-tbl.is-cross .nw-tbl-net.is-dim > * { opacity: .42; }
.nw-tbl th[data-col].is-hl { color: var(--blue-t); }

/* ---------------------------------------------------------------- integrations */
.nw-board { position: relative; margin-top: 3rem; }
.nw-cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nw-cables path { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke 220ms; }
.nw-cables path.is-hot { stroke: var(--blue); }
.nw.is-armed .nw-cables path { transition: stroke 220ms, stroke-dashoffset 900ms var(--e-in-out); }
.nw.is-armed .nw-cables path.is-off { stroke-dashoffset: 1; }
.nw-pulse { position: absolute; left: 0; top: 0; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); opacity: 0; pointer-events: none; }
.nw-hub { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; width: -moz-max-content; width: max-content; margin: 0 auto 3.5rem; }
.nw-hub-tile { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: #fff; border: 1px solid #e6ebf4; box-shadow: var(--shadow-l); }
.nw-hub-tile img { width: 46px; height: 46px; -o-object-fit: contain; object-fit: contain; }
.nw-hub-t { color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.nw.is-armed .nw-hub-tile { transition: transform 520ms var(--e-pop); }
.nw-hub.is-ping .nw-hub-tile { transform: scale(1.06); transition-duration: 120ms; }
.nw-groups { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.25rem; }
.nw-group-h { margin: 0 0 .9rem; -webkit-padding-start: 1.75rem; padding-inline-start: 1.75rem; color: var(--muted); font-size: .76rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.nw-plugs { list-style: none; display: grid; gap: .6rem; margin: 0; padding: 0; -webkit-padding-start: 1.75rem; padding-inline-start: 1.75rem; }
.nw-plug { position: relative; display: flex; align-items: center; gap: .8rem; padding: .75rem 1.6rem .75rem .8rem; border-radius: 1rem; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color 200ms, transform var(--d-micro) var(--e-out); }
[dir=rtl] .nw-plug { padding: .75rem .8rem .75rem 1.6rem; }
.nw-plug-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid #e6ebf4; color: #356dff; font-size: 1.05rem; }
.nw-plug-ic img { width: 22px; height: 22px; -o-object-fit: contain; object-fit: contain; }
.nw-plug-ic.is-multi { display: flex; gap: 3px; width: auto; min-width: 42px; padding-inline: 8px; }
.nw-plug-ic.is-multi img { width: 18px; height: 18px; }
.nw-plug-t { display: grid; gap: .12rem; min-width: 0; }
.nw-plug-t strong, .nw-plug-a { color: var(--ink); font-size: .95rem; font-weight: 720; line-height: 1.3; text-decoration: none; }
.nw-plug-a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.nw-plug-d { color: var(--muted); font-size: .84rem; line-height: 1.42; }
.nw-plug .nw-tag { justify-self: start; margin-top: .3rem; }
.nw-plug-arw { -webkit-margin-start: auto; margin-inline-start: auto; color: var(--muted); }
.nw-led { position: absolute; top: 10px; inset-inline-end: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); transition: background-color 220ms, transform 420ms var(--e-pop); }
.nw.is-armed .nw-plug:not(.is-lit) .nw-led { background: var(--sk-2); transform: scale(.8); }
.nw.is-armed .nw-plug { transition: opacity 500ms var(--e-out) calc(var(--i) * 40ms), transform 700ms var(--e-out) calc(var(--i) * 40ms), border-color 200ms; }
.nw.is-armed .nw-board:not(.is-in) .nw-plug { opacity: 0; transform: translateY(12px); }
@media (hover: hover) {
  .nw-plug:hover { border-color: var(--blue); }
  .nw-plug.has-link:hover .nw-plug-arw { color: var(--blue-t); }
}
.nw-plug:active { transform: scale(.985); }
@media (max-width: 900px) {
  .nw-groups { grid-template-columns: 1fr; }
  .nw-hub { margin-inline: 0; margin-bottom: 2.5rem; align-items: flex-start; }
}

/* ---------------------------------------------------------------- faq */
.nw-faq-wrap { max-width: 54rem; }
.nw-faq { display: grid; gap: .75rem; margin-top: 2rem; }
.nw-qa { border-radius: 1rem; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.nw-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; color: var(--ink); font-size: 1.03rem; font-weight: 720; line-height: 1.4; list-style: none; cursor: pointer; border-radius: 1rem; }
.nw-qa summary::-webkit-details-marker { display: none; }
.nw-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 360ms var(--e-settle); }
.nw-qa[open]:not(.is-shut) .nw-chev { transform: rotate(180deg); }
.nw-qa-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 380ms var(--e-out); }
.nw-qa.is-shut .nw-qa-a { grid-template-rows: 0fr; }
.nw-qa-a > div { overflow: hidden; }
.nw-qa-a p { margin: 0; padding: 0 1.25rem 1.2rem; line-height: 1.65; }

/* ---------------------------------------------------------------- cta */
.nw-cta-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 3.5rem; align-items: center; }
.nw-cal { padding: 1.1rem; }
.nw-cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.nw-cal-top i { width: 96px; height: 10px; border-radius: 5px; background: var(--sk-2); }
.nw-cal-top b { display: inline-block; width: 22px; height: 22px; -webkit-margin-start: 6px; margin-inline-start: 6px; border-radius: 7px; border: 1px solid var(--line); }
.nw-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nw-day { position: relative; aspect-ratio: 1; padding: 4px 6px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.nw-day em { font-style: normal; color: var(--muted); font-size: .66rem; font-weight: 650; }
.nw-day.is-out em { opacity: .5; }
.nw-day.is-post { background: var(--tint); }
.nw-day-logo { position: absolute; inset-inline-end: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #e6ebf4, 0 4px 10px -4px rgba(15,23,42,.3); }
.nw-day-logo img { width: 13px; height: 13px; -o-object-fit: contain; object-fit: contain; }
.nw-day-ck { position: absolute; top: 4px; inset-inline-end: 4px; width: 11px; height: 11px; fill: none; stroke: var(--green-t); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nw-day-ck path { stroke-dasharray: 1; }
.nw.is-armed .nw-day-logo { transition: transform 640ms var(--e-pop) calc(var(--j) * 60ms + 200ms), opacity 220ms calc(var(--j) * 60ms + 200ms); }
.nw.is-armed .nw-day-ck path { transition: stroke-dashoffset 320ms var(--e-in-out) calc(var(--j) * 60ms + 620ms); }
.nw.is-armed .nw-cal:not(.is-in) .nw-day-logo { opacity: 0; transform: translateY(-140%) scale(.6); }
.nw.is-armed .nw-cal:not(.is-in) .nw-day-ck path { stroke-dashoffset: 1; }
@media (max-width: 900px) { .nw-cta-in { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 420px) { .nw-day-logo { width: 22px; height: 22px; border-radius: 7px; } .nw-day-logo img { width: 13px; height: 13px; } .nw-day-ck { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nw *, .nw *::before, .nw *::after { animation: none !important; transition: none !important; }
}

/* Browsers without CSS trig functions (Safari before 15.4, Chrome before
   111, Firefox before 108) cannot place the ports on the ring: show the
   composer with the ports in tidy rows under it instead. */
@supports not (left: calc(1px * cos(0deg))) {
  .nw-stage { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem .5rem; padding-top: 1rem; }
  .nw-comp { position: relative; left: auto; top: auto; flex: 0 0 100%; max-width: 272px; margin: 0 calc(50% - 136px) 1rem; transform: none; }
  .nw-port { position: relative; left: auto; top: auto; transform: none; }
  .nw-wires, .nw-pill, .nw-badge { display: none; }
}