/* ============================================================
   orbit.css — Orbit product page CHROME.
   Neo-brutalist editorial system, matching Quely "Spaces".
   Flat lavender paper, 2px ink borders, hard offset shadows,
   square corners, Geist / Geist Mono / Inter.
   Scoped to #quely-orbit.qpage.
   ============================================================ */

#quely-orbit.qpage {
  --paper:#ECE7F2; --paper-2:#E2DBEC; --paper-3:#D6CCE4; --card:#F8F5FB;
  --ink:#1A1611; --ink-2:#5C5345; --ink-3:#857B69; --line:#1A1611;
  --purple:#5C28A4; --purple-deep:#41186F; --peri:#9385E6; --peri-soft:#C9C1F2;
  --amber:#9385E6; --amber-deep:#7C6FD6; --hair:2px;
  --font-product:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-marketing:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
  background:var(--paper); color:var(--ink); font-family:var(--font-product);
  overflow-x:clip; font-feature-settings:"ss01"; position:relative;
  -webkit-font-smoothing:antialiased;
}
#quely-orbit.qpage *, #quely-orbit.qpage *::before, #quely-orbit.qpage *::after { box-sizing:border-box; }

/* ---------- layout ---------- */
#quely-orbit .wrap { max-width:1280px; margin:0 auto; padding:0 40px; position:relative; z-index:1; }
#quely-orbit .section, #quely-orbit .sec { padding:clamp(72px,8vw,120px) 0; position:relative; }

/* ---------- subtle background decoration (matches home / blog) ---------- */
/* hero: soft brand glow + broadsheet registration marks */
#quely-orbit .hero { overflow:hidden; }
#quely-orbit .ob-hero-deco { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:visible; }
#quely-orbit .ob-hero-deco .g { position:absolute; top:-14%; right:-5%; width:min(600px,46vw); height:min(600px,46vw); border-radius:50%; background:radial-gradient(circle, rgba(92,40,164,.14), transparent 66%); }
#quely-orbit .ob-hero-deco .reg { position:absolute; width:20px; height:20px; opacity:.38; }
#quely-orbit .ob-hero-deco .reg::before, #quely-orbit .ob-hero-deco .reg::after { content:""; position:absolute; background:var(--ink); }
#quely-orbit .ob-hero-deco .reg::before { left:9px; top:0; width:2px; height:20px; }
#quely-orbit .ob-hero-deco .reg::after { top:9px; left:0; height:2px; width:20px; }
#quely-orbit .ob-hero-deco .tl { left:6px; top:14px; }
#quely-orbit .ob-hero-deco .br { right:8px; bottom:22px; }
/* faint graph-paper texture on alternating light sections */
#quely-orbit .ob-grid-bg { background-image:linear-gradient(rgba(26,22,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(26,22,17,.035) 1px, transparent 1px); background-size:34px 34px; background-position:center top; }
#quely-orbit .ob-grid-bg::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:linear-gradient(180deg, var(--paper) 0%, transparent 12%, transparent 88%, var(--paper) 100%); }
/* faint mark watermark */
#quely-orbit .ob-wm { position:absolute; width:min(360px,30vw); height:auto; opacity:.05; user-select:none; pointer-events:none; z-index:0; }
#quely-orbit .ob-wm.tr { right:-2vw; top:-3vw; }
#quely-orbit .ob-wm.bl { left:-3vw; bottom:-4vw; transform:rotate(-14deg); }

/* ---------- type ---------- */
#quely-orbit .display { font-family:var(--font-marketing); font-weight:600; letter-spacing:-0.04em; line-height:1.02; margin:0; text-wrap:balance; }
#quely-orbit .lead { font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--ink-2); text-wrap:pretty; margin:0; }
#quely-orbit .hl { background:linear-gradient(180deg,transparent 10%, var(--amber) 10%, var(--amber) 90%, transparent 90%); padding:0 .1em; box-decoration-break:clone; -webkit-box-decoration-break:clone; color:var(--ink); }
#quely-orbit .hl-peri { background:linear-gradient(180deg,transparent 8%, var(--peri-soft) 8%, var(--peri-soft) 86%, transparent 86%); padding:0 .1em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* eyebrow + kicker + section title */
#quely-orbit .eyebrow2 { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--purple); display:inline-flex; align-items:center; gap:11px; }
#quely-orbit .eyebrow2::before { content:""; width:24px; height:2px; background:var(--purple); display:inline-block; }
#quely-orbit .eyebrow2.solo::before { display:none; }
#quely-orbit .kicker { display:flex; align-items:baseline; gap:14px; }
#quely-orbit .kicker .num { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--purple); letter-spacing:.05em; }
#quely-orbit .kicker .ttl { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
#quely-orbit .kicker .ln { flex:1; height:0; border-top:1px solid rgba(26,22,17,.22); transform:translateY(-3px); }
#quely-orbit .sec-title2 { font-family:var(--font-marketing); font-weight:600; font-size:clamp(32px,4.4vw,52px); line-height:1.04; letter-spacing:-0.04em; color:var(--ink); margin:18px 0 0; text-wrap:balance; }
#quely-orbit .label { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }

/* section heading helper (centered blocks) */
#quely-orbit .sec-head { max-width:760px; }
#quely-orbit .sec-head.center { margin-left:0; margin-right:0; text-align:left; }
#quely-orbit .sec-head .sec-sub { font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:var(--ink-2); margin:18px 0 0; max-width:620px; text-wrap:pretty; }
#quely-orbit .sec-head.center .sec-sub { margin-left:0; margin-right:0; }

/* ---------- ink boxes + offset shadows ---------- */
#quely-orbit .ink-box { border:var(--hair) solid var(--line); background:var(--card); }
#quely-orbit .ink-shadow { box-shadow:6px 6px 0 var(--ink); }
#quely-orbit .ink-shadow-sm { box-shadow:4px 4px 0 var(--ink); }
#quely-orbit .ink-shadow-purple { box-shadow:6px 6px 0 var(--purple); }
#quely-orbit .ink-shadow-amber { box-shadow:6px 6px 0 var(--amber-deep); }
#quely-orbit .gcard { transition:box-shadow .18s ease, transform .18s ease; }
#quely-orbit .gcard:hover { box-shadow:6px 6px 0 var(--purple); transform:translate(-2px,-2px); }

/* ---------- buttons ---------- */
#quely-orbit .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px; padding:0 24px; font-family:var(--font-product); font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; border:var(--hair) solid var(--line); border-radius:0; transition:transform .14s ease, box-shadow .14s ease, background .14s ease; }
#quely-orbit .btn-ink { background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 rgba(26,22,17,.25); }
#quely-orbit .btn-ink:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--purple); }
#quely-orbit .btn-amber { background:var(--amber); color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
#quely-orbit .btn-amber:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
#quely-orbit .btn-purple { background:var(--purple); color:#fff; box-shadow:4px 4px 0 var(--ink); }
#quely-orbit .btn-purple:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
#quely-orbit .btn-ghost { background:transparent; color:var(--ink); }
#quely-orbit .btn-ghost:hover { background:var(--ink); color:var(--paper); }
#quely-orbit .btn-sm { height:42px; padding:0 18px; font-size:14px; }

/* ---------- chips ---------- */
#quely-orbit .chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1.5px solid var(--line); background:var(--card); font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.02em; border-radius:999px; color:var(--ink); }
#quely-orbit .chip .dot { width:7px; height:7px; border-radius:50%; }

/* ---------- nav links ---------- */
#quely-orbit .nlink { font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--ink-2); text-decoration:none; padding:8px 10px; transition:color .15s; }
#quely-orbit .nlink:hover { color:var(--ink); }
#quely-orbit .sp-link { color:var(--purple); font-weight:600; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
#quely-orbit .sp-link:hover { color:var(--purple-deep); }

/* ---------- nav bar ---------- */
#quely-orbit .qnav { border-bottom:2px solid var(--line); position:sticky; top:0; z-index:100; background:var(--paper); }
#quely-orbit .qnav-inner { max-width:1280px; margin:0 auto; padding:0 40px; height:72px; display:flex; align-items:center; justify-content:space-between; }
#quely-orbit .qnav .logo { display:flex; align-items:center; gap:9px; text-decoration:none; }
#quely-orbit .qnav .logo span { font-family:var(--font-marketing); font-size:23px; font-weight:700; letter-spacing:-0.04em; color:var(--ink); }
#quely-orbit .qnav-inner { position:relative; }
#quely-orbit .nav-links { display:flex; align-items:center; gap:2px; }

/* ---------- mega-nav (canonical) ---------- */
#quely-orbit .q-navitem { position:static; }
#quely-orbit .q-navlink { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; cursor:pointer; white-space:nowrap; font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--ink-2); background:none; border:none; transition:color .15s; text-decoration:none; }
#quely-orbit .q-navitem:hover .q-navlink, #quely-orbit .q-navlink:hover { color:var(--purple); }
#quely-orbit .q-caret { transition:transform .2s; }
#quely-orbit .q-navitem:hover .q-caret { transform:rotate(180deg); }
#quely-orbit .q-mega { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); background:var(--card); border:2px solid var(--line); box-shadow:10px 10px 0 rgba(26,22,17,.16); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, visibility 0s linear .16s; z-index:60; }
#quely-orbit .q-mega::before { content:""; position:absolute; top:-30px; left:0; right:0; height:30px; }
#quely-orbit .q-navitem:hover .q-mega { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .12s ease, visibility 0s; }
#quely-orbit .q-mgrid { display:grid; }
#quely-orbit .q-mcol { padding:24px 26px; }
#quely-orbit .q-mcol + .q-mcol { border-left:2px solid var(--line); }
#quely-orbit .q-mrail { background:var(--paper-2); }
#quely-orbit .q-eyebrow { font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.13em; color:var(--ink-3); text-transform:uppercase; margin:0 0 14px; }
#quely-orbit .q-eyebrow.mt { margin-top:22px; }
#quely-orbit .q-mitem { display:flex; gap:12px; padding:9px 8px; margin:0 -8px; border-radius:8px; transition:background .13s; align-items:flex-start; text-decoration:none; }
#quely-orbit .q-mitem:hover { background:var(--paper); }
#quely-orbit .q-mic { flex:0 0 auto; width:28px; display:flex; justify-content:center; color:var(--purple); margin-top:1px; }
#quely-orbit .q-mitem b { display:block; font-family:var(--font-marketing); font-size:14.5px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); line-height:1.3; }
#quely-orbit .q-mitem i { display:block; font-style:normal; font-size:12px; color:var(--ink-2); line-height:1.4; margin-top:2px; }
#quely-orbit .q-rlink { display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:14px; font-weight:500; color:var(--ink); border-bottom:1px solid rgba(26,22,17,.12); transition:color .13s; text-decoration:none; cursor:pointer; }
#quely-orbit .q-rlink:last-child { border-bottom:none; }
#quely-orbit .q-rlink:hover { color:var(--purple); }
#quely-orbit .q-rnote { font-size:12.5px; color:var(--ink-2); line-height:1.45; margin:0 0 10px; }
#quely-orbit .q-rtool { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid rgba(26,22,17,.12); text-decoration:none; }
#quely-orbit .q-rtool:last-child { border-bottom:none; }
#quely-orbit .q-rtool b { font-family:var(--font-marketing); font-size:13.5px; font-weight:600; color:var(--ink); }
#quely-orbit .q-rtool:hover b { color:var(--purple); }
@media (max-width:980px){
  #quely-orbit .q-mega { left:12px; right:12px; transform:none!important; width:auto!important; }
  #quely-orbit .q-mgrid { grid-template-columns:1fr!important; }
  #quely-orbit .q-mcol + .q-mcol { border-left:none; border-top:2px solid var(--line); }
}

/* ---------- product frame (ink-bordered window) ---------- */
#quely-orbit .frame { border:var(--hair) solid var(--line); background:var(--card); border-radius:0; overflow:hidden; }
#quely-orbit .frame-bar { display:flex; align-items:center; gap:7px; padding:10px 14px; background:var(--paper-2); border-bottom:2px solid var(--line); }
#quely-orbit .frame-bar .tl { width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line); }

/* ---------- icon square ---------- */
#quely-orbit .ico-sq { display:flex; align-items:center; justify-content:center; border:2px solid var(--line); }

/* ---------- dark inset band ---------- */
#quely-orbit .inset-dark { background:var(--ink); color:var(--paper); }
#quely-orbit .inset-dark .label { color:var(--peri-soft); }
#quely-orbit .inset-dark .lead { color:rgba(236,231,242,.72); }
#quely-orbit .inset-dark .sec-head .sec-sub { color:rgba(236,231,242,.72); }
#quely-orbit .inset-dark .display { color:var(--paper); }

/* ---------- integration marquee strip ---------- */
#quely-orbit .integ-strip { background:var(--paper-2); border-top:2px solid var(--line); border-bottom:2px solid var(--line); padding:18px 0; overflow:hidden; display:flex; align-items:center; }
#quely-orbit .integ-strip .integ-name { font-family:var(--font-marketing); font-size:21px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
#quely-orbit .marquee { display:flex; overflow:hidden; }
#quely-orbit .marquee-track { display:inline-flex; align-items:center; gap:48px; padding-right:48px; white-space:nowrap; animation:qd-tick 26s linear infinite; }

/* ---------- reveal ---------- */
#quely-orbit .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.6,.3,1), transform .7s cubic-bezier(.2,.6,.3,1); }
#quely-orbit .reveal.in { opacity:1; transform:none; }

/* ---------- footer ---------- */
#quely-orbit .footer { background:var(--ink); color:var(--paper); padding:88px 0 44px; }
#quely-orbit .footer .footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1.15fr 1fr; gap:40px; }
#quely-orbit .footer .f-brand .logo { display:flex; align-items:center; gap:11px; }
#quely-orbit .footer .f-brand .logo span { font-family:var(--font-marketing); font-size:24px; font-weight:700; letter-spacing:-0.04em; color:#fff; }
#quely-orbit .footer .f-brand p { margin:20px 0 0; font-size:15.5px; line-height:1.55; color:rgba(236,231,242,.55); max-width:240px; }
#quely-orbit .footer .f-demo { display:inline-flex; align-items:center; justify-content:center; margin-top:26px; height:48px; padding:0 26px; background:var(--peri); color:var(--ink); font-family:var(--font-marketing); font-size:15px; font-weight:600; text-decoration:none; transition:background .15s, transform .15s; }
#quely-orbit .footer .f-demo:hover { background:var(--peri-soft); transform:translateY(-2px); }
#quely-orbit .footer .f-col h5 { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--peri); margin:0 0 22px; }
#quely-orbit .footer .f-col a { display:block; font-size:16px; color:rgba(236,231,242,.62); text-decoration:none; padding:8px 0; transition:color .15s; }
#quely-orbit .footer .f-col a:hover { color:#fff; }
#quely-orbit .footer .f-col a.f-seeall { color:var(--peri); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
#quely-orbit .footer .f-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:72px; padding-top:28px; border-top:1px solid rgba(236,231,242,.14); font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:rgba(236,231,242,.42); }
#quely-orbit .footer .f-bottom .f-legal { display:inline-flex; gap:26px; }
#quely-orbit .footer .f-bottom a { color:inherit; text-decoration:none; transition:color .15s; }
#quely-orbit .footer .f-bottom a:hover { color:#fff; }

#quely-orbit ::selection { background:var(--amber); color:var(--ink); }

@keyframes qd-tick { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes qfloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@media (prefers-reduced-motion:reduce){ #quely-orbit .reveal{opacity:1!important;transform:none!important;} #quely-orbit *{animation:none!important;} }

@media (max-width:860px){
  #quely-orbit .footer .footer-grid { grid-template-columns:1fr 1fr; gap:32px 24px; }
  #quely-orbit .footer .f-brand { grid-column:1 / -1; }
  #quely-orbit .qnav .nav-links { display:none; }
  #quely-orbit .footer .f-bottom { flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (max-width:480px){
  /* the fixed 40px side padding left no room for Sign in + Book a demo
     next to the logo/burger at phone widths, clipping the CTA */
  #quely-orbit .qnav-inner { padding:0 16px; }
}