/* KT Console: shared styles for the marketing site, sign-up and onboarding.
   Design source: the design canvas "KT Capture website" (see HANDOFF.md).
   Warm paper ground, ink text, one coral accent, Instrument Sans display over Inter.
   Light only by design: dark sections (hero card, pricing, closing band) are part of the layout. */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --disp: "Instrument Sans", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --paper: #FBFAF8;
  --sand: #F2EFEA;
  --field: #F7F5F3;
  --white: #FFFFFF;
  --ink: #121219;
  --ink-2: #4A4A55;
  --ink-3: #5E5C69;
  --ink-dim: #8A8794;        /* second line of headlines; large text only */
  --on-dark-2: #B9B8C6;
  --on-dark-dim: #9C9AAB;
  --line: rgba(30, 30, 60, .08);
  --line-2: rgba(30, 30, 60, .16);
  --skel: #EFEDF2;
  --pill: #F3F1F5;

  --accent: #C93A1E;          /* 5.1:1 with white text */
  --accent-ring: rgba(201, 58, 30, .14);
  --ok: #0F6E4D; --ok-bg: #E3F3EC; --ok-dot: #13865F;
  --info: #4B3BC4; --info-bg: #ECE9FD;
  --act: #A8321A; --act-bg: #FBE6E0;
  --warn: #7A4E00; --warn-bg: #FFF4DD;
  --bad: #B02E17; --bad-line: #C2341B; --bad-ring: rgba(194, 52, 27, .1);

  --sh-card: 0 30px 70px -40px rgba(40, 30, 90, .35);
  --sh-page: 0 1px 2px rgba(30, 30, 60, .08), 0 40px 80px -40px rgba(40, 30, 90, .4);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { font-family: var(--font); font-size: 16px; line-height: 1.55; letter-spacing: -.011em; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, .disp { font-family: var(--disp); font-stretch: 92%; letter-spacing: -.03em; line-height: 1.02; font-weight: 640; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }
.h-dim { color: var(--ink-dim); }
.cap { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.mono { font-family: var(--mono); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 630; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-k { background: var(--ink); color: #fff; }
.btn-k:hover { background: #26262f; color: #fff; }
.btn-p { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(201, 58, 30, .7); }
.btn-p:hover { background: #B5361C; color: #fff; }
.btn-s { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); }
.btn-s:hover { color: var(--ink); background: var(--paper); }
.btn-g { background: transparent; color: var(--ink-2); padding: 0 16px; }
.btn-g:hover { color: var(--ink); background: rgba(18, 18, 25, .05); }
.btn-w { background: #fff; color: var(--ink); }
.btn-w:hover { color: var(--ink); background: #F3F1F5; }
.btn-o { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .24); }
.btn-o:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* ---------- chips and evidence tags ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--pill); color: var(--ink-2); white-space: nowrap; }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-info { background: var(--info-bg); color: var(--info); }
.chip-act { background: var(--act-bg); color: var(--act); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-dot); }
.tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; vertical-align: 1px; }
.tag.ev { background: var(--ok-bg); color: var(--ok); }
.tag.inf { background: var(--info-bg); color: var(--info); }
.tag.act { background: var(--act-bg); color: var(--act); }
.tick { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ok-dot); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* official product logos (assets/logos), used beside their names */
.lg { display: inline-block; width: 16px; height: 16px; object-fit: contain; flex: none; }
.srcchip .lg, .clegend .lg { width: 12px; height: 12px; }
.pnode .ic .lg { width: 20px; height: 20px; }
.conn .ic .lg { width: 22px; height: 22px; }
.frags .lg { width: 18px; height: 18px; }
.files .lg { width: 14px; height: 18px; }
.doc-card .meta .lg { width: 16px; height: 22px; }
.mini-doc .meta { display: flex; align-items: center; gap: 6px; }
.mini-doc .meta .lg { width: 12px; height: 16px; }
.run-stat p { display: flex; align-items: center; gap: 6px; }
.run-stat .lg { width: 13px; height: 13px; }
.oi-logo { background: rgba(255, 255, 255, .92); }
.oi-logo .lg { width: 18px; height: 18px; }
.slack-toast .from em .lg { width: 12px; height: 12px; }
/* ---------- logo + nav ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 680; font-size: 17px; letter-spacing: -.02em; }
.logo:hover { color: var(--ink); }
.mark { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; flex: none; }
.mark svg { width: 17px; height: 17px; fill: none; stroke: #FF9F7A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-wrap { position: sticky; top: 0; z-index: 20; padding: 16px 20px 0; }
.nav { max-width: 1180px; margin: 0 auto; min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 30px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 40px -24px rgba(40, 30, 90, .35); }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.navlink { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 540; padding: 8px 12px; border-radius: 999px; }
.navlink:hover { color: var(--ink); background: rgba(18, 18, 25, .05); }
.nav-cta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-cta .btn { height: 44px; font-size: 14px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; place-items: center; }
.nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- hero ---------- */
.page { position: relative; overflow: hidden; }
.glow { position: absolute; pointer-events: none; z-index: 0; }
.glow-a { left: -10%; top: -220px; width: 70%; height: 900px; background: radial-gradient(closest-side, rgba(255, 168, 120, .45), rgba(255, 168, 120, 0) 70%); }
.glow-b { right: -12%; top: 60px; width: 60%; height: 900px; background: radial-gradient(closest-side, rgba(150, 130, 255, .28), rgba(150, 130, 255, 0) 70%); }
.hero { padding-top: 88px; padding-bottom: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; }
.badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.badge b { height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 650; }
.hero h1 { font-size: clamp(46px, 6.4vw, 84px); line-height: .98; font-weight: 650; text-wrap: balance; }
.hero h1 .h-dim { display: block; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.assure { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-3); list-style: none; }
.assure li { display: flex; align-items: center; gap: 7px; }

.hero-art { position: relative; min-height: 560px; }
.doc-card { position: absolute; right: 0; top: 0; width: 86%; background: var(--white); border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(40, 30, 90, .35); padding: 34px 34px 28px; display: flex; flex-direction: column; gap: 16px; }
.doc-card .meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.doc-card .gdoc { width: 18px; height: 22px; border-radius: 3px; background: #4285F4; flex: none; }
.doc-card h2 { font-size: 26px; }
.doc-card .sub { font-size: 13px; color: var(--ink-3); }
.doc-card .rule { height: 1px; background: var(--line); }
.doc-card .item { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.doc-card .item b { color: var(--ink); font-weight: 650; }
.skel { height: 9px; border-radius: 5px; background: var(--skel); }
.run-card { position: absolute; left: 0; bottom: 0; width: 62%; min-width: 280px; background: var(--ink); color: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 30px 60px -24px rgba(18, 18, 25, .6); display: flex; flex-direction: column; gap: 12px; }
.run-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.run-head b { font-weight: 650; }
.run-live { display: flex; align-items: center; gap: 7px; color: #7FE0B8; }
.run-live i { width: 7px; height: 7px; border-radius: 50%; background: #4FD6A2; }
.run-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.run-stat { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.run-stat p { font-size: 12px; color: var(--on-dark-2); }
.run-stat strong { font-size: 20px; font-weight: 650; }
.run-stat small { font-size: 12px; color: var(--on-dark-2); font-weight: 500; }
.run-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.run-bar i { display: block; width: 58%; height: 100%; border-radius: inherit; background: #FF8A5C; }

/* ---------- sources strip ---------- */
.sources { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 40px; padding: 22px 0; border-block: 1px solid var(--line); list-style: none; }
.sources .lbl { font-size: 13px; color: var(--ink-3); margin: 0 6px; }
.sources .pill { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }

/* ---------- section scaffolding ---------- */
.sec { padding-top: 120px; }
.sec h2 { font-size: clamp(36px, 4.6vw, 58px); }
.sec .cap + h2 { margin-top: 14px; }
.sec-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px 56px; align-items: end; }
.sec-head > p { font-size: 18px; color: var(--ink-2); max-width: 30em; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-top: 44px; }

/* problem */
.problem h2 { max-width: 16em; text-wrap: balance; }
.problem .grid-3 { gap: 20px; margin-top: 48px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.pcol { padding-top: 20px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 10px; }
.pcol .num { font-family: var(--disp); font-size: 15px; font-weight: 650; color: var(--ink-dim); }
.pcol h3 { font-size: 23px; }
.pcol p { color: var(--ink-2); }

/* how it works */
.card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.card .step-n { font-size: 13px; font-weight: 650; color: var(--accent); }
.card h3 { font-size: 24px; }
.card > p { color: var(--ink-2); font-size: 15.5px; }
.card .foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-radius: 12px; background: var(--paper); border: 1px solid rgba(30, 30, 60, .1); font-size: 14px; min-width: 0; }
.person .em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .role { margin-left: auto; font-size: 12px; color: var(--ink-3); flex: none; }
.av { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; flex: none; background: #E9775A; }
.av.b { background: #6D55F0; }
.srow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper); font-size: 14px; }
.srow .st { margin-left: auto; font-weight: 650; font-size: 12.5px; color: var(--ok); }
.srow .st.run { color: var(--info); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chips .chip { height: 30px; padding: 0 12px; font-size: 13px; font-weight: 600; }

/* the document (sand band) */
.band { margin-top: 120px; background: var(--sand); padding: 110px 0; position: relative; z-index: 1; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 56px; align-items: start; }
.doc-copy { display: flex; flex-direction: column; gap: 22px; }
.doc-copy h2 { font-size: clamp(36px, 4.6vw, 58px); }
.doc-copy > p:not(.cap) { font-size: 18px; color: var(--ink-2); }
.legend { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.legend li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.legend .tag { flex: none; margin-top: 3px; }
.doc-copy .note { font-size: 15px; color: var(--ink-2); padding-top: 18px; border-top: 1px solid rgba(30, 30, 60, .12); }
.doc-page { background: var(--white); border-radius: 6px; box-shadow: var(--sh-page); padding: 52px 48px; display: flex; flex-direction: column; gap: 22px; font-size: 15px; }
.doc-page .gen { font-size: 12px; color: var(--ink-3); }
.doc-page h3 { font-size: 30px; margin-top: 8px; }
.doc-page .who { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.review { padding: 12px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 14px; }
.doc-page section { display: flex; flex-direction: column; gap: 10px; }
.doc-page h4 { font-weight: 680; font-size: 17px; }
.cite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; color: #2E2E38; }
.cite .from { font-size: 12px; color: var(--ink-3); font-family: var(--mono); text-align: right; }
.doc-page .tag { font-size: 10px; }

/* hand over files */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 56px; align-items: center; }
.split-copy { display: flex; flex-direction: column; gap: 20px; }
.split-copy h2 { font-size: clamp(36px, 4.6vw, 58px); }
.split-copy p:not(.cap) { font-size: 18px; color: var(--ink-2); }
.transfer { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh-card); }
.transfer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 650; }
.files { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14px; list-style: none; }
.files li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(30, 30, 60, .06); }
.files li:last-child { border-bottom: 0; color: var(--ink-3); }
.files .kind { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.confirm { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.confirm input { height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 14px; background: var(--paper); }
.transfer .acts { display: flex; gap: 8px; }
.transfer .acts .btn-k { flex: 1; }

/* hand over tasks */
.flow { list-style: none; display: flex; flex-direction: column; gap: 16px; counter-reset: flow; }
.flow li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--ink-2); font-size: 16px; }
.flow li::before { counter-increment: flow; content: counter(flow); width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.flow b { display: block; color: var(--ink); font-weight: 640; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh-card); overflow: hidden; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-head b { font-weight: 650; }
.panel-head small { font-size: 12.5px; color: var(--ink-3); }
.task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(30, 30, 60, .06); list-style: none; }
.task:last-child { border-bottom: 0; }
.task .what b { display: block; font-weight: 620; font-size: 14.5px; line-height: 1.35; }
.task .what small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.task .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.srcchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--pill); font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.task .who { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; }
.assignee { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.assignee.empty { color: var(--ink-3); font-weight: 500; border: 1px dashed var(--line-2); border-radius: 999px; padding: 4px 12px; }
.task .row { display: flex; align-items: center; gap: 8px; }
.status { font-size: 12px; font-weight: 650; padding: 3px 8px; border-radius: 6px; background: var(--pill); color: var(--ink-2); }
.status.prog { background: var(--info-bg); color: var(--info); }
.status.done { background: var(--ok-bg); color: var(--ok); }
.approved { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 650; font-size: 12px; }
.approved .tick { width: 13px; height: 13px; }
.note-sm { font-size: 12px; color: var(--ink-3); }
.av.c { background: #1FA463; }

/* who they worked with */
.ctiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); list-style: none; }
.ctiles li { padding: 16px 18px; border-right: 1px solid var(--line); }
.ctiles li:last-child { border-right: 0; }
.ctiles strong { display: block; font-family: var(--disp); font-size: 26px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.ctiles span { font-size: 12.5px; color: var(--ink-3); }
.clegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; padding: 10px 18px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.clegend span { display: flex; align-items: center; gap: 6px; }
.crow { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 72px; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid rgba(30, 30, 60, .06); font-size: 13.5px; list-style: none; }
.crow:last-child { border-bottom: 0; }
.crow .nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crow .nm span:last-child { min-width: 0; }
.crow .nm b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .nm small { display: block; font-size: 12px; color: var(--ink-3); }
.cbar { display: flex; align-items: center; gap: 10px; }
.cbar .track { flex: 1; height: 8px; border-radius: 999px; background: var(--pill); overflow: hidden; }
.cbar .fill { display: flex; height: 100%; }
.cbar .fill i { display: block; height: 100%; }
.cbar b { width: 26px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.crow .ago { text-align: right; font-size: 12px; color: var(--ink-3); }
.crow .warn { grid-column: 1 / -1; font-size: 12.5px; color: var(--warn); margin-top: -4px; }

/* file transfer mock */
.seg-mock { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--pill); align-self: flex-start; font-size: 13.5px; font-weight: 620; }
.seg-mock span { padding: 7px 14px; border-radius: 999px; color: var(--ink-2); }
.seg-mock span.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 30, 60, .12); }
.files .shared { font-size: 11.5px; font-weight: 650; color: var(--ok); }
.checkline { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.checkline i { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); display: grid; place-items: center; flex: none; }
.checkline i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* privacy cards */
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin-top: 44px; }
.pcard { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pcard .chip { align-self: flex-start; }
.pcard h3 { font-size: 20px; }
.pcard p { color: var(--ink-2); font-size: 15px; }

/* proof placeholder */
.quote { margin: 0; padding: 48px; border-radius: 28px; border: 1.5px dashed rgba(30, 30, 60, .22); display: flex; flex-direction: column; gap: 22px; }
.quote blockquote { font-family: var(--disp); font-stretch: 92%; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; letter-spacing: -.02em; font-weight: 560; max-width: 30em; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.quote figcaption span { width: 40px; height: 40px; border-radius: 50%; background: #E6E2EC; flex: none; }

/* pricing + faq */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; margin-top: 44px; align-items: start; }
.price { background: var(--ink); color: #fff; border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 20px; }
.price-head { display: flex; align-items: center; justify-content: space-between; font-weight: 650; }
.price-head .chip { background: rgba(255, 255, 255, .1); color: #fff; }
.amt { display: flex; align-items: baseline; gap: 10px; color: var(--on-dark-2); }
.amt strong { font-family: var(--disp); font-size: 72px; font-weight: 650; letter-spacing: -.04em; line-height: 1; color: #fff; }
.price > p { color: var(--on-dark-2); }
.price ul { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.price li { display: flex; gap: 10px; }
.price li .tick { stroke: #7FE0B8; width: 18px; height: 18px; margin-top: 2px; }
.price .btn-p { margin-top: 6px; box-shadow: none; }
.fine { font-size: 13px; color: var(--on-dark-2); text-align: center; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 630; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ink-3); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--ink-2); font-size: 15px; }

/* closing band */
.final { background: var(--ink); color: #fff; border-radius: 32px; padding: clamp(48px, 8vw, 96px) 24px; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.final::before { content: ""; position: absolute; left: 50%; top: 100%; width: 900px; height: 600px; margin: -260px 0 0 -450px; background: radial-gradient(closest-side, rgba(255, 120, 80, .45), rgba(255, 120, 80, 0) 70%); pointer-events: none; }
.final > * { position: relative; }
.final h2 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1; text-wrap: balance; }
.final h2 span { color: var(--on-dark-dim); }
.final .cta-row { justify-content: center; }
.final p { font-size: 14px; color: var(--on-dark-dim); }

/* footer (a class of its own: .wrap's padding would override a bare footer selector) */
.site-foot { margin-top: 112px; border-top: 1px solid var(--line); padding: 64px 0 40px; background: linear-gradient(180deg, rgba(242, 239, 234, .6), var(--paper) 60%); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 320px; }
.foot-brand p { color: var(--ink-2); font-size: 15px; }
.site-foot nav { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.site-foot nav p { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.site-foot nav a { color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.site-foot nav a:hover { color: var(--accent); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.foot-bottom p:first-child { max-width: 640px; }

/* reveal on scroll: only starts once app.js runs */
.reveal .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal .rv.in { opacity: 1; transform: none; }

/* ---------- motion ----------
   Hero motion runs on load with CSS only. Everything else is hidden only under .reveal, which app.js adds
   (and skips for prefers-reduced-motion), so without JS or with reduced motion the final state shows. */
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes out { to { opacity: 0; visibility: hidden; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fill { 0% { width: 3%; } 90%, 100% { width: 100%; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes flow { to { background-position: 24px 0; } }
@keyframes flowv { to { background-position: 0 24px; } }
@keyframes packet { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes packetv { 0% { top: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(255, 138, 92, .45); } to { box-shadow: 0 0 0 22px rgba(255, 138, 92, 0); } }
@keyframes shimmer { to { background-position: -200% 0; } }

.hero-copy > * { animation: up .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.doc-card { animation: up .8s .25s cubic-bezier(.2, .7, .2, 1) both, float 7s 1.4s ease-in-out infinite; }
.run-card { animation: up .8s .5s cubic-bezier(.2, .7, .2, 1) both, float 7s 2.4s ease-in-out infinite; }
.doc-card .item { animation: up .6s both; }
.doc-card .item:nth-of-type(2) { animation-delay: .9s; }
.doc-card .item:nth-of-type(3) { animation-delay: 1.3s; }
.doc-card .item:nth-of-type(4) { animation-delay: 1.7s; }
.skel { background: linear-gradient(90deg, var(--skel) 0 40%, #F7F6F9 50%, var(--skel) 60% 100%) 0 0 / 200% 100%; animation: shimmer 1.8s linear infinite; }
.run-live i { animation: blink 1.2s ease-in-out infinite; }
.run-bar i { animation: fill 9.6s linear infinite; }
.srow .st.run::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: blink 1s ease-in-out infinite; }

/* staggered children: app.js sets --i on each child of .stagger */
.reveal .stagger > * { opacity: 0; }
.reveal .stagger.in > * { animation: up .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.card, .pcard, .fcard, .pnode.out-n { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover, .pcard:hover, .fcard:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(40, 30, 90, .35); }

/* contacts: bars grow when the panel comes into view */
.reveal .crow .fill { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 120ms + .3s); }
.reveal .panel.in .crow .fill { transform: none; }

/* tasks: the last task gets allocated, then the Slack message arrives */
.swap { display: grid; justify-items: end; }
.swap > * { grid-area: 1 / 1; }
.a1 { display: none !important; }
.reveal .a1 { display: inline-flex !important; }
.reveal .task-stage.in .a1 { animation: out .3s 2s both; }
.reveal .a2 { opacity: 0; }
.reveal .task-stage.in .a2 { animation: pop .45s 2.3s both; }
.task-stage { display: flex; flex-direction: column; gap: 14px; }
.slack-toast { align-self: flex-end; width: min(100%, 400px); background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-card); padding: 14px 16px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; font-size: 13.5px; }
.slack-toast .bot { grid-row: span 3; width: 36px; height: 36px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; }
.slack-toast .bot svg { width: 18px; height: 18px; fill: none; stroke: #FF9F7A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slack-toast .from { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.slack-toast .from small { font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: var(--pill); color: var(--ink-3); }
.slack-toast .from em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-3); margin-left: auto; display: flex; align-items: center; gap: 6px; }
.slack-toast p { color: var(--ink-2); }
.slack-toast p b { color: var(--ink); }
.reveal .slack-toast { opacity: 0; }
.reveal .task-stage.in .slack-toast { animation: up .55s 2.7s cubic-bezier(.2, .7, .2, 1) both; }

/* files: each moved file is read back and ticked */
.vf { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--ok); font-size: 11.5px; font-weight: 650; }
.vf .tick { width: 12px; height: 12px; }
.reveal .vf { opacity: 0; }
.reveal .transfer.in .vf { animation: pop .35s both; animation-delay: calc(1.1s + var(--i, 0) * 450ms); }

/* ---------- what you get: sources, KT Console, outputs ---------- */
.pipe { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(210px, 250px) 76px minmax(0, 1fr); margin-top: 48px; align-items: center; }
.pnode { display: flex; align-items: center; gap: 12px; margin: 6px 0; padding: 14px 16px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.pnode .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--field); display: grid; place-items: center; flex: none; }
.pnode .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pnode b { display: block; font-weight: 650; font-size: 15px; }
.pnode small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.pnode.out-n .go { margin-left: auto; color: var(--ink-3); font-size: 18px; transition: transform .2s ease; flex: none; }
.pnode.out-n:hover { color: var(--ink); border-color: rgba(201, 58, 30, .35); transform: translateX(3px); }
.pnode.out-n:hover .go { transform: translateX(3px); color: var(--accent); }
.hub { grid-column: 3; grid-row: 1 / span 4; align-self: center; position: relative; z-index: 1; background: var(--ink); color: #fff; border-radius: 24px; padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; box-shadow: 0 30px 60px -24px rgba(18, 18, 25, .55); }
.hub .mark { width: 54px; height: 54px; border-radius: 16px; background: #26262f; animation: ring 2s ease-out infinite; }
.hub .mark svg { width: 28px; height: 28px; }
.hub b { font-family: var(--disp); font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.hub ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--on-dark-2); }
.hub li { display: flex; align-items: center; gap: 8px; justify-content: center; }
.hub li i { width: 6px; height: 6px; border-radius: 50%; background: #FF8A5C; animation: blink 1.6s ease-in-out infinite; }
.hub li:nth-child(2) i { animation-delay: .5s; }
.hub li:nth-child(3) i { animation-delay: 1s; }
.w { position: relative; align-self: stretch; }
.w::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(30, 30, 60, .22) 0 6px, transparent 6px 12px); animation: flow 1.2s linear infinite; }
.w::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(30, 30, 60, .16); }
.w.i::after { right: 0; }
.w.o::after { left: 0; }
.w.first::after { top: 50%; }
.w.last::after { bottom: 50%; }
.w b { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; animation: packet 2.4s linear infinite; }
.vw { display: none; }

/* ---------- feature grid ---------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin-top: 44px; }
.fcard { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.fcard .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--act-bg); display: grid; place-items: center; margin-bottom: 4px; transition: transform .3s ease; }
.fcard .ico svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fcard:hover .ico { transform: rotate(-8deg) scale(1.06); }
.fcard h3 { font-size: 18px; }
.fcard p { font-size: 14.5px; color: var(--ink-2); }

/* ---------- knowledge-transfer stage ---------- */
.page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 900px; z-index: 0; pointer-events: none;
  background: radial-gradient(rgba(30, 30, 60, .09) 1px, transparent 1.2px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); }
.xfer-wrap { padding-top: 40px; }
.xfer-stage { position: relative; overflow: hidden; border-radius: 32px; color: #fff; padding: 48px clamp(20px, 4vw, 48px) 36px;
  background: radial-gradient(600px 300px at 20% 10%, rgba(255, 120, 80, .16), transparent 70%), radial-gradient(600px 320px at 85% 90%, rgba(127, 224, 184, .1), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px) 0 0 / 22px 22px, #0B0B12;
  box-shadow: 0 40px 90px -40px rgba(18, 18, 25, .7); }
.xfer-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.xfer-head .cap { color: #FF9F7A; }
.xfer-head h2 { font-size: clamp(30px, 4.2vw, 52px); max-width: 18em; text-wrap: balance; }
.xgrad { background: linear-gradient(90deg, #FF9F7A, #A88BFF 55%, #7FE0B8); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.xfer-sub { color: #B9B8C6; font-size: 17px; max-width: 34em; }
/* each chip stays put, lights up, flies into the beam, then slides back: only one is away at a time */
@keyframes send { 0%, 68% { opacity: 1; transform: none; border-color: rgba(255, 255, 255, .1); box-shadow: none; }
  74% { opacity: 1; transform: none; border-color: rgba(255, 159, 122, .75); box-shadow: 0 0 26px rgba(255, 138, 92, .4); }
  83% { opacity: 0; transform: translateX(80px) scale(.94); } 84% { opacity: 0; transform: translateX(-16px); }
  96%, 100% { opacity: 1; transform: none; } }
@keyframes sendv { 0%, 68% { opacity: 1; transform: none; border-color: rgba(255, 255, 255, .1); box-shadow: none; }
  74% { opacity: 1; transform: none; border-color: rgba(255, 159, 122, .75); box-shadow: 0 0 26px rgba(255, 138, 92, .4); }
  83% { opacity: 0; transform: translateY(36px) scale(.94); } 84% { opacity: 0; transform: translateY(-10px); }
  96%, 100% { opacity: 1; transform: none; } }
@keyframes land { 0% { opacity: 0; transform: translateX(-28px); } 7%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes tickin { 0%, 6% { transform: scale(0); } 11%, 100% { transform: scale(1); } }
@keyframes streak { 0% { left: -40%; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes streakv { 0% { top: -40%; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes corepulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(168, 139, 255, .3), 0 0 40px rgba(168, 139, 255, .25); } 50% { box-shadow: 0 0 0 1px rgba(168, 139, 255, .5), 0 0 70px rgba(168, 139, 255, .45); } }
.flow3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(36px, 96px) 230px minmax(36px, 96px) minmax(0, 1fr); align-items: center; margin-top: 44px; }
.side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.who-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.avx { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; }
.a-l { background: linear-gradient(135deg, #FF8A5C, #E8467C); color: #fff; box-shadow: 0 0 0 3px rgba(255, 138, 92, .2), 0 0 24px rgba(255, 138, 92, .35); }
.a-r { background: linear-gradient(135deg, #7FE0B8, #4FB8D6); color: #08231A; box-shadow: 0 0 0 3px rgba(127, 224, 184, .2), 0 0 24px rgba(127, 224, 184, .35); }
.who-txt { min-width: 0; }
.who-txt b { display: block; font-size: 15px; font-weight: 650; }
.who-txt small { display: block; font-size: 12.5px; color: #9C9AAB; }
.state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 650; flex: none; }
.state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.2s ease-in-out infinite; }
.s-run { background: rgba(255, 138, 92, .14); color: #FFB08A; }
.s-ok { background: rgba(127, 224, 184, .14); color: #9FF0CC; }
.frags, .outs { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.frags li, .outs li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: #E6E5EE; min-width: 0; }
.frags li > span:last-child, .outs li > span:nth-child(2) { min-width: 0; }
.frags li small, .outs li small { display: block; font-size: 11.5px; color: #9C9AAB; }
.frags li { animation: send 8s cubic-bezier(.4, 0, .2, 1) infinite both; }
.outs li { animation: land 8s cubic-bezier(.2, .7, .2, 1) infinite both; border-color: rgba(127, 224, 184, .22); }
.outs li b { display: block; font-weight: 620; }
.oi { width: 32px; height: 32px; border-radius: 10px; background: rgba(127, 224, 184, .1); display: grid; place-items: center; flex: none; }
.oi svg { width: 17px; height: 17px; fill: none; stroke: #9FF0CC; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ck { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #7FE0B8; display: grid; place-items: center; flex: none; animation: tickin 8s ease-out infinite both; animation-delay: inherit; }
.ck svg { width: 12px; height: 12px; fill: none; stroke: #08231A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.beam { position: relative; height: 2px; overflow: hidden; border-radius: 2px; }
.b-in { background: linear-gradient(90deg, rgba(255, 138, 92, .1), rgba(168, 139, 255, .55)); }
.b-out { background: linear-gradient(90deg, rgba(168, 139, 255, .55), rgba(127, 224, 184, .1)); }
.beam i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 2px; animation: streak 1.8s linear infinite; }
.beam i + i { animation-delay: .9s; }
.b-in i { background: linear-gradient(90deg, transparent, #FFB08A, #fff); }
.b-out i { background: linear-gradient(90deg, transparent, #9FF0CC, #fff); }
.corex { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; position: relative; }
.corex::before { content: ""; position: absolute; top: -40px; left: 50%; width: 340px; height: 340px; margin-left: -170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(168, 139, 255, .28), transparent); pointer-events: none; }
.core-box { position: relative; width: 156px; height: 156px; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.r1 { inset: 0; background: conic-gradient(from 0deg, transparent 0 55%, #FF8A5C 72%, #A88BFF 88%, transparent 100%); animation: spin 4.5s linear infinite; }
.r2 { inset: 16px; background: conic-gradient(from 180deg, transparent 0 60%, #7FE0B8 80%, #A88BFF 95%, transparent 100%); animation: spin 6.5s linear infinite reverse; }
.core-in { position: relative; width: 92px; height: 92px; border-radius: 28px; display: grid; place-items: center; background: linear-gradient(160deg, #1E1E2A, #111119); border: 1px solid rgba(255, 255, 255, .12); animation: corepulse 3s ease-in-out infinite; }
.core-in svg { width: 44px; height: 44px; fill: none; stroke: #FF9F7A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.corex > b { position: relative; font-family: var(--disp); font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.core-steps { position: relative; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #B9B8C6; }
.core-steps li { display: flex; align-items: center; justify-content: center; gap: 8px; }
.core-steps i { width: 6px; height: 6px; border-radius: 50%; background: #A88BFF; animation: blink 1.6s ease-in-out infinite; }
.core-steps li:nth-child(2) i { animation-delay: .5s; }
.core-steps li:nth-child(3) i { animation-delay: 1s; }

/* ---------- v2: tagline, orbit, pillars ---------- */
.hero2 { padding-top: 64px; padding-bottom: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 40px; align-items: center; }
.hero2 h1 { font-size: clamp(40px, 4.8vw, 66px); line-height: .98; font-weight: 650; text-wrap: balance; }
.hero2 h1 .h-dim { display: block; }
.early { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: none;
  color: #4B3BC4; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #FF8A5C, #A88BFF) border-box; border: 1px solid transparent; vertical-align: 2px; margin-left: 6px; }
/* no card: the brain sits in a dark circular glow that fades through violet into the page */
.orb-panel { position: relative; color: #fff; }
.orb-neb { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #0B0B12 0%, #0E0C18 46%, rgba(22, 17, 40, .94) 58%, rgba(70, 48, 130, .42) 76%, rgba(255, 150, 110, .1) 90%, rgba(251, 250, 248, 0) 100%); }
.orb-neb::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px) 0 0 / 20px 20px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 72%); mask-image: radial-gradient(closest-side, #000 40%, transparent 72%); }
.orb-fit { width: 100%; display: flex; justify-content: center; overflow: hidden; }
.orb-stage { position: relative; width: 620px; height: 620px; flex: none; transform-origin: top center; }
.orb-ring { position: absolute; border-radius: 50%; }
.orb-ring-in { border: 1px solid rgba(168, 139, 255, .32); box-shadow: 0 0 40px rgba(123, 97, 255, .12) inset; }
.orb-ring-out { border: 1px dashed rgba(110, 96, 160, .35); }
.orb-spin { position: absolute; inset: 0; }
.orb-spin-in { animation: spin 70s linear infinite; }
.orb-spin-out { animation: spin 140s linear infinite reverse; }
.orb-spokes { position: absolute; inset: 0; }
.orb-spokes path { stroke: rgba(168, 139, 255, .35); stroke-width: 1.2; stroke-dasharray: 3 6; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.orb-packets circle { fill: #FFB08A; filter: drop-shadow(0 0 4px #FF8A5C); }
.orb-tile { position: absolute; border-radius: 18px; display: grid; place-items: center; }
.orb-live { width: 60px; height: 60px; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 12px 32px -10px rgba(0,0,0,.7), 0 0 26px rgba(168,139,255,.25); animation: spin 70s linear infinite reverse; }
.orb-req { width: 52px; height: 52px; background: #fff; border: 1px dashed rgba(110, 96, 160, .5); box-shadow: 0 10px 24px -14px rgba(40, 30, 90, .45); animation: spin 140s linear infinite; }
.orb-req em { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #26262F; color: #D7D5E3; border: 1px solid rgba(255,255,255,.15); white-space: nowrap; }
.orb-more { position: absolute; width: 88px; height: 30px; border-radius: 999px; background: #fff; border: 1px dashed rgba(110, 96, 160, .5); color: var(--ink-2); font-size: 12px; font-weight: 650; display: grid; place-items: center; animation: spin 140s linear infinite; }
.orb-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.orb-core b { font-family: var(--disp); font-size: 18px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
.orb-core small { font-size: 12px; color: #9C9AAB; }
.orb-halo { position: absolute; left: 50%; top: 42%; width: 330px; height: 290px; margin: -145px 0 0 -165px; border-radius: 50%; background: radial-gradient(closest-side, rgba(168,139,255,.42), rgba(255,138,92,.12) 60%, transparent); animation: halo2 4s ease-in-out infinite; z-index: -1; }
@keyframes halo2 { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes fire { 0%, 70%, 100% { opacity: .5; } 80% { opacity: 1; } }
.nb { overflow: visible; animation: breathe 5s ease-in-out infinite; }
.nb-dots circle { animation: blink 3s ease-in-out infinite; }
.nb-sulci path { fill: none; stroke: rgba(255, 190, 160, .5); stroke-width: 1.6; stroke-linecap: round; }
.nb-syn line { stroke: rgba(255, 176, 138, .45); stroke-width: .9; }
.nb-hubs circle { fill: #FFB08A; filter: drop-shadow(0 0 4px #FF8A5C); animation: fire 3.2s ease-in-out infinite; }
.orb-legend { display: flex; justify-content: center; gap: 18px; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.orb-legend span { display: flex; align-items: center; gap: 8px; }
.orb-legend i { width: 12px; height: 12px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
.orb-legend i.d { background: transparent; box-shadow: none; border: 1px dashed rgba(110, 96, 160, .6); }

.pillars4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; margin-top: 44px; }
.pillar { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pillar:hover { color: var(--ink); transform: translateY(-4px); border-color: rgba(201, 58, 30, .3); box-shadow: 0 26px 50px -30px rgba(40, 30, 90, .4); }
.pnum { position: absolute; top: 20px; right: 22px; font-family: var(--disp); font-size: 14px; font-weight: 650; color: var(--ink-dim); }
.pico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,138,92,.16), rgba(168,139,255,.18)); }
.pico svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { font-size: 20px; margin-top: 4px; }
.pillar p { font-size: 14.5px; color: var(--ink-2); }
.pfoot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; }
.pfoot .early { margin-left: 0; }
.pfoot .go { margin-left: auto; color: var(--ink-3); transition: transform .2s ease; }
.pillar:hover .go { transform: translateX(4px); color: var(--accent); }

.ticks-l { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.ticks-l li { display: flex; gap: 10px; align-items: flex-start; }
.ticks-l .tick { margin-top: 4px; }
.row-l { display: flex; align-items: center; gap: 10px; }
.row-l b { display: block; font-size: 14.5px; }
.row-l small { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.act-stats { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.act-stats li { padding: 14px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.act-stats li:last-child { border-right: 0; }
.act-stats strong { font-family: var(--disp); font-size: 24px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.act-stats span { font-size: 11.5px; color: var(--ink-3); }
.act-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: end; height: 230px; padding: 18px 22px 12px; }
.ab-col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.ab-col span { font-size: 12px; color: var(--ink-3); }
.ab-bar { width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 8px; overflow: hidden; }
.ab-bar i { display: block; }
.reveal .act .ab-bar { transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 100ms + .2s); }
.reveal .act.in .ab-bar { transform: none; }
.act-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.act-foot .up { color: var(--ok); font-weight: 650; }
.refl-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.refl-t { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.refl-hi { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.refl-hi li { display: flex; gap: 8px; align-items: center; }
.refl-dep { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.refl-dep li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; }
.refl-dep b { display: block; font-weight: 620; }
.refl-dep small { display: block; font-size: 12.5px; color: var(--ink-3); }
.risk { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.risk.hi { background: var(--act-bg); color: var(--act); }
.risk.md { background: var(--warn-bg); color: var(--warn); }
.refl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--paper); font-size: 14px; color: var(--ink-2); }
.refl-cta b { color: var(--act); }

.brain-band { border-radius: 32px; padding: clamp(28px, 5vw, 56px); color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(600px 320px at 85% 20%, rgba(168,139,255,.2), transparent 70%), radial-gradient(500px 300px at 10% 90%, rgba(255,120,80,.14), transparent 70%), radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 22px 22px, #0B0B12; }
.brain-band .cap { color: #FF9F7A; }
.brain-band .early { color: #fff; background: linear-gradient(#1A1A26, #1A1A26) padding-box, linear-gradient(90deg, #FF8A5C, #A88BFF) border-box; }
.brain-band .split-copy p:not(.cap), .brain-band .ticks-l { color: #C9C7D6; }
.brain-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.bc-top { display: flex; align-items: center; gap: 16px; }
.bc-top .nb { flex: none; }
.bc-top b { display: block; font-size: 16px; }
.bc-top small { display: block; font-size: 12.5px; color: #9C9AAB; margin-top: 2px; }
.bc-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: #E6E5EE; }
.bc-share em { font-style: normal; font-size: 11px; color: #9C9AAB; margin-right: 8px; }
.bc-share .av { width: 22px; height: 22px; font-size: 9px; }
.bc-q { display: flex; gap: 10px; align-items: flex-start; }
.bc-q p { background: rgba(255,255,255,.08); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 14px; }
.bc-a { margin-left: 34px; background: rgba(168,139,255,.12); border: 1px solid rgba(168,139,255,.28); border-radius: 14px 14px 4px 14px; padding: 12px 14px; font-size: 14px; color: #EDEBFA; display: flex; flex-wrap: wrap; gap: 8px; }
.bc-a p { flex-basis: 100%; }
.bc-src { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 11.5px; color: #D7D5E3; }
.bc-src .lg { width: 12px; height: 12px; }

.uc { margin-top: 40px; }
.uc-view { overflow: hidden; border-radius: 26px; }
.uc-track { display: flex; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.uc-slide { flex: 0 0 100%; min-width: 0; padding: clamp(24px, 4vw, 44px); background: var(--white); border: 1px solid var(--line); border-radius: 26px; display: flex; flex-direction: column; gap: 14px; }
.uc-slide .chip { align-self: flex-start; }
.uc-slide h3 { font-size: clamp(24px, 3vw, 34px); max-width: 22em; }
.uc-ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; margin-top: 6px; }
.uc-b, .uc-a { padding: 18px 20px; border-radius: 16px; font-size: 15.5px; }
.uc-b { background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.uc-a { background: linear-gradient(135deg, rgba(255,138,92,.1), rgba(168,139,255,.12)); border: 1px solid rgba(201,58,30,.18); color: var(--ink); }
.uc-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.uc-a .uc-l { color: var(--accent); }
.uc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.uc-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); cursor: pointer; font-size: 18px; }
.uc-btn:hover { border-color: var(--accent); color: var(--accent); }
.uc-dots { display: flex; gap: 8px; }
.uc-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: var(--line-2); cursor: pointer; transition: width .3s ease, background .3s ease; }
.uc-dots button[aria-current="true"] { width: 26px; background: var(--accent); }

.integ { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 32px 56px; align-items: center; }
.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.ig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; border-radius: 18px; text-align: center; font-size: 13px; min-height: 108px; }
.ig b { font-weight: 620; }
.ig em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.ig.live { background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(40,30,90,.35); }
.ig.req { border: 1px dashed var(--line-2); background: transparent; color: var(--ink-2); }
.ig.more b { font-size: 15px; }

/* weekly activity: Week / Month tabs with a material finish */
.seg-m { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--pill); box-shadow: inset 0 1px 2px rgba(30, 30, 60, .08); }
.seg-m button { position: relative; overflow: hidden; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 620; cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .25s ease, transform .1s ease; }
.seg-m button:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.seg-m button:active { transform: scale(.97); }
.seg-m button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(30, 30, 60, .12), 0 6px 14px -6px rgba(40, 30, 90, .35); }
.seg-m button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ripple { position: absolute; border-radius: 50%; background: rgba(201, 58, 30, .22); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.act-body { position: relative; transition: opacity .25s ease; }
.act-body.loading { opacity: .35; }
.act-body.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%) 0 0 / 200% 100%; animation: shimmer 1s linear infinite; }
.ab-bar { transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.act-foot .down { color: var(--act); font-weight: 650; }
.act-chart.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* interactive demos: file transfer and hand-over */
.try { font-size: 14px !important; color: var(--accent) !important; font-weight: 600; }
.transfer .files li { gap: 10px; }
.transfer .fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer .kind { margin-left: auto; flex: none; }
.lg.fold { fill: #FFD27A; stroke: #E0A82E; stroke-width: 1.2; }
.fstat { flex: none; display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; font-weight: 650; }
.fstat:empty { display: none; }
.fstat.moving { color: var(--info); }
.fstat.moving::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.fstat.done { color: var(--ok); }
.tf-list li { transition: background .3s ease, transform .3s ease; }
.tf-list li.moving { background: rgba(79, 70, 229, .05); }
.tf-list li.done { background: rgba(19, 134, 95, .05); }
.tf-list li.fly { animation: fly .5s ease; }
@keyframes fly { 40% { transform: translateX(8px); } 100% { transform: none; } }
.tf-more { color: var(--ink-3); }
.evr-sum { padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; margin-bottom: 8px; }
.evr-sum b { display: block; font-weight: 650; }
.evr-sum small { color: var(--ink-3); font-size: 12.5px; }
.tf-prog .bar { margin-top: 0; }
.tf-prog .bar i { background: linear-gradient(90deg, #FF8A5C, #A88BFF); }
.tf-count { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; font-variant-numeric: tabular-nums; }
.checkline.real { cursor: pointer; user-select: none; }
.checkline.real input { width: 18px; height: 18px; accent-color: var(--accent); }
.transfer .btn[disabled] { cursor: not-allowed; }
.transfer[data-busy] .btn[data-tgo] { cursor: progress; }
.tf-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-size: 14px; font-weight: 600; animation: pop .4s ease; }
.ok-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ok-dot); display: grid; place-items: center; flex: none; }
.ok-dot .tick { stroke: #fff; width: 13px; height: 13px; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--ok); text-decoration: underline; cursor: pointer; margin-left: auto; }
.refl .panel-head .seg-m button { height: 32px; padding: 0 14px; font-size: 13px; }
.refl-hi li, .refl-dep li { animation: up .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.refl-body.swap { opacity: .35; transition: opacity .2s ease; }
.risk.moving { background: var(--info-bg); color: var(--info); display: inline-flex; align-items: center; gap: 5px; }
.risk.moving::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.risk.handed { background: var(--ok-bg); color: var(--ok); }
.refl-dep li.handed { border-color: rgba(19, 134, 95, .3); background: rgba(19, 134, 95, .05); }
.refl-cta.done b { color: var(--ok); }

/* interactive demo: hand over tasks */
.tprog { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.tprog-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--skel); overflow: hidden; }
.tprog-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FF8A5C, #A88BFF); transition: width .8s cubic-bezier(.2, .7, .2, 1), background .4s ease; }
.tprog-bar i.full { background: linear-gradient(90deg, #13865F, #4FD6A2); }
.tprog span { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.tlist { list-style: none; }
.tlist .task.flash { animation: tflash 1.2s ease; }
@keyframes tflash { 0% { background: rgba(168, 139, 255, .14); } 100% { background: transparent; } }
.btn-assign, .btn-approve { position: relative; overflow: hidden; height: 32px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: transform .1s ease, box-shadow .2s ease, background .2s ease; }
.btn-assign { border: 1px dashed var(--line-2); background: #fff; color: var(--ink-2); }
.btn-assign:hover, .btn-assign[aria-expanded="true"] { border-style: solid; border-color: var(--accent); color: var(--accent); }
.btn-approve { border: 0; background: var(--ink); color: #fff; box-shadow: 0 6px 14px -8px rgba(18, 18, 25, .6); }
.btn-approve:hover { background: #26262f; }
.btn-assign:active, .btn-approve:active { transform: scale(.96); }
.btn-approve.busy { pointer-events: none; color: transparent; }
.btn-approve.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; border-right-color: transparent; animation: spin .7s linear infinite; }
.assign-wrap { position: relative; }
.pick { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 240px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(40, 30, 90, .45); animation: pop .18s ease; text-align: left; }
.pick p { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px; }
.pick button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; text-align: left; }
.pick button:hover, .pick button:focus-visible { background: var(--pill); outline: none; }
.pick b { display: block; font-size: 13.5px; font-weight: 620; }
.pick small { display: block; font-size: 12px; color: var(--ink-3); }
.assignee.pop, .approved.pop { animation: pop .4s cubic-bezier(.2, .7, .2, 1); }
.note-sm.sending { color: var(--info); display: inline-flex; align-items: center; gap: 6px; }
.note-sm.sending::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.slack-toast.ping { animation: tping .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes tping { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 100% { opacity: 1; transform: none; } }
.tdone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--ok-bg); color: var(--ok); font-size: 14px; animation: pop .4s ease; }

/* nav: transparent over the hero, a frosted pill once the page scrolls (app.js adds .navlift / .lift) */
.nav { transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease; }
.navlift .nav:not(.lift):not(.open) { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.lift { background: rgba(255, 255, 255, .86); box-shadow: 0 12px 32px -14px rgba(20, 22, 40, .26), 0 1px 3px rgba(20, 22, 40, .06); }

/* a soft colour wash down the whole page, so the hero's warmth carries on below it */
.page::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 640px at 88% 9%, rgba(168, 139, 255, 0.22), transparent 70%),
    radial-gradient(820px 620px at 6% 22%, rgba(255, 160, 120, 0.2), transparent 70%),
    radial-gradient(900px 700px at 92% 38%, rgba(127, 224, 184, 0.14), transparent 70%),
    radial-gradient(900px 700px at 4% 52%, rgba(168, 139, 255, 0.18), transparent 70%),
    radial-gradient(900px 700px at 90% 67%, rgba(255, 160, 120, 0.17), transparent 70%),
    radial-gradient(900px 700px at 8% 82%, rgba(127, 224, 184, 0.14), transparent 70%),
    radial-gradient(900px 640px at 80% 95%, rgba(168, 139, 255, 0.2), transparent 70%); }

/* sign-up side panel: drifting gradient, breathing brain, orbiting tools */
.auth-aside { background: #0B0B12; justify-content: center; text-align: center; align-items: center; position: sticky; top: 16px; align-self: flex-start; height: calc(100vh - 32px); min-height: 760px; gap: 14px; padding: 36px 40px; }
.auth-aside::before { width: 760px; height: 640px; right: -260px; top: -220px; background: radial-gradient(closest-side, rgba(255, 120, 80, .5), rgba(255, 120, 80, 0) 70%); animation: drift1 14s ease-in-out infinite alternate; }
.auth-aside::after { width: 760px; height: 640px; left: -280px; bottom: -240px; background: radial-gradient(closest-side, rgba(130, 110, 255, .5), rgba(130, 110, 255, 0) 70%); animation: drift2 16s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-120px, 90px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(140px, -80px) scale(1.15); } }
.aa-mint { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(127, 224, 184, .14), transparent 70%); animation: halo2 6s ease-in-out infinite; }
.aa-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.aa-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aa-head .cap { color: #FF9F7A; }
.aa-head h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; max-width: 13em; }
.aa-orbit { position: relative; flex: none; width: 360px; height: 360px; margin: 18px auto 22px; }
.aa-ring { position: absolute; border-radius: 50%; }
.aa-ring.ar-out { inset: 0; border: 1px solid rgba(168, 139, 255, .3); }
.aa-ring.ar-in { inset: 46px; border: 1px dashed rgba(255, 255, 255, .14); }
.aa-pulse { position: absolute; left: 50%; top: 46%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border: 1.5px solid rgba(255, 159, 122, .45); animation: aapulse 3.2s ease-out infinite; }
.aa-pulse.p2 { animation-delay: 1.6s; border-color: rgba(168, 139, 255, .45); }
@keyframes aapulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.aa-spin { position: absolute; inset: 0; animation: spin 40s linear infinite; }
.aa-tile { position: absolute; width: 44px; height: 44px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7), 0 0 20px rgba(168, 139, 255, .25); animation: spin 40s linear infinite reverse; }
.aa-tile .lg { width: 22px; height: 22px; }
.aa-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aa-core b { font-family: var(--disp); font-size: 16px; font-weight: 650; }
.aa-core small { font-size: 11.5px; color: #9C9AAB; }
.auth-aside .facts { width: 100%; max-width: 460px; text-align: center; }

/* ---------- v3: walkthrough, neuron signals, insights, audiences ---------- */
.pillars3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.act-ins { padding: 2px 20px 14px; }
.act-ins ul { list-style: none; display: grid; gap: 8px; }
.act-ins li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); animation: up .45s both; }
.act-ins li:nth-child(2) { animation-delay: .08s; } .act-ins li:nth-child(3) { animation-delay: .16s; }
.act-ins b { color: var(--ink); font-weight: 650; }
.ins-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.ins-w { background: #E0A82E; } .ins-i { background: var(--info); } .ins-a { background: var(--accent); }
.act-chart { height: 190px; }

.aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; margin-top: 44px; }
.aud-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px; border-radius: 26px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 50px -36px rgba(40, 30, 90, .35); }
.aud-card h3 { font-size: 26px; }
.aud-card .ticks-l { font-size: 15px; }
.aud-note { font-size: 13.5px; color: var(--ink-3); margin-top: auto; }
.aud-card.dark { background: radial-gradient(500px 300px at 90% 0%, rgba(168,139,255,.22), transparent 70%), radial-gradient(400px 260px at 0% 100%, rgba(255,120,80,.16), transparent 70%), #121219; color: #fff; border-color: transparent; }
.aud-card.dark .chip { background: rgba(255,255,255,.12); color: #fff; }
.aud-card.dark .ticks-l { color: #C9C7D6; }
.aud-card.dark .ticks-l .tick { stroke: #7FE0B8; }
.aud-card.dark .aud-note { color: #9C9AAB; }

/* knowledge-transfer scene: neuron signals from each tool into the brain (paths drawn by app.js) */
.core-brain { position: relative; display: grid; place-items: center; }
.nsig { display: block; width: 100%; height: 100%; overflow: visible; }
.nsig .nb-base { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2; }
.nsig .nb-sig { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 30; animation: nsig 1.5s linear infinite; }
.b-in .nb-sig { stroke: #FFC2A6; filter: drop-shadow(0 0 4px #FF8A5C); }
.b-out .nb-sig { stroke: #B5F5D9; filter: drop-shadow(0 0 4px #7FE0B8); }
@keyframes nsig { to { stroke-dashoffset: -31; } }
@media (min-width: 821px) {
  .flow3 .nbeam { align-self: stretch; height: auto; background: none; overflow: visible; }
  .flow3 .nbeam i { display: none; }
}
@media (max-width: 820px) { .nsig { display: none; } }

/* walkthrough "video": six chapters, page animation */
.mv { position: relative; max-width: 1040px; margin: 40px auto 0; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; color: #fff; cursor: pointer;
  background: radial-gradient(700px 400px at 50% 40%, rgba(123, 97, 255, .24), transparent 70%), radial-gradient(520px 320px at 12% 88%, rgba(255, 120, 80, .18), transparent 70%), radial-gradient(520px 320px at 90% 10%, rgba(127, 224, 184, .1), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px) 0 0 / 22px 22px, #0B0B12;
  box-shadow: 0 40px 90px -40px rgba(18, 18, 25, .7); }
.mv-stage { position: absolute; inset: 0 0 70px; }
.mv-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; opacity: 0; transform: scale(.98); transition: opacity .5s ease, transform .6s ease; pointer-events: none; }
.mv-scene.on { opacity: 1; transform: none; }
.mv-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #FF9F7A; }
.mv-h { font-size: clamp(22px, 3vw, 34px); }
.mv-scene.on .mv-kicker, .mv-scene.on .mv-h { animation: up .6s both; }
.mv-scene.on .mv-h { animation-delay: .08s; }
.mv-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 640px; }
.mv-tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; font-size: 12.5px; color: #C9C7D6; }
.mv-tool i { width: 66px; height: 66px; border-radius: 20px; background: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7), 0 0 24px rgba(168, 139, 255, .25); }
.mv-tool i .lg { width: 34px; height: 34px; }
.mv-tool em { position: absolute; top: -6px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: #13865F; display: grid; place-items: center; box-shadow: 0 0 0 3px #0B0B12; }
.mv-tool em svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mv-scene.on .mv-tool { animation: pop .45s both; animation-delay: calc(.3s + var(--i) * .3s); }
.mv-scene.on .mv-tool em { animation: pop .3s both; animation-delay: calc(.7s + var(--i) * .3s); }
.mv-brain { position: relative; width: 460px; height: 280px; max-width: 100%; }
.mv-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv-lines line { stroke: #FFB08A; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 16; opacity: .8; animation: nsig 1.2s linear infinite; }
.mv-dot { position: absolute; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
.mv-scene.on .mv-dot { animation: pop .4s both; animation-delay: calc(var(--i) * .12s); }
.mv-bwrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mv-scene.on .mv-bwrap { animation: brainin 1.2s cubic-bezier(.2, .7, .2, 1) both .4s; }
@keyframes brainin { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); filter: blur(6px); } to { opacity: 1; transform: translate(-50%, -50%); filter: none; } }
.mv-card { width: min(520px, 100%); background: #fff; color: var(--ink); border-radius: 20px; padding: 18px; text-align: left; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: 12px; }
.mv-scene.on .mv-card { animation: up .6s both .2s; }
.mv-ch { display: flex; align-items: center; gap: 10px; }
.mv-ch b { display: block; font-size: 15px; }
.mv-ch small { display: block; font-size: 12.5px; color: var(--ink-3); }
.mv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mv-stats span { padding: 8px 10px; border-radius: 10px; background: var(--paper); font-size: 11.5px; color: var(--ink-3); }
.mv-stats b { display: block; font-family: var(--disp); font-size: 20px; color: var(--ink); }
.mv-ins, .mv-dep, .mv-tasks { list-style: none; display: grid; gap: 8px; }
.mv-ins li, .mv-dep li, .mv-tasks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font-size: 13.5px; color: var(--ink-2); }
.mv-ins b { color: var(--ink); }
.mv-dep li, .mv-tasks li { justify-content: space-between; }
.mv-dep em, .mv-tasks em { font-style: normal; flex: none; }
.mv-tasks em { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); }
.mv-scene.on .mv-ins li, .mv-scene.on .mv-dep li, .mv-scene.on .mv-tasks li { animation: up .5s both; animation-delay: calc(.8s + var(--i) * .5s); }
.mv-scene.on .mv-dep em { animation: pop .35s both; animation-delay: calc(1.2s + var(--i) * .5s); }
.mv-scene.on .mv-tasks em { animation: pop .35s both; animation-delay: calc(1.3s + var(--i) * .6s); }
.mv-prog { height: 6px; border-radius: 999px; background: var(--skel); overflow: hidden; }
.mv-prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #FF8A5C, #13865F); transform-origin: left; }
.mv-scene.on .mv-prog i { animation: fillx 3.2s cubic-bezier(.4, 0, .2, 1) both 1.2s; }
@keyframes fillx { from { transform: scaleX(0); } to { transform: none; } }
.mv-done { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; }
.mv-check { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #4FD6A2, #13865F); box-shadow: 0 0 0 10px rgba(79, 214, 162, .12), 0 20px 50px -10px rgba(19, 134, 95, .7); }
.mv-check svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mv-scene.on .mv-check { animation: pop .6s cubic-bezier(.2, .7, .2, 1.3) both .3s; }
.mv-done p { color: #C9C7D6; font-size: 16px; }
.mv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mv-chips > span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }
.mv-chips .av { width: 20px; height: 20px; font-size: 8.5px; }
.mv-scene.on .mv-done p, .mv-scene.on .mv-chips { animation: up .6s both .7s; }
.mv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; display: flex; align-items: center; gap: 16px; padding: 0 20px; background: linear-gradient(transparent, rgba(0, 0, 0, .35)); cursor: default; }
.mv-play { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6); }
.mv-play svg { width: 18px; height: 18px; fill: currentColor; }
.mv .i-pause, .mv.playing .i-play { display: none; }
.mv.playing .i-pause { display: block; }
.mv-chaps { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.mv-chap { border: 0; background: none; padding: 6px 0; color: #9C9AAB; font: inherit; font-size: 11px; text-align: left; cursor: pointer; min-width: 0; }
.mv-chap i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; margin-bottom: 6px; }
.mv-chap b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FF8A5C, #A88BFF); }
.mv-chap span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-chap[aria-current="true"] { color: #fff; }
.mv-chap:focus-visible, .mv-play:focus-visible { outline: 2px solid #FF9F7A; outline-offset: 2px; }
.mv-time { font-size: 12px; color: #C9C7D6; font-variant-numeric: tabular-nums; flex: none; }
@media (max-width: 820px) {
  .mv { aspect-ratio: auto; height: 600px; }
  .mv-chap span { display: none; }
  .mv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-brain { transform: scale(.72); }
  .mv-time { display: none; }
}

.mv-nav { position: absolute; top: calc(50% - 35px); z-index: 2; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12); opacity: .7; transition: opacity .25s, background-color .25s, border-color .25s, transform .25s; }
.mv-nav.prev { left: 20px; } .mv-nav.next { right: 20px; }
.mv-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.mv:hover .mv-nav, .mv-nav:focus-visible { opacity: 1; }
.mv-nav:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 159, 122, .6); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8), 0 0 24px rgba(255, 138, 92, .35); }
.mv-nav.prev:hover svg { transform: translateX(-2px); } .mv-nav.next:hover svg { transform: translateX(2px); }
.mv-nav:active { transform: scale(.94); }
.mv-nav:focus-visible { outline: 2px solid #FF9F7A; outline-offset: 3px; }
@media (max-width: 820px) {
  /* phones: the arrows join the control bar, either side of play, so they never cover a scene */
  .mv-nav { top: auto; bottom: 14px; margin-top: 0; width: 42px; height: 42px; opacity: 1; }
  .mv-nav.prev { left: 12px; } .mv-nav.next { left: 112px; right: auto; }
  .mv-bar { padding-left: 62px; gap: 10px; }
  .mv-play { margin-right: 50px; }
}

/* sign-up: who it's for */
.acct { align-self: flex-start; }
.acct button { height: 34px; }

/* ---------- trust: seals, pills, collect / never ---------- */
.tpills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tpills li { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 12px 5px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #0E6B4C; background: #E9F8F1; border: 1px solid #BFE9D5; }
.tpills li svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #13865F; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.seals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; margin-top: 36px; }
.seal { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 20px 44px -34px rgba(19, 134, 95, .6); }
.seal-ic { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #4FD6A2, #13865F); box-shadow: 0 0 0 5px #E9F8F1, 0 12px 24px -10px rgba(19, 134, 95, .8); }
.seal-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seal-ic b { font-family: var(--disp); font-size: 13px; line-height: 1.05; color: #fff; letter-spacing: .02em; text-align: center; }
.seal h3 { font-size: 16.5px; }
.seal p { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }
.cn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; margin: 14px 0; }
.cn-card { padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--white); }
.cn-card h3 { font-size: 17px; margin-bottom: 12px; }
.cn-card ul { list-style: none; display: grid; gap: 10px; }
.cn-card li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.cn-card li .tick { margin-top: 4px; }
.cn-card .nx { width: 15px; height: 15px; flex: none; margin-top: 4px; fill: none; stroke: #C2410C; stroke-width: 2.6; stroke-linecap: round; }
.cn-card small { display: block; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.cn-card small a { color: inherit; }
.hero2 .tpills { margin-top: 18px; }
.foot-trust { margin-top: 16px; }
.auth-trust { margin-top: 16px; justify-content: center; }

/* ---------- forms (shared) ---------- */
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld > label, .fld .lbl { font-size: 13.5px; font-weight: 600; }
.fld .opt { font-weight: 500; color: var(--ink-3); }
.hint { font-size: 12.5px; color: var(--ink-3); }
.inp { height: 48px; width: 100%; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--white); font-size: 15.5px; transition: border-color .15s, box-shadow .15s; }
select.inp { appearance: none; padding-right: 40px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5C69' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.inp[aria-invalid="true"] { border-color: var(--bad-line); box-shadow: 0 0 0 4px var(--bad-ring); }
.err { font-size: 13px; color: var(--bad); }
.err:empty { display: none; }
.affix { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--white); }
.affix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.affix span { height: 48px; padding: 0 12px; display: grid; place-items: center; background: var(--field); color: var(--ink-3); border-right: 1px solid rgba(30, 30, 60, .1); }
.affix .inp { border: 0; border-radius: 0; box-shadow: none; min-width: 0; }
.notice { padding: 12px 14px; border-radius: 12px; font-size: 14px; background: var(--info-bg); color: var(--info); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice.bad { background: var(--act-bg); color: var(--act); }
.notice:empty { display: none; }

/* ---------- sign up ---------- */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.auth-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.auth-top p { font-size: 14px; color: var(--ink-3); }
.auth-top a { font-weight: 620; color: var(--ink); }
.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.auth-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }
.auth-form .chip { align-self: flex-start; }
.auth-form h1 { font-size: clamp(34px, 4vw, 44px); font-weight: 650; }
.auth-form > p { color: var(--ink-2); }
.auth-form form { display: flex; flex-direction: column; gap: 18px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(30, 30, 60, .14); }
.legal { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.legal a { color: var(--ink); }
.auth-aside { flex: 1 1 520px; min-width: 0; margin: 16px; border-radius: 28px; background: var(--ink); color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; gap: 32px; }
.auth-aside::before, .auth-aside::after { content: ""; position: absolute; width: 700px; height: 600px; pointer-events: none; }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; max-width: 12em; }
.mini-doc { background: #fff; color: var(--ink); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); font-size: 14px; }
.mini-doc .meta { font-size: 12px; color: var(--ink-3); }
.mini-doc b { font-weight: 680; font-size: 16px; }
.mini-doc p { color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; }
.facts strong { display: block; font-family: var(--disp); font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1.2; }
.facts span { font-size: 13px; color: var(--on-dark-2); }

/* ---------- onboarding ---------- */
.ob { padding: 24px clamp(16px, 4vw, 48px) 48px; }
.ob-top { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ob-top p { font-size: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ob-body { max-width: 1180px; margin: 40px auto 0; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.rail { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 22px; background: var(--sand); }
.rail .cap { color: var(--ink-3); padding: 4px 10px 12px; }
.rail ol { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rail-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border: 0; border-radius: 14px; background: transparent; text-align: left; color: var(--ink); }
.rail-btn:not([disabled]) { cursor: pointer; }
.rail-btn:not([disabled]):hover { background: rgba(255, 255, 255, .6); }
.rail-btn[aria-current="step"] { background: var(--white); box-shadow: 0 1px 2px rgba(30, 30, 60, .08); }
.rail-btn .n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink-3); border: 1.5px solid rgba(30, 30, 60, .2); }
.rail-btn[aria-current="step"] .n { background: var(--ink); color: #fff; border-color: var(--ink); }
.rail-btn.done .n { background: var(--ok-dot); color: #fff; border-color: var(--ok-dot); font-size: 0; }
.rail-btn.done .n::after { content: "✓"; font-size: 14px; }
.rail-btn .t { display: flex; flex-direction: column; }
.rail-btn .t b { font-weight: 640; font-size: 15px; }
.rail-btn .t small { font-size: 13px; color: var(--ink-3); }
.rail-help { font-size: 13px; color: var(--ink-3); padding: 16px 10px 4px; border-top: 1px solid rgba(30, 30, 60, .1); margin-top: 12px; }
.ob-panel { flex: 999 1 560px; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px, 4vw, 48px); box-shadow: 0 40px 80px -50px rgba(40, 30, 90, .35); }
.ob-step { display: flex; flex-direction: column; gap: 22px; }
.ob-step .step-n { font-size: 13px; font-weight: 650; color: var(--accent); }
.ob-step h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.04; font-weight: 650; overflow-wrap: anywhere; }
.ob-step h1:focus { outline: none; }
.ob-step .sub { color: var(--ink-2); margin-top: -8px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.ob-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.ob-actions .spacer { flex: 1; }

.conn { border: 1px solid rgba(30, 30, 60, .1); border-radius: 18px; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.conn .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--field); display: grid; place-items: center; flex: none; }
.conn .about { flex: 1; min-width: 200px; }
.conn .about b { font-weight: 650; }
.conn .about b span { font-weight: 500; color: var(--ink-3); }
.conn .about small { display: block; font-size: 13.5px; color: var(--ink-3); }
.conn-detail { flex-basis: 100%; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 14px; background: var(--paper); font-size: 14px; color: var(--ink-2); }
.conn-detail b { color: var(--ink); }
.copy { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--white); border: 1px solid rgba(30, 30, 60, .1); font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.copy code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.copy .btn { font-family: var(--font); height: 34px; padding: 0 14px; font-size: 13.5px; }
.verify-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--pill); align-self: flex-start; border: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { height: 38px; padding: 0 16px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; font-weight: 620; color: var(--ink-2); cursor: pointer; }
.seg input:checked + label { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 30, 60, .12); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.tags-inp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 7px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--white); }
.tags-inp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.tags-inp input { flex: 1; min-width: 200px; height: 32px; border: 0; padding: 0 6px; outline: none; background: transparent; font-size: 15px; }
.tags-inp .chip { height: 32px; padding: 0 6px 0 12px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.tags-inp .chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.run-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.run-list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 15px; }
.run-list .st { margin-left: auto; font-size: 13px; font-weight: 650; color: var(--ink-3); }
.run-list .st.run { color: var(--info); }
.run-list .st.done { color: var(--ok); }
.bar { height: 6px; border-radius: 999px; background: var(--skel); margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .6s ease; }

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .auth-aside { display: none; }
}
@media (max-width: 820px) {
  .nav-wrap { padding: 10px 12px 0; }
  .nav-links, .nav-cta .navlink { display: none; }
  .nav-toggle { display: grid; }
  .nav-cta { gap: 2px; }
  .nav.open .nav-links { display: flex; flex-direction: column; order: 3; width: 100%; margin: 4px 0 0; }
  .nav.open .navlink { padding: 12px; font-size: 16px; }
  .hero { padding-top: 56px; }
  /* stack the two hero cards; the run card overlaps only the doc card's placeholder lines */
  .hero-art { min-height: 0; display: flex; flex-direction: column; }
  .doc-card { position: relative; width: 100%; padding: 24px 24px 40px; }
  .run-card { position: relative; width: 92%; min-width: 0; margin: -48px 0 0 auto; }
  .doc-page { padding: 32px 22px; }
  .cite { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cite .from { text-align: left; margin-bottom: 8px; }
  .cite .from:empty { display: none; }
  .quote { padding: 28px; }
  .price { padding: 28px; }
  .amt strong { font-size: 56px; }
  .sec { padding-top: 88px; }
  .band { margin-top: 88px; padding: 80px 0; }
  .cta-row .btn { flex: 1 1 100%; }
  .task { grid-template-columns: minmax(0, 1fr); }
  .task .who { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctiles li:nth-child(2) { border-right: 0; }
  .ctiles li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .crow { grid-template-columns: minmax(0, 1fr) auto; }
  .crow .cbar { grid-column: 1 / -1; grid-row: 2; }
  /* onboarding rail becomes a compact row: numbers, plus the current step's name */
  .ob-body { margin-top: 20px; gap: 16px; }
  .rail { flex-basis: 100%; padding: 8px; border-radius: 18px; }
  .rail .cap, .rail-help, .rail-btn .t small { display: none; }
  .rail ol { flex-direction: row; }
  .rail-btn { width: auto; padding: 8px; }
  .rail-btn .t { display: none; }
  .rail-btn[aria-current="step"] { flex: 1; }
  .rail-btn[aria-current="step"] .t { display: flex; }
}
@media (max-width: 820px) {
  .hero2 { padding-top: 40px; }
  .act-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .act-stats li:nth-child(3) { border-right: 0; }
  .act-stats li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .act-chart { gap: 10px; height: 200px; padding: 14px; }
  .bc-top { flex-direction: column; align-items: flex-start; }
  .bc-a { margin-left: 0; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pipe .w { display: none; }
  .pipe .in-n { order: 1; }
  .pipe .vw.v1 { order: 2; }
  .hub { order: 3; grid-column: 1 / -1; grid-row: auto; }
  .pipe .vw.v2 { order: 4; }
  .pipe .out-n { order: 5; }
  .pnode { margin: 0; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .pnode.out-n .go { display: none; }
  .vw { display: block; grid-column: 1 / -1; height: 40px; position: relative; }
  .vw::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, rgba(30, 30, 60, .22) 0 6px, transparent 6px 12px); animation: flowv 1.2s linear infinite; }
  .vw b { position: absolute; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); animation: packetv 1.6s linear infinite; }
  .slack-toast { align-self: stretch; width: 100%; }
}
@media (max-width: 820px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .foot-brand { grid-column: 1 / -1; }
  .xfer-stage { padding: 32px 16px 24px; border-radius: 24px; }
  .flow3 { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  .frags li { animation-name: sendv; }
  .beam { width: 2px; height: 44px; margin: 4px auto; }
  .b-in { background: linear-gradient(180deg, rgba(255, 138, 92, .1), rgba(168, 139, 255, .55)); }
  .b-out { background: linear-gradient(180deg, rgba(168, 139, 255, .55), rgba(127, 224, 184, .1)); }
  .beam i { left: 0; top: -40%; width: 100%; height: 40%; animation-name: streakv; }
  .b-in i { background: linear-gradient(180deg, transparent, #FFB08A, #fff); }
  .b-out i { background: linear-gradient(180deg, transparent, #9FF0CC, #fff); }
  .corex::before { top: -60px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal .rv { opacity: 1; transform: none; }
}