/* Shared bits for LeapstaQ UI kits — tiny, not a framework. */
@import url('./colors_and_type.css');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

/* Top navigation — 64px, sticky, backdrop blur */
.lq-nav{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(247,245,240,0.82);border-bottom:1px solid var(--border-1)}
.lq-nav-logo{display:inline-flex;align-items:center;gap:calc(var(--lq-h, 22px) * .22);color:var(--navy-900);text-decoration:none;line-height:0}

/* Logo lockup — driven by --lq-h (cap-height of wordmark) */
.lq-logo{display:inline-flex;align-items:center;gap:calc(var(--lq-h) * .22);line-height:0;color:var(--navy-900);--lq-signal:var(--signal-500);--lq-navy:var(--navy-900)}
.lq-logo.inverse{color:#fff;--lq-navy:#fff;--lq-signal:var(--signal-400)}
.lq-logo.mono{--lq-signal:var(--lq-navy)}
.lq-logo .lq-stairs{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;height:var(--lq-h);flex:0 0 auto}
.lq-logo .lq-stairs span{display:block;height:calc(var(--lq-h) * .20);background:var(--lq-navy);border-radius:1px}
.lq-logo .lq-stairs span.b1{width:calc(var(--lq-h) * .42);background:var(--lq-signal)}
.lq-logo .lq-stairs span.b2{width:calc(var(--lq-h) * .78)}
.lq-logo .lq-stairs span.b3{width:calc(var(--lq-h) * 1.20)}
.lq-logo .lq-word{font-family:'Archivo Black','Space Grotesk',system-ui,sans-serif;font-weight:900;font-size:calc(var(--lq-h) * 1.39);letter-spacing:-0.04em;line-height:1;white-space:nowrap;color:var(--lq-navy)}
.lq-logo .lq-word .accent{color:var(--lq-signal)}
.lq-nav-links{display:flex;gap:28px;font-family:var(--font-body);font-size:14px}
.lq-nav-links a{color:var(--fg-1);text-decoration:none;font-weight:500}
.lq-nav-links a:hover{color:var(--signal-600)}
.lq-nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.lq-nav-cta .lq-btn{white-space:nowrap}

/* Buttons */
.lq-btn{font-family:var(--font-display);font-weight:600;font-size:14px;padding:10px 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;letter-spacing:-0.01em;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);text-decoration:none}
.lq-btn-primary{background:var(--navy-900);color:#fff}
.lq-btn-primary:hover{background:var(--navy-800)}
.lq-btn-primary:active{background:var(--navy-950)}
.lq-btn-accent{background:var(--signal-400);color:var(--navy-950)}
.lq-btn-accent:hover{background:var(--signal-500)}
.lq-btn-secondary{background:#fff;color:var(--navy-900);border-color:var(--border-2)}
.lq-btn-secondary:hover{border-color:var(--ink-700)}
.lq-btn-ghost{background:transparent;color:var(--navy-900)}
.lq-btn-ghost:hover{background:var(--navy-100)}
.lq-btn-lg{padding:14px 22px;font-size:16px}

/* Eyebrow */
.lq-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--signal-600)}
.lq-eyebrow::before{content:"// ";opacity:.6}
.lq-eyebrow-navy{color:var(--navy-700)}

/* Chip */
.lq-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:999px;font-weight:500;background:var(--ink-50);color:var(--ink-700);border:1px solid var(--border-1)}
.lq-chip-accent{background:var(--navy-900);color:var(--signal-400);border-color:transparent}
.lq-chip .dot{width:6px;height:6px;border-radius:999px;background:currentColor}

/* Card */
.lq-card{background:#fff;border:1px solid var(--border-1);border-radius:10px;padding:24px;transition:all var(--dur-base) var(--ease-out)}
.lq-card:hover{border-color:var(--border-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.lq-card.accent{border-top:2px solid var(--signal-400)}

/* Icon inline */
.lq-icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Logo mark SVG inline — keep small */
.lq-mark{width:28px;height:28px;stroke:currentColor;stroke-width:5;fill:none;stroke-linecap:square}

/* Section */
.lq-section{padding:96px 32px}
.lq-section-navy{background:var(--navy-900);color:var(--fg-on-inverse)}
.lq-section-navy .lq-eyebrow{color:var(--signal-400)}
.lq-container{max-width:1280px;margin:0 auto}

/* Mesh background for navy sections */
.lq-mesh{background-image:linear-gradient(var(--navy-800) 1px,transparent 1px),linear-gradient(90deg,var(--navy-800) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px;opacity:.3}

/* Footer */
.lq-footer{background:var(--navy-950);color:var(--navy-200);padding:64px 32px 32px}
.lq-footer h4{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--signal-400);font-weight:500;margin:0 0 14px}
.lq-footer h4::before{content:"// ";opacity:.6}
.lq-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-family:var(--font-body);font-size:14px}
.lq-footer a{color:var(--navy-200);text-decoration:none}
.lq-footer a:hover{color:#fff}

/* Focus ring */
*:focus-visible{outline:2px solid var(--signal-400);outline-offset:2px;border-radius:4px}