/* Isolation layer for the home v3 design inside the Elementor page.
 * Emitted BEFORE the scoped design CSS so every design rule wins ties.
 * 1. Neutralise Twenty Twenty / Elementor kit element styles (buttons, links,
 *    headings, lists, inputs) inside #qsh. SVG trees are excluded because
 *    `all: revert` would also cancel SVG presentation attributes (fill, stroke). */
#qsh :where(:not(svg, svg *)) { all: revert; }
#qsh {
  all: revert; display: block; position: relative; isolation: isolate;
  letter-spacing: normal; word-spacing: normal; text-transform: none; text-align: start;
  text-indent: 0; font-style: normal; font-weight: 400; white-space: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* SVG is excluded above; undo Twenty Twenty's `svg{display:block;max-width:100%}`
 * (design rules that set these come later and still win). */
#qsh svg { display: inline; max-width: none; font-family: inherit; }
/* 2. The Elementor wrappers around the widget must not add spacing. */
.elementor-widget-html:has(> .elementor-widget-container > #qsh),
.elementor-widget-html:has(> #qsh) { margin: 0 !important; padding: 0 !important; }

/* 3. Design-review notes (".todo" / ".todo-flag") are visible only in review
 *    mode (?review=1). swap.ts refuses to go live while any remain. */
#qsh:not(.qsh-review) .todo:not(.todo-copy), #qsh:not(.qsh-review) .todo-flag { display: none !important; }

/* 4. Scroll reveals only hide content once our script is running, so the page
 *    is complete if WP Rocket delays or blocks JS. */
#qsh:not(.qsh-js) [data-r] { opacity: 1 !important; transform: none !important; }

#qsh :where(:not(svg, svg *)) { background-color: revert !important; margin-bottom: revert !important; margin-top: revert !important; }
#qsh :where(article) { box-shadow: revert !important; }
#qsh {
  --ground: #eef0f3;
  --paper: #f6f7f9;
  --surface: #eceef2;
  --surface-raised: #ffffff;
  --glass: rgba(255,255,255,0.82);
  --line: #e6e8ec;
  --divider: #dfe2e7;
  --ink: #061d4f;
  --text: #111317;
  --body: #50545c;
  --muted: #6c717a;
  --subtle: #8f949d;
  --cobalt: #1e4389;
  --accent: #2563d8;
  --sky: #3d8bf2;
  --sky-light: #8cc4ff;
  --accent-100: #eaf1ff;
  --accent-300: #b6cdf6;
  --accent-700: #1e4389;
  --accent-800: #032669;
  --deep-navy: #032669;
  --teal: #2f7fe0;
  --night: #021a4a;
  --midnight: #0d3074;
  --deep-teal: #1e4389;
  --cta: #2563d8;
  --cta-hover: #1e4389;
  --on-cta: #ffffff;
  --emerald: #10b981;
  --mint: #34d399;
  --mint-soft: #6ee7b7;
  --mint-pale: #a7f3d0;
  --success-ink: #047857;
  --success-tint: rgba(16,185,129,0.14);
  --warning: #f59e0b;
  --warning-ink: #b45309;
  --warning-tint: rgba(245,158,11,0.12);
  --error: #ef4444;
  --error-ink: #b91c1c;
  --error-tint: rgba(239,68,68,0.10);
  --focus: #2563d8;
  --tint-blush: #fff9f8;
  --tint-cream: #fffdf7;
  --tint-mist: #fafbff;
  --tint-rose: #fff7fb;
  --tint-butter: #fffded;
  --tint-ice: #f2fbff;
  --tint-aqua: #e9fdff;
  --tint-sky: #9dd1ff;
  --tint-periwinkle: #e0e9ff;
  --step-active-border: rgba(30,67,137,0.55);
  --text-heading: var(--ink);
  --text-strong: var(--text);
  --text-body: var(--body);
  --text-muted: var(--muted);
  --text-subtle: var(--subtle);
  --text-link: var(--cobalt);
  --surface-page: var(--ground);
  --surface-card: var(--surface-raised);
  --surface-bento: var(--surface);
  --border-default: var(--line);
  --action-primary: var(--cta);
  --action-primary-hover: var(--cta-hover);
  --action-primary-text: var(--on-cta);
}
#qsh [data-theme="night"] {
  --ground: #021a4a;
  --paper: #032669;
  --surface: rgba(255,255,255,0.07);
  --surface-raised: rgba(255,255,255,0.12);
  --glass: rgba(255,255,255,0.07);
  --line: rgba(255,255,255,0.12);
  --divider: rgba(255,255,255,0.12);
  --ink: #ffffff;
  --text: #f7f8fa;
  --body: rgba(255,255,255,0.65);
  --muted: rgba(255,255,255,0.62);
  --subtle: rgba(255,255,255,0.45);
  --cobalt: #b6cdf6;
  --accent: #3d8bf2;
  --sky: #3d8bf2;
  --sky-light: #8cc4ff;
  --accent-100: rgba(37,99,216,0.18);
  --accent-300: #b6cdf6;
  --accent-700: #b6cdf6;
  --accent-800: #b6cdf6;
  --deep-navy: #032669;
  --teal: #2f7fe0;
  --night: #021a4a;
  --midnight: #0d3074;
  --deep-teal: #1e4389;
  --cta: #2563d8;
  --cta-hover: #1e4389;
  --on-cta: #ffffff;
  --emerald: #10b981;
  --mint: #34d399;
  --mint-soft: #6ee7b7;
  --mint-pale: #a7f3d0;
  --success-ink: #6ee7b7;
  --success-tint: rgba(52,211,153,0.10);
  --warning: #f59e0b;
  --warning-ink: #fcd34d;
  --warning-tint: rgba(245,158,11,0.16);
  --error: #ef4444;
  --error-ink: #fca5a5;
  --error-tint: rgba(239,68,68,0.16);
  --focus: #8cc4ff;
}
#qsh {
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-sans);
  --type-display-size: 80px;
  --type-display-lh: 1;
  --type-display-weight: 500;
  --type-display-tracking: -0.045em;
  --type-section-size: 52px;
  --type-section-lh: 1.05;
  --type-section-weight: 500;
  --type-section-tracking: -0.04em;
  --type-subsection-size: 36px;
  --type-subsection-lh: 1.36;
  --type-subsection-weight: 400;
  --type-subsection-tracking: -0.025em;
  --type-card-size: 24px;
  --type-card-lh: 1.2;
  --type-card-weight: 500;
  --type-card-tracking: -0.03em;
  --type-body-lg-size: 16px;
  --type-body-lg-lh: 1.6;
  --type-body-lg-weight: 400;
  --type-body-size: 15px;
  --type-body-lh: 1.6;
  --type-body-weight: 400;
  --type-label-size: 14px;
  --type-label-lh: 1.3;
  --type-label-weight: 500;
  --type-small-size: 13.5px;
  --type-small-lh: 1.4;
  --type-small-weight: 400;
  --type-caption-size: 12.5px;
  --type-caption-lh: 1.4;
  --type-caption-weight: 400;
  --type-kicker-size: 11px;
  --type-kicker-lh: 1.4;
  --type-kicker-weight: 400;
  --type-kicker-tracking: 0.14em;
  --type-data-size: 13px;
  --type-data-lh: 1.4;
  --type-data-weight: 500;
  --type-mono-sm-size: 12px;
  --type-mono-sm-lh: 1.4;
  --type-mono-sm-weight: 400;
  --type-display-fluid: clamp(44px, 6vw, 80px);
}
#qsh {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 40px;
  --space-8: 44px;
}
#qsh {
  --layout-max: 1760px;
  --layout-gutter: clamp(16px, 3vw, 120px);
  --blur-glass: 14px;
}
#qsh {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-tile: 14px;
  --radius-card: 18px;
  --radius-card-lg: 24px;
  --radius-bento: 26px;
  --radius-feature: 28px;
  --radius-panel: 32px;
  --radius-pill: 999px;
}
#qsh {
  --shadow-pill: 0 8px 18px -14px rgba(11,27,58,0.5);
  --shadow-card: 0 18px 40px -26px rgba(11,27,58,0.22);
  --shadow-frame: 0 1px 2px 0 rgba(11,27,58,0.05), 0 40px 80px -30px rgba(11,27,58,0.35);
  --shadow-cta: inset 0 1px 0 0 rgba(255,255,255,0.25), 0 12px 28px -10px rgba(10,36,102,0.45);
  --shadow-inset: inset 0 1px 0 0 rgba(255,255,255,0.8);
}
#qsh {
  --gradient-signature: linear-gradient(120deg, #032669, #1e4389 50%, #3d8bf2);
  --gradient-night: linear-gradient(160deg, #021a4a, #032669 55%, #1e4389);
  --gradient-paper: linear-gradient(180deg, #f6f7f9, #eef0f3);
  --gradient-step-1: linear-gradient(180deg, #fff9f8, #fffdf7);
  --gradient-step-2: linear-gradient(180deg, #fafbff, #fff7fb);
  --gradient-step-3: linear-gradient(180deg, #fffded, #f2fbff);
  --gradient-step-4: linear-gradient(180deg, #e9fdff, #9dd1ff);
  --gradient-step-5: linear-gradient(180deg, #fafbff, #e0e9ff);
  --gradient-spotlight: radial-gradient(380px at 50% 0%, rgba(37,99,216,0.11), rgba(0,0,0,0) 45%);
  --pattern-ongoing: repeating-linear-gradient(90deg, #2563d8 0px, #2563d8 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 12px);
}
#qsh{-webkit-font-smoothing:antialiased}
#qsh{margin:0 !important;font-family:var(--font-sans);font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--body);background:var(--ground) !important}
#qsh a{color:var(--cobalt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
#qsh a:hover{color:var(--accent-700)}
#qsh :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#qsh *{box-sizing:border-box}
#qsh{scroll-behavior:smooth;scroll-padding-top:96px}
#qsh{background:var(--gradient-paper) !important;background-attachment:fixed !important;overflow-x:hidden}
#qsh a{color:var(--cobalt)}#qsh a:hover{color:var(--accent-700)}
#qsh .wrap{max-width:1280px;margin:0 auto !important;padding:0 clamp(16px,3vw,48px)}
#qsh section{position:relative}
#qsh .sec{padding:120px 0 0}
#qsh .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
#qsh .k::before{content:"";width:6px;height:6px;border-radius:6px;background:var(--gradient-signature) !important}
#qsh [data-theme="night"] .k{color:var(--sky-light)}#qsh [data-theme="night"] .k::before{background:var(--sky-light) !important}
#qsh .h2{font-size:clamp(34px,4.4vw,56px);line-height:1.04;font-weight:500;letter-spacing:-.04em;color:var(--ink);margin:0 !important;text-wrap:balance}
#qsh .lead{font-size:17px;line-height:1.6;color:var(--body);margin:0 !important;text-wrap:pretty;max-width:520px}
#qsh .split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:48px !important}
#qsh .split>div{display:grid;gap:18px}
#qsh .gt{background:var(--gradient-signature) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent}
#qsh [data-theme="night"] .gt{background:linear-gradient(120deg,#7dd3fc,#b4ccff 50%,#6ee7b7) !important}
#qsh .btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--font-sans);text-decoration:none;border:0;cursor:pointer;transition:background .16s,box-shadow .16s,transform .16s,color .16s;white-space:nowrap}
#qsh .btn svg{width:16px;height:16px;transition:transform .16s}
#qsh .btn:hover svg{transform:translateX(2px)}#qsh .btn:active{transform:translateY(1px)}
#qsh .btn-cta{background:var(--cta) !important;color:var(--on-cta);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px -12px rgba(11,27,58,.55) !important}
#qsh .btn-cta:hover{background:var(--cta-hover) !important;color:var(--on-cta)}
#qsh .btn-navy{background:var(--ink) !important;color:#fff}#qsh .btn-navy:hover{background:var(--deep-navy) !important;color:#fff}
#qsh .btn-ghost{background:rgba(255,255,255,.6) !important;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line) !important}#qsh .btn-ghost:hover{background:#fff !important;color:var(--ink)}
#qsh .hero{min-height:100vh;padding:150px 0 40px;display:flex;flex-direction:column}
#qsh .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;flex:1}
#qsh .hero-copy{display:grid;gap:26px;align-content:center}
#qsh .hero h1{font-size:clamp(48px,7.2vw,104px);line-height:.96;font-weight:500;letter-spacing:-.055em;color:var(--ink);margin:0 !important}
#qsh .hero h1 .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.1em !important}
#qsh .hero h1 .ln>span{display:inline-block;transform:translateY(105%);animation:qsh-rise 1s cubic-bezier(.2, .8, .2, 1) forwards}
#qsh .hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
#qsh .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
#qsh .fade{opacity:0;transform:translateY(14px);animation:qsh-fadeup .9s cubic-bezier(.2, .8, .2, 1) forwards}
@keyframes qsh-rise{to{transform:none}}
@keyframes qsh-fadeup{to{opacity:1;transform:none}}
#qsh .stage{position:relative;height:620px;display:grid;place-items:center}
#qsh .beam{position:absolute;left:-20%;right:-30%;height:2px;background:linear-gradient(90deg,transparent,rgba(59,118,246,.0) 10%,#fff 50%,rgba(125,211,252,.0) 90%,transparent) !important;box-shadow:0 0 18px 4px rgba(125,211,252,.55) !important;transform:rotate(-24deg);opacity:.9}
#qsh .beam.b1{top:78%}#qsh .beam.b2{top:88%;opacity:.5}
#qsh .beam::after{content:"";position:absolute;top:-3px;left:0;width:120px;height:8px;border-radius:8px;background:#fff !important;filter:blur(3px);animation:qsh-run 3.6s linear infinite}
#qsh .beam.b2::after{animation-delay:1.6s}
@keyframes qsh-run{from{left:0}to{left:100%}}
#qsh .iso{position:relative;width:326px;height:580px;transition:transform .6s cubic-bezier(.2,.8,.2,1);--D:326px;--h:189px;--T:54px}
#qsh .layer{position:absolute;left:0;bottom:var(--z);width:var(--D);height:calc(var(--h) + var(--T));animation:qsh-bob 5s ease-in-out infinite;transition:bottom .6s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 24px 24px rgba(11,27,58,.18))}
#qsh .stage:hover .layer{bottom:calc(var(--z) + var(--i) * 26px)}
#qsh .layer .s1,#qsh .layer .s2{position:absolute;inset:0}
#qsh .layer .s1{background:var(--c2) !important;clip-path:polygon(1% calc(var(--h)/2),50% var(--h),50% 100%,1% calc(var(--h)/2 + var(--T)))}
#qsh .layer .s2{background:var(--c3) !important;clip-path:polygon(50% var(--h),99% calc(var(--h)/2),99% calc(var(--h)/2 + var(--T)),50% 100%)}
#qsh .layer .top{position:absolute;left:calc((var(--D) - 230px)/2);top:calc((var(--h) - 230px)/2);width:230px;height:230px;transform:scaleY(.58) rotate(45deg);border-radius:20px;background:var(--c1) !important;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.2) !important;display:flex;flex-direction:column;justify-content:space-between;padding:22px;color:#fff;overflow:hidden}
#qsh .layer .top::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.35),transparent 55%) !important}
#qsh .layer .lbl{position:relative;font-size:22px;line-height:1.08;font-weight:600;letter-spacing:-.03em}
#qsh .layer .n{position:relative;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;opacity:.8}
#qsh .layer .ic{position:relative;align-self:flex-end;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18) !important;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3) !important}
#qsh .layer .ic svg{width:24px;height:24px}
#qsh .L1{--z:0px;--i:0;--c1:linear-gradient(135deg,#3b76f6,#1a47c9);--c2:#1c45b8;--c3:#17368c;animation-delay:0s}
#qsh .L2{--z:80px;--i:1;--c1:linear-gradient(135deg,#1b3570,#08122b);--c2:#0a1838;--c3:#060e22;animation-delay:-.6s}
#qsh .L3{--z:160px;--i:2;--c1:linear-gradient(135deg,#fbbf24,#f59e0b);--c2:#d98706;--c3:#b46f04;animation-delay:-1.2s}
#qsh .L3 .top{color:#3a2600}
#qsh .L4{--z:240px;--i:3;--c1:linear-gradient(135deg,#14877e,#0a4552);--c2:#0b5a54;--c3:#073f3b;animation-delay:-1.8s}
#qsh .L5{--z:320px;--i:4;--c1:linear-gradient(135deg,#6ee7b7,#00bb5c);--c2:#00a050;--c3:#047857;animation-delay:-2.4s}
#qsh .L5 .top{color:#05301e}
#qsh .layer .fl{position:absolute;left:0;top:calc(var(--h)/2);width:calc(var(--D)/2);height:var(--T);transform-origin:top left;transform:skewY(30deg);display:flex;align-items:center;gap:10px;padding-left:22px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#fff;white-space:nowrap}
#qsh .layer .fl b{font-family:var(--font-mono);font-weight:400;font-size:10.5px;opacity:.7}
#qsh .L3 .fl{color:#3a2600}#qsh .L5 .fl{color:#05301e}
#qsh .layer:not(.L5) .top>*{opacity:0}#qsh .L5 .top{justify-content:center;align-items:center}#qsh .L5 .top .lbl,#qsh .L5 .top .n{display:none}#qsh .L5 .top .ic{align-self:center;width:72px;height:72px;border-radius:20px;transform:rotate(-45deg)}#qsh .L5 .top .ic svg{width:34px;height:34px;color:#05301e}
@keyframes qsh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
#qsh .chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--glass) !important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(11,27,58,.06),0 18px 40px -20px rgba(11,27,58,.35) !important;font-size:13px;color:var(--text);animation:qsh-float 6s ease-in-out infinite}
#qsh .chip b{font-weight:600;color:var(--ink)}
#qsh .chip .d{width:8px;height:8px;border-radius:8px;background:var(--emerald) !important;box-shadow:0 0 0 4px var(--success-tint) !important}
#qsh .chip .d.w{background:var(--warning) !important;box-shadow:0 0 0 4px var(--warning-tint) !important}
#qsh .chip .mono{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
#qsh .chip.c1{top:14%;left:2%}#qsh .chip.c2{top:46%;right:-2%;animation-delay:-2s}#qsh .chip.c3{bottom:12%;left:8%;animation-delay:-4s}
@keyframes qsh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes qsh-marq{to{transform:translateX(-50%)}}
#qsh .statement{font-size:clamp(28px,3.4vw,46px);line-height:1.22;letter-spacing:-.035em;color:var(--ink);font-weight:400;margin:0 !important;max-width:1100px;text-wrap:pretty}
#qsh .statement .w{opacity:.14;transition:opacity .25s}#qsh .statement .w.on{opacity:1}
#qsh [data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
#qsh [data-r].in{opacity:1;transform:none}
#qsh .night{border-radius:32px;background:var(--gradient-night) !important;box-shadow:0 40px 80px -40px rgba(8,18,43,.6) !important;position:relative;overflow:hidden;color:var(--body)}
#qsh .night .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(180,204,255,.22) 1px,transparent 1px);background-size:22px 22px;mask:radial-gradient(70% 60% at 70% 30%,#000,transparent);-webkit-mask:radial-gradient(70% 60% at 70% 30%,#000,transparent);pointer-events:none}
#qsh .hex{position:absolute;pointer-events:none;filter:drop-shadow(0 0 10px rgba(59,118,246,.9)) drop-shadow(0 0 24px rgba(125,211,252,.5));animation:qsh-hexd 14s ease-in-out infinite}
#qsh .hex polygon{fill:rgba(35,88,224,.05);stroke:#7dd3fc;stroke-width:2.2}
@keyframes qsh-hexd{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}
#qsh .frame{border-radius:28px;background:var(--gradient-night) !important;box-shadow:0 50px 90px -40px rgba(8,18,43,.65),0 0 0 1px rgba(11,27,58,.1) !important;overflow:hidden;color:var(--body)}
#qsh .f-bar{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--line)}
#qsh .f-bar .tl{width:9px;height:9px;border-radius:9px;background:rgba(255,255,255,.18) !important}
#qsh .f-tabs{display:flex;gap:6px;margin-left:16px}
#qsh .f-tabs span{font-size:12.5px;padding:6px 12px;border-radius:999px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line) !important}
#qsh .f-tabs span.on{background:#fff !important;color:#0b1b3a;box-shadow:none !important;font-weight:500}
#qsh .live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-soft);padding:6px 12px;border-radius:999px;background:var(--success-tint) !important}
#qsh .live i{width:7px;height:7px;border-radius:7px;background:var(--mint) !important;animation:qsh-pulse 1.6s infinite}
@keyframes qsh-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}100%{box-shadow:0 0 0 10px rgba(52,211,153,0)}}
#qsh .f-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px 20px 0}
#qsh .kpi{border-radius:16px;background:var(--glass) !important;box-shadow:inset 0 0 0 1px var(--line) !important;padding:14px 16px;display:grid;gap:4px}
#qsh .kpi .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:22px;font-weight:500;color:#fff;letter-spacing:-.02em}
#qsh .kpi .l{font-size:12.5px;color:var(--muted)}
#qsh .f-body{display:grid;grid-template-columns:minmax(0,.9fr) 120px minmax(0,1.3fr);gap:0;padding:18px 20px 20px;align-items:stretch}
#qsh .pane{border-radius:18px;background:var(--glass) !important;box-shadow:inset 0 0 0 1px var(--line) !important;padding:18px;display:grid;gap:12px;align-content:start}
#qsh .pane h4{margin:0 !important;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-light);font-weight:400}
#qsh .remit{display:grid;gap:10px}
#qsh .remit .row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
#qsh .remit .row b{font-family:var(--font-mono);font-weight:500;color:#fff;font-size:12.5px;text-align:right}
#qsh .file{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06) !important;font-size:13px;color:#fff}
#qsh .file svg{width:18px;height:18px;color:var(--sky-light)}
#qsh .scan{position:relative;height:4px;border-radius:4px;background:rgba(255,255,255,.08) !important;overflow:hidden}
#qsh .scan i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#3b76f6,#7dd3fc) !important;transition:width .9s ease}
#qsh .engine{display:grid;place-items:center;position:relative}
#qsh .engine .core{width:72px;height:72px;border-radius:22px;background:var(--gradient-signature) !important;display:grid;place-items:center;color:#fff;box-shadow:0 0 0 8px rgba(59,118,246,.12),0 0 40px rgba(59,118,246,.5) !important;position:relative;z-index:2}
#qsh .engine .core.spin svg{animation:qsh-spin 1.2s linear infinite}
@keyframes qsh-spin{to{transform:rotate(360deg)}}
#qsh .engine::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--pattern-ongoing) !important;opacity:.35}
#qsh .packet{position:absolute;top:calc(50% - 4px);left:0;width:8px;height:8px;border-radius:8px;background:#7dd3fc !important;box-shadow:0 0 12px #7dd3fc !important;opacity:0}
#qsh .packet.go{animation:qsh-pk .8s ease-in forwards}
@keyframes qsh-pk{0%{left:0;opacity:1}100%{left:calc(100% - 8px);opacity:0}}
#qsh .inv{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04) !important;box-shadow:inset 0 0 0 1px transparent !important;transition:background .4s,box-shadow .4s}
#qsh .inv .id{font-family:var(--font-mono);font-size:12px;color:#fff}
#qsh .inv .amt{font-family:var(--font-mono);font-size:12.5px;color:rgba(255,255,255,.8);text-align:right;font-variant-numeric:tabular-nums}
#qsh .inv .st{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#qsh .inv .st i{flex:none;width:7px;height:7px;border-radius:7px;background:rgba(255,255,255,.25) !important;transition:background .3s}
#qsh .inv.ok{background:var(--success-tint) !important;box-shadow:inset 0 0 0 1px rgba(52,211,153,.3) !important}
#qsh .inv.ok .st{color:var(--mint-soft)}#qsh .inv.ok .st i{background:var(--mint) !important}
#qsh .inv.ex{background:var(--warning-tint) !important;box-shadow:inset 0 0 0 1px rgba(245,158,11,.35) !important}
#qsh .inv.ex .st{color:var(--warning-ink)}#qsh .inv.ex .st i{background:var(--warning) !important}
#qsh .post{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(0,187,92,.14) !important;color:var(--mint-soft);font-size:13px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
#qsh .post.on{opacity:1;transform:none}
#qsh .post svg{width:16px;height:16px}
#qsh .disclaim{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);padding:0 20px 16px}
#qsh .tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#fff !important;box-shadow:0 0 0 1px var(--line),0 18px 40px -26px rgba(11,27,58,.22) !important;flex-wrap:wrap}
#qsh .tab{border:0;background:none !important;font:500 14px/1 var(--font-sans);color:var(--body);padding:12px 18px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
#qsh .tab:hover{color:var(--ink)}#qsh .tab.on{background:var(--ink) !important;color:#fff}
#qsh .card{background:#fff !important;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 18px 40px -26px rgba(11,27,58,.22) !important;padding:28px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
#qsh .card::before{content:"";position:absolute;inset:0;background:radial-gradient(380px at var(--mx,50%) var(--my,0%),rgba(35,88,224,.11),transparent 45%) !important;opacity:0;transition:opacity .3s;pointer-events:none}
#qsh .card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--step-active-border),0 30px 50px -28px rgba(11,27,58,.35) !important}
#qsh .card:hover::before{opacity:1}
#qsh .card h3{font-size:22px;line-height:1.2;letter-spacing:-.03em;font-weight:500;color:var(--ink);margin:0 !important}
#qsh .card p{margin:0 !important;font-size:15px;line-height:1.6;color:var(--body);text-wrap:pretty}
#qsh .ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
#qsh .track{position:absolute;left:0;right:0;top:34px;height:2px;background:var(--divider) !important;border-radius:2px;overflow:hidden}
#qsh .track i{position:absolute;inset:0;width:var(--p,0%);background:var(--gradient-signature) !important;transition:width .1s linear}
#qsh .step{border-radius:26px;padding:24px 24px 28px;display:grid;gap:14px;align-content:start;box-shadow:0 0 0 1px var(--line) !important;position:relative;min-height:300px;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
#qsh .step:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--step-active-border),0 30px 50px -28px rgba(11,27,58,.3) !important}
#qsh .step:nth-child(2){background:var(--gradient-step-1) !important}#qsh .step:nth-child(3){background:var(--gradient-step-2) !important}#qsh .step:nth-child(4){background:var(--gradient-step-3) !important}#qsh .step:nth-child(5){background:var(--gradient-step-4) !important}
#qsh .step .num{width:22px;height:22px;border-radius:22px;background:var(--ink) !important;color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;position:relative;z-index:2;box-shadow:0 0 0 6px var(--paper) !important}
#qsh .step .dur{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
#qsh .step h3{font-size:22px;letter-spacing:-.03em;font-weight:500;line-height:1.2;color:var(--ink);margin:0 !important}
#qsh .step p{margin:0 !important;font-size:14.5px;line-height:1.6;color:var(--body)}
#qsh .step .price{margin-top:auto !important;display:inline-flex;align-self:flex-start;font-size:12.5px;font-weight:500;color:var(--ink);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.7) !important;box-shadow:inset 0 0 0 1px var(--line) !important}
#qsh .dl-wrap{padding:72px clamp(24px,5vw,64px)}
#qsh .dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;position:relative;z-index:2}
#qsh .dl-c{border-radius:22px;padding:22px;display:grid;gap:10px;background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) !important}
#qsh .dl-c .mk{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-light)}
#qsh .dl-c .big{font-family:var(--font-mono);font-size:42px;font-weight:500;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
#qsh .dl-c .big small{font-size:13px;color:var(--muted);letter-spacing:.06em;margin-left:6px}
#qsh .dl-c h4{margin:0 !important;font-size:17px;font-weight:500;color:#fff;letter-spacing:-.02em}
#qsh .dl-c p{margin:0 !important;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.65)}
#qsh .dl-c .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1) !important;overflow:hidden}
#qsh .dl-c .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7dd3fc,#34d399) !important;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
#qsh .erp-list{display:flex;flex-wrap:wrap;gap:8px}
#qsh .erp{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff !important;box-shadow:0 0 0 1px var(--line) !important;font-size:14.5px;font-weight:500;color:var(--ink);transition:transform .2s,box-shadow .2s}
#qsh .erp:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--step-active-border),0 10px 20px -12px rgba(11,27,58,.3) !important}
#qsh .erp i{width:7px;height:7px;border-radius:7px;background:var(--cobalt) !important}
#qsh .erp.t2 i{background:var(--sky) !important}
#qsh .per-btn{text-align:left;border:0;background:transparent !important;border-radius:18px;padding:16px 18px;cursor:pointer;display:grid;gap:4px;transition:background .2s,box-shadow .2s;font-family:var(--font-sans)}
#qsh .per-btn b{font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
#qsh .per-btn span{font-size:12.5px;color:var(--muted);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
#qsh .per-btn:hover{background:rgba(255,255,255,.6) !important}
#qsh .per-btn.on{background:#fff !important;box-shadow:0 0 0 1px var(--step-active-border),0 18px 40px -26px rgba(11,27,58,.3) !important}
#qsh .pc{border-radius:18px;padding:18px 20px;background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) !important;display:grid;gap:8px}
#qsh .pc .k{font-size:10.5px}
#qsh .pc p{margin:0 !important;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.8)}
#qsh footer{margin-top:24px !important;padding:56px 0 40px}
@media (max-width:1080px){#qsh .hero-grid,#qsh .split{grid-template-columns:minmax(0,1fr)}#qsh .stage{height:520px}#qsh .ladder{grid-template-columns:repeat(2,minmax(0,1fr))}#qsh .track{display:none}#qsh .f-body{grid-template-columns:minmax(0,1fr)}#qsh .engine{height:90px}#qsh .engine::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto}#qsh .packet{display:none}#qsh .f-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){#qsh .ladder{grid-template-columns:minmax(0,1fr)}#qsh .stage{height:440px}#qsh .iso{transform:scale(.72)}#qsh .chip.c2{right:0}#qsh .f-tabs{display:none}}
@media (prefers-reduced-motion:reduce){#qsh *,#qsh *::before,#qsh *::after{animation:none!important;transition:none!important}#qsh [data-r]{opacity:1;transform:none}#qsh .hero h1 .ln>span{transform:none}#qsh .fade{opacity:1;transform:none}}
#qsh{--ms-red:#f25022;--ms-green:#7fba00;--ms-blue:#00a4ef;--ms-yellow:#ffb900;--ms-azure:#0078d4;--accent:#0078d4;--accent-700:#106ebe;--sky:#00a4ef;--cta:#0078d4;--cta-hover:#106ebe;--focus:#0078d4;--text-link:#0063b1;--gradient-signature:linear-gradient(120deg,#032669,#0078d4 55%,#00a4ef);--gradient-night:linear-gradient(160deg,#021a4a,#032669 55%,#0a4fa8)}
#qsh [data-theme="night"]{--cta:#0078d4;--cta-hover:#106ebe;--accent:#3aa0f3;--sky:#50b6f5;--focus:#50b6f5}
#qsh [data-theme="night"] .gt{background:linear-gradient(120deg,#8cc4ff,#b6cdf6 55%,#ffffff) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent}
#qsh .btn-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 26px -12px rgba(3,38,105,.6) !important}
#qsh .L1{--c1:linear-gradient(135deg,#3d8bf2,#2563d8);--c2:#1f55bd;--c3:#1a4597}
#qsh .L2{--c1:linear-gradient(135deg,#1e4389,#032669);--c2:#04225c;--c3:#021a4a}
#qsh .L4{--c1:linear-gradient(135deg,#5aa2f7,#1e4389);--c2:#1a3c7c;--c3:#122e63}
#qsh .L5{--c1:linear-gradient(135deg,#b6dcff,#3d8bf2);--c2:#2f78dd;--c3:#2563d8}
#qsh .L5 .top,#qsh .L5 .fl{color:#032669}#qsh .L5 .top .ic svg{color:#032669}
#qsh .hero h1.k{font-size:11px;line-height:1.5;font-weight:400;letter-spacing:.14em;margin:0 !important}
#qsh .hero .disp{font-size:clamp(48px,7.2vw,104px);line-height:.96;font-weight:500;letter-spacing:-.055em;color:var(--ink);margin:0 !important}
#qsh .hero .disp .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.1em !important}
#qsh .hero .disp .ln>span{display:inline-block;transform:translateY(105%);animation:qsh-rise 1s cubic-bezier(.2, .8, .2, 1) forwards}
#qsh .hero .disp .ln:nth-child(2)>span{animation-delay:.12s}
#qsh .micro{margin:-10px 0 0 !important;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#qsh .trust{margin-top:28px !important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:20px 0;border-top:1px solid var(--divider)}
#qsh .trust>div{display:flex;gap:10px;align-items:center;font-size:14.5px;line-height:1.35;color:var(--ink);font-weight:500}
#qsh .trust svg{flex:none;width:18px;height:18px;color:var(--cobalt)}
#qsh .more{margin-top:auto !important;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--cobalt);text-decoration:none}#qsh .more svg{width:15px;height:15px;transition:transform .16s}#qsh .more:hover svg{transform:translateX(3px)}
#qsh .faq{display:grid;gap:10px;max-width:960px}
#qsh .faq details{background:#fff !important;border-radius:18px;box-shadow:0 0 0 1px var(--line) !important;transition:box-shadow .2s}
#qsh .faq details[open]{box-shadow:0 0 0 1px var(--step-active-border),0 18px 40px -26px rgba(11,27,58,.3) !important}
#qsh .faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 24px;font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ink);cursor:pointer}
#qsh .faq summary::-webkit-details-marker{display:none}
#qsh .faq summary svg{flex:none;width:18px;height:18px;color:var(--cobalt);transition:transform .25s}#qsh .faq details[open] summary svg{transform:rotate(45deg)}
#qsh .faq details p{margin:0 !important;padding:0 24px 22px;font-size:15.5px;line-height:1.6;color:var(--body);max-width:760px}
@media (max-width:1080px){#qsh .trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){#qsh .trust{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){#qsh .hero .disp .ln>span{transform:none}}
#qsh .ai-pill{align-self:flex-start;justify-self:start;width:fit-content;display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;background:#fff !important;box-shadow:0 0 0 1px var(--line),0 8px 20px -14px rgba(3,38,105,.4) !important;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px !important}
#qsh .msq{display:grid;grid-template-columns:7px 7px;gap:1.5px}#qsh .msq i{width:7px;height:7px}#qsh .msq i:nth-child(1){background:var(--ms-red) !important}#qsh .msq i:nth-child(2){background:var(--ms-green) !important}#qsh .msq i:nth-child(3){background:var(--ms-blue) !important}#qsh .msq i:nth-child(4){background:var(--ms-yellow) !important}
#qsh .trust img.tl{flex:none;width:18px;height:18px}
#qsh .pb{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:14px;background:#fff !important;box-shadow:0 0 0 1px var(--line) !important;line-height:1.15}
#qsh .pb img{width:30px;height:30px;flex:none}#qsh .pb small{display:block;font-size:11px;color:var(--muted);letter-spacing:.02em}#qsh .pb b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
#qsh .ai-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;font-family:var(--font-mono);font-size:14px;font-weight:600;color:#fff}
#qsh .erp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
#qsh .erp-copy{display:grid;gap:20px;align-content:center}#qsh .erp-copy .erp-list{margin-top:8px !important}
#qsh .mq{position:relative;height:560px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
#qsh .mq-col{overflow:hidden}#qsh .mq-track{display:flex;flex-direction:column;gap:14px;animation:qsh-mqUp 26s linear infinite}
#qsh .mq-col.rev .mq-track{animation-name:qsh-mqDown;animation-duration:30s}#qsh .mq-col:nth-child(3) .mq-track{animation-duration:34s}
#qsh .mq:hover .mq-track{animation-play-state:paused}
@keyframes qsh-mqUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
@keyframes qsh-mqDown{from{transform:translateY(calc(-50% - 7px))}to{transform:translateY(0)}}
#qsh .lg{display:grid;gap:14px;justify-items:center;padding:26px 16px 18px;border-radius:20px;background:#fff !important;box-shadow:0 0 0 1px var(--line),0 14px 30px -24px rgba(3,38,105,.35) !important;text-decoration:none;transition:box-shadow .2s,transform .2s}
#qsh .lg:hover{box-shadow:0 0 0 1px var(--ms-azure),0 18px 36px -22px rgba(0,120,212,.45) !important}
#qsh .lg-img{height:56px;width:100%;display:grid;place-items:center}#qsh .lg-img img{max-height:56px;max-width:78%;width:auto;height:auto;object-fit:contain}
#qsh .lg-n{font-size:13px;font-weight:500;color:var(--ink);text-align:center;line-height:1.3}
@media (max-width:1080px){#qsh .erp-hero{grid-template-columns:minmax(0,1fr);gap:36px}#qsh .mq{height:440px}}
@media (max-width:680px){#qsh .mq{grid-template-columns:repeat(2,minmax(0,1fr));height:400px}#qsh .mq-col:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){#qsh .mq-track{animation:none!important}}
#qsh .tm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#qsh .tm{display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden;background:#fff !important;box-shadow:0 0 0 1px var(--line) !important;text-decoration:none}
#qsh .tm-ph{position:relative;aspect-ratio:1/1;background:linear-gradient(160deg,#eaf1ff,#cfe3fb) !important;overflow:hidden}
#qsh .tm-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}#qsh .tm:hover .tm-ph img{transform:scale(1.04)}
#qsh .tm-t{padding:18px 20px 20px;display:grid;gap:4px;align-content:start}#qsh .tm-t b{font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}#qsh .tm-t span{font-size:13.5px;color:var(--ms-azure)}#qsh .tm-t p{margin:6px 0 0 !important;font-size:14px;line-height:1.5;color:var(--body)}
#qsh .tm-more{background:var(--gradient-night) !important;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:none !important}#qsh .tm-more .k{color:var(--sky-light,#8cc4ff)}#qsh .tm-more b{font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.02em;color:#fff}
@media (max-width:1080px){#qsh .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){#qsh .tm-grid{grid-template-columns:minmax(0,1fr)}}
#qsh .ib{margin-top:40px !important;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:stretch;padding:32px;border-radius:28px;background:linear-gradient(180deg,#f9fbff,#eef5fd) !important;box-shadow:0 0 0 1px var(--line) !important;overflow:hidden}
#qsh .ib-l{display:flex;flex-direction:column;justify-content:space-around;gap:40px}
#qsh .ib-lab{display:grid;gap:10px;max-width:240px}#qsh .ib-lab p{margin:0 !important;font-size:15px;line-height:1.5;color:var(--ink)}
#qsh .ib-tag{justify-self:start;padding:8px 16px;border-radius:999px;background:#fff !important;box-shadow:0 8px 20px -14px rgba(3,38,105,.5) !important;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
#qsh .ib-tag.see{color:var(--ms-azure)}#qsh .ib-tag.hid{color:#c2410c}
#qsh .ib-c{display:grid;place-items:center}#qsh .ice{width:100%;max-width:440px;height:auto;display:block}
#qsh .ib-r{list-style:none;margin:0 !important;padding:0 0 0 24px;border-left:1px solid rgba(3,38,105,.12);display:grid;gap:18px;align-content:center}
#qsh .ib-r li{display:flex;gap:14px;align-items:flex-start}#qsh .ib-r b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}#qsh .ib-r span{font-size:14px;line-height:1.45;color:var(--body)}
#qsh .ib-ic{flex:none;width:40px;height:40px;border-radius:50%;background:#fff !important;display:grid;place-items:center;box-shadow:0 6px 16px -10px rgba(3,38,105,.5) !important}#qsh .ib-ic svg{width:18px;height:18px;color:#c2410c}
#qsh .ib-fix{margin-top:16px !important;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:24px;align-items:center;padding:28px 32px;border-radius:24px;background:#fffaf0 !important;box-shadow:0 0 0 1px #f6e3b4 !important}
#qsh .ib-fix-h{display:flex;gap:18px;align-items:center}#qsh .ib-fix h3{margin:0 0 6px !important;font-size:22px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}#qsh .ib-fix p{margin:0 !important;font-size:15px;line-height:1.5;color:var(--body)}
#qsh .ib-target{flex:none;width:56px;height:56px;border-radius:50%;background:var(--ms-yellow) !important;display:grid;place-items:center}#qsh .ib-target svg{width:26px;height:26px;color:var(--ink)}
#qsh .ib-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}#qsh .ib-steps>div{display:grid;gap:10px;justify-items:center;text-align:center;padding:0 14px;font-size:14.5px;color:var(--ink);font-weight:500}#qsh .ib-steps>div+div{border-left:1px solid #f0dcaa}#qsh .ib-steps svg{width:26px;height:26px;color:var(--ms-azure)}
@media (max-width:1080px){#qsh .ib{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}#qsh .ib-r{grid-column:1/-1;border-left:0;padding:24px 0 0;border-top:1px solid rgba(3,38,105,.12);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}#qsh .ib-fix{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){#qsh .ib{grid-template-columns:minmax(0,1fr);padding:22px}#qsh .ib-c{order:-1}#qsh .ib-l{flex-direction:row;gap:16px}#qsh .ib-lab{flex:1}#qsh .ib-steps{grid-template-columns:minmax(0,1fr);gap:16px}#qsh .ib-steps>div+div{border-left:0}}
@keyframes qsh-orbSpin{to{transform:rotate(360deg)}}@keyframes qsh-orbCounter{from{rotate:0deg}to{rotate:-360deg}}
#qsh .svc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px 22px;border-radius:20px;cursor:pointer;transition:background .25s,box-shadow .25s;outline:none}
#qsh .svc:hover,#qsh .svc:focus-visible{background:var(--surface) !important}
#qsh .svc.on{background:#fff !important;box-shadow:0 0 0 1px var(--line),0 24px 48px -30px rgba(3,38,105,.45) !important}
#qsh .svc h3{margin:0 !important;display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500;letter-spacing:-.025em;color:var(--ink)}#qsh .svc h3 svg{width:20px;height:20px;color:var(--ms-azure)}
#qsh .cv-head{display:grid;justify-items:center;text-align:center;gap:16px;max-width:860px;margin:0 auto !important}#qsh .cv-head .lead{margin:0 !important;max-width:720px}
#qsh .cv{margin:52px auto 0 !important;display:flex;justify-content:center;align-items:center;gap:14px;perspective:1100px;perspective-origin:50% 50%;max-width:1180px}
#qsh .cv-card{--ap:max(var(--p),calc(-1*var(--p)));position:relative;flex:1 1 0;min-width:0;height:calc(260px + var(--ap)*64px);border:0;border-radius:26px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;cursor:pointer;overflow:hidden;transform:rotateY(calc(var(--p)*-16deg)) scale(calc(1 - var(--ap)*.0));transform-origin:center;box-shadow:0 30px 60px -34px rgba(3,38,105,.6) !important;transition:box-shadow .3s,filter .3s;font:inherit}
#qsh .cv-card:hover{filter:brightness(1.06)}
#qsh .cv-card.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ms-azure),0 34px 70px -30px rgba(0,120,212,.6) !important}
#qsh .cv-ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18) !important;display:grid;place-items:center}#qsh .cv-ic svg{width:22px;height:22px}
#qsh .cv-big{position:absolute;right:-18%;top:22%;opacity:.12;pointer-events:none}#qsh .cv-big svg{width:180px;height:180px;stroke-width:1.2}
#qsh .cv-t{position:relative;display:grid;gap:6px}#qsh .cv-t b{font-size:clamp(17px,1.5vw,22px);font-weight:500;letter-spacing:-.025em;line-height:1.15}#qsh .cv-t small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.82}
#qsh .cv-ghost{flex:0 0 46px;height:430px;border-radius:26px;background:linear-gradient(160deg,#dbe8f8,#eef4fc) !important;opacity:.8}#qsh .cv-ghost.l{transform:rotateY(40deg);margin-right:-4px}#qsh .cv-ghost.r{transform:rotateY(-40deg);margin-left:-4px}
#qsh .cv-labs{margin:26px auto 0 !important;max-width:1080px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:0 60px}
#qsh .cv-lab{border:0;background:none !important;font:inherit;font-size:13.5px;color:var(--body);display:grid;gap:4px;justify-items:center;text-align:center;cursor:pointer;padding:6px}#qsh .cv-lab span{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ms-azure)}#qsh .cv-lab.on{color:var(--ink);font-weight:600}
#qsh .cv-dets{margin:28px auto 0 !important;max-width:820px}#qsh .cv-det{display:none;gap:12px;justify-items:center;text-align:center;padding:28px 32px;border-radius:24px;background:var(--surface) !important}#qsh .cv-det.on{display:grid;animation:qsh-fadeup .5s cubic-bezier(.2, .8, .2, 1)}#qsh .cv-det p{margin:0 !important;font-size:16px;line-height:1.65;color:var(--body);text-wrap:pretty}
@media (max-width:1080px){#qsh .cv{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding:20px 4px;perspective:none}#qsh .cv-ghost{display:none}#qsh .cv-card{flex:0 0 240px;height:300px;transform:none;scroll-snap-align:center}#qsh .cv-labs{display:none}}
#qsh .ai-sec{position:relative;overflow:hidden;background:#020b24 !important;color:#fff;padding:120px 0 120px;margin:40px 0 !important}
#qsh .ai-sec .anchor{position:absolute;top:0}
#qsh .ai-glow{position:absolute;left:50%;top:0;width:1400px;height:820px;transform:translateX(-50%);background:radial-gradient(60% 55% at 50% 72%,rgba(140,200,255,.85),rgba(0,120,212,.55) 35%,rgba(3,38,105,.35) 60%,transparent 78%) !important;pointer-events:none}
#qsh .ai-pix{position:absolute;inset:0 0 auto;height:820px;background-image:radial-gradient(rgba(170,210,255,.55) 1.2px,transparent 1.6px);background-size:14px 14px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,transparent 30%,#000 70%,transparent 95%);mask-image:radial-gradient(70% 60% at 50% 40%,transparent 30%,#000 70%,transparent 95%);opacity:.5;pointer-events:none}
#qsh .ai-in{position:relative;z-index:2}
#qsh .ai-hero{display:grid;justify-items:center;text-align:center;gap:26px;padding:20px 0 120px}
#qsh .ai-chip{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:8px;background:rgba(255,255,255,.08) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#d6e8ff}
#qsh .ai-h{margin:0 !important;max-width:980px;font-size:clamp(40px,5.6vw,78px);line-height:1.02;letter-spacing:-.045em;font-weight:500;color:#cfe5ff;text-wrap:balance}
#qsh .ai-h em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em;color:#fff}
#qsh .ai-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#qsh .ai-btn-l{background:#fff !important;color:#021a4a;border-radius:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}#qsh .ai-btn-l:hover{background:#eaf3ff !important}
#qsh .ai-btn-d{background:#0b1430 !important;color:#fff;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2) !important;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}#qsh .ai-btn-d:hover{background:#131f45 !important}
#qsh .ai-stmt{margin:0 auto !important;max-width:900px;text-align:center;font-size:clamp(28px,3.4vw,46px);line-height:1.12;letter-spacing:-.035em;color:#fff}#qsh .ai-stmt span{color:rgba(255,255,255,.5)}
#qsh .ai-core{display:grid;justify-items:center;margin-top:56px !important}
#qsh .ai-key{width:92px;height:92px;border-radius:22px;background:linear-gradient(160deg,#1b2342,#05091a) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.08),0 20px 50px -10px rgba(0,120,212,.6) !important;display:grid;place-items:center}#qsh .ai-key img{width:58%;height:auto}
#qsh .ai-beam{width:2px;height:110px;background:linear-gradient(180deg,rgba(140,200,255,.9),rgba(0,120,212,0)) !important}
#qsh .ai-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid rgba(140,200,255,.35);box-shadow:0 -1px 30px -6px rgba(0,120,212,.6) !important}
#qsh .ai-col{padding:44px 40px;display:grid;gap:22px;align-content:start}#qsh .ai-col+.ai-col{border-left:1px solid rgba(255,255,255,.1);background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:16px 16px}
#qsh .ai-tag{justify-self:start;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.08) !important;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#d6e8ff}
#qsh .ai-lead{margin:0 !important;font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.03em;font-weight:500;color:#fff}#qsh .ai-lead span{color:rgba(255,255,255,.5)}
#qsh .ai-steps{list-style:none;margin:0 !important;padding:0;display:grid;gap:4px}
#qsh .ai-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
#qsh .ai-n{font-family:var(--font-mono);font-size:12.5px;color:#8cc4ff;padding-top:3px}
#qsh .ai-steps b,#qsh .ai-tile b{display:block;font-size:17px;font-weight:500;letter-spacing:-.02em;color:#fff}#qsh .ai-steps p,#qsh .ai-tile p{margin:6px 0 0 !important;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.66)}
#qsh .ai-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#qsh .ai-tile{display:grid;gap:14px;padding:20px;border-radius:18px;background:linear-gradient(160deg,#121a36,#070d22) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.08) !important}
#qsh .ai-ti{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff}#qsh .ai-ti svg{width:20px;height:20px}
#qsh .ai-badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#qsh .ai-badges .pb{background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important}#qsh .ai-badges .pb small{color:rgba(255,255,255,.6)}#qsh .ai-badges .pb b{color:#fff}
@media (max-width:1080px){#qsh .ai-grid{grid-template-columns:minmax(0,1fr)}#qsh .ai-col+.ai-col{border-left:0;border-top:1px solid rgba(255,255,255,.1)}#qsh .ai-hero{padding-bottom:80px}}
@media (max-width:680px){#qsh .ai-sec{padding:80px 0}#qsh .ai-col{padding:32px 4px}#qsh .ai-stack{grid-template-columns:minmax(0,1fr)}}
#qsh .ind-sec{position:relative;background:radial-gradient(80% 60% at 50% 30%,#1c2a4d,#0a1226 70%) !important;color:#fff;padding:90px 0 80px;margin:40px 0 !important;overflow:hidden}
#qsh .ind-stage{position:relative;min-height:640px;display:grid;place-items:center}
#qsh .ind-word{position:absolute;left:0;right:0;top:10px;text-align:center;font-family:'Oswald',var(--font-sans);font-weight:600;font-size:clamp(90px,17vw,250px);line-height:.9;letter-spacing:-.01em;background:linear-gradient(180deg,#f2f5fa 0%,#a9b6cc 55%,rgba(120,140,175,.35) 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent;pointer-events:none;user-select:none}
#qsh .ind-photo{position:relative;z-index:2;width:min(620px,70%);aspect-ratio:16/10;margin-top:120px !important;box-shadow:0 50px 90px -30px rgba(0,0,0,.8) !important;border-radius:22px}
#qsh .ind-badge{position:absolute;z-index:3;left:17%;top:200px;padding:14px 18px;border-radius:6px;background:rgba(40,54,88,.75) !important;backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;display:grid;gap:2px}#qsh .ind-badge small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}#qsh .ind-badge b{font-size:22px;font-weight:600;letter-spacing:-.02em}
#qsh .ind-cta{position:absolute;z-index:3;left:0;bottom:30px;width:340px;padding:28px;border-radius:6px;background:rgba(18,28,54,.78) !important;backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) !important;display:grid;gap:18px}
#qsh .ind-cta h2{margin:0 !important;font-size:26px;line-height:1.2;font-weight:400;letter-spacing:-.02em;color:#fff}#qsh .ind-cta .btn{justify-content:center;border-radius:4px}
#qsh .ind-spec{position:absolute;z-index:3;right:4%;bottom:90px;width:200px;padding:16px;border-radius:6px;background:rgba(40,54,88,.75) !important;backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;display:grid;gap:12px}
#qsh .ind-spec-ic{width:44px;height:44px;border-radius:10px;background:var(--ms-yellow) !important;color:#061d4f;display:grid;place-items:center}#qsh .ind-spec-ic svg{width:22px;height:22px}
#qsh .ind-spec ul{margin:0 !important;padding-left:16px;display:grid;gap:4px;font-size:13.5px;color:rgba(255,255,255,.85)}
#qsh .ind-bot{margin-top:56px !important;padding-top:44px;border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:40px}
#qsh .ind-why{display:grid;gap:16px;align-content:start}#qsh .ind-why h3{margin:0 !important;font-size:clamp(24px,2.3vw,30px);line-height:1.2;font-weight:400;letter-spacing:-.02em;color:#fff}#qsh .ind-why p{margin:0 !important;font-size:15px;line-height:1.6;color:rgba(255,255,255,.65)}
#qsh .ind-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}#qsh .ind-tag svg{width:16px;height:16px;color:#3aa0f3}
#qsh .ind-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#qsh .ind-c{display:grid;gap:10px;align-content:start;padding:20px;border-radius:6px;background:rgba(20,30,58,.7) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) !important;text-decoration:none;color:#fff;transition:background .2s,box-shadow .2s}
#qsh .ind-c:hover{background:rgba(30,48,90,.8) !important;box-shadow:inset 0 0 0 1px rgba(58,160,243,.5) !important}
#qsh .ind-c-top{display:flex;justify-content:space-between;align-items:center}#qsh .ind-c-ic{width:38px;height:38px;border-radius:9px;background:rgba(0,120,212,.2) !important;display:grid;place-items:center;color:#8cc4ff}#qsh .ind-c-ic svg{width:18px;height:18px}#qsh .ind-go{width:16px;height:16px;color:rgba(255,255,255,.6)}
#qsh .ind-c b{font-size:16px;font-weight:500;letter-spacing:-.01em}#qsh .ind-c>span:last-child{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.65)}
@media (max-width:1080px){#qsh .ind-stage{min-height:0;display:grid;gap:16px;justify-items:stretch}#qsh .ind-word{position:relative;top:0}#qsh .ind-photo{width:100%;margin-top:-40px !important}#qsh .ind-badge,#qsh .ind-cta,#qsh .ind-spec{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}#qsh .ind-bot{grid-template-columns:minmax(0,1fr)}#qsh .ind-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){#qsh .ind-cards{grid-template-columns:minmax(0,1fr)}}
#qsh .ind-c{padding:0;overflow:hidden}#qsh .ind-c>*:not(.ind-c-img){margin:0 20px !important}#qsh .ind-c>span:last-child{margin-bottom:20px !important}
#qsh .ind-c-img{display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:6px !important}#qsh .ind-c-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.85);transition:transform .5s,filter .3s}#qsh .ind-c:hover .ind-c-img img{transform:scale(1.05);filter:none}
#qsh .ind-cred{margin:28px 0 0 !important;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.45)}
#qsh .ctl{position:relative;border-radius:36px;padding:56px;background:radial-gradient(60% 70% at 72% 50%,#3a4458 0%,#1f2735 55%,#171d29 100%) !important;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 40px 80px -40px rgba(3,10,30,.7) !important;color:#fff;overflow:hidden}
#qsh .ctl-head{display:grid;gap:16px;margin-bottom:44px !important}#qsh .ctl-head .k{color:#8cc4ff}
#qsh .ctl-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
#qsh .ctl-spec{position:relative;display:grid;gap:4px;padding-left:0}
#qsh .ctl-track{position:absolute;left:180px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35) !important}#qsh .ctl-track::before,#qsh .ctl-track::after{content:"";position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;background:#fff !important}#qsh .ctl-track::before{top:-2px}#qsh .ctl-track::after{bottom:-2px}
#qsh .ctl-track i{position:absolute;left:-4px;width:9px;border-radius:9px;background:#fff !important;box-shadow:0 0 18px rgba(140,196,255,.7) !important;transition:top .4s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1);height:40px;top:0}
#qsh .ctl-row{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:start;border:0;background:none !important;padding:16px 0;text-align:left;font:inherit;cursor:pointer;color:inherit}
#qsh .ctl-l{padding-right:28px;text-align:right;font-size:14px;color:rgba(255,255,255,.45);transition:color .25s,font-weight .25s;padding-top:2px}
#qsh .ctl-d{padding-left:32px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.4);transition:color .25s;text-wrap:pretty}
#qsh .ctl-row.on .ctl-l{color:#fff;font-weight:600}#qsh .ctl-row.on .ctl-d{color:rgba(255,255,255,.9)}#qsh .ctl-row:hover .ctl-d{color:rgba(255,255,255,.75)}
#qsh .ctl-vis{position:relative;display:flex;align-items:center;justify-content:center;gap:36px}
#qsh .ctl-rec{position:relative;width:100%;max-width:340px;border-radius:44px;padding:30px 26px 24px;background:linear-gradient(170deg,#3b4457,#1a202c 70%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.1),0 40px 70px -24px rgba(0,0,0,.7) !important;display:grid;gap:8px}
#qsh .ctl-rec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px !important;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
#qsh .ctl-live{display:inline-flex;align-items:center;gap:7px;color:#9be37a}#qsh .ctl-live i{width:7px;height:7px;border-radius:50%;background:#7fba00 !important;box-shadow:0 0 0 4px rgba(127,186,0,.2) !important}
#qsh .ctl-f{position:relative;display:grid;gap:2px;padding:12px 14px 12px 40px;border-radius:16px;background:rgba(0,0,0,.18) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important;transition:background .3s,box-shadow .3s}
#qsh .ctl-f small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}#qsh .ctl-f b{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.85);font-family:var(--font-mono)}
#qsh .ctl-plus{position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px !important;border-radius:50%;background:#fff !important;color:#1f2735;display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1;opacity:.35;transition:opacity .3s,transform .3s}
#qsh .ctl-f.on{background:rgba(0,120,212,.22) !important;box-shadow:inset 0 0 0 1px rgba(140,196,255,.55) !important}#qsh .ctl-f.on .ctl-plus{opacity:1;transform:scale(1.15);box-shadow:0 0 0 5px rgba(140,196,255,.25) !important}
#qsh .ctl-rec-f{margin-top:8px !important;display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.7)}#qsh .ctl-rec-f svg{width:15px;height:15px;color:#9be37a}
#qsh .ctl-pager{display:grid;gap:14px}#qsh .ctl-pager button{width:8px;height:8px;border:0;padding:0;border-radius:50%;background:rgba(255,255,255,.7) !important;cursor:pointer;transition:box-shadow .25s}#qsh .ctl-pager button.on{background:#fff !important;box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 0 6px rgba(255,255,255,.5) !important}
#qsh .ctl-foot{margin-top:40px !important;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
@media (max-width:1080px){#qsh .ctl{padding:40px 28px}#qsh .ctl-body{grid-template-columns:minmax(0,1fr)}#qsh .ctl-vis{order:-1}}
@media (max-width:640px){#qsh .ctl-track{left:0}#qsh .ctl-row{grid-template-columns:minmax(0,1fr);gap:6px;padding-left:22px}#qsh .ctl-l,#qsh .ctl-d{text-align:left;padding:0}#qsh .ctl-pager{display:none}}
#qsh{background:#f3f6fb !important}
#qsh div:where(.qsh-main),#qsh footer{max-width:1280px;margin:0 auto !important;background:#fff !important;border-left:1px solid #e1e7f0;border-right:1px solid #e1e7f0;overflow-x:clip}
#qsh div:where(.qsh-main)>section{border-top:1px solid #e1e7f0}#qsh div:where(.qsh-main)>section:first-child{border-top:0}
#qsh div:where(.qsh-main) .sec{padding:110px 0}
#qsh .ai-sec,#qsh .ind-sec{margin:0!important}
#qsh footer{margin-top:0 !important;padding:24px 24px 32px;border-top:1px solid #e1e7f0}
#qsh footer .wrap{padding:0}
#qsh .hero .trust{border-top:1px solid #e1e7f0}
#qsh .fa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
#qsh .fa-faq{display:grid;gap:20px;align-content:start}#qsh .fa-faq .faq{max-width:none;margin-top:8px !important}
#qsh .fa-form-wrap{position:sticky;top:110px}
#qsh .fa-form{position:relative;overflow:hidden;border-radius:28px;background:var(--gradient-night) !important;padding:36px;color:#fff;display:grid;gap:26px;box-shadow:0 40px 80px -40px rgba(3,38,105,.7) !important}
#qsh .fa-form-h{position:relative;z-index:2;display:grid;gap:12px}#qsh .fa-form-h h3{margin:0 !important;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.035em;font-weight:500;color:#fff}#qsh .fa-form-h p{margin:0 !important;font-size:15px;line-height:1.6;color:rgba(255,255,255,.75)}
#qsh .fa-get{list-style:none;margin:4px 0 0 !important;padding:0;display:grid;gap:8px}#qsh .fa-get li{display:flex;gap:10px;align-items:center;font-size:14.5px;color:#fff}#qsh .fa-get svg{width:16px;height:16px;color:#7fba00}
#qsh .fa-f{position:relative;z-index:2;display:grid;gap:14px;padding:24px;border-radius:20px;background:#fff !important;color:var(--ink)}
#qsh .fa-fine{margin:0 !important;font-size:12.5px;color:var(--muted);text-align:center}#qsh .fa-fine a{color:#0063b1}
@media (max-width:1080px){#qsh .fa{grid-template-columns:minmax(0,1fr)}#qsh .fa-form-wrap{position:static}}
@media (max-width:560px){#qsh .fa-form{padding:22px}#qsh .fa-f{padding:18px}}
#qsh .bl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px}
#qsh .bl-feat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;justify-content:flex-end;min-height:440px;padding:36px;border-radius:28px;background:var(--gradient-night) !important;color:#fff;text-decoration:none;box-shadow:0 40px 80px -40px rgba(3,38,105,.7) !important}
#qsh .bl-feat:hover{color:#fff}#qsh .bl-feat h3{position:relative;margin:0 !important;font-size:clamp(26px,2.4vw,34px);line-height:1.12;letter-spacing:-.035em;font-weight:500}#qsh .bl-feat p{position:relative;margin:0 !important;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.75);max-width:440px}
#qsh .bl-art{position:absolute;right:-30px;top:-30px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(0,164,239,.35),transparent 70%) !important;display:grid;place-items:center;color:rgba(255,255,255,.85)}#qsh .bl-art svg{width:72px;height:72px;stroke-width:1.3}
#qsh .bl-meta{position:relative;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}#qsh .bl-feat .bl-meta{color:rgba(255,255,255,.65)}
#qsh .bl-cat{padding:4px 8px;border-radius:6px;background:#eaf3ff !important;color:#0063b1}#qsh .bl-feat .bl-cat{background:rgba(255,255,255,.12) !important;color:#fff}
#qsh .bl-go{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:6px !important;font-size:14.5px;font-weight:500;color:#8cc4ff}#qsh .bl-go svg{width:16px;height:16px;transition:transform .2s}#qsh .bl-feat:hover .bl-go svg{transform:translate(2px,-2px)}
#qsh .bl-list{display:grid;gap:12px}
#qsh .bl-item{display:grid;grid-template-columns:52px minmax(0,1fr) 20px;gap:18px;align-items:start;padding:24px;border-radius:22px;background:#fff !important;box-shadow:0 0 0 1px var(--line) !important;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
#qsh .bl-item:hover{box-shadow:0 0 0 1px #0078d4,0 20px 40px -26px rgba(0,120,212,.5) !important;transform:translateY(-2px);color:inherit}
#qsh .bl-ic{width:52px;height:52px;border-radius:14px;background:var(--gradient-signature) !important;display:grid;place-items:center;color:#fff}#qsh .bl-ic svg{width:22px;height:22px}
#qsh .bl-b{display:grid;gap:8px}#qsh .bl-b h4{margin:0 !important;font-size:18px;line-height:1.3;font-weight:500;letter-spacing:-.02em;color:var(--ink)}#qsh .bl-b p{margin:0 !important;font-size:14.5px;line-height:1.55;color:var(--body)}
#qsh .bl-arr{width:18px;height:18px;color:var(--muted);transition:color .2s,transform .2s}#qsh .bl-item:hover .bl-arr{color:#0078d4;transform:translate(2px,-2px)}
@media (max-width:1080px){#qsh .bl{grid-template-columns:minmax(0,1fr)}#qsh .bl-feat{min-height:340px}}
@media (max-width:560px){#qsh .bl-item{grid-template-columns:44px minmax(0,1fr);padding:18px}#qsh .bl-arr{display:none}#qsh .bl-ic{width:44px;height:44px}}
#qsh .sd{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;align-items:start}
#qsh .sd-tabs{display:grid;gap:8px;position:sticky;top:110px}
#qsh .sd-tab{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border:0;border-radius:18px;background:transparent !important;text-align:left;font:inherit;cursor:pointer;color:var(--ink);transition:background .2s,box-shadow .2s}
#qsh .sd-tab:hover{background:var(--surface) !important}#qsh .sd-tab.on{background:#fff !important;box-shadow:0 0 0 1px var(--line),0 18px 40px -26px rgba(3,38,105,.45) !important}
#qsh .sd-ti{width:44px;height:44px;border-radius:12px;background:#eef4fc !important;display:grid;place-items:center;color:#0078d4;transition:background .2s,color .2s}#qsh .sd-ti svg{width:20px;height:20px}#qsh .sd-tab.on .sd-ti{background:var(--gradient-signature) !important;color:#fff}
#qsh .sd-tab b{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.01em}#qsh .sd-tab small{display:block;margin-top:2px !important;font-size:12px;color:var(--muted)}
#qsh .sd-cta{margin-top:10px !important;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:18px 20px;border-radius:18px;background:var(--gradient-night) !important;color:#fff;text-decoration:none}#qsh .sd-cta:hover{color:#fff}#qsh .sd-cta span{grid-column:1;font-size:12px;color:rgba(255,255,255,.65)}#qsh .sd-cta b{grid-column:1;font-size:15px;font-weight:500}#qsh .sd-cta svg{grid-column:2;grid-row:1/3;width:18px;height:18px}
#qsh .sd-panel{display:none;padding:32px;border-radius:28px;background:var(--surface) !important;gap:24px}#qsh .sd-panel.on{display:grid;animation:qsh-fadeup .45s cubic-bezier(.2, .8, .2, 1)}
#qsh .sd-ph{display:grid;gap:8px}#qsh .sd-tag{justify-self:start;padding:4px 10px;border-radius:999px;background:#eaf3ff !important;color:#0063b1;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}#qsh .sd-ph h3{margin:0 !important;font-size:28px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}#qsh .sd-ph p{margin:0 !important;font-size:15.5px;color:var(--body)}
@media (max-width:1080px){#qsh .sd{grid-template-columns:minmax(0,1fr)}#qsh .sd-tabs{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}#qsh .sd-cta{grid-column:1/-1}}
@media (max-width:640px){#qsh .sd-tabs{grid-template-columns:minmax(0,1fr)}#qsh .sd-panel{padding:20px}}
#qsh{--dark-grad:radial-gradient(90% 70% at 50% 0%,#0f4396 0%,#032669 48%,#021a4a 100%);--dark-tile:linear-gradient(160deg,rgba(30,67,137,.55),rgba(2,26,74,.75));--light-band:linear-gradient(180deg,#f5f8fd 0%,#ebf2fb 100%)}
#qsh .ai-sec,#qsh .ind-sec{background:var(--dark-grad)!important}
#qsh .ai-tile{background:var(--dark-tile) !important}
#qsh .ai-key{background:linear-gradient(160deg,#1e4389,#021a4a) !important}
#qsh .ctl{background:radial-gradient(70% 80% at 75% 45%,#0f4396 0%,#032669 50%,#021a4a 100%) !important}
#qsh .ctl-rec{background:linear-gradient(170deg,#1e4389,#021a4a 72%) !important}
#qsh .ind-badge,#qsh .ind-spec{background:rgba(30,67,137,.6) !important}#qsh .ind-cta{background:rgba(2,26,74,.78) !important}#qsh .ind-c{background:rgba(3,38,105,.55) !important}#qsh .ind-c:hover{background:rgba(15,67,150,.65) !important}
#qsh .ind-word{background:linear-gradient(180deg,#ffffff 0%,#b6cdf6 55%,rgba(140,196,255,.25) 100%) !important;-webkit-background-clip:text !important;background-clip:text !important}
#qsh #erp,#qsh #team,#qsh #insights{background:var(--light-band) !important}
#qsh #erp,#qsh #team,#qsh #insights{border-top:1px solid #e3ebf6;border-bottom:1px solid #e3ebf6}
#qsh .hero .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:680px){#qsh .hero .trust{grid-template-columns:minmax(0,1fr)}}
#qsh{--r-panel:32px;--r-card:20px;--r-ctl:12px;--panel-inset:clamp(12px,1.6vw,20px)}
#qsh .ai-sec,#qsh .ind-sec,#qsh #erp,#qsh #team,#qsh #insights{margin:24px var(--panel-inset)!important;border-radius:var(--r-panel);overflow:hidden;border:0!important}
#qsh #erp,#qsh #team,#qsh #insights{box-shadow:inset 0 0 0 1px #e3ebf6 !important}
#qsh .ctl{border-radius:var(--r-panel)}
#qsh footer{padding-left:var(--panel-inset)!important;padding-right:var(--panel-inset)!important}
#qsh .ib{border-radius:24px}
#qsh .ind-sec{padding:72px 0 48px}
#qsh .ind-stage{display:block;min-height:0;position:relative}
#qsh .ind-word{position:relative;top:0;text-align:center;margin:0 0 -0.32em !important;font-size:clamp(72px,13.5vw,190px);z-index:1}
#qsh .ind-photo{position:relative;z-index:2;width:100%;aspect-ratio:auto;height:clamp(380px,42vw,520px);margin:0 !important;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(140,196,255,.18) !important}
#qsh .ind-photo img.qsh-slot{position:absolute;inset:0;width:100%;height:100%}
#qsh .ind-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,26,74,.85) 0%,rgba(2,26,74,.35) 45%,rgba(2,26,74,0) 70%),linear-gradient(0deg,rgba(2,26,74,.55),transparent 45%) !important;pointer-events:none;z-index:1}
#qsh .ind-ov{position:absolute;inset:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:32px;pointer-events:none}
#qsh .ind-ov>*{pointer-events:auto}
#qsh .ind-cta,#qsh .ind-badge,#qsh .ind-spec{position:static!important;width:auto;border-radius:var(--r-card)}
#qsh .ind-cta{max-width:400px;padding:28px;background:rgba(2,26,74,.72) !important;backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(140,196,255,.2) !important}
#qsh .ind-cta h2{font-size:clamp(22px,2.2vw,28px)}#qsh .ind-cta .btn{border-radius:var(--r-ctl)}
#qsh .ind-side{display:grid;gap:12px;width:230px}
#qsh .ind-badge,#qsh .ind-spec{background:rgba(3,38,105,.68) !important;backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(140,196,255,.2) !important;padding:16px 18px}
#qsh .ind-spec-ic{border-radius:var(--r-ctl)}
#qsh .ind-bot{margin-top:48px !important;padding-top:40px;gap:32px}
#qsh .ind-cards{gap:16px}
#qsh .ind-c{border-radius:var(--r-card);padding:0 0 20px;overflow:hidden;background:rgba(3,38,105,.5) !important;box-shadow:inset 0 0 0 1px rgba(140,196,255,.16) !important}
#qsh .ind-c>*:not(.ind-c-img){margin:0 20px !important}
#qsh .ind-c-img{display:block;aspect-ratio:16/9;overflow:hidden;margin:0 0 4px!important}#qsh .ind-c-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}#qsh .ind-c:hover .ind-c-img img{transform:scale(1.05)}
#qsh .ind-c-ic{border-radius:10px}
@media (max-width:1080px){#qsh .ind-photo{height:auto;aspect-ratio:16/10}#qsh .ind-photo::after{background:linear-gradient(0deg,rgba(2,26,74,.6),transparent 60%) !important}#qsh .ind-ov{position:relative;inset:auto;flex-direction:column;align-items:stretch;padding:16px 0 0;margin-top:0 !important}#qsh .ind-photo{overflow:visible;box-shadow:none !important}#qsh .ind-photo img.qsh-slot{position:relative;display:block;aspect-ratio:16/10;height:auto;border-radius:24px;overflow:hidden}#qsh .ind-photo::after{display:none}#qsh .ind-cta{max-width:none}#qsh .ind-side{width:auto;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){#qsh .ind-side{grid-template-columns:minmax(0,1fr)}#qsh .ai-sec,#qsh .ind-sec,#qsh #erp,#qsh #team,#qsh #insights{border-radius:24px}}
#qsh #controls>.wrap{max-width:none;padding:0 var(--panel-inset)}
#qsh .ctl{box-shadow:0 40px 80px -40px rgba(3,10,30,.6) !important}
#qsh .ind-side{align-items:start}#qsh .ind-badge{align-content:start}
#qsh .tst-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:40px !important}
#qsh .rp-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:28px !important}
#qsh .rp{display:grid;gap:8px;padding:18px;border-radius:var(--r-card);background:#fff !important;box-shadow:0 0 0 1px var(--line),0 10px 24px -20px rgba(3,38,105,.4) !important;text-decoration:none;color:var(--ink);transition:box-shadow .2s,transform .2s}
#qsh .rp:hover{box-shadow:0 0 0 1.5px var(--ms-azure),0 16px 30px -20px rgba(0,120,212,.5) !important;transform:translateY(-2px)}
#qsh .rp-h{display:flex;align-items:center;gap:8px;font-size:14px}#qsh .rp-h img{width:20px;height:20px}
#qsh .rp-s{display:flex;align-items:baseline;gap:8px}#qsh .rp-s strong{font-size:30px;font-weight:600;letter-spacing:-.03em;color:#032669}
#qsh .rp-st,#qsh .tst-stars{color:#f5a524;letter-spacing:2px;font-size:14px}
#qsh .rp small{font-size:12.5px;color:var(--muted)}
#qsh .tst-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#qsh .tst{margin:0 !important;display:grid;grid-template-rows:auto 1fr auto;gap:16px;padding:26px;border-radius:var(--r-card);background:#fff !important;box-shadow:0 0 0 1px var(--line),0 14px 30px -26px rgba(3,38,105,.45) !important}
#qsh .tst:nth-child(1),#qsh .tst:nth-child(5){background:var(--dark-grad) !important;color:#fff;box-shadow:none !important}
#qsh .tst blockquote{margin:0 !important;font-size:16.5px;line-height:1.55;letter-spacing:-.01em;text-wrap:pretty}
#qsh .tst figcaption{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
#qsh .tst:nth-child(1) figcaption,#qsh .tst:nth-child(5) figcaption{border-color:rgba(255,255,255,.14)}
#qsh .tst figcaption img,#qsh .tst-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
#qsh .tst-av{display:grid;place-items:center;background:#e6f0ff !important;color:#032669;font-weight:600;font-size:14px}
#qsh .tst figcaption>span{display:grid;gap:2px;min-width:0;flex:1}#qsh .tst figcaption b{font-size:14.5px;font-weight:600}#qsh .tst figcaption small{font-size:12.5px;color:var(--muted)}
#qsh .tst:nth-child(1) small,#qsh .tst:nth-child(5) small{color:rgba(255,255,255,.65)}
#qsh .tst-src{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ms-azure);text-decoration:none;white-space:nowrap}#qsh .tst-src svg{width:12px;height:12px}
#qsh .tst:nth-child(1) .tst-src,#qsh .tst:nth-child(5) .tst-src{color:#8cc4ff}
@media (max-width:1080px){#qsh .rp-row{grid-template-columns:repeat(3,minmax(0,1fr))}#qsh .tst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#qsh .tst-head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){#qsh .rp-row{grid-template-columns:repeat(2,minmax(0,1fr))}#qsh .tst-grid{grid-template-columns:minmax(0,1fr)}}
#qsh .tst-wrap{display:grid;gap:18px}
#qsh .tst-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 32px)/3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 8px}
#qsh .tst-grid::-webkit-scrollbar{display:none}#qsh .tst{scroll-snap-align:start}
#qsh .tst-nav{display:flex;align-items:center;gap:10px}
#qsh .tst-btn{width:44px;height:44px;border-radius:var(--r-ctl);border:0;background:#fff !important;box-shadow:0 0 0 1px var(--line) !important;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}#qsh .tst-btn:hover{background:#0078d4 !important;color:#fff;box-shadow:none !important}#qsh .tst-btn svg{width:18px;height:18px}
#qsh .tst-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:#0063b1}#qsh .tst-all svg{width:15px;height:15px}
#qsh .rp-wm{font-weight:700;font-size:16px;letter-spacing:-.02em;line-height:20px}#qsh .rp-wm.gf{color:#1a2b49}#qsh .rp-wm.gf em{font-style:normal;color:#f58025}#qsh .rp-wm.cl{color:#17313b;display:inline-flex;align-items:center;gap:2px}#qsh .rp-wm.cl i{width:6px;height:6px;border-radius:50%;background:#ef4335 !important;margin-top:6px !important}
@media (max-width:1080px){#qsh .tst-grid{grid-auto-columns:calc((100% - 16px)/2);grid-template-columns:none}}
@media (max-width:620px){#qsh .tst-grid{grid-auto-columns:88%}}
#qsh,#qsh [data-theme],#qsh [data-theme="night"]{--cta:#107c10;--cta-hover:#0b5f0b;--on-cta:#fff}
#qsh .btn-cta{background:#107c10 !important;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -12px rgba(16,124,16,.55) !important}
#qsh .btn-cta:hover{background:#0b5f0b !important;color:#fff}
#qsh #around-your-erp{margin:24px var(--panel-inset)!important;border-radius:var(--r-panel);overflow:hidden;border:0!important;box-shadow:inset 0 0 0 1px #dbe7f7 !important;position:relative}
#qsh #around-your-erp{background:radial-gradient(55% 50% at 50% 100%,rgba(0,120,212,.18),transparent 70%),radial-gradient(40% 50% at 100% 0%,rgba(127,186,0,.10),transparent 70%),linear-gradient(180deg,#f4f8ff 0%,#e4eefc 100%)!important}
@media (max-width:620px){#qsh #around-your-erp{border-radius:24px}}
#qsh .cv-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;text-align:left}#qsh .cv-sub>div{background:#fff !important;border-radius:18px;padding:22px;display:grid;gap:10px;align-content:start;box-shadow:0 0 0 1px var(--line) !important}#qsh .cv-sub b{font-size:16.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}#qsh .cv-sub p{margin:0 !important;font-size:14.5px;line-height:1.6}#qsh .cv-det>p{margin:0 !important}
#qsh .rw{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;margin-top:8px !important}#qsh .rw-c{padding:36px;display:grid;gap:16px;align-content:start}#qsh .rw-c h3{margin:0 !important;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.03em;font-weight:500;color:var(--ink);text-wrap:balance}#qsh .rw-c p{margin:0 !important;font-size:15.5px;line-height:1.6;color:var(--body)}#qsh .rw-c .btn{justify-self:start;margin-top:8px !important}#qsh .rw-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#qsh .rw-stats>div{padding:14px 0;display:grid;gap:2px}#qsh .rw-stats>div+div{padding-left:16px;border-left:1px solid var(--line)}#qsh .rw-stats b{font-family:var(--font-mono);font-size:32px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}#qsh .rw-stats small{font-size:13px;color:var(--muted)}#qsh .rw-tags{display:flex;flex-wrap:wrap;gap:8px}#qsh .rw-tags span{padding:8px 12px;border-radius:999px;background:var(--surface) !important;font-size:13.5px;color:var(--ink)}#qsh .rw-num{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--surface) !important}#qsh .rw-num .big{font-family:var(--font-mono);font-size:28px;color:var(--ink)}
#qsh .pf{display:grid;gap:18px;margin-top:6px !important}#qsh .pf-g{display:grid;gap:10px}#qsh .pf-l{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}#qsh .pf-n{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}#qsh .pf-n i{width:7px;height:7px;border-radius:7px;background:var(--sky) !important;flex:none}#qsh .erp.sm{padding:8px 13px;font-size:13.5px}
#qsh #industries .ind-bot{grid-template-columns:minmax(0,1fr)}#qsh #industries .ind-cards{grid-template-columns:repeat(4,minmax(0,1fr))}#qsh #industries .ind-c-img img.qsh-slot{min-height:140px}
@media (max-width:1080px){#qsh .rw{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){#qsh .cv-sub{grid-template-columns:minmax(0,1fr)}#qsh .rw-c{padding:24px}}
@media (max-width:620px){#qsh #industries .ind-cards{grid-template-columns:minmax(0,1fr)}}
#qsh .dp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}#qsh .dg{display:grid;gap:12px}#qsh .dg-b{background:#fff !important;border-radius:18px;padding:20px;box-shadow:0 0 0 1px var(--line) !important;display:grid;gap:12px}#qsh .dg-b>b{font-size:15.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#qsh .dul{margin:0 !important;padding:0;list-style:none;display:grid;gap:9px}#qsh .dul li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--body)}#qsh .dul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--ms-azure) !important}#qsh .dul a,#qsh .dp-p a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(0,120,212,.45);text-underline-offset:3px}#qsh .dul a:hover{color:var(--ms-azure)}
#qsh .dq{border-radius:20px;background:linear-gradient(170deg,#1e4389,#021a4a 72%) !important;padding:20px;display:grid;gap:10px;color:#fff;position:sticky;top:120px}#qsh .dq-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8cc4ff}#qsh .dq-h .live{margin:0 !important}
#qsh .dq-r{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) !important}#qsh .dq-i{width:34px;height:34px;border-radius:10px;background:rgba(140,196,255,.14) !important;display:grid;place-items:center;color:#8cc4ff}#qsh .dq-i svg{width:16px;height:16px}#qsh .dq-r b{display:block;font-size:13.5px;font-weight:500;color:#fff;line-height:1.35}#qsh .dq-r small{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.72);margin-top:4px !important}#qsh .dq-r small i{width:6px;height:6px;border-radius:6px;background:#ffc83d !important;flex:none}#qsh .dq-r small i.ok{background:#34d399 !important}
#qsh .dq-f{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9be37a;padding-top:4px}#qsh .dq-f svg{width:15px;height:15px}#qsh .dq-n{font-family:var(--font-mono);font-size:10.5px;color:rgba(255,255,255,.5)}
#qsh .dlinks{display:flex;flex-wrap:wrap;gap:8px 20px}#qsh .dnote{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:#fff !important;box-shadow:0 0 0 1px var(--line) !important;font-size:14px;color:var(--ink)}#qsh .dnote svg{flex:none;width:16px;height:16px;color:var(--ms-azure)}#qsh .dp-p{margin:0 !important;font-size:15.5px;line-height:1.6;color:var(--body)}
#qsh .rw-next{grid-column:1/-1;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 24px;border-radius:20px;border:1.5px dashed #c6d3e6}#qsh .rw-next-ic{width:48px;height:48px;border-radius:14px;background:var(--surface) !important;display:grid;place-items:center;color:var(--ms-azure)}#qsh .rw-next-ic svg{width:20px;height:20px}#qsh .rw-next b{display:block;margin-top:6px !important;font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
#qsh #industries .ind-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1080px){#qsh .dp{grid-template-columns:minmax(0,1fr)}#qsh .dq{position:static}}
@media (max-width:680px){#qsh .rw-next{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1180px){#qsh #industries .ind-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:820px){#qsh #industries .ind-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Deliberate changes to the design, emitted AFTER the scoped design CSS so they
 * win ties on source order. Keep this list short: each entry is a visible
 * difference from the approved design file.
 *
 * 1. Hero offset. The design's `.hero{padding:150px 0 40px;min-height:100vh}`
 *    reserved 80px for its own fixed pill nav (top:16px + height:64px). The live
 *    Elementor header sits in normal flow above #qsh, so the hero keeps the same
 *    70px gap below the header and fills the rest of the first screen. */
#qsh .hero { min-height: calc(100vh - var(--qsh-header, 150px)); padding-top: 70px; }

/* 1b. Full width (requested 2026-10-19). The design boxed <main> in a 1280px white
 *     column with side borders on a grey page. Now the page runs edge to edge; the
 *     dark/tinted panels keep their small --panel-inset gutter and text content
 *     stays centred in .wrap (max 1280px). !important: border is one of the
 *     countered site properties, so the design's border declarations are !important. */
#qsh div:where(.qsh-main) { max-width: none !important; border-left: 0 !important; border-right: 0 !important; }

/* 1c. Team grid with one person removed (config.json "remove": Akanksha). The
 *     design had 7 people + the "team behind them" tile = 8 cells. With 7 cells the
 *     dark tile spans two columns wherever the grid has ≥ 2 columns (>520px), so
 *     no row is left with a hole. Drop this rule if the grid is back to 8 cells. */
@media (min-width: 521px) { #qsh .tm-grid > .tm-more { grid-column: span 2; } }

/* 1d. Review flags that wrap real sentence text (build.ts marks them .todo-copy):
 *     outside ?review=1 the words stay, as plain text, so sentences remain whole.
 *     Pure flag labels ("verify", "photo") are hidden by overrides.css. */
#qsh:not(.qsh-review) .todo.todo-copy {
  display: inline !important; background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; color: inherit !important; font: inherit !important;
  letter-spacing: inherit !important; text-transform: none !important; border-radius: 0 !important;
}
#qsh:not(.qsh-review) .todo.todo-copy::before, #qsh:not(.qsh-review) .todo.todo-copy::after { content: none !important; display: none !important; }

/* 1e. Design bug at <=1080px (also in the design file): the single-column hero's
 *     isometric stack overhangs its box and covers the trust strip by ~32px. */
@media (max-width: 1080px) { #qsh .hero .stage { margin-bottom: 56px !important; } } /* !important: margin-bottom is a countered site property */

/* 1f. Assessment card embeds the site's GoHighLevel form (config.json replaceHtml) in the
 *     design's white panel. The form brings its own padding, so the panel has none; the
 *     column no longer sticks because the card is now taller than the viewport. */
#qsh .fa-form-wrap { position: static; }
#qsh .fa-f.fa-ghl { padding: 0 0 18px; overflow: hidden; gap: 0; }
#qsh .fa-ghl iframe { display: block; width: 100%; min-height: 600px; }
#qsh .fa-ghl .fa-fine { padding: 0 18px; }

/* 1g. AI section key shows the full QServices logo (config.json setHtml), not the Q mark:
 *     the square key becomes a wide tile with the same glow. */
#qsh .ai-key { width: auto; height: auto; padding: 22px 30px; border-radius: 22px !important; }
#qsh .ai-key img { width: 210px; max-width: 60vw; height: auto; display: block; }

/* 1h. Platforms marquee carries 9 logos per column instead of 4 (config.json insertHtml,
 *     2026-10-21: CRM, service desk, AI and the other ERPs added). The loop moves half the
 *     track per cycle, so durations scale by 9/4 to keep the design's scroll speed. Non-ERP
 *     cards are <span class="lg"> (no page to link to yet), so they get no hover lift. */
#qsh .mq-track { animation-duration: 58s; }
#qsh .mq-col.rev .mq-track { animation-duration: 68s; }
#qsh .mq-col:nth-child(3) .mq-track { animation-duration: 76s; }
#qsh span.lg { cursor: default; }

/* 2. <image-slot> (design-tool placeholder) ships as a plain <img>. */
#qsh img.qsh-slot { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 3. In-page anchors land below the site header. */
#qsh [id] { scroll-margin-top: 24px; }

/* 2. Hero carousel (2026-10-23 user): four services share the hero. Slides stack in one
 *    grid cell so the hero keeps the height of the tallest slide and nothing jumps.
 *    Markup: config.json replaceHtml ".hero-copy p.disp"; behaviour: qs-home.js. */
#qsh .hc { display: grid; gap: 30px; }
#qsh .hc-slides { display: grid; }
#qsh .hc-slide { grid-area: 1 / 1; display: grid; gap: 24px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
#qsh .hc-slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease .08s, transform .55s cubic-bezier(.2, .8, .2, 1) .08s, visibility 0s; }
#qsh .hc-slide .micro { margin: -8px 0 0 !important; }
#qsh .hero .hc .disp { font-size: clamp(36px, 4.2vw, 62px); }
#qsh .hero .hc .disp .ln:nth-child(3) > span { animation-delay: .24s; }
#qsh .hc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 640px; }
#qsh .hc-tab { position: relative; display: grid; gap: 3px; align-content: start; padding: 14px 0 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; text-align: left; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--muted) !important; transition: color .2s; }
#qsh .hc-tab b { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--subtle) !important; }
#qsh .hc-tab:hover, #qsh .hc-tab.on { color: var(--ink) !important; }
#qsh .hc-tab.on b { color: var(--accent) !important; }
#qsh .hc-tab:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 4px; }
#qsh .hc-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--line) !important; overflow: hidden; }
#qsh .hc-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent) !important; }
@media (max-width: 600px) { #qsh .hc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; } }
@media (prefers-reduced-motion: reduce) { #qsh .hc-slide { transform: none; } }
#qsh .hc-nav { display: flex; align-items: flex-start; gap: 14px; max-width: 740px; }
#qsh .hc-nav .hc-tabs { flex: 1; }
#qsh .hc-pp { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: 8px 0 0 !important; padding: 0 !important; border-radius: 999px !important; border: 0 !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--line) !important; color: var(--ink) !important; cursor: pointer; }
#qsh .hc-pp svg { width: 15px; height: 15px; }
#qsh .hc-pp svg + svg, #qsh .hc.paused .hc-pp svg:first-child { display: none; }
#qsh .hc.paused .hc-pp svg + svg { display: block; }
#qsh .hc-pp:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 3px; }
/* text that changes with the slide: pill, kicker, layer side labels, chips */
#qsh .hc-sw, #qsh .layer .fl, #qsh #stage .chip > div { transition: opacity .22s ease; }
#qsh .hc-out, #qsh .layer .fl.hc-out, #qsh #stage .chip.hc-out > div { opacity: 0; }
#qsh #stage .chip.hc-out { opacity: 1; }
/* the layer that matches the slide takes the design's amber accent (normally fixed on 03) */
#qsh .iso .layer.L3:not(.hc-hl) { --c1: linear-gradient(135deg, #3d8bf2, #1e4389); --c2: #1f55bd; --c3: #1a4597; }
#qsh .iso .layer.L3:not(.hc-hl) .fl, #qsh .iso .layer.L3:not(.hc-hl) .top { color: #fff !important; }
#qsh .iso .layer.hc-hl { --c1: linear-gradient(135deg, #fbbf24, #f59e0b); --c2: #d98706; --c3: #b46f04; }
#qsh .iso .layer.hc-hl .fl, #qsh .iso .layer.hc-hl .top { color: #3a2600 !important; }

/* 3. Per-slide hero diagrams (2026-10-23, Sahil's feedback). Slide 1 keeps the iso stack;
 *    slides 2-4 swap in .hv-erp / .hv-d365 / .hv-data (config insertHtml "hero-visuals").
 *    qs-home.js sets #stage[data-v] to the slide index. */
#qsh #stage .iso, #qsh #stage > .chip { transition: opacity .45s ease, visibility 0s; }
#qsh #stage[data-v="1"] .iso, #qsh #stage[data-v="2"] .iso, #qsh #stage[data-v="3"] .iso,
#qsh #stage[data-v="1"] > .chip, #qsh #stage[data-v="2"] > .chip, #qsh #stage[data-v="3"] > .chip { opacity: 0 !important; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
#qsh .chip.c3 { left: auto; right: 0; bottom: 6%; }
#qsh .hv { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; pointer-events: none; }
#qsh #stage[data-v="1"] .hv-erp, #qsh #stage[data-v="2"] .hv-d365, #qsh #stage[data-v="3"] .hv-data { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .15s, transform .6s cubic-bezier(.2, .8, .2, 1) .15s, visibility 0s; }
#qsh .hv-in { position: absolute; left: 50%; top: 50%; width: 480px; display: grid; gap: 18px; transform: translate(-50%, -50%); }
#qsh .hv-card { background: #fff !important; border-radius: 18px; padding: 18px 20px; box-shadow: 0 0 0 1px rgba(11, 27, 58, .07), 0 28px 56px -28px rgba(3, 38, 105, .38) !important; }
#qsh .hv-k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .hv-t { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink) !important; margin: 2px 0 0 !important; }
#qsh .hb-sub { display: block; font-size: 12.5px; color: var(--muted) !important; margin-top: 2px; }
#qsh .hv-note { justify-self: end; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle) !important; }
#qsh .hv svg { flex: none; }
/* ERP modernization (v2, 2026-10-26, Sahil's "Death of the Monolith" reference): isometric SVG.
 * A stone "Legacy ERP" block cracks, its front falls away as rubble, and module cubes inside light up and connect. */
#qsh .hv-erp .hv-in.erpx-in-w { width: 470px; display: block; }
#qsh .hv svg.erpx, #qsh .hv svg.dstk { display: block; width: 100%; height: auto; overflow: visible; }
#qsh .erpx text, #qsh .dstk text { font-family: var(--font-sans); }
#qsh .erpx-lb { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; fill: #fff; }
#qsh .erpx-eng { font-size: 30px; font-weight: 800; letter-spacing: 4px; fill: rgba(200, 222, 255, .55); }
#qsh .erpx-eng-hi { fill: rgba(2, 12, 40, .55); }
#qsh .erpx-ck2 { fill: none; stroke: rgba(2, 10, 34, .6); stroke-width: 1.3; stroke-linejoin: round; }
#qsh .erpx-ck polyline { fill: none; stroke: #020b24; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
#qsh .erpx-sh { stroke: #0b1f4d; stroke-width: 2.2; stroke-linejoin: round; paint-order: stroke; transform-box: fill-box; transform-origin: center; }
#qsh .erpx-in, #qsh .erpx-rim, #qsh .erpx-ln, #qsh .erpx-cube, #qsh .erpx-rb, #qsh .erpx-rbs circle { opacity: 0; }
#qsh .erpx-rim { fill: none; stroke: #67e8f9; stroke-width: 2.4; stroke-linejoin: round; }
#qsh .erpx-ln line { stroke: #8fd3ff; stroke-width: 1.6; stroke-dasharray: 5 5; }
#qsh .erpx-ln circle { fill: #c9ecff; }
#qsh .erpx-cube { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px rgba(80, 170, 255, .65)); }
#qsh .erpx-rb { transform-box: fill-box; transform-origin: center; }
#qsh #stage[data-v="1"] .erpx-ck polyline { animation: qsh-erpxCrack .5s ease-out .15s forwards; }
#qsh #stage[data-v="1"] .erpx-ck { animation: qsh-erpxOut .2s ease .75s forwards; }
#qsh #stage[data-v="1"] .erpx-sh { animation: qsh-erpxFall .65s cubic-bezier(.55, 0, .9, .45) calc(.6s + var(--i) * .06s) forwards; }
#qsh #stage[data-v="1"] .erpx-in { animation: qsh-erpxIn .5s ease .7s forwards; }
#qsh #stage[data-v="1"] .erpx-rim { animation: qsh-erpxIn .4s ease .9s forwards, qsh-erpxPulse 2.4s ease-in-out 1.4s infinite; }
#qsh #stage[data-v="1"] .erpx-cube { animation: qsh-erpxPop .5s cubic-bezier(.2, .8, .2, 1) calc(.85s + var(--i) * .08s) forwards; }
#qsh #stage[data-v="1"] .erpx-ln { animation: qsh-erpxIn .4s ease 1.4s forwards; }
#qsh #stage[data-v="1"] .erpx-ln line { animation: qsh-erpxDash 1.2s linear infinite; }
#qsh #stage[data-v="1"] .erpx-rb { animation: qsh-erpxLand .45s cubic-bezier(.3, 1.4, .5, 1) calc(1s + var(--i) * .04s) forwards; }
#qsh #stage[data-v="1"] .erpx-rbs circle { animation: qsh-erpxIn .4s ease 1.2s forwards; }
@keyframes qsh-erpxCrack { to { stroke-dashoffset: 0; } }
@keyframes qsh-erpxOut { to { opacity: 0; } }
@keyframes qsh-erpxIn { to { opacity: 1; } }
@keyframes qsh-erpxFall { 75% { opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.3); opacity: 0; } }
@keyframes qsh-erpxPop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes qsh-erpxLand { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes qsh-erpxPulse { 50% { opacity: .5; } }
@keyframes qsh-erpxDash { to { stroke-dashoffset: -20; } }

/* Dynamics 365: the Dynamics logo in the centre, Microsoft apps orbiting on a soft glow. */
#qsh .hv-d365 .hv-in.oy { width: 440px; height: 440px; display: block; }
#qsh .oy-glow { position: absolute; inset: 50px; border-radius: 50%; background: radial-gradient(circle, rgba(61, 139, 242, .34), rgba(61, 139, 242, .1) 55%, transparent 70%) !important; animation: qsh-oyBreath 4s ease-in-out infinite; }
#qsh .oy-track { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(37, 99, 216, .28); transform: translate(-50%, -50%); }
#qsh .oy-track.oy-t1 { width: 340px; height: 340px; }
#qsh .oy-track.oy-t2 { width: 220px; height: 220px; border-style: solid; border-color: rgba(37, 99, 216, .12); }
#qsh .oy-ring { position: absolute; inset: 0; animation: qsh-oySpin 70s linear infinite; }
#qsh .oy-app { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translate(170px) rotate(calc(-1 * var(--a))); opacity: 0; scale: .5; }
#qsh .oy-tile { position: absolute; left: -40px; top: -34px; width: 80px; display: grid; justify-items: center; gap: 6px; animation: qsh-oySpin 70s linear infinite reverse; }
#qsh .oy-tile img, #qsh .oy-ic { width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 0 0 1px rgba(11, 27, 58, .06), 0 14px 28px -14px rgba(3, 38, 105, .45) !important; }
#qsh .oy-tile img { padding: 10px; object-fit: contain; background: #fff !important; }
#qsh .oy-ic { display: grid; place-items: center; color: #fff !important; background: var(--c) !important; }
#qsh .oy-ic svg { width: 24px; height: 24px; }
#qsh .oy-tile small { font-size: 11px; font-weight: 600; color: var(--ink) !important; white-space: nowrap; }
#qsh .oy-core { position: absolute; left: 50%; top: 50%; width: 156px; height: 156px; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; background: #fff !important; box-shadow: 0 0 0 10px rgba(255, 255, 255, .55), 0 0 0 11px rgba(37, 99, 216, .2), 0 30px 60px -20px rgba(37, 99, 216, .6) !important; scale: .6; opacity: 0; }
#qsh .oy-core img { width: 54px; height: auto; }
#qsh .oy-core b { font-size: 15px; font-weight: 600; color: var(--ink) !important; }
#qsh .oy-core small { max-width: 120px; font-size: 10px; line-height: 1.35; color: var(--muted) !important; }
#qsh .oy-chip { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--success-ink) !important; background: #fff !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, .3), 0 10px 24px -14px rgba(3, 38, 105, .4) !important; opacity: 0; }
#qsh .oy-chip i { width: 7px; height: 7px; border-radius: 7px; background: var(--emerald) !important; }
#qsh #stage[data-v="2"] .oy-core { animation: qsh-oyPop .6s cubic-bezier(.2, .8, .2, 1) .2s forwards; }
#qsh #stage[data-v="2"] .oy-app { animation: qsh-oyPop .5s cubic-bezier(.2, .8, .2, 1) calc(.45s + var(--i) * .08s) forwards; }
#qsh #stage[data-v="2"] .oy-chip { animation: qsh-mnShow .4s ease 1.3s forwards; }
@keyframes qsh-oySpin { to { rotate: 360deg; } }
@keyframes qsh-oyPop { to { opacity: 1; scale: 1; } }
@keyframes qsh-oyBreath { 50% { opacity: .65; scale: 1.06; } }

/* Data modernization (v2, 2026-10-26, Sahil's layered-stack reference): isometric SVG.
 * An exploded stack of glass layers, one per step, on an AI chip; sources drip in at the top; steps on leader lines. */
#qsh .hv-data .hv-in.dstk-in-w { width: 510px; display: block; }
#qsh .dstk-num { font-size: 16px; font-weight: 700; dominant-baseline: middle; }
#qsh .dstk-t { font-size: 14.5px; font-weight: 600; fill: #0b1b3a; dominant-baseline: middle; }
#qsh .dstk-s { font-size: 12px; fill: #5b6475; dominant-baseline: middle; }
#qsh .dstk-sl { font-size: 10px; font-weight: 600; fill: #5b6475; }
#qsh .dstk-flow { stroke: #3b82f6; stroke-width: 1.6; stroke-dasharray: 3 4; }
#qsh .dstk-drip { stroke: #60a5fa; stroke-width: 1.4; stroke-dasharray: 2 5; }
#qsh .dstk-trace { fill: none; stroke: #4aa8ff; stroke-width: 1.6; stroke-linejoin: round; }
#qsh .dstk-pl, #qsh .dstk-lb, #qsh .dstk-src, #qsh .dstk-hl { opacity: 0; }
#qsh .dstk-pl { transform: translateY(-18px); }
#qsh .dstk-lb { transform: translateX(-10px); }
#qsh .dstk-src { transform-box: fill-box; transform-origin: center; }
#qsh .dstk-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
#qsh #stage[data-v="3"] .dstk-pl { animation: qsh-dstkIn .55s cubic-bezier(.2, .8, .2, 1) calc(.1s + var(--i) * .12s) forwards; }
#qsh #stage[data-v="3"] .dstk-lb { animation: qsh-dstkIn .45s ease calc(.35s + var(--i) * .12s) forwards; }
#qsh #stage[data-v="3"] .dstk-src { animation: qsh-erpxPop .45s cubic-bezier(.2, .8, .2, 1) calc(.7s + var(--i) * .06s) forwards; }
#qsh #stage[data-v="3"] .dstk-bar { animation: qsh-dstkGrow .6s cubic-bezier(.2, .8, .2, 1) calc(1s + var(--i) * .08s) forwards; }
#qsh #stage[data-v="3"] .dstk-flow, #qsh #stage[data-v="3"] .dstk-drip { animation: qsh-erpxDash 1s linear infinite; }
#qsh #stage[data-v="3"] .dstk-sweep { animation: qsh-dstkSweep 2.4s ease-in-out 1s infinite; }
#qsh #stage[data-v="3"] .dstk-bad { animation: qsh-dstkBad 2.4s ease-in-out 1s infinite; }
#qsh #stage[data-v="3"] .dstk-core { animation: qsh-erpxPulse 2s ease-in-out infinite; }
#qsh #stage[data-v="3"] .dstk-hl { animation: qsh-dstkStep 3s linear calc(1.4s + var(--i) * .6s) infinite; }
@keyframes qsh-dstkIn { to { opacity: 1; transform: none; } }
@keyframes qsh-dstkGrow { to { transform: none; } }
@keyframes qsh-dstkSweep { from { transform: translateX(0); } to { transform: translateX(114px); } }
@keyframes qsh-dstkBad { 0%, 30% { fill: #f87171; } 55%, 88% { fill: rgba(255, 255, 255, .95); } 100% { fill: #f87171; } }
@keyframes qsh-dstkStep { 0% { opacity: 0; } 6%, 18% { opacity: .85; } 30%, 100% { opacity: 0; } }
@media (max-width: 1100px) { #qsh .hv-in { transform: translate(-50%, -50%) scale(.88); } }
@media (max-width: 640px) { #qsh .hv-in { transform: translate(-50%, -50%) scale(.68); } }

/* 4. Client logo strip after the hero (2026-10-28, Sahil: "The Brands We've Proudly Worked With" was missing;
 *    user: "make it look more good, add some animations"). An endless, slow marquee of white logo tiles that fades
 *    out at both edges and pauses on hover; tiles lift and the logo turns to colour on hover. The section fades up
 *    as it enters (data-r, the design's own reveal). */
#qsh .qsb { position: relative; padding: 46px 0 50px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%) !important; }
#qsh .qsb::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 180px at 50% 0%, rgba(37, 99, 216, .09), transparent 70%) !important; }
#qsh .qsb-in { position: relative; display: grid; justify-items: center; }
#qsh .qsb-head { display: flex; align-items: center; gap: 16px; }
#qsh .qsb-line { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)) !important; }
#qsh .qsb-line.r { transform: scaleX(-1); }
#qsh .qsb-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; margin: 0 !important; }
#qsh .qsb-mq { position: relative; margin-top: 26px !important; padding: 10px 0 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
#qsh .qsb-track { display: flex; width: max-content; animation: qsh-qsbScroll 42s linear infinite; }
#qsh .qsb-mq:hover .qsb-track { animation-play-state: paused; }
#qsh .qsb-set { display: flex; gap: 22px; padding: 0 22px 0 0; margin: 0 !important; list-style: none; }
#qsh .qsb-lg { display: grid; place-items: center; width: 200px; height: 86px; border-radius: 18px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 12px 26px -22px rgba(3, 38, 105, .4) !important; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
#qsh .qsb-lg img { display: block; height: 30px; width: auto; max-width: 146px; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .6; transition: filter .35s ease, opacity .35s ease, transform .35s ease; }
#qsh .qsb-lg.tall img { height: 48px; }
#qsh .qsb-lg:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(37, 99, 216, .35), 0 20px 36px -20px rgba(37, 99, 216, .5) !important; }
#qsh .qsb-lg:hover img { filter: none; opacity: 1; transform: scale(1.05); }
@keyframes qsh-qsbScroll { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  #qsh .qsb { padding: 34px 0 36px; }
  #qsh .qsb-line { width: 28px; }
  #qsh .qsb-k { font-size: 11px; letter-spacing: .1em; }
  #qsh .qsb-set { gap: 14px; padding-right: 14px; }
  #qsh .qsb-lg { width: 148px; height: 68px; border-radius: 14px; }
  #qsh .qsb-lg img { height: 22px; max-width: 108px; }
  #qsh .qsb-lg.tall img { height: 36px; }
}

/* Testimonial initials avatars stay round (they stretched into ovals next to long names), 2026-10-28.
 * Nicholas Hoare's card used a generic "V" letter avatar: replaced with his initials (config replaceHtml tst-avatar-nh). */
#qsh .tst figcaption .tst-av { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; }

/* 5. Testimonials motion (2026-10-28, user). qs-home.js adds .tst-fx to #testimonials (so nothing hides without
 *    the script), then .tst-on when the rating cards come into view, and .tst-done once the entrance has played.
 *    Rating cards and review cards slide up one after another; scores count up (script); stars fill in gold;
 *    review cards carry a large soft quote mark and lift on hover; the dark cards' gradient drifts slowly;
 *    the carousel advances on its own with a progress line beside the arrows (script). */
#qsh .tst-fx .rp, #qsh .tst-fx .tst { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; transition-delay: calc(var(--i, 0) * 90ms); }
#qsh .tst-fx.tst-on .rp, #qsh .tst-fx.tst-on .tst { opacity: 1; transform: none; }
#qsh .tst-fx.tst-done .rp, #qsh .tst-fx.tst-done .tst { transition-delay: 0s; }
#qsh .tst-fx.tst-on .rp:hover { transform: translateY(-4px); }
#qsh .tst-fx .rp-st { background-color: transparent !important; background-image: linear-gradient(90deg, #f5a524 50%, #d9dde4 50%) !important; background-repeat: no-repeat !important; background-size: 200% 100% !important; background-position: 100% 0 !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent !important; transition: background-position 1.2s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i, 0) * 90ms); }
#qsh .tst-fx.tst-on .rp-st { background-position: 0 0 !important; }
#qsh .tst { position: relative; overflow: hidden; }
#qsh .tst > * { position: relative; }
#qsh .tst::before { content: '\201C'; position: absolute; top: -18px; right: 18px; font: 600 150px/1 Georgia, 'Times New Roman', serif; color: rgba(37, 99, 216, .08) !important; pointer-events: none; transition: transform .5s cubic-bezier(.2, .8, .2, 1), color .5s ease; }
#qsh .tst:nth-child(1)::before, #qsh .tst:nth-child(5)::before { color: rgba(255, 255, 255, .09) !important; }
#qsh .tst-fx.tst-on .tst:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(37, 99, 216, .3), 0 26px 44px -26px rgba(3, 38, 105, .55) !important; }
#qsh .tst:hover::before { transform: translateY(6px) rotate(-6deg); color: rgba(37, 99, 216, .14) !important; }
#qsh .tst:nth-child(1):hover::before, #qsh .tst:nth-child(5):hover::before { color: rgba(255, 255, 255, .16) !important; }
#qsh .tst:nth-child(1), #qsh .tst:nth-child(5) { background-size: 180% 180% !important; animation: qsh-tstDrift 9s ease-in-out infinite alternate; }
@keyframes qsh-tstDrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
#qsh .tst-grid { padding-top: 10px !important; }
#qsh .tst-prog { flex: 0 1 220px; height: 3px; margin-left: 8px !important; border-radius: 3px; overflow: hidden; background: var(--line) !important; }
#qsh .tst-prog i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #0078d4, #3d8bf2) !important; }
@media (max-width: 640px) { #qsh .tst-prog { flex-basis: 90px; } }
/* Reviews from our own site (2026-10-28): "Client review" is a label, not a link. */
#qsh .tst-src.tst-own { color: var(--muted) !important; cursor: default; }
#qsh .tst:nth-child(1) .tst-src.tst-own, #qsh .tst:nth-child(5) .tst-src.tst-own { color: rgba(255, 255, 255, .6) !important; }

/* §6 Performance (2026-10-30, Lighthouse on the live site: 4,500 elements, 3.2 s of style and layout on a phone).
   Sections below the first screen are skipped by the browser until they come near the viewport.
   contain-intrinsic-size "auto" remembers each section's real height once seen, so anchors (#assess) and the
   scrollbar stay right. Applies to the home (sections 4-14) and the inner pages (from their 3rd section). */
#qsh .qsh-main > section:nth-of-type(n+4) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
#qsh .qsh-main.pg-main > section:nth-of-type(3) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* §7 Accessibility (2026-10-30, Lighthouse).
   - Hero tab numbers: #6b7280 on white is 4.8:1 (was 3.0:1).
   - Deadline cards: the h4 became h3.dl-h (heading order); same look as before.
   - Statement words: full strength until the reveal is armed just before the paragraph scrolls into view (qs-home.js),
     so the text is readable on load and the scroll effect is unchanged. */
#qsh .hc-tab b { color: #6b7280 !important; }
#qsh .hc-tab.on b { color: var(--accent) !important; }
#qsh .dl-c h3.dl-h { margin: 0 !important; font-size: 17px; font-weight: 500; line-height: 1.3; color: #fff !important; letter-spacing: -.02em; }
#qsh .statement:not(.st-armed) .w { opacity: 1; }
#qsh .sd-tl { display: contents; }
/* Lighthouse pass 2 (2026-10-30): two small grey labels darkened (#4b5563, 6.5:1+); carousel dots spaced 26px centre to
   centre so each has a 24px tap area (the dots themselves stay 8px). */
#qsh .chip .mono, #qsh .cv-det .k { color: #4b5563 !important; }
#qsh .ctl-pager { gap: 18px; }

/* Inner-page layouts for the new site (2026-10-21). Loaded after the home page's scoped CSS and
 * built from its tokens. margin-top/bottom, color and background-color need !important: the home
 * build reverts those on every #qsh element to counter the theme (scripts/home-redesign/build.ts). */

#qsh .pg-main { background: var(--paper) !important; }
#qsh .pg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 28px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .pg-crumb a { color: var(--cobalt) !important; text-decoration: none; }
#qsh .pg-crumb a:hover { text-decoration: underline; }
#qsh .pg-crumb i { font-style: normal; color: var(--subtle) !important; }

/* hero */
#qsh .pg-hero { padding-top: 48px; }
#qsh .pg-hero-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
#qsh .pg-hero-g.solo { grid-template-columns: minmax(0, 1fr); max-width: 920px; }
#qsh .pg-hero-t { display: grid; gap: 22px; justify-items: start; }
#qsh .pg-h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; }
#qsh .pg-lead { max-width: 640px; font-size: 18.5px; }
#qsh .pg-acts { display: flex; flex-wrap: wrap; gap: 10px; }
#qsh .pg-note { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; margin: 0 !important; }
#qsh .pg-hero-a .dq { position: static; box-shadow: 0 40px 80px -40px rgba(3,38,105,.55) !important; }
#qsh .pg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#qsh .pg-stats > div { background: #fff !important; border-radius: 22px; padding: 26px 22px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -26px rgba(11,27,58,.22) !important; display: grid; gap: 6px; }
#qsh .pg-stats b { font-family: var(--font-mono); font-size: clamp(30px, 3vw, 40px); font-weight: 500; letter-spacing: -.03em; color: var(--ink) !important; }
#qsh .pg-stats small { font-size: 14px; line-height: 1.45; color: var(--body) !important; }

/* card grid */
#qsh .pg-cards { display: grid; gap: 16px; }
#qsh .pg-cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#qsh .pg-cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#qsh .pg-cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#qsh .pg-card h3 { margin: 0 !important; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; color: var(--ink) !important; }
#qsh .pg-card p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--body) !important; }
#qsh .pg-card .more { margin-top: auto !important; }
#qsh .pg-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-100) !important; color: var(--accent) !important; }
#qsh .pg-ic svg { width: 22px; height: 22px; }

/* groups without a queue */
#qsh .pg-groups .pg-dg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
#qsh .pg-links { margin-top: 22px !important; }

/* cases */
#qsh .pg-rw.one { grid-template-columns: minmax(0, 1fr); max-width: 880px; }

/* prose */
#qsh .pg-prose { max-width: 760px; display: grid; gap: 18px; }
#qsh .pg-prose p { margin: 0 !important; font-size: 17.5px; line-height: 1.7; color: var(--body) !important; }

/* faq */
#qsh .pg-faq { max-width: 960px; }

/* closing call to action */
#qsh .pg-cta { margin-top: 120px !important; margin-bottom: 0 !important; }
#qsh .pg-cta .ai-hero { padding-bottom: 20px; }
#qsh .pg-cta-lead { max-width: 640px; margin: 0 !important; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.72) !important; }
#qsh .pg-end { height: 120px; }
#qsh .pg-cta + .pg-end { height: 0; }

/* ---------- signature components ---------- */

/* hero visual + floating glass chips (the home's .chip, positioned for inner pages) */
#qsh .pg-hero-a { position: relative; padding: 28px 0; }
#qsh .pg-chip { position: absolute; }
#qsh .pg-chip.pc1 { top: -6px; right: -18px; }
#qsh .pg-chip.pc2 { bottom: -22px; left: -40px; }

/* FAQ with a booking card */
#qsh .pg-fa { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 48px; align-items: start; }
#qsh .pg-fa-l { display: grid; gap: 18px; }
#qsh .pg-fa-l .faq { margin-top: 12px !important; }
#qsh .pg-fa-r { position: sticky; top: 120px; border-radius: 28px; padding: 32px; display: grid; gap: 16px; background: linear-gradient(165deg, #1e4389, #021a4a 75%) !important; color: #fff !important; box-shadow: 0 50px 90px -45px rgba(3,38,105,.6) !important; }
#qsh .pg-fa-r .k { color: #8cc4ff !important; }
#qsh .pg-fa-r h3 { margin: 0 !important; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; color: #fff !important; }
#qsh .pg-fa-r h3 .gt { background: linear-gradient(120deg,#8cc4ff,#b6cdf6 55%,#ffffff) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
#qsh .pg-fa-r p { margin: 0 !important; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.7) !important; }
#qsh .pg-fa-r ul { list-style: none; padding: 0; margin: 0 !important; display: grid; gap: 10px; }
#qsh .pg-fa-r li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; color: #fff !important; }
#qsh .pg-fa-r li svg { width: 18px; height: 18px; color: #6ee7b7; margin-top: 2px; }
#qsh .pg-fa-r .btn { justify-self: start; margin-top: 6px !important; }

/* logo grid (home marquee cards, static) */
#qsh .pg-logos { display: grid; gap: 28px; }
#qsh .pg-lg-g { display: grid; gap: 12px; }
#qsh .pg-lg-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
#qsh .pg-lg-row .lg { padding: 22px 14px 16px; }
#qsh .pg-lg-row .lg-img { height: 46px; }
#qsh .pg-lg-row .lg-img img { max-height: 46px; }
#qsh .pg-chip.pc3 { top: 46%; right: -42px; }
#qsh .pg-hero-a::before { content: ""; position: absolute; inset: 8% -6% 0 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(61,139,242,.28), transparent) !important; filter: blur(30px); z-index: 0; }
#qsh .pg-hero-a > * { position: relative; z-index: 1; }
#qsh .pg-hero-a > .pg-chip { position: absolute; z-index: 3; }

/* process map */
#qsh .pmap { border-radius: 28px; padding: 22px 22px 18px; background: linear-gradient(165deg, #1e4389, #021a4a 70%) !important; color: #fff !important; box-shadow: 0 50px 90px -40px rgba(3,38,105,.6), inset 0 0 0 1px rgba(255,255,255,.08) !important; display: grid; gap: 14px; }
#qsh .pm-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8cc4ff !important; }
#qsh .pm-tag { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.7) !important; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
#qsh .pm-tag.light { background: var(--accent-100) !important; color: var(--cobalt) !important; }
#qsh .pm-flow { position: relative; display: grid; gap: 8px; }
#qsh .pm-line { position: absolute; left: 23px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(180deg, rgba(140,196,255,.5), rgba(140,196,255,.12)) !important; overflow: visible; }
#qsh .pm-line i { position: absolute; left: -4px; width: 10px; height: 10px; border-radius: 10px; background: #8cc4ff !important; box-shadow: 0 0 0 6px rgba(140,196,255,.18), 0 0 18px #8cc4ff !important; animation: pg-flow 5.5s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes pg-flow { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
#qsh .pm-n { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 14px 11px 14px; border-radius: 16px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important; }
#qsh .pm-dot { width: 18px; height: 18px; border-radius: 18px; background: #021a4a !important; box-shadow: inset 0 0 0 2px #8cc4ff !important; }
#qsh .pm-txt { display: grid; gap: 2px; min-width: 0; }
#qsh .pm-txt b { font-size: 14.5px; font-weight: 500; color: #fff !important; }
#qsh .pm-txt small { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.55) !important; }
#qsh .pm-t { font-family: var(--font-mono); font-size: 13px; color: #cfe5ff !important; }
#qsh .pm-flag { grid-column: 2 / -1; justify-self: start; margin-top: 2px !important; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
#qsh .pm-n.warn { background: rgba(245,158,11,.12) !important; box-shadow: inset 0 0 0 1px rgba(245,158,11,.45) !important; }
#qsh .pm-n.warn .pm-dot { box-shadow: inset 0 0 0 2px #f59e0b, 0 0 14px rgba(245,158,11,.6) !important; }
#qsh .pm-n.warn .pm-flag { background: rgba(245,158,11,.2) !important; color: #fcd34d !important; }
#qsh .pm-n.hot { background: rgba(239,68,68,.13) !important; box-shadow: inset 0 0 0 1px rgba(248,113,113,.5) !important; }
#qsh .pm-n.hot .pm-dot { box-shadow: inset 0 0 0 2px #f87171, 0 0 14px rgba(248,113,113,.7) !important; animation: pg-ping 2s infinite; }
#qsh .pm-n.hot .pm-flag { background: rgba(239,68,68,.22) !important; color: #fca5a5 !important; }
@keyframes pg-ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
#qsh .pm-f { display: flex; align-items: center; gap: 10px; padding-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.75) !important; }
#qsh .pm-f svg { width: 16px; height: 16px; color: #6ee7b7; flex: none; }
#qsh .pm-f .gt { background: linear-gradient(120deg,#8cc4ff,#b6cdf6 55%,#ffffff) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-weight: 600; }

/* bento with a log stream */
#qsh .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; }
#qsh .bn-feat { grid-column: span 2; grid-row: span 2; border-radius: 28px; padding: 32px; background: linear-gradient(160deg, #1e4389, #021a4a 75%) !important; color: #fff !important; display: grid; gap: 14px; align-content: start; overflow: hidden; position: relative; }
#qsh .bn-feat .k { color: #8cc4ff !important; }
#qsh .bn-feat h3 { margin: 0 !important; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; color: #fff !important; max-width: 560px; }
#qsh .bn-feat > p { margin: 0 !important; max-width: 560px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.7) !important; }
#qsh .bn-feat .gt { background: linear-gradient(120deg,#8cc4ff,#b6cdf6 55%,#ffffff) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
#qsh .lg-win { margin-top: 10px !important; height: 236px; overflow: hidden; border-radius: 18px; background: rgba(2,11,36,.55) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
#qsh .lg-roll { display: grid; gap: 6px; padding: 14px 18px; animation: pg-roll 22s linear infinite; }
@keyframes pg-roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
#qsh .lg-ln { display: grid; grid-template-columns: 92px 104px minmax(0, 1fr) 84px; gap: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.9; color: rgba(255,255,255,.62) !important; white-space: nowrap; }
#qsh .lg-r { color: #8cc4ff !important; }
#qsh .lg-w { color: #fff !important; overflow: hidden; text-overflow: ellipsis; }
#qsh .lg-s { text-align: right; color: rgba(255,255,255,.45) !important; }
#qsh .lg-gap { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fcd34d !important; padding: 2px 0; }
#qsh .lg-gap::before, #qsh .lg-gap::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(252,211,77,.6) 0 4px, transparent 4px 8px) !important; }
#qsh .bn-c { justify-content: flex-start; }

/* sample report */
#qsh .rp-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
#qsh .rp-pts { display: grid; gap: 26px; justify-items: start; }
#qsh .rp-list { list-style: none; padding: 0; margin: 0 !important; display: grid; gap: 14px; }
#qsh .rp-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16.5px; line-height: 1.55; color: var(--text) !important; }
#qsh .rp-list svg { width: 28px; height: 28px; padding: 6px; border-radius: 10px; background: var(--success-tint) !important; color: var(--success-ink); }
#qsh .rp-doc { background: #fff !important; border-radius: 26px; padding: 26px; box-shadow: 0 0 0 1px var(--line), 0 50px 90px -50px rgba(3,38,105,.45) !important; display: grid; gap: 4px; transform: rotate(-1deg); }
#qsh .rp-h { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 14px; }
#qsh .rp-h b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink) !important; }
#qsh .rp-h small { font-size: 13px; color: var(--muted) !important; }
#qsh .rp-th, #qsh .rp-r { display: grid; grid-template-columns: 26px minmax(0, 1.6fr) minmax(0, 1.2fr) 74px 96px; gap: 12px; align-items: center; }
#qsh .rp-th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle) !important; padding: 8px 0; border-bottom: 1px solid var(--line); }
#qsh .rp-r { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text) !important; }
#qsh .rp-n { font-family: var(--font-mono); font-size: 12px; color: var(--muted) !important; }
#qsh .rp-p { font-weight: 500; color: var(--ink) !important; }
#qsh .rp-b { position: relative; height: 22px; display: flex; align-items: center; }
#qsh .rp-b i { position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--w); border-radius: 8px; background: linear-gradient(90deg, #2563d8, #8cc4ff) !important; transform-origin: left; }
#qsh .rp-b em { position: relative; font-style: normal; font-family: var(--font-mono); font-size: 12px; color: #fff !important; padding-left: 8px; }
#qsh .rp-v { font-family: var(--font-mono); font-size: 13px; color: var(--ink) !important; }
#qsh .rp-x { justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
#qsh .rp-x.ag { background: var(--accent-100) !important; color: var(--cobalt) !important; }
#qsh .rp-x.au { background: var(--success-tint) !important; color: var(--success-ink) !important; }
#qsh .rp-x.rp { background: var(--warning-tint) !important; color: var(--warning-ink) !important; }
#qsh .rp-x.fd { background: #f1f2f5 !important; color: var(--body) !important; }
#qsh .rp-f { display: flex; align-items: center; gap: 10px; padding-top: 14px; font-size: 13.5px; color: var(--muted) !important; }
#qsh .rp-f svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
#qsh.qsh-js .rp-doc[data-r] .rp-b i { transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
#qsh.qsh-js .rp-doc[data-r].in .rp-b i { transform: scaleX(1); }

/* ---------- service-page visuals ---------- */
#qsh .vx { border-radius: 28px; padding: 22px; display: grid; gap: 16px; background: linear-gradient(165deg, #1e4389, #021a4a 72%) !important; color: #fff !important; box-shadow: 0 50px 90px -40px rgba(3,38,105,.6), inset 0 0 0 1px rgba(255,255,255,.08) !important; }
#qsh .vx-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8cc4ff !important; }
#qsh .vx-f { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6ee7b7 !important; }
#qsh .vx-f svg { width: 16px; height: 16px; flex: none; }
#qsh .vx-f span { margin-left: auto !important; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4) !important; }

/* agent flow */
#qsh .af-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 6px 0 2px; }
#qsh .af-rail { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 27px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12) !important; overflow: hidden; }
#qsh .af-rail i { position: absolute; inset: 0; background: linear-gradient(90deg, #3d8bf2, #6ee7b7) !important; transform-origin: left; animation: pg-rail 6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes pg-rail { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
#qsh .af-s { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
#qsh .af-c { width: 44px; height: 44px; border-radius: 44px; display: grid; place-items: center; background: #0d2a63 !important; box-shadow: inset 0 0 0 2px rgba(140,196,255,.35) !important; color: #8cc4ff; animation: pg-step 6s infinite; animation-delay: calc(var(--i) * 1.05s); }
#qsh .af-c svg { width: 20px; height: 20px; }
@keyframes pg-step { 0%, 4% { background: #0d2a63; box-shadow: inset 0 0 0 2px rgba(140,196,255,.35); color: #8cc4ff; } 10%, 80% { background: #2563d8; box-shadow: 0 0 0 6px rgba(61,139,242,.22), 0 0 22px rgba(61,139,242,.7); color: #fff; } 100% { background: #0d2a63; } }
#qsh .af-s.last .af-c { animation-name: pg-step-last; }
@keyframes pg-step-last { 0%, 4% { background: #0d2a63; color: #8cc4ff; } 10%, 80% { background: #f59e0b; box-shadow: 0 0 0 6px rgba(245,158,11,.22), 0 0 22px rgba(245,158,11,.7); color: #1f1300; } 100% { background: #0d2a63; } }
#qsh .af-s small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7) !important; }
#qsh .af-card { border-radius: 20px; padding: 16px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; display: grid; gap: 12px; }
#qsh .af-t { display: flex; align-items: center; gap: 10px; font-size: 15px; }
#qsh .af-t svg { width: 18px; height: 18px; color: #8cc4ff; }
#qsh .af-t b { font-weight: 500; color: #fff !important; }
#qsh .af-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0 !important; }
#qsh .af-card dl div { display: grid; gap: 2px; }
#qsh .af-card dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45) !important; }
#qsh .af-card dd { margin: 0 !important; font-family: var(--font-mono); font-size: 13px; color: #fff !important; }
#qsh .af-ap { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
#qsh .af-who { width: 36px; height: 36px; border-radius: 36px; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: #f59e0b !important; color: #1f1300 !important; }
#qsh .af-ap b { display: block; font-size: 13.5px; font-weight: 500; color: #fcd34d !important; }
#qsh .af-ap small { font-size: 12px; color: rgba(255,255,255,.55) !important; }
#qsh .af-btn { padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.1) !important; color: #fff !important; }
#qsh .af-btn.ok { background: #10b981 !important; color: #022c1e !important; }

/* systems map */
#qsh .sy-stage { position: relative; aspect-ratio: 1 / .86; margin: 6px 4px 0 !important; }
#qsh .sy-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#qsh .sy-svg path { stroke: rgba(140,196,255,.35); stroke-width: .35; stroke-dasharray: 1.2 1.2; fill: none; }
#qsh .sy-ring { fill: none; stroke: rgba(255,255,255,.07); stroke-width: .3; }
#qsh .sy-p { fill: #6ee7b7; filter: drop-shadow(0 0 1.4px #6ee7b7); }
#qsh .sy-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; border-radius: 26px; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; background: linear-gradient(160deg, #2563d8, #1e4389) !important; box-shadow: 0 0 0 8px rgba(61,139,242,.14), 0 0 50px rgba(61,139,242,.55) !important; }
#qsh .sy-center svg { width: 26px; height: 26px; color: #fff; }
#qsh .sy-center b { font-size: 17px; font-weight: 600; color: #fff !important; }
#qsh .sy-center small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #cfe5ff !important; }
#qsh .sy-n { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; min-width: 96px; padding: 10px 10px 8px; border-radius: 16px; text-align: center; background: rgba(13,42,99,.92) !important; box-shadow: inset 0 0 0 1px rgba(140,196,255,.28), 0 10px 24px -10px rgba(0,0,0,.5) !important; backdrop-filter: blur(6px); }
#qsh .sy-n svg { width: 18px; height: 18px; color: #8cc4ff; }
#qsh .sy-n b { font-size: 13px; font-weight: 500; color: #fff !important; }
#qsh .sy-n small { font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,.55) !important; }
#qsh .sy-log { height: 84px; overflow: hidden; border-radius: 14px; background: rgba(2,11,36,.55) !important; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
#qsh .sy-roll { display: grid; gap: 4px; padding: 10px 14px; animation: pg-roll 16s linear infinite; }
#qsh .sy-roll span { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,.7) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* dashboard (light panel) */
#qsh .vx.db { background: #f1f5f9 !important; color: var(--ink) !important; box-shadow: 0 0 0 1px var(--line), 0 50px 90px -45px rgba(3,38,105,.5) !important; transform: rotate(-1.2deg); }
#qsh .db-top { display: flex; align-items: center; gap: 7px; }
#qsh .db-top .tl { width: 10px; height: 10px; border-radius: 10px; background: #f87171 !important; }
#qsh .db-top .tl:nth-child(2) { background: #fbbf24 !important; } #qsh .db-top .tl:nth-child(3) { background: #34d399 !important; }
#qsh .db-top b { margin-left: 10px !important; font-size: 17px; font-weight: 600; color: var(--ink) !important; }
#qsh .db-top small { margin-left: auto !important; font-size: 12px; color: var(--muted) !important; }
#qsh .db-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#qsh .db-t { position: relative; background: #fff !important; border-radius: 16px; padding: 14px; box-shadow: 0 0 0 1px var(--line) !important; display: grid; gap: 6px; align-content: start; min-height: 108px; }
#qsh .db-t > small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .db-t > b { font-family: var(--font-mono); font-size: 28px; font-weight: 500; letter-spacing: -.03em; color: var(--ink) !important; }
#qsh .db-t > b em { font-style: normal; font-size: 13px; color: var(--muted) !important; }
#qsh .db-t > b.g { color: #059669 !important; } #qsh .db-t > b.r { color: #e11d48 !important; }
#qsh .db-t svg { position: absolute; right: 14px; bottom: 14px; width: 46%; height: 36px; }
#qsh .db-t polyline { fill: none; stroke: #2563d8; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#qsh .db-ring { position: absolute; right: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 54px; background: conic-gradient(#10b981 calc(var(--p) * 1%), #e2e8f0 0) !important; -webkit-mask: radial-gradient(closest-side, transparent 68%, #000 70%); mask: radial-gradient(closest-side, transparent 68%, #000 70%); }
#qsh .db-s { font-size: 12px; color: var(--muted) !important; }
#qsh .db-bars { display: grid; gap: 5px; }
#qsh .db-bars div { display: grid; grid-template-columns: 56px minmax(0, 1fr) 30px; gap: 6px; align-items: center; font-size: 11.5px; color: var(--body) !important; }
#qsh .db-bars i { height: 9px; width: var(--w); border-radius: 9px; background: linear-gradient(90deg, #1d4ed8, #2dd4bf) !important; }
#qsh .db-bars em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--muted) !important; }
#qsh .db-l { list-style: none; padding: 0; margin: 0 !important; display: grid; gap: 4px; }
#qsh .db-l li { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text) !important; }
#qsh .db-l b { font-family: var(--font-mono); color: var(--ink) !important; }
#qsh .db-f { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--warning-ink) !important; }

/* service board */
#qsh .sb-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#qsh .sb-k div { border-radius: 16px; padding: 14px; background: rgba(255,255,255,.07) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; display: grid; gap: 2px; }
#qsh .sb-k b { font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: #fff !important; }
#qsh .sb-k small { font-size: 12px; color: rgba(255,255,255,.6) !important; }
#qsh .sb-rows { display: grid; gap: 8px; }
#qsh .sb-r { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
#qsh .sb-d { width: 10px; height: 10px; border-radius: 10px; background: #34d399 !important; box-shadow: 0 0 0 4px rgba(52,211,153,.18) !important; animation: pulse 2.2s infinite; }
#qsh .sb-r.wait .sb-d { background: #f59e0b !important; box-shadow: 0 0 0 4px rgba(245,158,11,.2) !important; }
#qsh .sb-r.info .sb-d { background: #8cc4ff !important; box-shadow: 0 0 0 4px rgba(140,196,255,.2) !important; animation: none; }
#qsh .sb-r b { font-size: 14px; font-weight: 500; color: #fff !important; }
#qsh .sb-r small { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,.6) !important; }
#qsh .sb-r.wait small { color: #fcd34d !important; }

/* migration board */
#qsh .mg-ft { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#qsh .mg-ft svg { width: 18px; height: 18px; color: #8cc4ff; }
#qsh .mg-from, #qsh .mg-to { padding: 8px 14px; border-radius: 12px; font-family: var(--font-mono); font-size: 12.5px; }
#qsh .mg-from { background: rgba(245,158,11,.14) !important; color: #fcd34d !important; box-shadow: inset 0 0 0 1px rgba(245,158,11,.4) !important; }
#qsh .mg-to { background: rgba(52,211,153,.14) !important; color: #6ee7b7 !important; box-shadow: inset 0 0 0 1px rgba(52,211,153,.4) !important; }
#qsh .mg-bar { display: flex; gap: 4px; height: 10px; }
#qsh .mg-bar i { flex: 1; border-radius: 6px; background: rgba(255,255,255,.12) !important; }
#qsh .mg-bar i.mv { background: #34d399 !important; } #qsh .mg-bar i.ts { background: linear-gradient(90deg, #34d399, #3d8bf2) !important; animation: pulse 2s infinite; } #qsh .mg-bar i.nx { background: #3d8bf2 !important; opacity: .5; }
#qsh .mg-rows { display: grid; gap: 7px; }
#qsh .mg-r { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.05) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
#qsh .mg-n { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4) !important; }
#qsh .mg-r b { font-size: 14px; font-weight: 500; color: #fff !important; }
#qsh .mg-s { padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
#qsh .mg-s.mv { background: rgba(52,211,153,.16) !important; color: #6ee7b7 !important; }
#qsh .mg-s.ts { background: rgba(61,139,242,.2) !important; color: #8cc4ff !important; }
#qsh .mg-s.nx { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.7) !important; }
#qsh .mg-s.old { background: rgba(245,158,11,.14) !important; color: #fcd34d !important; }

/* upgrade path */
#qsh .ug-cd { white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; }
#qsh .ug-cd b { color: #fff !important; font-weight: 600; }
#qsh .ug-path { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; gap: 6px; padding: 8px 0; }
#qsh .ug-v { border-radius: 20px; padding: 20px 16px; display: grid; justify-items: center; gap: 6px; text-align: center; }
#qsh .ug-v svg { width: 28px; height: 28px; }
#qsh .ug-v b { font-size: 17px; font-weight: 600; }
#qsh .ug-v small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
#qsh .ug-v.old { background: rgba(255,255,255,.05) !important; box-shadow: inset 0 0 0 1px rgba(245,158,11,.4) !important; color: #fcd34d; }
#qsh .ug-v.old b { color: #fff !important; } #qsh .ug-v.old small { color: #fcd34d !important; }
#qsh .ug-v.new { background: linear-gradient(160deg, #2563d8, #1e4389) !important; box-shadow: 0 0 0 6px rgba(61,139,242,.15), 0 0 40px rgba(61,139,242,.5) !important; color: #fff; }
#qsh .ug-v.new b { color: #fff !important; } #qsh .ug-v.new small { color: #cfe5ff !important; }
#qsh .ug-arrow { position: relative; height: 3px; border-radius: 3px; background: rgba(255,255,255,.15) !important; overflow: hidden; }
#qsh .ug-arrow i { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, #6ee7b7, transparent) !important; animation: pg-sweep 1.8s linear infinite; }
@keyframes pg-sweep { from { left: -40%; } to { left: 100%; } }
#qsh .ug-c { list-style: none; padding: 0; margin: 0 !important; display: grid; gap: 8px; }
#qsh .ug-c li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.05) !important; font-size: 14px; color: #fff !important; }
#qsh .ug-c svg { width: 18px; height: 18px; color: #6ee7b7; }

/* options (four ways to modernize) */
#qsh .op-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#qsh .op { gap: 14px; }
#qsh .op-n { font-family: var(--font-mono); font-size: 38px; font-weight: 500; letter-spacing: -.04em; color: var(--accent-300) !important; line-height: 1; }
#qsh .op-tag { position: absolute; top: 24px; right: 22px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--success-tint) !important; color: var(--success-ink) !important; }
#qsh .op h3 { margin: 0 !important; font-size: 20px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: var(--ink) !important; }
#qsh .op-l { display: grid; gap: 8px; }
#qsh .op-l > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
#qsh .op-l.good > span { color: var(--success-ink) !important; } #qsh .op-l.watch > span { color: var(--warning-ink) !important; }
#qsh .op-l p { margin: 0 !important; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.5; color: var(--body) !important; }
#qsh .op-l svg { width: 16px; height: 16px; margin-top: 2px; }
#qsh .op-l.good svg { color: var(--success-ink); } #qsh .op-l.watch svg { color: var(--warning-ink); }

/* platform logo in the middle of the systems map */
#qsh .sy-center.logo { background: #fff !important; box-shadow: 0 0 0 8px rgba(61,139,242,.18), 0 0 50px rgba(61,139,242,.55) !important; gap: 8px; padding: 10px; }
#qsh .sy-center.logo img { width: 78%; max-height: 54px; object-fit: contain; margin: 0 auto !important; }
#qsh .sy-center.logo small { color: var(--cobalt) !important; }

#qsh .ug-lg { width: 100%; height: 52px; border-radius: 12px; display: grid; place-items: center; background: #fff !important; padding: 8px; }
#qsh .ug-lg img { max-width: 80%; max-height: 36px; object-fit: contain; }

/* floating logo wall */
#qsh .lw { border-radius: 28px; padding: 22px; display: grid; gap: 14px; background: linear-gradient(165deg, #e9f1ff, #f6f9ff) !important; box-shadow: 0 0 0 1px var(--line), 0 50px 90px -50px rgba(3,38,105,.45) !important; }
#qsh .lw-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt) !important; }
#qsh .lw-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#qsh .lw-t { height: 96px; border-radius: 18px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 10px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -22px rgba(3,38,105,.4) !important; animation: pg-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
#qsh .lw-t img { max-width: 82%; max-height: 40px; object-fit: contain; }
#qsh .lw-t small { font-size: 11.5px; font-weight: 500; color: var(--ink) !important; text-align: center; line-height: 1.2; }
@keyframes pg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#qsh .lw-f { font-size: 13px; color: var(--muted) !important; }
@media (prefers-reduced-motion: reduce) { #qsh .lw-t { animation: none !important; } }

/* industry hero (home Industries styling, as a page hero) */
#qsh .pg-ind { margin-top: 0 !important; padding-top: 50px; }
#qsh .pg-ind .ind-stage { min-height: 700px; }
#qsh .pg-ind .ind-photo { width: min(700px, 72%); }
#qsh .pg-ind-cta { width: 380px; display: grid; gap: 14px; }
#qsh .pg-ind-cta .k { color: #8cc4ff !important; }
#qsh .pg-ind-cta .pg-ind-h { margin: 0 !important; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; font-weight: 500; letter-spacing: -.03em; color: #fff !important; }
#qsh .pg-ind-cta .pg-ind-h .gt { background: linear-gradient(120deg,#8cc4ff,#b6cdf6 55%,#ffffff) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
#qsh .pg-ind-cta p { margin: 0 !important; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72) !important; }
#qsh .pg-ind-acts { display: grid; gap: 8px; }
#qsh .pg-ind-acts .btn { justify-content: center; border-radius: 4px; }
#qsh .pg-ind-acts .btn-ghost { background: rgba(255,255,255,.08) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2) !important; }
#qsh .pg-ind + .sec { padding-top: 100px; }

/* industry photo cards (hub) */
#qsh .pg-indc { margin: 120px 0 0 !important; }
#qsh .pg-indc-h { display: grid; gap: 14px; max-width: 760px; margin-bottom: 40px !important; }
#qsh .pg-indc-h h2 { margin: 0 !important; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.035em; font-weight: 500; color: #fff !important; }
#qsh .pg-indc-h h2 .gt { background: linear-gradient(120deg,#8cc4ff,#b6cdf6 55%,#ffffff) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
#qsh .pg-indc-h p { margin: 0 !important; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.7) !important; }
#qsh .pg-indc-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#qsh .pg-indc-t { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.65) !important; }

#qsh .pg-src { padding-top: 56px; display: grid; gap: 10px; }
#qsh .pg-src b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .pg-src ol { margin: 0 !important; padding-left: 18px; columns: 2; column-gap: 40px; font-size: 12.5px; line-height: 1.7; color: var(--muted) !important; }
#qsh .pg-src a { color: var(--cobalt) !important; text-decoration: none; }
#qsh .pg-src a:hover { text-decoration: underline; }
@media (max-width: 640px) { #qsh .pg-src ol { columns: 1; } }
#qsh .pg-credits { padding-top: 40px; font-size: 11.5px; line-height: 1.5; color: var(--subtle) !important; }

@media (max-width: 1080px) {
  #qsh .pg-ind .ind-photo { width: 100%; }
  #qsh .pg-indc-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #qsh .pg-ind-cta { width: auto; }
  #qsh .pg-indc-g { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- handover components (22 Oct) ---------- */

/* hero with the live approval-queue demo underneath */
#qsh .pg-hf { padding-top: 56px; }
#qsh .pg-hf-t { display: grid; gap: 22px; justify-items: center; text-align: center; max-width: 900px; margin: 0 auto 56px !important; }
#qsh .pg-hf-t .pg-lead { max-width: 720px; }
#qsh .pg-hf-f .frame { margin-top: 0 !important; box-shadow: 0 60px 120px -50px rgba(3,38,105,.6) !important; }

/* dictionary-style definition */
#qsh .pg-def-s { padding-top: 90px; }
#qsh .pg-def { position: relative; max-width: 980px; margin: 0 auto !important; padding: 40px 44px; border-radius: 28px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(3,38,105,.35) !important; display: grid; gap: 18px; }
#qsh .pg-def::before { content: "def."; position: absolute; top: 18px; right: 28px; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 64px; line-height: 1; color: var(--accent-100) !important; }
#qsh .pg-def-w { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#qsh .pg-def-w b { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(36px, 4vw, 52px); letter-spacing: -.02em; color: var(--ink) !important; }
#qsh .pg-def-w i { font-family: var(--font-mono); font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; }
#qsh .pg-def-t { margin: 0 !important; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--text) !important; }
#qsh .pg-def-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted) !important; }
#qsh .pg-def-a span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-right: 4px !important; }
#qsh .pg-def-a em { font-style: normal; padding: 5px 12px; border-radius: 999px; background: var(--accent-100) !important; color: var(--cobalt) !important; }
#qsh .pg-def-src { font-size: 12px; color: var(--subtle) !important; }

/* how we do it: vertical timeline, who does each step */
#qsh .hw { list-style: none; padding: 0; margin: 0 !important; display: grid; gap: 0; position: relative; max-width: 980px; }
#qsh .hw::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg, var(--accent-300), var(--line)) !important; }
#qsh .hw-s { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 18px 0; }
#qsh .hw-n { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 56px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 20px; background: #fff !important; color: var(--ink) !important; box-shadow: 0 0 0 2px var(--accent-300) !important; }
#qsh .hw-s.person .hw-n { background: #f59e0b !important; color: #1f1300 !important; box-shadow: 0 0 0 6px rgba(245,158,11,.18) !important; }
#qsh .hw-s.agent .hw-n { background: var(--accent) !important; color: #fff !important; box-shadow: 0 0 0 6px rgba(37,99,216,.14) !important; }
#qsh .hw-b { display: grid; gap: 6px; padding: 18px 22px; border-radius: 20px; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; }
#qsh .hw-s.person .hw-b { background: #fffaf0 !important; box-shadow: 0 0 0 1px rgba(245,158,11,.4) !important; }
#qsh .hw-who { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; }
#qsh .hw-s.person .hw-who { color: var(--warning-ink) !important; }
#qsh .hw-b h3 { margin: 0 !important; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink) !important; }
#qsh .hw-b p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--body) !important; }

/* ranges table */
#qsh .rg { border-radius: 24px; overflow: hidden; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; }
#qsh .rg-h, #qsh .rg-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: 20px; padding: 16px 24px; align-items: center; }
#qsh .rg-h { background: var(--night) !important; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8cc4ff !important; }
#qsh .rg-r { border-top: 1px solid var(--line); font-size: 15px; color: var(--body) !important; }
#qsh .rg-r b { font-weight: 500; color: var(--ink) !important; }
#qsh .rg-v { font-family: var(--font-mono); font-size: 15px; color: var(--accent) !important; }
#qsh .rg-n { margin: 0 !important; padding: 14px 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted) !important; background: var(--paper) !important; }

/* comparison table */
#qsh .cmp-w { overflow-x: auto; border-radius: 24px; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; }
#qsh .cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
#qsh .cmp th, #qsh .cmp td { padding: 16px 20px; text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.5; border-bottom: 1px solid var(--line); color: var(--body) !important; }
#qsh .cmp thead th { font-size: 15px; font-weight: 600; color: var(--ink) !important; background: var(--paper) !important; }
#qsh .cmp tbody th { font-weight: 500; color: var(--ink) !important; width: 22%; }
#qsh .cmp .hl { background: var(--accent-100) !important; color: var(--ink) !important; }
#qsh .cmp thead th.hl { background: var(--accent) !important; color: #fff !important; }
#qsh .pg-tn { margin-top: 14px !important; }

/* formats */
#qsh .fm { display: grid; gap: 10px; }
#qsh .fm-r { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.3fr) 130px; gap: 20px; align-items: center; padding: 18px 22px; border-radius: 18px; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; }
#qsh .fm-n b { display: block; font-size: 17px; font-weight: 600; color: var(--ink) !important; }
#qsh .fm-n small { font-family: var(--font-mono); font-size: 11px; color: var(--muted) !important; }
#qsh .fm-r p { margin: 0 !important; font-size: 14px; line-height: 1.55; color: var(--body) !important; }
#qsh .fm-w { color: var(--text) !important; }
#qsh .fm-p { justify-self: end; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
#qsh .fm-r.low .fm-p { background: var(--success-tint) !important; color: var(--success-ink) !important; }
#qsh .fm-r.mid .fm-p { background: var(--warning-tint) !important; color: var(--warning-ink) !important; }
#qsh .fm-r.high { box-shadow: 0 0 0 1px rgba(239,68,68,.35) !important; }
#qsh .fm-r.high .fm-p { background: var(--error-tint) !important; color: var(--error-ink) !important; }

/* 100-payment breakdown */
#qsh .bd { border-radius: 28px; padding: 30px; background: linear-gradient(165deg, #1e4389, #021a4a 75%) !important; color: #fff !important; display: grid; gap: 22px; }
#qsh .bd-top b { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -.02em; color: #fff !important; }
#qsh .bd-bar { display: flex; height: 56px; border-radius: 14px; overflow: hidden; gap: 3px; }
#qsh .bd-bar i { width: var(--w); display: grid; place-items: center; transform-origin: left; animation: pg-grow-x 1.2s cubic-bezier(.2,.8,.2,1) both; }
#qsh .bd-bar i.auto { background: linear-gradient(90deg, #059669, #34d399) !important; }
#qsh .bd-bar i.person { background: linear-gradient(90deg, #d97706, #fbbf24) !important; }
#qsh .bd-bar i.stuck { background: linear-gradient(90deg, #be123c, #f87171) !important; }
#qsh .bd-bar em { font-style: normal; font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: #fff !important; }
@keyframes pg-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#qsh .bd-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#qsh .bd-i { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
#qsh .bd-sw { width: 14px; height: 14px; border-radius: 4px; margin-top: 4px !important; }
#qsh .bd-i.auto .bd-sw { background: #34d399 !important; } #qsh .bd-i.person .bd-sw { background: #fbbf24 !important; } #qsh .bd-i.stuck .bd-sw { background: #f87171 !important; }
#qsh .bd-i b { font-size: 15px; font-weight: 600; color: #fff !important; }
#qsh .bd-i p { margin: 4px 0 0 !important; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.7) !important; }
#qsh .bd-n { margin: 0 !important; font-size: 12.5px; color: rgba(255,255,255,.55) !important; }

/* from the blog */
#qsh .fb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#qsh .fb-c { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 20px; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; text-decoration: none; min-height: 150px; transition: box-shadow .2s, transform .2s; }
#qsh a.fb-c:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--step-active-border), 0 18px 36px -24px rgba(3,38,105,.4) !important; }
#qsh .fb-c b { font-size: 16.5px; line-height: 1.35; font-weight: 500; color: var(--ink) !important; }
#qsh .fb-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; }
#qsh .fb-c.soon { background: var(--paper) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
#qsh .fb-c.soon .fb-k { color: var(--muted) !important; }
#qsh .fb-c.soon b { color: var(--body) !important; }
#qsh .fb-c .more { margin-top: auto !important; }

@media (max-width: 1080px) {
  #qsh .fm-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } #qsh .fm-r .fm-w { grid-column: 1 / -1; } #qsh .fm-p { justify-self: start; }
  #qsh .fb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #qsh .bd-l { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  #qsh .pg-def { padding: 28px 22px; } #qsh .pg-def::before { display: none; }
  #qsh .rg-h { display: none; } #qsh .rg-r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #qsh .fm-r { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #qsh .fb { grid-template-columns: minmax(0, 1fr); }
  #qsh .hw-s { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; } #qsh .hw-n { width: 44px; height: 44px; } #qsh .hw::before { left: 21px; }
}

/* shared tags */
#qsh .tg { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
#qsh .tg.blue { background: rgba(61,139,242,.2) !important; color: #8cc4ff !important; }
#qsh .tg.green { background: rgba(52,211,153,.16) !important; color: #6ee7b7 !important; }
#qsh .tg.amber { background: rgba(245,158,11,.18) !important; color: #fcd34d !important; }
#qsh .tg.red { background: rgba(239,68,68,.2) !important; color: #fca5a5 !important; }
@keyframes pg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* handoff: CRM deal → ERP order */
#qsh .ho-g { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 8px; align-items: stretch; }
#qsh .ho-s { border-radius: 18px; padding: 14px; display: grid; gap: 8px; align-content: start; }
#qsh .ho-s.l { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; }
#qsh .ho-s.r { background: rgba(37,99,216,.22) !important; box-shadow: inset 0 0 0 1px rgba(140,196,255,.35), 0 0 30px rgba(61,139,242,.25) !important; }
#qsh .ho-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8cc4ff !important; padding-bottom: 4px; }
#qsh .ho-h svg { width: 15px; height: 15px; }
#qsh .ho-f { display: grid; gap: 1px; }
#qsh .ho-f small { font-size: 10.5px; color: rgba(255,255,255,.5) !important; }
#qsh .ho-f b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: #fff !important; }
#qsh .ho-s.r .ho-f { animation: pg-fill 6s infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes pg-fill { 0%, 6% { opacity: .15; } 14%, 88% { opacity: 1; } 100% { opacity: .15; } }
#qsh .ho-mid { position: relative; display: grid; align-content: space-around; justify-items: center; }
#qsh .ho-mid::before { content: ""; position: absolute; top: 12%; bottom: 12%; left: 50%; width: 1px; background: rgba(140,196,255,.25) !important; }
#qsh .ho-dot { position: relative; width: 26px; height: 2px; background: rgba(140,196,255,.25) !important; overflow: visible; }
#qsh .ho-dot::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 8px; background: #6ee7b7 !important; box-shadow: 0 0 10px #6ee7b7 !important; animation: pg-hop 6s infinite; animation-delay: calc(var(--i) * .45s); opacity: 0; }
@keyframes pg-hop { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 12% { left: 18px; opacity: 1; } 14%, 100% { opacity: 0; left: 18px; } }

/* extract: document → ERP lines */
#qsh .ex-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; }
#qsh .ex-doc { position: relative; overflow: hidden; border-radius: 14px; padding: 14px 14px 10px; background: #fff !important; color: var(--ink) !important; transform: rotate(-1.5deg); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6) !important; }
#qsh .ex-dn { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink) !important; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px !important; }
#qsh .ex-dn svg { width: 14px; height: 14px; color: #e11d48; }
#qsh .ex-l { display: grid; grid-template-columns: minmax(0, 1.5fr) 28px minmax(0, .9fr); white-space: nowrap; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; line-height: 2; color: var(--body) !important; border-bottom: 1px dashed var(--line); }
#qsh .ex-l span:last-child { text-align: right; }
#qsh .ex-scan { position: absolute; left: 0; right: 0; height: 26px; background: linear-gradient(180deg, transparent, rgba(61,139,242,.28), transparent) !important; border-bottom: 2px solid #3d8bf2; animation: pg-scan 3.2s ease-in-out infinite; }
@keyframes pg-scan { 0% { top: 20px; } 50% { top: calc(100% - 26px); } 100% { top: 20px; } }
#qsh .ex-t { display: grid; gap: 6px; align-content: start; }
#qsh .ex-th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8cc4ff !important; padding: 2px 0 4px; }
#qsh .ex-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; animation: pg-in .5s both; animation-delay: calc(.4s + var(--i) * .35s); }
#qsh .ex-r span { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.55) !important; }
#qsh .ex-r b { grid-row: 2; font-size: 13px; font-weight: 500; color: #fff !important; }
#qsh .ex-r em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: rgba(52,211,153,.16) !important; color: #6ee7b7 !important; }
#qsh .ex-r.warn { box-shadow: inset 0 0 0 1px rgba(245,158,11,.5) !important; background: rgba(245,158,11,.1) !important; }
#qsh .ex-r.warn em { background: rgba(245,158,11,.2) !important; color: #fcd34d !important; }

/* inbox */
#qsh .ib2-l { display: grid; gap: 7px; }
#qsh .ib2-c { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important; animation: pg-in .5s both; animation-delay: calc(var(--i) * .25s); }
#qsh .ib2-av { width: 32px; height: 32px; border-radius: 32px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: rgba(140,196,255,.2) !important; color: #cfe5ff !important; }
#qsh .ib2-c b { display: block; font-size: 13px; font-weight: 500; color: #fff !important; }
#qsh .ib2-c small { display: block; font-size: 12px; color: rgba(255,255,255,.6) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#qsh .ib2-d { border-radius: 18px; padding: 14px; background: #fff !important; color: var(--ink) !important; display: grid; gap: 8px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5) !important; }
#qsh .ib2-dh { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt) !important; }
#qsh .ib2-dh svg { width: 14px; height: 14px; }
#qsh .ib2-d p { margin: 0 !important; font-size: 13.5px; line-height: 1.55; color: var(--text) !important; }
#qsh .ib2-da { display: flex; align-items: center; gap: 8px; }
#qsh .ib2-da .af-btn:not(.ok) { background: #eef1f5 !important; color: var(--ink) !important; }
#qsh .ib2-da small { margin-left: auto !important; font-size: 11.5px; color: var(--muted) !important; }

/* aging chart */
#qsh .ag-co { display: flex; align-items: baseline; gap: 10px; }
#qsh .ag-co b { font-family: var(--font-mono); font-size: 34px; font-weight: 500; letter-spacing: -.03em; color: #fff !important; }
#qsh .ag-co small { font-size: 13px; color: rgba(255,255,255,.65) !important; }
#qsh .ag-ch { height: 210px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: end; padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,.15); }
#qsh .ag-b { height: 100%; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: end; gap: 6px; }
#qsh .ag-b em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: #cfe5ff !important; }
#qsh .ag-b i { width: 100%; height: var(--h); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #3d8bf2, #1e4389) !important; transform-origin: bottom; animation: pg-grow 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .12s); }
#qsh .ag-b.hot i { background: linear-gradient(180deg, #f87171, #9f1239) !important; box-shadow: 0 0 22px rgba(248,113,113,.35) !important; }
#qsh .ag-b span { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.6) !important; transform: translateY(22px); }
@keyframes pg-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
#qsh .vx.ag .vx-f { margin-top: 18px !important; }

/* ranked list */
#qsh .rk-l { display: grid; gap: 7px; }
#qsh .rk-r { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important; animation: pg-in .5s both; animation-delay: calc(var(--i) * .15s); }
#qsh .rk-r:first-child { background: rgba(37,99,216,.25) !important; box-shadow: inset 0 0 0 1px rgba(140,196,255,.4) !important; }
#qsh .rk-n { width: 26px; height: 26px; border-radius: 26px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; background: rgba(255,255,255,.1) !important; color: #fff !important; }
#qsh .rk-m { display: grid; gap: 3px; min-width: 0; }
#qsh .rk-m b { font-size: 13.5px; font-weight: 500; color: #fff !important; }
#qsh .rk-m small { font-size: 11.5px; color: rgba(255,255,255,.55) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#qsh .rk-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1) !important; overflow: hidden; }
#qsh .rk-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #f59e0b, #f87171) !important; }
#qsh .rk-v { font-family: var(--font-mono); font-size: 13px; color: #fff !important; }

/* e-invoice validation */
#qsh .va-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
#qsh .va-inv { border-radius: 14px; padding: 14px; background: #fff !important; display: grid; gap: 7px; align-content: start; transform: rotate(-1.2deg); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6) !important; }
#qsh .va-no { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink) !important; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
#qsh .va-no svg { width: 15px; height: 15px; color: var(--accent); }
#qsh .va-f small { display: block; font-size: 10px; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .06em; }
#qsh .va-f b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink) !important; }
#qsh .va-c { list-style: none; padding: 0; margin: 0 !important; display: grid; gap: 6px; align-content: start; }
#qsh .va-c li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px 11px; border-radius: 12px; font-size: 12.5px; color: #fff !important; background: rgba(255,255,255,.06) !important; animation: pg-in .5s both; animation-delay: calc(var(--i) * .3s); }
#qsh .va-c li svg { width: 17px; height: 17px; }
#qsh .va-c li.ok svg { color: #6ee7b7; }
#qsh .va-c li.bad { background: rgba(239,68,68,.15) !important; box-shadow: inset 0 0 0 1px rgba(248,113,113,.5) !important; }
#qsh .va-c li.bad svg { color: #fca5a5; }
#qsh .va-rt { display: flex; align-items: center; gap: 6px; }
#qsh .va-n { padding: 8px 14px; border-radius: 12px; font-family: var(--font-mono); font-size: 12px; background: rgba(255,255,255,.08) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important; }
#qsh .va-n:last-child { background: linear-gradient(160deg, #2563d8, #1e4389) !important; }
#qsh .va-ar { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,.15) !important; overflow: hidden; }
#qsh .va-ar i { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, #6ee7b7, transparent) !important; animation: pg-sweep 1.8s linear infinite; }

@media (max-width: 640px) {
  #qsh .ho-g, #qsh .ex-g, #qsh .va-g { grid-template-columns: minmax(0, 1fr); }
  #qsh .ho-mid { display: none; }
  #qsh .rk-r { grid-template-columns: 26px minmax(0, 1fr) auto; } #qsh .rk-r .tg { display: none; }
  #qsh .ag-ch { height: 170px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #qsh .ho-s.r .ho-f, #qsh .ho-dot::after, #qsh .ex-scan, #qsh .ex-r, #qsh .ib2-c, #qsh .ag-b i, #qsh .rk-r, #qsh .va-c li, #qsh .va-ar i { animation: none !important; opacity: 1 !important; }
}

@media (max-width: 1080px) { #qsh .op-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #qsh .op-g { grid-template-columns: minmax(0, 1fr); }
  #qsh .af-steps small { font-size: 9px; }
  #qsh .af-ap { grid-template-columns: 36px minmax(0, 1fr); } #qsh .af-btn { display: none; }
  #qsh .sy-n { min-width: 74px; padding: 7px; } #qsh .sy-n small { display: none; }
  #qsh .sy-center b { font-size: 14px; }
  #qsh .sb-k b { font-size: 18px; }
  #qsh .sb-r { grid-template-columns: 12px minmax(0, 1fr); } #qsh .sb-r small { grid-column: 2; }
  #qsh .vx.db { transform: none; }
  #qsh .db-g { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #qsh .af-rail i, #qsh .af-c, #qsh .sy-roll, #qsh .ug-arrow i, #qsh .mg-bar i.ts, #qsh .sb-d { animation: none !important; }
  #qsh .pm-line i, #qsh .lg-roll, #qsh .pm-n.hot .pm-dot { animation: none !important; }
}

@media (max-width: 1080px) {
  #qsh .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #qsh .rp-g { grid-template-columns: minmax(0, 1fr); }
  #qsh .pg-fa { grid-template-columns: minmax(0, 1fr); }
  #qsh .pg-fa-r { position: static; }
  #qsh .pg-chip.pc1 { right: 0; } #qsh .pg-chip.pc2 { left: 0; } #qsh .pg-chip.pc3 { right: 0; }
}
@media (max-width: 640px) {
  #qsh .bento { grid-template-columns: minmax(0, 1fr); }
  #qsh .bn-feat { grid-column: auto; grid-row: auto; padding: 24px; }
  #qsh .lg-ln { grid-template-columns: 70px 90px minmax(0, 1fr); } #qsh .lg-s { display: none; }
  #qsh .rp-th { display: none; }
  #qsh .rp-r { grid-template-columns: 22px minmax(0, 1fr) 90px; } #qsh .rp-b, #qsh .rp-v { display: none; }
  #qsh .rp-doc { transform: none; padding: 20px; }
  #qsh .pg-chip { display: none; }
}

@media (max-width: 1080px) {
  #qsh .pg-hero-g { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  #qsh .pg-cards.c3, #qsh .pg-cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #qsh .pg-cards.c2, #qsh .pg-cards.c3, #qsh .pg-cards.c4 { grid-template-columns: minmax(0, 1fr); }
  #qsh .pg-hero { padding-top: 28px; }
  #qsh .pg-stats { grid-template-columns: minmax(0, 1fr); }
}

#qsh .pg-il { color: var(--cobalt) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- hero v2: dark panel, demo breaking out of it ---------- */
#qsh .pg-hf2 { position: relative; padding-top: 18px; }
#qsh .pg-hf2-bg { position: relative; overflow: hidden; margin: 0 var(--panel-inset, 12px) !important; border-radius: 32px; background: #020b24 !important; color: #fff !important; padding: 84px 0 230px; }
#qsh .pg-hf2-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 56px; align-items: end; }
#qsh .pg-hf2-t { display: grid; gap: 22px; justify-items: start; }
#qsh .pg-hf2-t .pg-hf2-h { margin: 0 !important; font-size: clamp(42px, 5.6vw, 80px); line-height: 1.0; letter-spacing: -.045em; font-weight: 500; color: #fff !important; text-wrap: balance; }
#qsh .pg-hf2-t .pg-hf2-h .gt { background: linear-gradient(120deg, #8cc4ff, #b6cdf6 50%, #6ee7b7) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
#qsh .pg-hf2-t > p { margin: 0 !important; max-width: 640px; font-size: 18.5px; line-height: 1.6; color: rgba(255,255,255,.72) !important; }
#qsh .pg-hf2-t .btn-ghost { background: rgba(255,255,255,.08) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important; }
#qsh .pg-hf2-note { margin: 0 !important; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5) !important; }
#qsh .pg-hf2-p { display: grid; gap: 10px; }
#qsh .pg-hf2-p > div { display: grid; gap: 2px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; backdrop-filter: blur(8px); animation: pg-in .6s both; animation-delay: calc(.2s + var(--i) * .12s); }
#qsh .pg-hf2-p b { font-family: var(--font-mono); font-size: 30px; font-weight: 500; letter-spacing: -.03em; color: #fff !important; }
#qsh .pg-hf2-p small { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.62) !important; }
#qsh .pg-hf2-ch { position: relative; z-index: 2; margin-top: 64px !important; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
#qsh .pg-hf2-chr { display: flex; gap: 12px; width: max-content; animation: pg-marq 34s linear infinite; }
#qsh .pg-hf2-chr span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; color: #cfe5ff !important; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(140,196,255,.22) !important; white-space: nowrap; }
#qsh .pg-hf2-chr svg { width: 16px; height: 16px; color: #6ee7b7; }
@keyframes pg-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#qsh .pg-hf2-f { position: relative; z-index: 3; margin-top: -190px !important; }
#qsh .pg-hf2-f .frame { margin-top: 0 !important; box-shadow: 0 0 0 1px rgba(140,196,255,.25), 0 70px 120px -50px rgba(2,11,36,.75) !important; }

/* ---------- definition v2: term left, states right ---------- */
#qsh .pg-def2 { padding-top: 110px; }
#qsh .pg-def2-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
#qsh .pg-def2-l { position: sticky; top: 120px; display: grid; gap: 14px; padding-top: 6px; }
#qsh .pg-def2-l b { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(54px, 6vw, 92px); line-height: .92; letter-spacing: -.03em; color: var(--ink) !important; }
#qsh .pg-def2-l i { font-family: var(--font-mono); font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
#qsh .pg-def2-r { display: grid; gap: 22px; }
#qsh .pg-def2-t { margin: 0 !important; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.55; letter-spacing: -.01em; color: var(--text) !important; }
#qsh .pg-st { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#qsh .pg-st-c { display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px rgba(3,38,105,.35) !important; }
#qsh .pg-st-c.red { box-shadow: 0 0 0 1px rgba(239,68,68,.3), 0 20px 40px -30px rgba(3,38,105,.35) !important; }
#qsh .pg-st-c.amber { box-shadow: 0 0 0 1px rgba(245,158,11,.4), 0 20px 40px -30px rgba(3,38,105,.35) !important; }
#qsh .pg-st-h { display: flex; justify-content: space-between; align-items: center; }
#qsh .pg-st-h span { font-size: 18px; font-weight: 600; color: var(--ink) !important; }
#qsh .pg-st-h em { font-style: normal; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
#qsh .pg-st-c.red em { background: var(--error-tint) !important; color: var(--error-ink) !important; }
#qsh .pg-st-c.amber em { background: var(--warning-tint) !important; color: var(--warning-ink) !important; }
#qsh .pg-st-flow { display: flex; align-items: center; gap: 6px; }
#qsh .pg-st-n { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
#qsh .pg-st-n svg { width: 14px; height: 14px; }
#qsh .pg-st-n.ok { background: var(--success-tint) !important; color: var(--success-ink) !important; }
#qsh .pg-st-n.q { background: #f1f2f5 !important; color: var(--muted) !important; box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 transparent !important; border: 1px dashed var(--divider); }
#qsh .pg-st-a { flex: 1; min-width: 8px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent-300) 0 4px, transparent 4px 7px) !important; }
#qsh .pg-st-c p { margin: 0 !important; font-size: 14px; line-height: 1.55; color: var(--body) !important; }

@media (max-width: 1080px) {
  #qsh .pg-hf2-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #qsh .pg-hf2-p { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #qsh .pg-def2-g { grid-template-columns: minmax(0, 1fr); gap: 28px; } #qsh .pg-def2-l { position: static; }
}
@media (max-width: 640px) {
  #qsh .pg-hf2-bg { padding: 56px 0 170px; border-radius: 24px; }
  #qsh .pg-hf2-p { grid-template-columns: minmax(0, 1fr); }
  #qsh .pg-hf2-f { margin-top: -130px !important; }
  #qsh .pg-st { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { #qsh .pg-hf2-chr, #qsh .pg-hf2-p > div { animation: none !important; } }
#qsh .pg-hf2-t > p.pg-hf2-note { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; color: rgba(255,255,255,.5) !important; }
#qsh .pg-hf2-k { display: inline-flex; align-items: center; gap: 8px; }
#qsh .pg-dot { width: 7px; height: 7px; border-radius: 7px; background: #34d399 !important; box-shadow: 0 0 0 4px rgba(52,211,153,.2) !important; animation: pulse 1.8s infinite; }
#qsh .pg-hf2-f .frame { box-shadow: 0 0 0 1px rgba(140,196,255,.25), 0 40px 70px -40px rgba(2,11,36,.55) !important; }
@media (max-width: 640px) {
  #qsh .pg-hf2-p { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #qsh .pg-hf2-p > div { padding: 12px 10px; }
  #qsh .pg-hf2-p b { font-size: 20px; }
  #qsh .pg-hf2-p small { font-size: 10.5px; }
  #qsh .pg-hf2-ch { margin-top: 32px !important; }
}
/* demo sits inside the dark hero (no break-out) */
#qsh .pg-hf2-bg { padding-bottom: 56px !important; }
#qsh .pg-hf2-f { margin-top: 44px !important; position: relative; z-index: 2; }
#qsh .pg-hf2-f .frame { box-shadow: 0 0 0 1px rgba(140,196,255,.28), 0 30px 60px -30px rgba(0,0,0,.6) !important; }
#qsh .pg-hf2 + .sec { border-top: 0 !important; }
@media (max-width: 640px) { #qsh .pg-hf2-bg { padding-bottom: 24px !important; } #qsh .pg-hf2-f { margin-top: 28px !important; padding: 0 10px; } }

#qsh .pg-crumb span { color: var(--ink) !important; }

/* ---------- order-to-cash stepper ---------- */
#qsh .o2c { display: grid; gap: 22px; }
#qsh .o2c-rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
#qsh .o2c-line { position: absolute; left: 6%; right: 6%; top: 34px; height: 3px; border-radius: 3px; background: var(--line) !important; }
#qsh .o2c-line i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #34d399) !important; transition: width .5s cubic-bezier(.2,.8,.2,1); }
#qsh .o2c-t { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 4px 10px; background: none !important; border: 0; cursor: pointer; font: inherit; }
#qsh .o2c-ic { width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; background: #fff !important; color: var(--muted); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgba(3,38,105,.4) !important; transition: all .25s; }
#qsh .o2c-ic svg { width: 28px; height: 28px; }
#qsh .o2c-t b { font-size: 14.5px; font-weight: 600; color: var(--body) !important; text-align: center; }
#qsh .o2c-t small { font-family: var(--font-mono); font-size: 10.5px; color: var(--subtle) !important; }
#qsh .o2c-t.done .o2c-ic { color: var(--success-ink); box-shadow: 0 0 0 2px #34d399 !important; }
#qsh .o2c-t.on .o2c-ic { background: linear-gradient(160deg, #2563d8, #1e4389) !important; color: #fff; transform: translateY(-4px); box-shadow: 0 0 0 6px rgba(37,99,216,.14), 0 20px 40px -18px rgba(37,99,216,.8) !important; }
#qsh .o2c-t.on b { color: var(--ink) !important; }
#qsh .o2c-p { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#qsh .o2c-p.on { display: grid; animation: pg-in .35s both; }
#qsh .o2c-c { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 22px; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; }
#qsh .o2c-c > span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
#qsh .o2c-c > span svg { width: 16px; height: 16px; }
#qsh .o2c-c p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--text) !important; }
#qsh .o2c-c.stuck { background: #fff7f7 !important; box-shadow: 0 0 0 1px rgba(239,68,68,.28) !important; }
#qsh .o2c-c.stuck > span { color: var(--error-ink) !important; }
#qsh .o2c-c.agent { background: linear-gradient(165deg, #1e4389, #021a4a 80%) !important; }
#qsh .o2c-c.agent > span { color: #8cc4ff !important; } #qsh .o2c-c.agent p { color: rgba(255,255,255,.85) !important; } #qsh .o2c-c.agent .more { color: #8cc4ff !important; }
#qsh .o2c-c.person { background: #fffaf0 !important; box-shadow: 0 0 0 1px rgba(245,158,11,.35) !important; }
#qsh .o2c-c.person > span { color: var(--warning-ink) !important; }
#qsh .o2c-m { display: grid; gap: 2px; padding-top: 10px; border-top: 1px dashed rgba(239,68,68,.3); }
#qsh .o2c-m b { font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: var(--error-ink) !important; }
#qsh .o2c-m small { font-size: 12px; color: var(--muted) !important; }

/* ---------- calculator ---------- */
#qsh .cl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); border-radius: 28px; overflow: hidden; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.45) !important; }
#qsh .cl-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; padding: 30px; align-content: start; }
#qsh .cl-f { display: grid; gap: 8px; }
#qsh .cl-f > span { font-size: 13.5px; font-weight: 500; color: var(--ink) !important; }
#qsh .cl-in { display: flex; align-items: center; border-radius: 12px; background: var(--paper) !important; box-shadow: inset 0 0 0 1px var(--line) !important; padding: 0 12px; }
#qsh .cl-in input { flex: 1; min-width: 0; border: 0; background: none !important; padding: 10px 0; font: 500 16px var(--font-mono); color: var(--ink) !important; outline: none; }
#qsh .cl-in em { font-style: normal; font-size: 12px; color: var(--muted) !important; }
#qsh .cl-f input[type=range] { width: 100%; accent-color: #2563d8; }
#qsh .cl-out { display: grid; gap: 12px; align-content: start; padding: 30px; background: linear-gradient(165deg, #1e4389, #021a4a 75%) !important; color: #fff !important; }
#qsh .cl-out .k { color: #8cc4ff !important; }
#qsh .cl-o { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
#qsh .cl-o small { font-size: 13px; color: rgba(255,255,255,.65) !important; }
#qsh .cl-o b { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: #fff !important; }
#qsh .cl-o.big b { font-size: 40px; letter-spacing: -.03em; background: linear-gradient(120deg, #8cc4ff, #6ee7b7) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
#qsh .cl-o.tot { border-bottom: 0; } #qsh .cl-o.tot b { color: #6ee7b7 !important; font-size: 28px; }
#qsh .cl-n { margin: 0 !important; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55) !important; }
#qsh .cl-out .btn { justify-self: start; }

@media (max-width: 1080px) { #qsh .o2c-p { grid-template-columns: minmax(0, 1fr); } #qsh .cl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  #qsh .o2c-rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } #qsh .o2c-line { display: none; }
  #qsh .o2c-ic { width: 54px; height: 54px; border-radius: 18px; }
  #qsh .cl-inputs { grid-template-columns: minmax(0, 1fr); padding: 22px; } #qsh .cl-out { padding: 22px; }
}

#qsh .ag-co b { white-space: nowrap; }
#qsh .ag-co { align-items: center; }

/* ---------- agent trace (hero) ---------- */
#qsh .tr-l { position: relative; display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: rgba(2,11,36,.55) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
#qsh .tr-r { display: grid; grid-template-columns: 62px 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 4px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; opacity: 0; animation: pg-tr 9s infinite; animation-delay: calc(var(--i) * .7s); }
@keyframes pg-tr { 0% { opacity: 0; transform: translateY(4px); } 4%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
#qsh .tr-t { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4) !important; padding-top: 3px; }
#qsh .tr-i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(140,196,255,.14) !important; color: #8cc4ff; }
#qsh .tr-i svg { width: 14px; height: 14px; }
#qsh .tr-x { color: rgba(255,255,255,.85) !important; }
#qsh .tr-x .gt { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; font-family: var(--font-mono); font-size: 12.5px; }
#qsh .tr-r.check .tr-i { background: rgba(52,211,153,.16) !important; color: #6ee7b7; }
#qsh .tr-r.wait { background: rgba(245,158,11,.12) !important; box-shadow: inset 0 0 0 1px rgba(245,158,11,.45) !important; }
#qsh .tr-r.wait .tr-i { background: #f59e0b !important; color: #1f1300; }
#qsh .tr-r.wait .tr-x { color: #fcd34d !important; font-weight: 600; }
#qsh .tr-cur i { display: block; width: 8px; height: 15px; margin-left: 76px !important; background: #8cc4ff !important; animation: pg-blink 1s steps(1) infinite; }
@keyframes pg-blink { 50% { opacity: 0; } }

/* ---------- agent anatomy ---------- */
#qsh .an { display: grid; gap: 14px; padding: 30px; border-radius: 30px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.4) !important; }
#qsh .an-g { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.15fr) 40px minmax(0, 1.15fr) 40px minmax(0, 1fr); align-items: center; }
#qsh .an-col { display: grid; gap: 8px; align-content: center; }
#qsh .an-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: 4px !important; }
#qsh .an-in { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; color: var(--ink) !important; background: var(--paper) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
#qsh .an-in svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
#qsh .an-in.sys { background: var(--success-tint) !important; box-shadow: inset 0 0 0 1px rgba(16,185,129,.3) !important; }
#qsh .an-in.sys svg { color: var(--success-ink); }
#qsh .an-agent { padding: 18px; border-radius: 22px; background: linear-gradient(165deg, #1e4389, #021a4a 80%) !important; }
#qsh .an-agent .an-h { color: #8cc4ff !important; }
#qsh .an-core { position: relative; justify-self: center; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin: 4px 0 6px !important; background: linear-gradient(160deg, #3d8bf2, #2563d8) !important; color: #fff; }
#qsh .an-core svg { width: 30px; height: 30px; position: relative; }
#qsh .an-glow { position: absolute; inset: -10px; border-radius: 28px; background: rgba(61,139,242,.35) !important; filter: blur(14px); animation: pulse 2.4s infinite; }
#qsh .an-pt { padding: 8px 10px; border-radius: 10px; font-size: 12.5px; color: #e2ecff !important; background: rgba(255,255,255,.07) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; }
#qsh .an-q { padding: 18px; border-radius: 22px; background: #fffaf0 !important; box-shadow: inset 0 0 0 1px rgba(245,158,11,.4) !important; }
#qsh .an-q .an-h { color: var(--warning-ink) !important; }
#qsh .an-qi { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; color: var(--ink) !important; background: #fff !important; box-shadow: 0 0 0 1px rgba(245,158,11,.25) !important; animation: pg-in .5s both; animation-delay: calc(var(--i) * .2s); }
#qsh .an-qi span { width: 8px; height: 8px; border-radius: 8px; background: #f59e0b !important; flex: none; }
#qsh .an-own { display: flex; align-items: center; gap: 8px; margin-top: 4px !important; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; background: #f59e0b !important; color: #1f1300 !important; }
#qsh .an-own svg { width: 16px; height: 16px; }
#qsh .an-ar { position: relative; height: 2px; margin: 0 6px !important; background: var(--line) !important; overflow: hidden; }
#qsh .an-ar i { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, transparent, var(--accent), transparent) !important; animation: pg-sweep 1.6s linear infinite; }
#qsh .an-ar.ok i { background: linear-gradient(90deg, transparent, #10b981, transparent) !important; }
#qsh .an-log { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; color: var(--body) !important; background: var(--paper) !important; box-shadow: inset 0 0 0 1px var(--line) !important; overflow: hidden; }
#qsh .an-log svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
#qsh .an-log em { position: absolute; left: 0; bottom: 0; height: 2px; width: 30%; background: linear-gradient(90deg, transparent, var(--accent), transparent) !important; animation: pg-sweep 3s linear infinite; }
@media (max-width: 1080px) { #qsh .an-g { grid-template-columns: minmax(0, 1fr); gap: 10px; } #qsh .an-ar { height: 26px; width: 2px; justify-self: center; margin: 0 !important; } #qsh .an-ar i { width: 100%; height: 50%; animation-name: pg-sweep-y; } }
@keyframes pg-sweep-y { from { top: -50%; } to { top: 100%; } }
@media (max-width: 640px) { #qsh .an { padding: 18px; } #qsh .tr-r { grid-template-columns: 26px minmax(0, 1fr); } #qsh .tr-t { display: none; } #qsh .tr-cur i { margin-left: 40px !important; } }
@media (prefers-reduced-motion: reduce) { #qsh .tr-r { animation: none !important; opacity: 1 !important; } #qsh .an-ar i, #qsh .an-log em, #qsh .an-glow { animation: none !important; } }

/* ---------- approval matrix (AI agent development) ---------- */
#qsh .mx { display: grid; padding: 10px 26px 16px; border-radius: 28px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.35) !important; }
#qsh .mx-h, #qsh .mx-r { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, 112px) minmax(0, 1.6fr); gap: 14px; align-items: center; }
#qsh .mx-h { padding: 16px 0 12px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .mx-l { display: grid; justify-items: center; gap: 6px; text-align: center; line-height: 1.3; }
#qsh .mx-l svg { width: 18px; height: 18px; padding: 6px; box-sizing: content-box; border-radius: 10px; }
#qsh .mx-l.l0 svg { background: var(--success-tint) !important; color: var(--success-ink); }
#qsh .mx-l.l1 svg { background: #fff4dc !important; color: var(--warning-ink); }
#qsh .mx-l.l2 svg { background: #ffe4e6 !important; color: #be123c; }
#qsh .mx-r { padding: 14px 0; border-bottom: 1px solid var(--line); animation: pg-in .5s both; animation-delay: calc(var(--i) * .05s); }
#qsh .mx-r:last-child { border-bottom: 0; }
#qsh .mx-a b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink) !important; }
#qsh .mx-a small { font-size: 13px; color: var(--muted) !important; }
#qsh .mx-c { display: grid; place-items: center; height: 34px; border-radius: 10px; background: var(--paper) !important; }
#qsh .mx-c i { width: 14px; height: 14px; border-radius: 14px; }
#qsh .mx-c.l0 { background: var(--success-tint) !important; } #qsh .mx-c.l0 i { background: #10b981 !important; box-shadow: 0 0 0 5px rgba(16,185,129,.18); }
#qsh .mx-c.l1 { background: #fff4dc !important; } #qsh .mx-c.l1 i { background: #f59e0b !important; box-shadow: 0 0 0 5px rgba(245,158,11,.2); }
#qsh .mx-c.l2 { background: #ffe4e6 !important; } #qsh .mx-c.l2 i { background: #e11d48 !important; box-shadow: 0 0 0 5px rgba(225,29,72,.16); }
#qsh .mx-w { margin: 0 !important; font-size: 14px; line-height: 1.55; color: var(--body) !important; }
@media (max-width: 900px) {
  #qsh .mx { padding: 6px 18px 10px; }
  #qsh .mx-h { display: none; }
  #qsh .mx-r { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #qsh .mx-c:not(.on) { display: none; }
  #qsh .mx-c.on { height: auto; padding: 6px 12px 6px 10px; grid-auto-flow: column; gap: 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink) !important; }
  #qsh .mx-c.on::after { content: attr(data-l); }
  #qsh .mx-c.on i { width: 9px; height: 9px; box-shadow: none; }
  #qsh .mx-c.on { justify-self: start; }
}

/* ---------- do you need an agent? (AI agent development) ---------- */
#qsh .dc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
#qsh .dc-q { list-style: none; margin: 22px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; }
#qsh .dc-q li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; }
#qsh .dc-q li[data-a] { box-shadow: 0 0 0 1px rgba(61,139,242,.45) !important; }
#qsh .dc-n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; background: var(--accent-100) !important; color: var(--cobalt) !important; }
#qsh .dc-q p { margin: 0 !important; font-size: 15.5px; line-height: 1.45; color: var(--ink) !important; }
#qsh .dc-b { display: flex; gap: 6px; }
#qsh .dc-b button { cursor: pointer; border: 0; padding: 8px 16px; border-radius: 999px; font: 600 13px/1 var(--font-sans, inherit); background: var(--paper) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line) !important; transition: background .2s, color .2s; }
#qsh .dc-b button:hover { box-shadow: inset 0 0 0 1px var(--accent) !important; }
#qsh .dc-b button.on { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
#qsh .dc-r { position: sticky; top: 110px; display: grid; gap: 14px; padding: 30px; border-radius: 28px; background: linear-gradient(165deg, #1e4389, #021a4a 80%) !important; color: #fff; min-height: 300px; align-content: start; }
#qsh .dc-r .k { color: #8cc4ff !important; }
#qsh .dc-prog { height: 6px; border-radius: 6px; background: rgba(255,255,255,.12) !important; overflow: hidden; }
#qsh .dc-prog i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #3d8bf2, #10b981) !important; transition: width .35s; }
#qsh .dc-wait { margin: 0 !important; font-size: 15px; color: rgba(255,255,255,.65) !important; }
#qsh .dc-res { display: none; gap: 12px; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important; animation: pg-in .4s both; }
#qsh .dc-res.on { display: grid; }
#qsh .dc-res h3 { margin: 0 !important; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: #fff !important; }
#qsh .dc-res p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.8) !important; }
#qsh .dc-res.go { box-shadow: inset 0 0 0 1px rgba(16,185,129,.55) !important; }
#qsh .dc-res.mid { box-shadow: inset 0 0 0 1px rgba(245,158,11,.55) !important; }
#qsh .dc-res.no { box-shadow: inset 0 0 0 1px rgba(140,196,255,.45) !important; }
#qsh .dc-res .btn { justify-self: start; }
@media (max-width: 900px) {
  #qsh .dc { grid-template-columns: minmax(0, 1fr); }
  #qsh .dc-r { position: static; min-height: 0; padding: 22px; }
  #qsh .dc-q li { grid-template-columns: 30px minmax(0, 1fr); }
  #qsh .dc-n { width: 30px; height: 30px; }
  #qsh .dc-b { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { #qsh .mx-r, #qsh .dc-res { animation: none !important; } }
#qsh .pg-dg .dg-b { align-content: start; }

/* ---------- support board (ERP modernization hero) ---------- */
#qsh .spb-th, #qsh .spb-r { display: grid; grid-template-columns: minmax(0, 1fr) 96px 78px; gap: 12px; align-items: center; }
#qsh .spb-th { padding: 0 12px 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4) !important; }
#qsh .spb-th span:nth-child(n+2), #qsh .spb-r > span { text-align: right; }
#qsh .spb-l { display: grid; gap: 6px; padding: 10px; border-radius: 18px; background: rgba(2,11,36,.55) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
#qsh .spb-r { padding: 10px 10px 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04) !important; animation: pg-in .5s both; animation-delay: calc(var(--i) * .12s); }
#qsh .spb-n b { display: block; font-size: 14px; font-weight: 600; color: #fff !important; }
#qsh .spb-n small { font-size: 11.5px; color: rgba(255,255,255,.5) !important; }
#qsh .spb-d { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.7) !important; }
#qsh .spb-c b { display: inline-block; min-width: 58px; padding: 5px 8px; border-radius: 8px; text-align: center; font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: .02em; background: #0b1530 !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.1) !important; }
#qsh .spb-r.hot .spb-c b { color: #fda4af !important; box-shadow: 0 0 0 1px rgba(244,63,94,.5) !important; }
#qsh .spb-r.warn .spb-c b { color: #fcd34d !important; box-shadow: 0 0 0 1px rgba(245,158,11,.45) !important; }
#qsh .spb-r.ok .spb-c b { color: #6ee7b7 !important; }
#qsh .spb-r.ended .spb-c b { color: rgba(255,255,255,.55) !important; text-decoration: line-through; }
#qsh .spb-r.hot { box-shadow: inset 3px 0 0 #f43f5e !important; } #qsh .spb-r.warn { box-shadow: inset 3px 0 0 #f59e0b !important; } #qsh .spb-r.ok { box-shadow: inset 3px 0 0 #10b981 !important; } #qsh .spb-r.ended { box-shadow: inset 3px 0 0 rgba(255,255,255,.25) !important; }

/* ---------- deadlines table ---------- */
#qsh .dl2 { display: grid; padding: 22px 26px 12px; border-radius: 28px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.35) !important; }
#qsh .dl2-f { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
#qsh .dl2-f button { cursor: pointer; border: 0; padding: 8px 14px; border-radius: 999px; font: 600 13px/1 inherit; background: var(--paper) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
#qsh .dl2-f button.on { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
#qsh .dl2-h, #qsh .dl2-r { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) 110px 92px minmax(0, 1.6fr); gap: 16px; align-items: center; }
#qsh .dl2-h { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .dl2-r { padding: 14px 0; border-bottom: 1px solid var(--line); }
#qsh .dl2-r:last-child { border-bottom: 0; }
#qsh .dl2-p b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink) !important; }
#qsh .dl2-p a { color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
#qsh .dl2-p small { font-size: 13px; color: var(--muted) !important; }
#qsh .dl2-e { font-size: 14px; color: var(--body) !important; }
#qsh .dl2-d { font-family: var(--font-mono); font-size: 13px; color: var(--ink) !important; }
#qsh .dl2-c b { display: inline-block; padding: 5px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; background: var(--paper) !important; color: var(--ink) !important; }
#qsh .dl2-r.hot .dl2-c b { background: #ffe4e6 !important; color: #be123c !important; }
#qsh .dl2-r.warn .dl2-c b { background: #fff4dc !important; color: var(--warning-ink) !important; }
#qsh .dl2-r.ok .dl2-c b { background: var(--success-tint) !important; color: var(--success-ink) !important; }
#qsh .dl2-r.ended .dl2-c b { background: #e5e7eb !important; color: #4b5563 !important; }
#qsh .dl2-r p { margin: 0 !important; font-size: 14px; line-height: 1.55; color: var(--body) !important; }
@media (max-width: 960px) {
  #qsh .dl2 { padding: 18px 16px 6px; }
  #qsh .dl2-h { display: none; }
  #qsh .dl2-r { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  #qsh .dl2-p { grid-column: 1; } #qsh .dl2-c { grid-column: 2; grid-row: 1; }
  #qsh .dl2-e, #qsh .dl2-d { grid-column: 1 / -1; font-size: 13px; }
  #qsh .dl2-e { grid-row: 2; } #qsh .dl2-d { grid-row: 3; }
  #qsh .dl2-r p { grid-column: 1 / -1; }
  #qsh .dl2-f { overflow-x: auto; flex-wrap: nowrap; }
  #qsh .dl2-f button { flex: none; }
}

/* ---------- four paths ---------- */
#qsh .pt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#qsh .pt-c { display: grid; gap: 14px; align-content: start; padding: 24px 22px; border-radius: 24px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -45px rgba(3,38,105,.35) !important; }
#qsh .pt-c.ft { background: linear-gradient(165deg, #1e4389, #021a4a 80%) !important; box-shadow: 0 40px 70px -40px rgba(3,38,105,.6) !important; }
#qsh .pt-h { display: flex; justify-content: space-between; align-items: center; }
#qsh .pt-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-100) !important; color: var(--accent); }
#qsh .pt-tag { padding: 5px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--success-tint) !important; color: var(--success-ink) !important; }
#qsh .pt-c h3 { margin: 0 !important; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: var(--ink) !important; }
#qsh .pt-fit { margin: 0 !important; font-size: 14.5px; line-height: 1.55; color: var(--body) !important; }
#qsh .pt-m { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--paper) !important; }
#qsh .pt-mr { display: grid; grid-template-columns: 74px auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; color: var(--body) !important; }
#qsh .pt-mr em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted) !important; text-align: right; white-space: nowrap; }
#qsh .pt-bar { display: flex; gap: 3px; }
#qsh .pt-bar i { width: 12px; height: 8px; border-radius: 3px; background: var(--line) !important; }
#qsh .pt-bar i.on { background: var(--accent) !important; }
#qsh .pt-kw { display: grid; gap: 10px; }
#qsh .pt-kw small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--success-ink) !important; }
#qsh .pt-kw .w small { color: var(--warning-ink) !important; }
#qsh .pt-kw p { margin: 2px 0 0 !important; font-size: 14px; line-height: 1.5; color: var(--body) !important; }
#qsh .pt-c.ft h3, #qsh .pt-c.ft .pt-fit, #qsh .pt-c.ft .pt-kw p { color: #fff !important; }
#qsh .pt-c.ft .pt-fit, #qsh .pt-c.ft .pt-kw p { color: rgba(255,255,255,.8) !important; }
#qsh .pt-c.ft .pt-m { background: rgba(255,255,255,.07) !important; }
#qsh .pt-c.ft .pt-mr { color: rgba(255,255,255,.75) !important; } #qsh .pt-c.ft .pt-mr em { color: rgba(255,255,255,.55) !important; }
#qsh .pt-c.ft .pt-bar i { background: rgba(255,255,255,.15) !important; } #qsh .pt-c.ft .pt-bar i.on { background: #6ee7b7 !important; }
#qsh .pt-c.ft .pt-ic { background: rgba(110,231,183,.15) !important; color: #6ee7b7; }
#qsh .pt-c.ft .pt-kw small { color: #6ee7b7 !important; } #qsh .pt-c.ft .pt-kw .w small { color: #fcd34d !important; }
#qsh .pt-c.ft .more { color: #8cc4ff !important; }
@media (max-width: 1100px) { #qsh .pt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #qsh .pt { grid-template-columns: minmax(0, 1fr); } }

/* ---------- phased plan (gantt) ---------- */
#qsh .gt2 { display: grid; gap: 4px; padding: 26px; border-radius: 28px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.35) !important; }
#qsh .gt2-scale, #qsh .gt2-r { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, .8fr); gap: 18px; align-items: center; }
#qsh .gt2-scale > div { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted) !important; }
#qsh .gt2-scale > div span { padding-left: 4px; border-left: 1px solid var(--line); }
#qsh .gt2-r { padding: 10px 0; border-top: 1px solid var(--line); }
#qsh .gt2-l b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink) !important; }
#qsh .gt2-l small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .gt2-t { position: relative; height: 34px; border-radius: 10px; background: repeating-linear-gradient(90deg, var(--paper) 0 calc(100% / var(--m, 12) - 1px), var(--line) calc(100% / var(--m, 12) - 1px) calc(100% / var(--m, 12))) !important; }
#qsh .gt2-b { position: absolute; top: 5px; height: 24px; border-radius: 8px; display: flex; align-items: center; padding: 0 10px; overflow: hidden; animation: pg-grow .8s both; animation-delay: calc(var(--i) * .12s); transform-origin: left; }
@keyframes pg-grow { from { transform: scaleX(0); } to { transform: none; } }
#qsh .gt2-b em { font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #fff !important; }
#qsh .gt2-b.us { background: linear-gradient(90deg, #2563d8, #3d8bf2) !important; }
#qsh .gt2-b.person { background: linear-gradient(90deg, #d97706, #fbbf24) !important; } #qsh .gt2-b.person em { color: #1f1300 !important; }
#qsh .gt2-b.both { background: linear-gradient(90deg, #4338ca, #7c83f2) !important; }
#qsh .gt2-b.cut { background: linear-gradient(90deg, #059669, #34d399) !important; }
#qsh .gt2-x { margin: 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--body) !important; }
#qsh .gt2-r.fin { margin-top: 6px; padding: 14px 0 6px; border-top: 2px dashed rgba(16,185,129,.4); }
#qsh .gt2-run { position: absolute; left: 0; right: 0; top: 16px; height: 3px; border-radius: 3px; background: #10b981 !important; }
#qsh .gt2-close { position: absolute; top: 11px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 2px; background: #fff !important; box-shadow: 0 0 0 2px #10b981 !important; }
#qsh .gt2-cut { position: absolute; top: -8px; bottom: -8px; width: 2px; background: #0b1b3a !important; }
#qsh .gt2-cut em { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink) !important; }
#qsh .gt2-key { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 14px; font-size: 12.5px; color: var(--muted) !important; }
#qsh .gt2-key span { display: flex; align-items: center; gap: 8px; }
#qsh .k-close { width: 10px; height: 10px; transform: rotate(45deg); background: #fff !important; box-shadow: 0 0 0 2px #10b981 !important; }
#qsh .k-cut { width: 2px; height: 14px; background: #0b1b3a !important; }
@media (max-width: 960px) {
  #qsh .gt2 { padding: 18px; }
  #qsh .gt2-scale { grid-template-columns: minmax(0, 1fr); } #qsh .gt2-scale > span { display: none; }
  #qsh .gt2-r { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #qsh .gt2-scale > div span:nth-child(even) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { #qsh .gt2-b, #qsh .spb-r { animation: none !important; } }

/* ---------- cutover checklist ---------- */
#qsh .ck { display: grid; gap: 18px; padding: 26px; border-radius: 28px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.35) !important; }
#qsh .ck-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
#qsh .ck-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .ck-count b { font-size: 18px; color: var(--ink) !important; }
#qsh .ck-bar { height: 8px; border-radius: 8px; background: var(--paper) !important; box-shadow: inset 0 0 0 1px var(--line) !important; overflow: hidden; }
#qsh .ck-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3d8bf2, #10b981) !important; transition: width .3s; }
#qsh .ck-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#qsh .ck-col { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 20px; background: var(--paper) !important; }
#qsh .ck-h { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--ink) !important; }
#qsh .ck-h svg { width: 18px; height: 18px; color: var(--accent); }
#qsh .ck-i { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; border-radius: 12px; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--body) !important; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; }
#qsh .ck-i input { position: absolute; opacity: 0; pointer-events: none; }
#qsh .ck-box { width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line) !important; color: transparent; }
#qsh .ck-box svg { width: 14px; height: 14px; }
#qsh .ck-i input:checked + .ck-box { background: #10b981 !important; box-shadow: none !important; color: #fff; }
#qsh .ck-i:has(input:checked) span:last-child { color: var(--muted) !important; text-decoration: line-through; text-decoration-color: rgba(16,185,129,.6); }
@media (max-width: 960px) { #qsh .ck-g { grid-template-columns: minmax(0, 1fr); } #qsh .ck { padding: 18px; } }#qsh .spb-r > .spb-d, #qsh .spb-r > .spb-c { white-space: nowrap; }
#qsh .spb-th, #qsh .spb-r { grid-template-columns: minmax(0, 1fr) 104px 74px; }
#qsh .pt-c.ft .pt-tag { background: rgba(110,231,183,.15) !important; color: #6ee7b7 !important; }
#qsh .pt-mr { grid-template-columns: 66px auto minmax(0, 1fr); }
#qsh .pt-mr em { white-space: normal; line-height: 1.2; }
@media (max-width: 640px) { #qsh .spb-th, #qsh .spb-r { grid-template-columns: minmax(0, 1fr) 70px; } #qsh .spb-d, #qsh .spb-th span:nth-child(2) { display: none !important; } }#qsh .ck-box svg { opacity: 0; transition: opacity .15s; }
#qsh .ck-i input:checked + .ck-box svg { opacity: 1; }

/* ---------- integration map (workflow automation) ---------- */
#qsh .hm { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 28px; border-radius: 30px; background: linear-gradient(165deg, #10275a, #020c26 85%) !important; box-shadow: 0 50px 90px -50px rgba(3,38,105,.6) !important; }
#qsh .hm-stage { position: relative; aspect-ratio: 1 / 1; max-width: 520px; width: 100%; justify-self: center; }
#qsh .hm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#qsh .hm-lines line { stroke: rgba(140,196,255,.22); stroke-width: .35; stroke-dasharray: 1.4 1.2; animation: pg-dash 2.4s linear infinite; }
#qsh .hm-lines line.on { stroke: #6ee7b7; stroke-width: .6; }
@keyframes pg-dash { to { stroke-dashoffset: -10; } }
#qsh .hm-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1 / 1; border-radius: 28px; display: grid; place-content: center; text-align: center; gap: 4px; background: linear-gradient(160deg, #3d8bf2, #2563d8) !important; box-shadow: 0 20px 50px -20px rgba(61,139,242,.8) !important; }
#qsh .hm-core .an-glow { inset: -14px; border-radius: 36px; }
#qsh .hm-core b { position: relative; font-size: 18px; font-weight: 600; color: #fff !important; }
#qsh .hm-core small { position: relative; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75) !important; }
#qsh .hm-n { position: absolute; transform: translate(-50%, -50%); cursor: pointer; border: 0; display: grid; justify-items: center; gap: 6px; padding: 12px 12px 10px; min-width: 92px; border-radius: 18px; background: rgba(255,255,255,.07) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; color: #cfe5ff; font: inherit; transition: background .2s, box-shadow .2s, transform .2s; }
#qsh .hm-n svg { width: 22px; height: 22px; }
#qsh .hm-n b { font-size: 12.5px; font-weight: 600; color: #fff !important; white-space: nowrap; }
#qsh .hm-n:hover { transform: translate(-50%, -50%) scale(1.05); }
#qsh .hm-n.on { background: #fff !important; color: var(--accent); box-shadow: 0 0 0 4px rgba(110,231,183,.35) !important; }
#qsh .hm-n.on b { color: var(--ink) !important; }
#qsh .hm-p { display: none; gap: 14px; animation: pg-in .35s both; }
#qsh .hm-p.on { display: grid; }
#qsh .hm-p .k { color: #8cc4ff !important; }
#qsh .hm-p h3 { margin: 0 !important; font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; color: #fff !important; }
#qsh .hm-p ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 8px; }
#qsh .hm-p li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; }
#qsh .hm-p li svg { width: 18px; height: 18px; padding: 6px; box-sizing: content-box; border-radius: 9px; background: rgba(110,231,183,.15) !important; color: #6ee7b7; }
#qsh .hm-p li b { display: block; font-size: 14.5px; color: #fff !important; }
#qsh .hm-p li p { margin: 2px 0 0 !important; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72) !important; }
#qsh .hm-p .more { color: #8cc4ff !important; }
@media (max-width: 960px) { #qsh .hm { grid-template-columns: minmax(0, 1fr); padding: 18px; } #qsh .hm-n { min-width: 0; padding: 8px; } #qsh .hm-n b { font-size: 10.5px; } #qsh .hm-n svg { width: 18px; height: 18px; } #qsh .hm-core b { font-size: 14px; } }

/* ---------- workflow gallery ---------- */
#qsh .gl { display: grid; gap: 16px; }
#qsh .gl-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
#qsh .gl-c { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 22px; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; animation: pg-in .35s both; }
#qsh .gl-h { display: flex; justify-content: space-between; align-items: center; }
#qsh .gl-d { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .gl-c h3 { margin: 0 !important; font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--ink) !important; }
#qsh .gl-flow { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--paper) !important; }
#qsh .gl-flow small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; }
#qsh .gl-flow div + div small { color: var(--success-ink) !important; }
#qsh .gl-flow p { margin: 2px 0 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--body) !important; }
#qsh .gl-t { justify-self: start; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; background: var(--accent-100) !important; color: var(--cobalt) !important; }
/* ---------- integration pulse (hero) ---------- */
#qsh .pl-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px !important; }
#qsh .pl-k div { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; }
#qsh .pl-k b { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: #fff !important; }
#qsh .pl-k small { font-size: 11px; color: rgba(255,255,255,.55) !important; }
#qsh .pl-l { display: grid; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(2,11,36,.55) !important; }
#qsh .pl-r { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04) !important; animation: pg-in .5s both; animation-delay: calc(var(--i) * .25s); }
#qsh .pl-t { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4) !important; }
#qsh .pl-m b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #fff !important; }
#qsh .pl-m b svg { width: 13px; height: 13px; color: #8cc4ff; }
#qsh .pl-m small { font-size: 11.5px; color: rgba(255,255,255,.55) !important; }
#qsh .pl-s { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: rgba(52,211,153,.14) !important; color: #6ee7b7 !important; }
#qsh .pl-s svg { width: 13px; height: 13px; }
#qsh .pl-r.retry .pl-s { background: rgba(140,196,255,.14) !important; color: #8cc4ff !important; }
#qsh .pl-r.held { box-shadow: inset 0 0 0 1px rgba(245,158,11,.45) !important; background: rgba(245,158,11,.08) !important; }
#qsh .pl-r.held .pl-s { background: #f59e0b !important; color: #1f1300 !important; }
@media (max-width: 640px) { #qsh .pl-r { grid-template-columns: minmax(0, 1fr); gap: 4px; } #qsh .pl-t { display: none; } #qsh .pl-s { justify-self: start; } }

/* ---------- integration patterns ---------- */
#qsh .pa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
#qsh .pa-c { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 24px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -45px rgba(3,38,105,.3) !important; }
#qsh .pa-d { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; gap: 8px; padding: 14px; border-radius: 16px; background: linear-gradient(165deg, #10275a, #020c26 85%) !important; }
#qsh .pa-b { display: grid; place-items: center; height: 38px; border-radius: 10px; font-family: var(--font-mono); font-size: 11px; color: #fff !important; background: rgba(255,255,255,.1) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important; }
#qsh .pa-w { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; }
#qsh .pa-w > i { position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 7px; background: #6ee7b7 !important; animation: pg-flow 2s linear infinite; }
#qsh .pa-w > i:nth-child(2) { animation-delay: .66s; } #qsh .pa-w > i:nth-child(3) { animation-delay: 1.33s; }
@keyframes pg-flow { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 7px); opacity: 0; } }
#qsh .pa-w em { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #3d8bf2 !important; color: #fff; }
#qsh .pa-w em svg { width: 18px; height: 18px; }
#qsh .pa-w::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(140,196,255,.3) !important; }
#qsh .pa-d.file .pa-w > i, #qsh .pa-d.batch .pa-w > i { border-radius: 2px; width: 9px; height: 11px; margin-top: -5.5px; background: #fcd34d !important; animation-duration: 3.2s; }
#qsh .pa-d.event .pa-w > i { background: #f472b6 !important; animation-duration: 1.1s; }
#qsh .pa-d.api .pa-w > i:nth-child(2) { animation-direction: reverse; background: #8cc4ff !important; }
#qsh .pa-c h3 { margin: 0 !important; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink) !important; }
#qsh .pa-r small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--success-ink) !important; }
#qsh .pa-r.no small { color: #be123c !important; }
#qsh .pa-r p { margin: 3px 0 0 !important; font-size: 14px; line-height: 1.55; color: var(--body) !important; }
#qsh .pa-x { margin: 0 !important; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink) !important; background: var(--paper) !important; }

/* ---------- app triage board ---------- */
#qsh .tg2 { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 10px; }
#qsh .tg2-col { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 20px; background: var(--paper) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border-top: 4px solid var(--accent); }
#qsh .tg2-col.grey { border-top-color: #9ca3af; } #qsh .tg2-col.blue { border-top-color: #3d8bf2; } #qsh .tg2-col.indigo { border-top-color: #6366f1; } #qsh .tg2-col.green { border-top-color: #10b981; } #qsh .tg2-col.amber { border-top-color: #f59e0b; } #qsh .tg2-col.red { border-top-color: #e11d48; }
#qsh .tg2-h b { display: block; font-size: 15px; font-weight: 600; color: var(--ink) !important; }
#qsh .tg2-h small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted) !important; }
#qsh .tg2-a { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 10px 20px -16px rgba(3,38,105,.35) !important; }
#qsh .tg2-a b { font-size: 14px; color: var(--ink) !important; }
#qsh .tg2-a span { justify-self: start; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; background: var(--accent-100) !important; color: var(--cobalt) !important; }
#qsh .tg2-a p { margin: 0 !important; font-size: 12.5px; line-height: 1.5; color: var(--body) !important; }
@media (max-width: 1100px) { #qsh .tg2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { #qsh .tg2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- strangler slider ---------- */
#qsh .sg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px; border-radius: 28px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.35) !important; }
#qsh .sg-vis { display: grid; gap: 14px; }
#qsh .sg-bar { display: flex; height: 120px; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line) !important; }
#qsh .sg-old, #qsh .sg-new { display: grid; place-items: center; transition: width .45s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
#qsh .sg-old { background: repeating-linear-gradient(135deg, #e5e7eb 0 10px, #f3f4f6 10px 20px) !important; }
#qsh .sg-new { background: linear-gradient(135deg, #2563d8, #10b981) !important; }
#qsh .sg-old em, #qsh .sg-new em { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #4b5563 !important; }
#qsh .sg-new em { color: #fff !important; }
#qsh .sg input[type=range] { width: 100%; accent-color: #2563d8; }
#qsh .sg-ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted) !important; }
#qsh .sg-p { display: none; gap: 10px; animation: pg-in .35s both; } #qsh .sg-p.on { display: grid; }
#qsh .sg-p h3 { margin: 0 !important; font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; color: var(--ink) !important; }
#qsh .sg-p p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--body) !important; }
@media (max-width: 900px) { #qsh .sg { grid-template-columns: minmax(0, 1fr); padding: 18px; } #qsh .sg-bar { height: 80px; } }

/* ---------- data layers ---------- */
#qsh .ly { display: grid; gap: 0; padding: 26px; border-radius: 28px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.35) !important; }
#qsh .ly-r { display: grid; grid-template-columns: 220px minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; border-radius: 18px; }
#qsh .ly-r.l0 { background: #fff7ed !important; } #qsh .ly-r.l1 { background: #eff6ff !important; } #qsh .ly-r.l2 { background: #eef2ff !important; } #qsh .ly-r.l3 { background: linear-gradient(165deg, #1e4389, #021a4a 80%) !important; }
#qsh .ly-n { display: flex; align-items: center; gap: 12px; }
#qsh .ly-n b { font-size: 16px; font-weight: 600; color: var(--ink) !important; }
#qsh .ly-i { display: flex; flex-wrap: wrap; gap: 6px; }
#qsh .ly-i span { padding: 6px 10px; border-radius: 999px; font-size: 12.5px; background: #fff !important; color: var(--ink) !important; box-shadow: 0 0 0 1px var(--line) !important; }
#qsh .ly-r p { margin: 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--body) !important; }
#qsh .ly-r.l3 .ly-n b, #qsh .ly-r.l3 p { color: #fff !important; } #qsh .ly-r.l3 p { color: rgba(255,255,255,.75) !important; }
#qsh .ly-r.l3 .ly-i span { background: rgba(255,255,255,.1) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important; }
#qsh .ly-ar { position: relative; height: 22px; width: 2px; margin: 0 0 0 40px !important; background: var(--line) !important; overflow: hidden; }
#qsh .ly-ar i { position: absolute; left: 0; width: 100%; height: 50%; background: linear-gradient(180deg, transparent, var(--accent), transparent) !important; animation: pg-sweep-y 1.4s linear infinite; }
@media (max-width: 900px) { #qsh .ly { padding: 16px; } #qsh .ly-r { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* ---------- forecast chart (hero) ---------- */
#qsh .fc-c { padding: 14px 14px 6px; border-radius: 16px; background: rgba(2,11,36,.55) !important; }
#qsh .fc-c svg { display: block; width: 100%; height: 190px; overflow: visible; }
#qsh .fc-band { fill: rgba(140,196,255,.18); }
#qsh .fc-a { fill: none; stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#qsh .fc-f { fill: none; stroke: #6ee7b7; stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
#qsh .fc-x { display: flex; justify-content: space-between; padding-top: 6px; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.45) !important; }
#qsh .fc-key { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 2px 0; font-size: 12px; color: rgba(255,255,255,.7) !important; }
#qsh .fc-key span { display: flex; align-items: center; gap: 6px; }
#qsh .fc-key i { width: 14px; height: 3px; border-radius: 2px; } #qsh .fc-key i.a { background: #fff !important; } #qsh .fc-key i.f { background: #6ee7b7 !important; } #qsh .fc-key i.b { height: 10px; background: rgba(140,196,255,.3) !important; }
#qsh .fc-key em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45) !important; }

/* ---------- SLA matrix ---------- */
#qsh .sl { display: grid; padding: 10px 26px; border-radius: 28px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(3,38,105,.35) !important; }
#qsh .sl-h, #qsh .sl-r { display: grid; grid-template-columns: 70px minmax(0, 1.6fr) 150px 170px; gap: 16px; align-items: center; }
#qsh .sl-h { padding: 14px 0 10px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
#qsh .sl-r { padding: 16px 0; border-bottom: 1px solid var(--line); } #qsh .sl-r:last-child { border-bottom: 0; }
#qsh .sl-p { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: #fff !important; }
#qsh .sl-r.p1 .sl-p { background: #e11d48 !important; } #qsh .sl-r.p2 .sl-p { background: #f59e0b !important; } #qsh .sl-r.p3 .sl-p { background: #3d8bf2 !important; } #qsh .sl-r.p4 .sl-p { background: #9ca3af !important; }
#qsh .sl-n b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink) !important; }
#qsh .sl-n small { font-size: 13.5px; line-height: 1.5; color: var(--body) !important; }
#qsh .sl-v { font-family: var(--font-mono); font-size: 14px; color: var(--ink) !important; }
@media (max-width: 900px) { #qsh .sl { padding: 6px 16px; } #qsh .sl-h { display: none; } #qsh .sl-r { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 12px; } #qsh .sl-p { grid-row: span 3; } #qsh .sl-v { font-size: 12.5px; } #qsh .sl-v::before { color: var(--muted); } #qsh .sl-r .sl-v:nth-of-type(2)::before { content: "Response: "; } #qsh .sl-r .sl-v:nth-of-type(3)::before { content: "Fix: "; } }

/* ---------- monthly report sample ---------- */
#qsh .mo-doc { display: grid; gap: 16px; padding: 26px; border-radius: 26px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 50px 90px -50px rgba(3,38,105,.45) !important; transform: rotate(-.6deg); }
#qsh .mo-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
#qsh .mo-top b { display: block; font-size: 19px; font-weight: 600; color: var(--ink) !important; }
#qsh .mo-top small { font-size: 13px; color: var(--muted) !important; }
#qsh .mo-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#qsh .mo-k div { padding: 12px; border-radius: 14px; background: var(--paper) !important; }
#qsh .mo-k b { display: block; font-family: var(--font-mono); font-size: 20px; font-weight: 500; color: var(--ink) !important; }
#qsh .mo-k small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted) !important; }
#qsh .mo-k em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--success-ink) !important; }
#qsh .mo-b h4 { margin: 0 0 6px !important; font-size: 13px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt) !important; }
#qsh .mo-b ul { margin: 0 !important; padding-left: 18px !important; display: grid; gap: 4px; }
#qsh .mo-b li { font-size: 13.5px; line-height: 1.5; color: var(--body) !important; }
@media (max-width: 640px) { #qsh .mo-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } #qsh .mo-doc { transform: none; padding: 18px; } }
@media (prefers-reduced-motion: reduce) { #qsh .pa-w > i, #qsh .pl-r, #qsh .hm-lines line, #qsh .ly-ar i { animation: none !important; } }
/* ---------- service finder (services hub) ---------- */
#qsh .fd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
#qsh .fd-l { display: grid; gap: 8px; align-content: start; }
#qsh .fd-b { cursor: pointer; border: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 16px; font: 500 15.5px/1.4 inherit; color: var(--ink) !important; background: #fff !important; box-shadow: 0 0 0 1px var(--line) !important; transition: box-shadow .2s, transform .2s; }
#qsh .fd-b svg { width: 20px; height: 20px; padding: 8px; box-sizing: content-box; border-radius: 11px; background: var(--accent-100) !important; color: var(--accent); }
#qsh .fd-b:hover { transform: translateX(3px); }
#qsh .fd-b.on { box-shadow: 0 0 0 2px var(--accent), 0 18px 40px -26px rgba(11,27,58,.35) !important; }
#qsh .fd-r { position: sticky; top: 110px; padding: 32px; border-radius: 28px; background: linear-gradient(165deg, #1e4389, #021a4a 80%) !important; }
#qsh .fd-p { display: none; gap: 14px; animation: pg-in .35s both; } #qsh .fd-p.on { display: grid; }
#qsh .fd-p .k { color: #8cc4ff !important; }
#qsh .fd-p h3 { margin: 0 !important; font-size: 30px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; color: #fff !important; }
#qsh .fd-p > p { margin: 0 !important; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.8) !important; }
#qsh .fd-f { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important; }
#qsh .fd-f small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7 !important; }
#qsh .fd-f p { margin: 4px 0 0 !important; font-size: 14.5px; line-height: 1.55; color: #fff !important; }
#qsh .fd-p .btn { justify-self: start; }
@media (max-width: 900px) { #qsh .fd { grid-template-columns: minmax(0, 1fr); } #qsh .fd-r { padding: 22px; } #qsh .fd-p h3 { font-size: 24px; } }@media (max-width: 900px) { #qsh .fd-r { position: static; } }
#qsh .cl[data-roi] .cl-inputs { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 26px; }
#qsh .cl[data-cei] .cl-inputs { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px; }
#qsh .pt-c.ft .pt-ic svg { color: #6ee7b7 !important; stroke: #6ee7b7 !important; }

/* SEO pass (2026-10-23): the keyword H1 sits in the kicker slot and must look exactly like the kicker it replaced. */
#qsh h1.k, #qsh h1.pg-hf2-k { margin: 0 !important; line-height: 1.5; text-wrap: pretty; }
#qsh h1.k { font-size: 11.5px; font-weight: 500; }
#qsh .pg-hero-t h1.k + .pg-h1 { margin-top: 0 !important; }
#qsh .pg-ind-cta h1.k { color: #8cc4ff !important; }
#qsh h1.pg-hf2-k { font-size: 12.5px; font-weight: 500; }
/* related pages */
#qsh .pg-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 28px !important; }
#qsh .pg-rel a { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px 52px 20px 22px; border-radius: 18px; text-decoration: none; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 16px 32px -24px rgba(3, 38, 105, .35) !important; transition: transform .2s ease, box-shadow .2s ease; }
#qsh .pg-rel a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent-300), 0 22px 40px -24px rgba(37, 99, 216, .45) !important; }
#qsh .pg-rel b { font-size: 16px; font-weight: 600; color: var(--ink) !important; }
#qsh .pg-rel span { font-size: 13.5px; line-height: 1.5; color: var(--body) !important; }
#qsh .pg-rel svg { position: absolute; right: 20px; top: 22px; width: 18px; height: 18px; color: var(--accent) !important; }
#qsh .pg-src-d { margin: 4px 0 10px !important; font-size: 12.5px; color: var(--muted) !important; }
/* Platform pages: the platform's logo above the heading (2026-10-27, user: "the Claude page doesn't have the Claude logo") */
#qsh .pg-plogo { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 16px; background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 12px 28px -18px rgba(11, 27, 58, .35) !important; }
#qsh .pg-plogo img { display: block; height: 44px; width: auto; max-width: 240px; object-fit: contain; }
#qsh .pg-plogo.named { gap: 12px; padding: 10px 20px 10px 14px; }
#qsh .pg-plogo.named img { height: 36px; }
#qsh .pg-plogo b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink) !important; white-space: nowrap; }
@media (max-width: 640px) { #qsh .pg-plogo img { height: 32px; } }