/* ============================================================
   Quiet Workspace — Provenance design system
   Derived from the Attio reverse-design (design library: insp-attio).
   Pure-white canvas · near-black Inter Display headings · near-monochrome
   cool-grey scale · color ONLY in product data · calm cubic-bezier(.2,0,0,1).
   One token set; pages compose components, never restyle. (SPEC §B)
   ============================================================ */
:root{
  --paper:#FFFFFF; --ink:#1A1C20; --slate:#2E353D; --muted:#6B7480; --label:#9AA6B4;
  --hairline:#E5E9EF; --border:#C9D2DC; --fill:#F1F3F5; --fill2:#FCFCFD; --cta:#1B1E23;
  --signal:#2E6FF5;
  --surface:#FFFFFF; --surface2:#FCFCFD; --on-cta:#FFFFFF; --on-ink:#FFFFFF; --cta-hover:#000000;
  --v:#6B4BD6;--vbg:#F4F1FE; --a:#B5731B;--abg:#FEF4E8; --g:#1E8A53;--gbg:#EAF7EF; --bbg:#EAF1FE; --r:#C0354B;--rbg:#FDEBEE;
  --r-btn:10px; --r-card:14px; --r-pill:7px; --r-input:9px;
  --ease:cubic-bezier(.2,0,0,1); --t:.28s;
  --font-display:"Inter Display",Inter,system-ui,-apple-system,sans-serif;
  --font-ui:Inter,system-ui,-apple-system,sans-serif;
  --font-serif:Newsreader,Georgia,serif;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);
  --shadow-pop:0 1px 2px rgba(16,24,40,.04),0 24px 60px -28px rgba(16,24,40,.18);
  --sidebar-w:236px; --topbar-h:56px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--slate);font-family:var(--font-ui);
  font-size:14px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);font-weight:600;letter-spacing:-.025em;margin:0}
h1{font-size:30px;line-height:1.1} h2{font-size:20px} h3{font-size:16px}
.q-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
.q-muted{color:var(--muted)} .q-serif{font-family:var(--font-serif)}

/* ---- shell layout ---- */
.q-app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.q-side{border-right:1px solid var(--hairline);background:var(--fill2);display:flex;flex-direction:column;padding:12px 10px;position:sticky;top:0;height:100vh;overflow-y:auto}
.q-ws{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;font-weight:600;color:var(--ink);font-size:14px;cursor:pointer;transition:background var(--t) var(--ease)}
.q-ws:hover{background:var(--fill)}
.q-ws .av{width:22px;height:22px;border-radius:7px;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-size:12px;flex:none}
.q-ws .ch{margin-left:auto;color:var(--muted)}
.q-nav{display:flex;flex-direction:column;gap:1px;margin-top:8px}
.q-ni{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--muted);transition:all var(--t) var(--ease)}
.q-ni i{font-size:17px;color:var(--muted);transition:color var(--t) var(--ease)}
.q-ni:hover{background:var(--fill);color:var(--ink)} .q-ni:hover i{color:var(--ink)}
.q-ni.on{background:var(--fill);color:var(--ink);font-weight:600} .q-ni.on i{color:var(--signal)}
.q-sect{margin:14px 8px 5px}
.q-side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--hairline)}
.q-ver{font-size:10.5px;color:var(--label);padding:9px 9px 3px;letter-spacing:.01em}

.q-main{min-width:0;display:flex;flex-direction:column}
.q-top{height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--hairline);position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);z-index:20}
.q-top .crumb{font-weight:600;color:var(--ink);font-size:14px;display:flex;align-items:center;gap:8px}
.q-top .crumb i{color:var(--muted)}
.q-cmd{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;color:var(--muted);border:1px solid var(--border);border-radius:var(--r-btn);padding:6px 10px;cursor:pointer;transition:all var(--t) var(--ease);background:var(--surface)}
.q-cmd:hover{background:var(--fill);border-color:var(--muted)}
.q-cmd kbd{font:inherit;font-size:11px;background:var(--fill);border:1px solid var(--hairline);border-radius:5px;padding:1px 5px;color:var(--slate)}
.q-body{padding:24px 28px 60px;max-width:1180px;width:100%}
.q-pagehead{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.q-pagehead .sp{margin-left:auto;display:flex;gap:8px}

/* ---- buttons ---- */
.q-btn{font:500 13px var(--font-ui);border-radius:var(--r-btn);padding:7px 13px;cursor:pointer;border:1px solid transparent;transition:all var(--t) var(--ease);letter-spacing:-.01em;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.q-btn i{font-size:16px}
.q-btn.ink{background:var(--cta);color:var(--on-cta)} .q-btn.ink:hover{background:var(--cta-hover)}
.q-btn.outline{background:var(--surface);color:var(--slate);border-color:var(--border)} .q-btn.outline:hover{border-color:var(--muted);background:var(--fill)}
.q-btn.signal{background:var(--signal);color:#fff} .q-btn.signal:hover{filter:brightness(1.07)}
.q-btn.ghost{background:transparent;color:var(--slate)} .q-btn.ghost:hover{background:var(--fill)}
.q-btn.lg{font-size:14px;padding:8px 15px}

/* ---- pills / tags (the only color) ---- */
.q-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--surface);color:var(--slate)}
.q-pill .d{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.q-pill.v{background:var(--vbg);color:var(--v);border-color:transparent} .q-pill.v .d{background:var(--v)}
.q-pill.a{background:var(--abg);color:var(--a);border-color:transparent} .q-pill.a .d{background:var(--a)}
.q-pill.g{background:var(--gbg);color:var(--g);border-color:transparent} .q-pill.g .d{background:var(--g)}
.q-pill.b{background:var(--bbg);color:var(--signal);border-color:transparent} .q-pill.b .d{background:var(--signal)}
.q-pill.r{background:var(--rbg);color:var(--r);border-color:transparent} .q-pill.r .d{background:var(--r)}

/* ---- eyebrow ---- */
.q-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--slate);background:var(--surface);border:1px solid var(--hairline);border-radius:999px;padding:6px 7px 6px 14px;box-shadow:var(--shadow-card)}
.q-eyebrow .chev{width:18px;height:18px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--muted);font-size:11px}

/* ---- card ---- */
.q-card{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);padding:18px;box-shadow:var(--shadow-card);transition:all var(--t) var(--ease)}
.q-card.hover:hover{border-color:var(--border);transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.q-grid{display:grid;gap:16px} .q-grid.c3{grid-template-columns:repeat(3,1fr)} .q-grid.c2{grid-template-columns:repeat(2,1fr)}

/* ---- record table ---- */
.q-panel{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card)}
.q-toolbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.q-toolbar .h{font-weight:600;color:var(--ink);font-size:14px}
.q-toolbar .sp{margin-left:auto;display:flex;gap:8px}
.q-table{width:100%;border-collapse:collapse;font-size:13px}
.q-table th{text-align:left;font-weight:500;color:var(--muted);padding:9px 16px;border-bottom:1px solid var(--hairline);font-size:11.5px;letter-spacing:.01em}
.q-table td{padding:10px 16px;border-bottom:1px solid var(--hairline);color:var(--slate)}
.q-table tr:last-child td{border-bottom:0}
.q-table tbody tr{transition:background var(--t) var(--ease)} .q-table tbody tr:hover td{background:var(--fill2)}
.q-rec{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--ink)}
.q-rec .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;font-weight:600;flex:none}
.q-stack{display:flex} .q-stack .av{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);margin-left:-7px;display:grid;place-items:center;font-size:10px;color:#fff;font-weight:600}
.q-stack .av:first-child{margin-left:0}

/* ---- stat / trust cards ---- */
.q-stat{border:1px solid var(--hairline);border-radius:var(--r-card);padding:16px 18px;background:var(--surface)}
.q-stat .k{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--label)}
.q-stat .v{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--ink);margin-top:4px;letter-spacing:-.02em}
.q-stat .sub{font-size:12px;color:var(--muted);margin-top:3px}

/* ---- tabs (sliding underline) ---- */
.q-tabs{display:flex;gap:2px;border-bottom:1px solid var(--hairline)}
.q-tab{position:relative;padding:11px 16px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:color var(--t) var(--ease)}
.q-tab::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.q-tab.on,.q-tab:hover{color:var(--ink)} .q-tab.on::after,.q-tab:hover::after{transform:scaleX(1)}

/* ---- inputs ---- */
.q-input{font:14px var(--font-ui);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-input);padding:8px 11px;color:var(--ink);width:100%;transition:border-color var(--t) var(--ease)}
.q-input:focus{outline:none;border-color:var(--signal)}

@media(max-width:900px){.q-app{grid-template-columns:1fr}.q-side{display:none}.q-grid.c3,.q-grid.c2{grid-template-columns:1fr}}

/* ============================================================
   v1.1 — design-system-components audit (#1 tokens · #3 switch/menu · #4 mono · #5 motion map)
   Kept light/calm per R24 (rejected the dark-hardware / glass / spring directives).
   ============================================================ */
:root{
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;  /* data-mono role (#4) */
  --snap:cubic-bezier(.3,0,.1,1); --t-snap:.16s;                /* mechanical snap, no bounce (#5) */
}
/* data-mono: numeric arrays / metrics — tabular figures for layout stability (#4) */
.q-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* mechanical toggle (#3) — light track + rigid knob, calm snap */
.q-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.q-switch input{position:absolute;opacity:0;width:0;height:0}
.q-switch .tr{width:34px;height:20px;border-radius:999px;background:var(--border);transition:background var(--t-snap) var(--snap)}
.q-switch .kn{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#FBFCFE;box-shadow:var(--shadow-card);transition:transform var(--t-snap) var(--snap)}
.q-switch input:checked + .tr{background:var(--signal)}
.q-switch input:checked + .tr + .kn{transform:translateX(14px)}

/* dropdown / contextual menu — Z-10 "the paper", opaque + soft shadow (#3) */
.q-menu{position:absolute;z-index:10;min-width:190px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-input);box-shadow:var(--shadow-pop);padding:5px;display:flex;flex-direction:column;gap:1px}
.q-menu a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:13px;color:var(--slate);transition:background var(--t) var(--ease)}
.q-menu a:hover,.q-menu a.on{background:var(--fill);color:var(--ink)} .q-menu a i{font-size:16px;color:var(--muted)}

/* command palette — Z-50 floating, LIGHT (soft shadow, not dark glass) (#2) */
.q-cmdk-scrim{position:fixed;inset:0;z-index:60;background:rgba(16,24,40,.28);display:none;align-items:flex-start;justify-content:center;padding-top:13vh}
.q-cmdk-scrim.open{display:flex}
.q-cmdk{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 32px 80px -24px rgba(16,24,40,.35);overflow:hidden}
.q-cmdk .qf{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--hairline)}
.q-cmdk .qf i{font-size:19px;color:var(--muted)} .q-cmdk .qf input{flex:1;border:0;outline:0;font:15px var(--font-ui);color:var(--ink);background:transparent}
.q-cmdk .qlist{max-height:340px;overflow-y:auto;padding:6px}
.q-cmdk .qi{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-size:13.5px;color:var(--slate);cursor:pointer}
.q-cmdk .qi i{font-size:17px;color:var(--muted)} .q-cmdk .qi .hint{margin-left:auto;font-size:11px;color:var(--label)}
.q-cmdk .qi.sel,.q-cmdk .qi:hover{background:var(--fill);color:var(--ink)} .q-cmdk .qi.sel i,.q-cmdk .qi:hover i{color:var(--signal)}
.q-cmdk .qfoot{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--hairline);font-size:11px;color:var(--muted)}
.q-cmdk .qfoot kbd{font:inherit;background:var(--fill);border:1px solid var(--hairline);border-radius:4px;padding:0 5px}
.q-cmd{cursor:pointer}

/* native <details> dropdown — zero-JS Filter/Sort menus (uses .q-menu for the panel) */
.q-dd{position:relative;display:inline-block}
.q-dd>summary{list-style:none;cursor:pointer;display:inline-flex}
.q-dd>summary::-webkit-details-marker{display:none}
.q-dd>summary::marker{content:""}
.q-dd>.q-menu{right:0;left:auto;margin-top:6px}

/* create-record form grid */
.q-formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.q-field{display:flex;flex-direction:column;gap:6px}
.q-field.full{grid-column:1/-1}
.q-field label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--label)}
.q-field select.q-input{appearance:none;background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%236B7480' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 11px center}

/* ============================================================
   v1.2 — attio.com LANDING composition (docs/03-spec/DESIGN-ATTIO.md)
   Real captured values: Inter Display 600 / -0.02em / lh 1.0 huge hero;
   slate-blue lede; black 10px pill CTA; tabbed showcase; mono logos; dot-grid.
   ============================================================ */
:root{ --slate2:#525C6E; --landing-nav-h:68px; }

/* big display headline — the signature attio hero type */
/* type scale matched to attio.com: hero h1 64px, section h3 32px, feature h3 ~28px */
.q-display{font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:clamp(38px,4.2vw,64px);line-height:1.04;letter-spacing:-.02em;margin:0}
.q-display.sm{font-size:clamp(25px,2.5vw,32px);line-height:1.15;letter-spacing:-.015em}
.q-display.xs{font-size:clamp(21px,2vw,28px);line-height:1.2;letter-spacing:-.018em}
.q-lede{font-family:var(--font-ui);font-size:19px;font-weight:500;color:var(--slate2);
  line-height:1.4;letter-spacing:-.01em;margin:0}
.q-lede.sm{font-size:16px;line-height:1.5}

/* centered landing hero with generous breathing room */
.q-hero{max-width:860px;margin:0 auto;text-align:center;padding:76px 24px 48px;
  display:flex;flex-direction:column;align-items:center;gap:20px}
.q-hero .q-lede{max-width:46ch}
.q-cta-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* section header block (centered, reused down the page) */
.q-section{max-width:1180px;margin:0 auto;padding:56px 24px}
.q-section-head{max-width:680px;margin:0 auto 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}

/* product showcase — tab switcher + rounded screenshot frame */
.q-showcase{max-width:1180px;margin:0 auto;padding:0 24px}
.q-showtabs{display:flex;gap:0;border-bottom:1px solid var(--hairline);margin-bottom:18px}
.q-showtab{position:relative;flex:1;text-align:center;padding:15px 12px;font-size:15px;font-weight:500;
  color:var(--muted);cursor:pointer;transition:color var(--t) var(--ease)}
.q-showtab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transition:transform var(--t) var(--ease)}
.q-showtab.on{color:var(--ink)} .q-showtab.on::after{transform:scaleX(1)}
.q-showframe{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--surface);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 30px 70px -40px rgba(16,24,40,.22)}
.q-showframe img,.q-showframe iframe{display:block;width:100%;border:0}

/* monochrome customer/source logo strip */
.q-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px;
  padding:8px 24px;opacity:.62}
.q-logos .lg{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--slate);
  letter-spacing:-.02em;display:inline-flex;align-items:center;gap:8px;filter:grayscale(1)}
.q-logos .lg i{font-size:20px}
.q-eyebrow-lbl{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label);text-align:center}

/* faint dotted-grid section background (attio feature blocks) */
.q-dotgrid{background-image:radial-gradient(var(--border) 1px,transparent 1.6px);background-size:22px 22px}

/* big-bento feature grid */
.q-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.q-bento .q-card{padding:24px}
.q-bento .ic{width:38px;height:38px;border-radius:10px;background:var(--fill);display:grid;place-items:center;color:var(--ink);font-size:20px;margin-bottom:14px}
@media(max-width:900px){.q-bento{grid-template-columns:1fr}.q-showtab{font-size:13px;padding:12px 6px}.q-logos{gap:28px}}

/* landing top nav (attio-style: centered links, 68px, black pill CTA) */
.q-lnav{height:var(--landing-nav-h);display:flex;align-items:center;gap:26px;padding:0 28px;
  border-bottom:1px solid var(--hairline);position:sticky;top:0;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(10px);z-index:30}
.q-lnav .brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-.02em}
.q-lnav .brand .av{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-size:13px}
.q-lnav .lnav-links{display:flex;gap:22px;margin:0 auto}
.q-lnav .lnav-links a{font-size:15px;font-weight:500;color:var(--slate);letter-spacing:-.01em;transition:color var(--t) var(--ease)}
.q-lnav .lnav-links a:hover{color:var(--ink)}
.q-lnav .lnav-cta{display:flex;gap:9px;align-items:center}
@media(max-width:760px){.q-lnav .lnav-links{display:none}}

/* ============================================================
   v1.3 — M3 Expressive + Apple/visionOS enhancement layer (on the LIGHT attio base)
   Spring-physics motion · scroll-reveal · Spatial Liquid Glass (light) · carved edges.
   (design-system-components skill, light-compatible — dark Carved-Hardware canvas skipped.)
   ============================================================ */
:root{
  /* M3 Expressive / spring kinematics as CSS linear() easings */
  --ease-spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.013 58.4%,1.004 75.4%,1);
  --ease-emphatic:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(0,0,0,1);
  --t-reveal:.62s; --t-press:.34s;
  /* Spatial Liquid Glass (light frosted) */
  --glass-bg:rgba(255,255,255,.66); --glass-blur:saturate(184%) blur(22px);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(16,24,40,.05);
  --glass-shadow:0 1px 0 rgba(16,24,40,.04),0 22px 60px -26px rgba(16,24,40,.22);
  /* carved hairline (light "milled" inner edge for bento/data surfaces) */
  --carve:inset 0 0 0 1px rgba(255,255,255,.7);
}

/* scroll-reveal — attio's reveal-to-bottom; fade + lift, calm. JS adds .in on intersect. */
.q-reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-emphatic)}
.q-reveal.in{opacity:1;transform:none}
.q-reveal.d1{transition-delay:.06s}.q-reveal.d2{transition-delay:.12s}.q-reveal.d3{transition-delay:.18s}.q-reveal.d4{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.q-reveal{opacity:1;transform:none;transition:none}}

/* expressive press — spring micro-overshoot on interactive press (Apple/M3) */
.q-btn{transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-press) var(--ease-spring),box-shadow var(--t) var(--ease)}
.q-btn:active{transform:scale(.96)}
.q-btn.ink:hover,.q-btn.signal:hover{transform:translateY(-1px)}
.q-card.hover{transition:transform var(--t-press) var(--ease-spring),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}

/* Spatial Liquid Glass — Z-50 floating + Z-30 sticky nav (light frosted, specular edge, ambient shadow) */
.q-top,.q-lnav{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),var(--glass-shadow)}
.q-cmdk{background:var(--glass-bg);backdrop-filter:var(--glass-blur) blur(8px);-webkit-backdrop-filter:var(--glass-blur) blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.06),0 44px 90px -22px rgba(16,24,40,.42)}
.q-menu{box-shadow:var(--glass-edge),var(--shadow-pop)}

/* carved bento — light milled inner edge on the landing feature cards */
.q-bento .q-card{box-shadow:var(--shadow-card),var(--carve)}

/* numbered section eyebrow — attio's [01] category system */
.q-secnum{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.q-secnum .n{font-variant-numeric:tabular-nums;color:var(--signal);font-weight:700}

/* feature row — numbered eyebrow + big statement + supporting copy + visual */
.q-feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1140px;margin:0 auto;padding:48px 24px}
.q-feature.flip .q-feature-copy{order:2}
.q-feature-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.q-feature-vis{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card),var(--carve);min-height:280px}
@media(max-width:900px){.q-feature{grid-template-columns:1fr;gap:28px}.q-feature.flip .q-feature-copy{order:0}}

/* big editorial pull-quote — two-tone ink→grey on dotted grid (attio signature) */
.q-quote{max-width:940px;margin:0 auto;padding:76px 24px;text-align:center}
.q-quote blockquote{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.18;letter-spacing:-.02em;color:var(--ink);margin:0}
.q-quote blockquote .dim{color:var(--border)}
.q-quote .who{margin-top:28px;font-size:14px;color:var(--muted)} .q-quote .who b{color:var(--ink);font-weight:600}

/* trial / closing band */
.q-band{max-width:1180px;margin:0 auto;padding:60px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}

/* app-wide expressive page entrance (M3) — one calm fade-up on load */
@keyframes q-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.q-body{animation:q-enter .42s var(--ease-emphatic) both}}

/* ============================================================
   v1.4 — Craft pass (WWDC26 "Principles of great design"): high-quality details.
   Focus-visible feedback · expressive shape-morph press · global reduced-motion guard.
   ============================================================ */
/* Craft: clear keyboard focus feedback (answers "what can I interact with") + accessibility */
:where(a,button,.q-btn,.q-ni,.q-tab,.q-showtab,.q-cmd,.q-cmdk .qi,.q-dd>summary,.q-input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--signal);outline-offset:2px}
.q-cmdk input:focus-visible,.ag-search input:focus-visible{outline:none}

/* M3 Expressive: subtle shape-morph on press — immediate, natural feedback */
.q-btn.ink:active,.q-btn.signal:active,.q-eyebrow:active{border-radius:15px}

/* Craft: motion must never feel fragile — honour reduced-motion globally */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .q-reveal{opacity:1!important;transform:none!important}
  .q-btn:active{transform:none!important}
}

/* v1.5 — LIGHT ONLY (by decision): the product is light always, like attio.com.
   No prefers-color-scheme dark override — the site does not follow OS appearance.
   The --surface/--on-cta/--on-ink indirection tokens remain (light values). */

/* ============================================================
   v1.6 — Agency (forgiveness) + Flexibility (accessibility) — WWDC26
   ============================================================ */
/* success + undo flash (forgiveness: easy recovery from any action) */
.q-flash{display:flex;align-items:center;gap:10px;background:var(--gbg);border:1px solid var(--gbg);
  border-radius:var(--r-card);padding:10px 14px;margin-bottom:16px;font-size:13.5px;color:var(--ink)}
.q-flash i{color:var(--g);font-size:18px}

/* skip-to-content link — keyboard users reach the main region first (a11y) */
.q-skip{position:fixed;left:12px;top:-48px;z-index:80;background:var(--cta);color:var(--on-cta);
  padding:8px 14px;border-radius:var(--r-btn);font-size:13px;font-weight:500;
  transition:top var(--t) var(--ease)}
.q-skip:focus{top:12px}

/* ============================================================
   v1.7 — "How it works" workflow steps (the home explains end-to-end usage)
   ============================================================ */
.q-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:0 auto;padding:0 24px}
.q-step{position:relative;display:flex;flex-direction:column;gap:9px;align-items:flex-start;padding:22px;
  border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);
  box-shadow:var(--shadow-card),var(--carve);
  transition:transform var(--t-press) var(--ease-spring),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.q-step:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);border-color:var(--border)}
.q-step .ic{width:38px;height:38px;border-radius:10px;background:var(--fill);display:grid;place-items:center;color:var(--ink);font-size:20px}
.q-step .q-step-n{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--signal)}
.q-step h4{font-size:15.5px;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.01em}
.q-step p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
.q-step .go{font-size:12.5px;font-weight:600;color:var(--signal);margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:5px}
.q-step .conn{position:absolute;right:-10px;top:40px;color:var(--border);font-size:16px;z-index:1}
@media(max-width:900px){.q-flow{grid-template-columns:1fr}.q-step .conn{display:none}}

/* ============================================================
   v1.8 — Scroll-triggered autostart animations (attio: animations autostart on scroll-in)
   When a .q-reveal enters the viewport (.in), its data-viz plays automatically.
   ============================================================ */
/* bars/meters grow from 0 → their set width when the card scrolls into view */
.q-grow{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-emphatic) .18s}
.q-reveal.in .q-grow{transform:scaleX(1)}
/* numbers/figures rise + fade as the card reveals */
.q-rise{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out) .25s,transform .6s var(--ease-emphatic) .25s}
.q-reveal.in .q-rise{opacity:1;transform:none}
/* a continuously-running "live" pulse (autostart loop) for status indicators */
@keyframes q-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.q-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g);animation:q-pulse 1.8s var(--ease) infinite}
@media(prefers-reduced-motion:reduce){.q-grow{transform:none}.q-rise{opacity:1;transform:none}.q-live{animation:none}}

/* ============================================================
   v1.9 — shared dashboard primitives (Consistency, principle #5): promoted so the KPI
   control tower (/demo/monitor) and the Assurance dashboard (/assurance) render the SAME
   section dividers, simulated marker, and KPI-tree component — one definition, not two.
   ============================================================ */
/* simulated / illustrative marker chip (amber, the app's "this is synthetic" tag) */
.q-sim{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--a);background:var(--abg);border:1px solid var(--abg);border-radius:5px;padding:3px 9px}
/* compact section divider — uppercase label + optional inline q-pill */
.q-sec{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--label);margin:26px 0 11px;display:flex;align-items:center;gap:9px}
.q-sec .q-pill,.q-sec .q-sim{text-transform:none;letter-spacing:0}
/* KPI-tree progress component (baseline → current → target, coloured by progress) */
.q-kpitree{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.q-kgroup{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--shadow-card)}
.q-kgroup h3{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.q-kpi{margin-bottom:14px} .q-kpi:last-child{margin-bottom:0}
.q-kpi .top{display:flex;align-items:baseline;gap:6px;font-size:12.5px}
.q-kpi .lab{font-weight:500;color:var(--ink)}
.q-kpi .cur{margin-left:auto;font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.q-kpi .pct{font-size:10px;color:var(--muted);font-weight:600}
.q-track{position:relative;height:8px;border-radius:5px;background:var(--fill);border:1px solid var(--hairline);margin-top:6px;overflow:hidden}
.q-track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.q-btrow{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:4px}
.q-kpi.g-on .fill{background:var(--g)} .q-kpi.g-mid .fill{background:var(--a)} .q-kpi.g-low .fill{background:var(--muted)}
.q-kpi.g-on .cur{color:var(--g)} .q-kpi.g-mid .cur{color:var(--a)} .q-kpi.g-low .cur{color:var(--muted)}
@media(max-width:980px){.q-kpitree{grid-template-columns:1fr}}

/* ============================================================
   v2.0 — Help corpus (/help): long-form doc prose + index cards. Token-only.
   ============================================================ */
.q-prose{max-width:760px}
.q-prose .hp{font-size:14.5px;line-height:1.65;color:var(--slate);margin:0 0 14px}
.q-prose .hp code,.q-prose li code,.q-kv code{font-family:var(--font-mono);font-size:.88em;background:var(--fill);border:1px solid var(--hairline);border-radius:5px;padding:1px 5px;color:var(--ink)}
.q-prose h3.hh{font-size:16px;margin:26px 0 10px}
.q-prose ul.hul,.q-prose ol.hol{margin:0 0 14px;padding-left:22px;color:var(--slate);font-size:14.5px;line-height:1.6}
.q-prose ul.hul li,.q-prose ol.hol li{margin:5px 0}
.q-prose .hnote{background:var(--fill2);border:1px solid var(--hairline);border-left:3px solid var(--signal);border-radius:8px;padding:11px 14px;margin:0 0 16px;font-size:13.5px;color:var(--slate);line-height:1.6}
.q-prose .hcode{background:var(--cta);color:var(--on-cta);font-family:var(--font-mono);font-size:12.5px;border-radius:8px;padding:12px 14px;margin:0 0 16px;overflow-x:auto;line-height:1.5}
.q-kv{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 16px}
.q-kv td{border-bottom:1px solid var(--hairline);padding:8px 12px;vertical-align:top;color:var(--slate)}
.q-kv tr:last-child td{border-bottom:0}
.q-kv td:first-child{font-weight:600;color:var(--ink);white-space:nowrap;width:1%;padding-right:18px}
.q-kvtitle{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--label);margin:0 0 6px}
.q-tbl{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 18px;table-layout:auto}
.q-tbl th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label);padding:7px 12px;border-bottom:1px solid var(--hairline);vertical-align:bottom}
.q-tbl td{border-bottom:1px solid var(--hairline);padding:9px 12px;vertical-align:top;color:var(--slate);line-height:1.5}
.q-tbl tr:last-child td{border-bottom:0}
.q-tbl td:first-child{font-weight:600;color:var(--ink);padding-right:18px;white-space:nowrap}
.q-tbl th:first-child{padding-left:12px}
@media(max-width:680px){.q-tbl td:first-child{white-space:normal}}
.help-cat{margin:26px 0 12px}
.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.help-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);padding:16px 18px;box-shadow:var(--shadow-card),var(--carve);transition:transform var(--t-press) var(--ease-spring),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.help-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);border-color:var(--border)}
.help-card .ht{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.help-card .hs{font-size:13px;color:var(--muted);line-height:1.5}
.help-card .hm{font-size:11px;color:var(--label);font-variant-numeric:tabular-nums;margin-top:auto;padding-top:4px}
.help-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.help-crumb a{color:var(--muted)} .help-crumb a:hover{color:var(--ink)}
.help-nextprev{display:flex;gap:12px;margin-top:30px;padding-top:18px;border-top:1px solid var(--hairline)}
.help-np{flex:1;border:1px solid var(--hairline);border-radius:var(--r-card);padding:12px 15px;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.help-np:hover{border-color:var(--border);background:var(--fill2)}
.help-np .d{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--label)}
.help-np .t{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:3px}
@media(max-width:760px){.help-grid{grid-template-columns:1fr}}