/* Octolyze — shared site design system (matches octolyze-landing-prototype.html).
   Link this + octolyze-site.js on every page (docs, changelog, partners, legal,
   help, 404) so the whole site reads as one culture: light, glass, Plus Jakarta. */
:root{
  --ground:#f2f1f8; --paper:#fcfcfd; --ink:#0b0914; --body:#3b3856; --muted:#6c6890; --faint:#8f8caf;
  --accent:#4318ff; --accent-deep:#2e0fb0; --lift:#7a5cff; --line:#e2dfef;
  --sev:#d64550; --watch:#e0a81a; --impact:#4318ff; --conf:#12a594; --nm:#a7a3be;
  --maxw:1240px;
  --sans:"Plus Jakarta Sans","Segoe UI Variable Display",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.94), inset 0 0 0 1px rgba(255,255,255,.52), 0 4px 12px -6px rgba(20,18,39,.08), 0 28px 58px -30px rgba(46,15,176,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--body); font-family:var(--sans); line-height:1.62; font-weight:500;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-synthesis-weight:none; overflow-x:hidden; position:relative; min-height:100vh; display:flex; flex-direction:column}
::selection{background:rgba(67,24,255,.16); color:var(--ink)}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; color:var(--ink); letter-spacing:-.03em; font-weight:800; text-wrap:balance}
h1{font-size:clamp(2.6rem,1.4rem + 3.6vw,4.4rem); line-height:1.02; letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3vw,3rem); line-height:1.06; letter-spacing:-.04em}
h3{font-size:1.24rem; letter-spacing:-.026em}
p{margin:0}
.grad{background:linear-gradient(100deg,var(--accent),var(--lift)); -webkit-background-clip:text; background-clip:text; color:transparent}
.num{font-variant-numeric:tabular-nums}
.wrap{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 28px; width:100%}

/* atmosphere */
.tech-grid{position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, rgba(67,24,255,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(67,24,255,.035) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 80%);}

.eyebrow{font-size:.74rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.7em}
.eyebrow::before{content:""; width:24px; height:2px; border-radius:2px; background:var(--accent); opacity:.55}
.lede{font-size:1.14rem; color:var(--muted); line-height:1.64; max-width:62ch; font-weight:500}
.glass{background:rgba(255,255,255,.66); backdrop-filter:blur(22px) saturate(1.35); -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.68); box-shadow:var(--glass-shadow); border-radius:22px}

.btn{display:inline-flex; align-items:center; gap:.55em; font-weight:800; font-size:.96rem; font-family:var(--sans);
  padding:13px 22px; border-radius:12px; cursor:pointer; border:0; transition:transform .18s, box-shadow .25s, background .2s, color .2s}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 22px -8px rgba(67,24,255,.6)}
.btn-primary:hover{transform:translateY(-2px); background:var(--accent-deep); box-shadow:0 14px 30px -8px rgba(67,24,255,.7)}
.btn-ghost{background:rgba(255,255,255,.48); color:var(--accent-deep); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent); background:rgba(67,24,255,.04)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* nav (shared) */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); background:rgba(255,255,255,.42); border-bottom:1px solid rgba(255,255,255,.66); box-shadow:0 8px 22px -20px rgba(20,18,39,.22)}
.nav-in{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; height:80px; width:100%; padding-left:0; padding-right:0; position:relative}
.brand{display:flex; align-items:center; justify-self:start; gap:12px; font-weight:800; color:var(--ink); font-size:1.48rem; line-height:1; letter-spacing:-.045em; transition:transform .18s ease}
.brand:hover{transform:translateY(-1px)}
.brand-mark{position:relative; width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none; background:linear-gradient(135deg,var(--lift),var(--accent)); box-shadow:0 9px 20px -12px rgba(67,24,255,.65)}
.brand-mark::before{content:""; position:absolute; inset:1px; border-radius:13px; background:rgba(255,255,255,.94)}
.brand .mk{position:relative; z-index:1; width:24px; height:24px; display:block}
.nav-pill{display:flex; justify-self:center; gap:4px; padding:6px 8px; border-radius:16px; background:rgba(255,255,255,.56); border:1px solid rgba(255,255,255,.85); box-shadow:0 6px 20px -18px rgba(20,18,39,.28)}
.nav-pill a{padding:9px 17px; border-radius:12px; font-size:.9rem; font-weight:700; color:var(--muted); transition:color .2s, background .2s, box-shadow .2s}
.nav-pill a:hover,.nav-pill a[aria-current="page"]{color:var(--ink); background:rgba(255,255,255,.82); box-shadow:0 8px 22px -20px rgba(20,18,39,.34)}
.nav-r{display:flex; align-items:center; justify-self:end; gap:16px}
.menu-toggle{display:none; width:38px; height:38px; align-items:center; justify-content:center; flex-direction:column; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.56); color:var(--ink); cursor:pointer}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{content:""; display:block; width:16px; height:2px; border-radius:10px; background:currentColor; transition:transform .2s, opacity .2s}
.menu-toggle span{margin:4px 0}
@media(max-width:1216px){ .nav-in{padding-left:28px; padding-right:28px} }
@media(max-width:860px){
  .menu-toggle{display:flex} .nav-r{gap:10px} .nav-pill{display:none}

  /* the translucent bar itself goes fully opaque while the menu is open */
  .nav.open{background:#fff; border-bottom-color:transparent; box-shadow:none}

  /* hamburger -> X morph */
  .nav.open .menu-toggle::before{transform:translateY(6px) rotate(45deg)}
  .nav.open .menu-toggle span{opacity:0}
  .nav.open .menu-toggle::after{transform:translateY(-6px) rotate(-45deg)}

  /* ===== mobile menu — body-child sheet, fixed to the viewport =====
     .m-scrim + .m-nav are <body> children AFTER <header>, so position:fixed
     resolves against the real viewport (body has no transform/filter). Defeats
     both the grid justify-self trap and the header's backdrop-filter CB trap. */
  .m-scrim,.m-nav{--nav-h:81px}

  .m-scrim{
    display:block;
    position:fixed; inset:var(--nav-h) 0 0 0;
    z-index:44;
    background:rgba(11,9,20,.46);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    touch-action:none;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .26s ease, visibility 0s linear .26s;
  }
  .m-nav{
    display:flex; flex-direction:column; gap:2px;
    position:fixed; top:var(--nav-h); left:0; right:0;
    justify-self:stretch;
    z-index:45;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 26px 44px -26px rgba(20,18,39,.4);
    padding:12px max(20px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    max-height:calc(100vh - var(--nav-h));
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    transform:translateY(-10px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .22s ease, visibility 0s linear .32s;
  }
  .m-nav a{
    display:flex; align-items:center;
    min-height:52px; padding:0 12px;
    border-radius:12px;
    font-size:1.02rem; font-weight:700; line-height:1.2;
    color:var(--ink); text-align:left;
    -webkit-tap-highlight-color:transparent;
    transition:background .18s ease, color .18s ease;
  }
  .m-nav a:not(.m-cta):hover,
  .m-nav a:not(.m-cta):active{background:rgba(67,24,255,.06); color:var(--accent-deep)}
  .m-nav .m-cta{
    display:flex; width:100%; justify-content:center;
    margin-top:10px; min-height:54px;
    font-size:1rem; font-weight:800; color:#fff; border-radius:14px;
  }

  .nav.open ~ .m-scrim{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .26s ease}
  .nav.open ~ .m-nav{transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .2s ease}

  .nav.open ~ .m-nav a{animation:mNavRowIn .42s both cubic-bezier(.22,.61,.36,1)}
  .nav.open ~ .m-nav a:nth-child(1){animation-delay:.04s}
  .nav.open ~ .m-nav a:nth-child(2){animation-delay:.08s}
  .nav.open ~ .m-nav a:nth-child(3){animation-delay:.12s}
  .nav.open ~ .m-nav a:nth-child(4){animation-delay:.16s}
  .nav.open ~ .m-nav a:nth-child(5){animation-delay:.20s}
  .nav.open ~ .m-nav a:nth-child(6){animation-delay:.24s}
  @keyframes mNavRowIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
}
@media(max-width:520px){
  .nav-r .btn{display:none}
  .m-nav{padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right))}
  .m-nav a{font-size:1rem}
}

/* page header block */
main{flex:1 0 auto; position:relative; z-index:2}
.page-head{padding:clamp(48px,6vw,88px) 0 clamp(28px,3vw,44px)}
.page-head h1{margin-top:16px} .page-head .lede{margin-top:20px}
.page-head .updated{margin-top:14px; font-size:.86rem; color:var(--faint); font-weight:700}

/* long-form prose (legal, help, docs content) */
.prose{max-width:74ch; font-size:1.02rem; line-height:1.72; color:var(--body)}
.prose h2{font-size:1.5rem; margin:44px 0 14px; letter-spacing:-.03em}
.prose h3{font-size:1.14rem; margin:28px 0 10px}
.prose p{margin:0 0 16px}
.prose a{color:var(--accent-deep); font-weight:700; text-decoration:underline; text-decoration-color:rgba(67,24,255,.28); text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--accent)}
.prose ul,.prose ol{margin:0 0 18px; padding-left:1.3em} .prose li{margin:6px 0}
.prose strong{color:var(--ink); font-weight:800}
.prose code{font-family:var(--mono); font-size:.9em; background:rgba(67,24,255,.06); border:1px solid var(--line); border-radius:6px; padding:1px 6px}
.prose hr{border:0; border-top:1px solid var(--line); margin:34px 0}
.callout{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:14px; background:rgba(67,24,255,.04); border:1px solid rgba(67,24,255,.14); margin:0 0 20px}
.callout .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:8px; flex:none}
.callout.nm{background:rgba(255,255,255,.5); border:1px dashed var(--nm)} .callout.nm .dot{border:1.5px dashed var(--nm); background:transparent}

/* footer (shared) */
footer.site{position:relative; z-index:2; border-top:1px solid var(--line); padding:66px 0 40px; overflow:hidden; background:rgba(255,255,255,.30); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); margin-top:72px; flex-shrink:0}
footer.site::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 0%, rgba(67,24,255,.055), transparent 42%)}
.foot-in{position:relative; z-index:1}
.foot-top{display:grid; grid-template-columns:minmax(300px,1.15fr) minmax(0,1.85fr); gap:66px; align-items:start}
.foot-brand{display:flex; flex-direction:column; gap:22px}
.foot-brand .brand{font-size:1.48rem}
.foot-brand p{max-width:44ch; color:var(--body); font-size:1rem; line-height:1.62}
.foot-social{display:flex; gap:12px; margin-top:2px}
.foot-social a{display:grid; place-items:center; width:42px; height:42px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.66); color:var(--muted); box-shadow:0 10px 26px -22px rgba(20,18,39,.28); transition:color .2s, border-color .2s, background .2s, transform .18s, box-shadow .2s}
.foot-social svg{width:18px; height:18px; display:block}
.foot-social a:hover{color:#fff; border-color:rgba(67,24,255,.34); background:var(--accent); transform:translateY(-2px); box-shadow:0 14px 28px -16px rgba(67,24,255,.62)}
/* Newsletter capture — injected site-wide into the footer brand column by octolyze-site.js */
.foot-news{margin-top:6px; max-width:360px}
.foot-news .fn-lab{font-size:.9rem; font-weight:700; color:var(--body); margin-bottom:10px}
.foot-news .fn-row{display:flex; gap:8px}
.foot-news input[type=email]{flex:1; min-width:0; height:44px; padding:0 14px; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.66); color:var(--ink); font:inherit; font-size:.92rem; outline:none; transition:border-color .2s}
.foot-news input[type=email]:focus{border-color:rgba(67,24,255,.42)}
.foot-news button{height:44px; padding:0 18px; border:0; border-radius:13px; background:var(--accent); color:#fff; font:inherit; font-weight:700; font-size:.9rem; cursor:pointer; white-space:nowrap; transition:transform .18s, box-shadow .2s, opacity .2s; box-shadow:0 12px 26px -16px rgba(67,24,255,.62)}
.foot-news button:hover{transform:translateY(-1px); box-shadow:0 16px 30px -16px rgba(67,24,255,.7)}
.foot-news button:disabled{opacity:.6; cursor:default; transform:none}
.foot-news .fn-status{margin:9px 2px 0; font-size:.84rem; font-weight:600}
.foot-news .fn-status.ok{color:#0e8a79}
.foot-news .fn-status.err{color:#e5484d}
/* Personalization Marketing widget — injected bottom-right by octolyze-site.js */
.oz-pw{position:fixed; right:20px; bottom:20px; z-index:60; width:320px; max-width:calc(100vw - 40px); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px -28px rgba(20,18,39,.5); padding:18px 18px 16px; opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s}
.oz-pw.in{opacity:1; transform:none}
.oz-pw-x{position:absolute; top:9px; right:11px; border:0; background:transparent; color:var(--faint); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px}
.oz-pw-x:hover{background:rgba(20,18,39,.06); color:var(--ink)}
.oz-pw-h{font-size:1.02rem; font-weight:800; color:var(--ink); line-height:1.3; padding-right:16px}
.oz-pw-b{font-size:.9rem; color:var(--muted); line-height:1.5; margin-top:6px}
.oz-pw-cta{display:block; text-align:center; margin-top:14px; height:42px; line-height:42px; border-radius:12px; background:var(--accent); color:#fff; font-weight:700; font-size:.92rem; text-decoration:none; box-shadow:0 12px 26px -16px rgba(67,24,255,.62)}
.oz-pw-cta:hover{opacity:.94}
.foot-links{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:34px}
.foot-col h3{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0 0 16px}
.foot-col a{display:block; color:var(--muted); font-size:.93rem; line-height:1.36; padding:7px 0; transition:color .2s; cursor:pointer}
.foot-col a:hover{color:var(--accent-deep)}
.foot-bottom{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px 24px; margin-top:52px; padding-top:26px; border-top:1px solid var(--line); color:var(--faint); font-size:.88rem}
.foot-bottom > :first-child{justify-self:start}
.foot-bottom > :last-child{justify-self:end}
.foot-bottom strong{color:var(--ink); font-weight:800}
.fb-pay{justify-self:center; display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center}
.fb-pay .chip{display:flex; align-items:center; justify-content:center; height:36px; padding:0 13px; background:rgba(255,255,255,.6); border:1px solid rgba(20,20,50,.1); border-radius:10px}
.fb-pay .chip svg{height:17px; width:auto; display:block}
@media(max-width:960px){ .foot-top{grid-template-columns:1fr; gap:34px} .foot-links{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:620px){ footer.site{padding-top:40px} .foot-links{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px} .foot-bottom{grid-template-columns:1fr; justify-items:center; text-align:center; gap:20px} .foot-bottom > :first-child,.foot-bottom > :last-child{justify-self:center} }

/* content sections — divider line + section head + glass frame, matching the
   homepage culture (never bare text under a hero) */
section.blk{position:relative; padding:clamp(54px,6vw,90px) 0}
/* Restore the side gutters .wrap already asks for. `padding:clamp(..) 0` above is a
   SHORTHAND, so it also sets horizontal padding to 0 — and section.blk (0,0,1,1) both
   outranks .wrap (0,0,1,0) and comes 188 lines later, so every <section class="blk wrap">
   silently lost its 28px. Invisible above ~1240px, where max-width centring keeps the
   content off the edge; below that the text runs into the window. Measured live at 768px:
   all six sections computed padding 0 and sat at left:0. The ::before divider was already
   inset 28px, so the rule and the text it underlines had drifted apart too.
   1296px = --maxw (1240) + 2x28: the exact width below which the centred box stops
   keeping content off the edge. founding-members.html uses 1216 for the same fix, which
   leaves an 80px band still squeezed — the shape is reused, the number is measured. */
@media(max-width:1296px){ section.blk.wrap{padding-left:28px; padding-right:28px} }
section.blk::before{content:""; position:absolute; top:0; left:28px; right:28px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(67,24,255,.12) 18%, rgba(230,227,242,.95) 50%, rgba(67,24,255,.12) 82%, transparent)}
section.blk.no-rule::before{display:none}
.head{max-width:62ch} .head h2{margin-top:14px} .head .lede{margin-top:18px; color:var(--muted)}
.panel{padding:clamp(28px,3.4vw,46px); border-radius:26px}
.panel + .panel{margin-top:22px}

/* full-viewport hero (every page opens with this; content follows on scroll) */
.hero-full{min-height:calc(100svh - 80px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 28px 104px; position:relative}
.hero-full .eyebrow{justify-content:center; margin-top:6px}
.hero-full h1{margin-top:16px; max-width:17ch}
.hero-full .lede{margin:20px auto 0; color:var(--muted); max-width:56ch; text-align:center}
.hero-full .hero-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:30px}
.hero-full .updated{margin-top:14px}
/* octopus instrument, injected by octolyze-site.js into every .hero-stage */
.hero-stage{position:relative; width:min(320px,62vw); aspect-ratio:1; margin:0 auto 4px}
.hero-stage .ring{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.hero-stage .r1{animation:heroSpin 70s linear infinite} .hero-stage .r2{animation:heroSpin 110s linear infinite reverse}
.hero-stage .glow{position:absolute; top:50%; left:50%; width:72%; height:72%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(67,24,255,.16), rgba(122,92,255,.05) 45%, transparent 68%)}
.hero-stage .disc{position:absolute; top:50%; left:50%; width:40%; height:40%; transform:translate(-50%,-50%); border-radius:50%; z-index:3; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85); box-shadow:inset 0 2px 8px rgba(255,255,255,.9), 0 18px 46px -18px rgba(46,15,176,.38)}
.hero-stage .octo{position:absolute; top:50%; left:50%; width:23%; height:23%; transform:translate(-50%,-50%); z-index:4}
.hero-stage .octo svg{width:100%; height:100%; filter:drop-shadow(0 5px 14px rgba(67,24,255,.4))}
.hero-stage .hbadge{position:absolute; z-index:5; top:1%; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:100px; font-size:.7rem; font-weight:800; color:var(--nm); background:rgba(255,255,255,.55); border:1px dashed var(--nm); white-space:nowrap; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.hero-stage .hbadge .d{width:8px; height:8px; border-radius:50%; border:1.5px dashed var(--nm)}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:inline-flex; flex-direction:column; align-items:center; gap:5px; color:var(--faint); font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; transition:color .2s}
.scroll-cue:hover{color:var(--accent-deep)}
.scroll-cue .chev{font-size:1rem; animation:cuebob 2s ease-in-out infinite}
@keyframes heroSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cuebob{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){ .hero-stage .ring{animation:none} .scroll-cue .chev{animation:none} }
@media(max-width:560px){ .hero-full{min-height:calc(100svh - 72px)} .hero-full .hero-cta .btn{width:100%; justify-content:center} }

.rv{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} .rv{opacity:1; transform:none} html{scroll-behavior:auto} }

/* Skip-to-content (a11y) */
.oz-skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:100000}.oz-skip:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 16px;border-radius:10px;background:#4318ff;color:#fff;font-weight:800;font-size:.9rem;box-shadow:0 8px 22px -8px rgba(67,24,255,.6)}