/* ============================================================
   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-meetings.qpage.
   ============================================================ */

#quely-meetings.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-meetings.qpage *, #quely-meetings.qpage *::before, #quely-meetings.qpage *::after { box-sizing:border-box; }

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

/* ---------- type ---------- */
#quely-meetings .display { font-family:var(--font-marketing); font-weight:600; letter-spacing:-0.04em; line-height:1.02; margin:0; text-wrap:balance; }
#quely-meetings .lead { font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--ink-2); text-wrap:pretty; margin:0; }
#quely-meetings .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-meetings .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-meetings .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-meetings .eyebrow2::before { content:""; width:24px; height:2px; background:var(--purple); display:inline-block; }
#quely-meetings .eyebrow2.solo::before { display:none; }
#quely-meetings .kicker { display:flex; align-items:baseline; gap:14px; }
#quely-meetings .kicker .num { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--purple); letter-spacing:.05em; }
#quely-meetings .kicker .ttl { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
#quely-meetings .kicker .ln { flex:1; height:0; border-top:1px solid rgba(26,22,17,.22); transform:translateY(-3px); }
#quely-meetings .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-meetings .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-meetings .sec-head { max-width:760px; }
#quely-meetings .sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
#quely-meetings .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-meetings .sec-head.center .sec-sub { margin-left:auto; margin-right:auto; }

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

/* ---------- buttons ---------- */
#quely-meetings .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-meetings .btn-ink { background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 rgba(26,22,17,.25); }
#quely-meetings .btn-ink:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--purple); }
#quely-meetings .btn-amber { background:var(--amber); color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
#quely-meetings .btn-amber:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
#quely-meetings .btn-purple { background:var(--purple); color:#fff; box-shadow:4px 4px 0 var(--ink); }
#quely-meetings .btn-purple:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
#quely-meetings .btn-ghost { background:transparent; color:var(--ink); }
#quely-meetings .btn-ghost:hover { background:var(--ink); color:var(--paper); }
#quely-meetings .btn-sm { height:42px; padding:0 18px; font-size:14px; }

/* ---------- chips ---------- */
#quely-meetings .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-meetings .chip .dot { width:7px; height:7px; border-radius:50%; }

/* ---------- nav links ---------- */
#quely-meetings .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-meetings .nlink:hover { color:var(--ink); }
#quely-meetings .sp-link { color:var(--purple); font-weight:600; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
#quely-meetings .sp-link:hover { color:var(--purple-deep); }

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

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

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

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

/* ---------- integration marquee strip ---------- */
#quely-meetings .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-meetings .integ-strip .integ-name { font-family:var(--font-marketing); font-size:21px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
#quely-meetings .marquee { display:flex; overflow:hidden; }
#quely-meetings .marquee-track { display:inline-flex; align-items:center; gap:48px; padding-right:48px; white-space:nowrap; animation:qd-tick 26s linear infinite; }

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

/* ---------- footer ---------- */
#quely-meetings .footer { background:var(--ink); color:var(--paper); padding:88px 0 44px; }
#quely-meetings .footer .footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1.15fr 1fr 1fr; gap:40px; }
#quely-meetings .footer .f-brand .logo { display:flex; align-items:center; gap:11px; }
#quely-meetings .footer .f-brand .logo span { font-family:var(--font-marketing); font-size:24px; font-weight:700; letter-spacing:-0.04em; color:#fff; }
#quely-meetings .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-meetings .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-meetings .footer .f-demo:hover { background:var(--peri-soft); transform:translateY(-2px); }
#quely-meetings .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-meetings .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-meetings .footer .f-col a:hover { color:#fff; }
#quely-meetings .footer .f-col a.f-seeall { color:var(--peri); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
#quely-meetings .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-meetings .footer .f-bottom .f-legal { display:inline-flex; gap:26px; }
#quely-meetings .footer .f-bottom a { color:inherit; text-decoration:none; transition:color .15s; }
#quely-meetings .footer .f-bottom a:hover { color:#fff; }

#quely-meetings ::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-meetings .reveal{opacity:1!important;transform:none!important;} #quely-meetings *{animation:none!important;} }

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