/* ============================================================
   Q-DASH Story design system — shared by About and long-form guides.
   Same visual identity as /digital-business-card-qatar: dark aurora hero,
   orange/teal/violet accents, rounded cards, reveal-on-scroll motion.
   ============================================================ */
@property --qs-p { syntax: '<number>'; inherits: false; initial-value: 0; }

.qs { --ink:#0B1F33; --muted:#566779; --line:#E6EBF1; --soft:#F6F8FB; --accent:#E05C2A; --accent2:#F6A15A;
      --teal:#E05C2A; --violet:#0B1F33; --gold:#E05C2A; --ok:#E05C2A;
      color:var(--ink); line-height:1.9; background:#fff; overflow-x:clip; }
.qs * { box-sizing:border-box; }
.qs-wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
.qs-sec { padding:84px 0; position:relative; }
.qs-sec.alt { background:var(--soft); }
.qs h1 { font-size:clamp(30px,4.6vw,52px); line-height:1.25; font-weight:900; margin:0 0 18px; }
.qs h2 { font-size:clamp(24px,3.2vw,36px); line-height:1.4; font-weight:900; margin:0 0 14px; }
.qs h3 { font-size:19px; font-weight:800; margin:0 0 8px; line-height:1.5; }
.qs p { margin:0 0 14px; color:var(--muted); font-size:17px; }
.qs-num { direction:ltr; unicode-bidi:isolate; font-family:'Montserrat','Segoe UI',Arial,sans-serif; }
.qs-eyebrow { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; letter-spacing:.03em; color:var(--accent); background:rgba(224,92,42,.09); padding:6px 14px; border-radius:999px; margin-bottom:14px; }
.qs-head { max-width:780px; margin:0 auto 40px; text-align:center; }
.qs-head p { font-size:17.5px; }
.qs-grad { color:var(--accent); }

/* Reading progress (guides) */
.qs-progress { position:fixed; top:0; inset-inline:0; height:4px; z-index:10050; background:transparent; pointer-events:none; }
.qs-progress i { display:block; height:100%; width:0; background:var(--accent); }

/* Hero */
.qs-hero { position:relative; color:#fff; padding:110px 0 96px; background:#081726; overflow:hidden; isolation:isolate; }
.qs-hero:before { content:""; position:absolute; inset:-10%; z-index:-2; background:
  radial-gradient(680px 420px at 12% 18%,rgba(224,92,42,.14),transparent 60%),
  radial-gradient(760px 480px at 88% 8%,rgba(224,92,42,.30),transparent 60%),
  radial-gradient(620px 420px at 55% 115%,rgba(31,74,120,.45),transparent 60%);
  animation:qsAurora 16s ease-in-out infinite alternate; }
.qs-hero:after { content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); }
@keyframes qsAurora { 0%{transform:scale(1) translate(0,0)} 100%{transform:scale(1.12) translate(-2%,3%)} }
.qs-hero p { color:#C7D5E3; }
.qs-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; }
.qs-badge { display:inline-flex; gap:8px; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:7px 15px; border-radius:999px; font-size:14px; margin-bottom:20px; backdrop-filter:blur(6px); }
.qs-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:qsPulse 2s infinite; }
@keyframes qsPulse { 0%{box-shadow:0 0 0 0 rgba(224,92,42,.6)} 70%{box-shadow:0 0 0 10px rgba(224,92,42,0)} 100%{box-shadow:0 0 0 0 rgba(224,92,42,0)} }
.qs-lead { font-size:18.5px!important; max-width:640px; }
.qs-meta { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; color:#9FB3C8; font-size:14.5px; }
.qs-meta span { display:inline-flex; align-items:center; gap:7px; }
.qs-meta i { color:var(--accent); }
.qs-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.qs-btn { display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:14px; font-weight:800; text-decoration:none; font-size:16px; transition:transform .2s,box-shadow .2s; cursor:pointer; border:0; font-family:inherit; }
.qs-btn:hover { transform:translateY(-3px); }
.qs-btn.pri { background:linear-gradient(135deg,var(--accent),#F07B3F); color:#fff; box-shadow:0 12px 30px rgba(224,92,42,.35); }
.qs-btn.sec { background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.28); }
.qs-btn.ghost { background:#fff; color:var(--accent); border:1.5px solid var(--accent); }

/* Hero visual: floating glass panel with animated bars/rows */
.qs-visual { position:relative; justify-self:center; width:100%; max-width:420px; }
.qs-glass { position:relative; background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.16); border-radius:26px; padding:24px; backdrop-filter:blur(10px); box-shadow:0 40px 90px rgba(0,0,0,.45); animation:qsFloat 6s ease-in-out infinite; }
@keyframes qsFloat { 0%,100%{translate:0 0} 50%{translate:0 -12px} }
.qs-glass h4 { margin:0 0 14px; font-size:15px; color:#fff; display:flex; justify-content:space-between; align-items:center; }
.qs-glass h4 small { font-size:11.5px; color:#9FB3C8; font-weight:600; background:rgba(255,255,255,.08); padding:3px 10px; border-radius:999px; }
.qs-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05); margin-bottom:9px; color:#E2EAF2; font-size:14px; }
.qs-row i { width:30px; height:30px; flex:0 0 30px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:13px; }
.qs-row .bar { flex:1; height:7px; border-radius:7px; background:rgba(255,255,255,.08); overflow:hidden; }
.qs-row .bar b { display:block; height:100%; width:0; border-radius:7px; transition:width 1.4s cubic-bezier(.2,.8,.2,1); }
.qs-hero.in .qs-row .bar b, .qs-visual.in .qs-row .bar b { width:var(--w); }
.qs-chip { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; background:#fff; color:var(--ink); border-radius:16px; padding:10px 14px; font-size:13.5px; font-weight:800; box-shadow:0 18px 40px rgba(0,0,0,.28); white-space:nowrap; }
.qs-chip i { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:14px; }
.qs-chip small { display:block; font-weight:600; color:var(--muted); font-size:11.5px; }
.qs-chip.c1 { top:-22px; inset-inline-end:-26px; animation:qsBob 5s ease-in-out infinite; }
.qs-chip.c2 { bottom:-24px; inset-inline-start:-30px; animation:qsBob 6s ease-in-out .8s infinite; }
@keyframes qsBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Stats strip */
.qs-stats { margin-top:-48px; position:relative; z-index:5; }
.qs-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; background:#fff; border-radius:22px; padding:22px; box-shadow:0 24px 60px rgba(11,31,51,.12); border:1px solid var(--line); }
.qs-stat { text-align:center; padding:8px; border-inline-end:1px solid var(--line); }
.qs-stat:last-child { border-inline-end:0; }
.qs-stat strong { display:block; font-size:42px; font-weight:900; line-height:1.1; }
.qs-stat strong{color:var(--accent)}
.qs-stat span { color:var(--muted); font-size:14.5px; font-weight:600; }

/* Answer / takeaways (search hooks) */
.qs-answer { position:relative; border-radius:22px; padding:26px 28px; background:linear-gradient(135deg,#FFF4EE,#FFFFFF 60%); border:1px solid #FBD9C8; box-shadow:0 18px 40px rgba(224,92,42,.08); }
.qs-answer .tag { display:inline-flex; align-items:center; gap:8px; font-weight:900; color:var(--accent); font-size:14px; margin-bottom:8px; }
.qs-answer p { color:var(--ink); margin:0; font-size:17.5px; }
.qs-take { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.qs-take div { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; }
.qs-take i { flex:0 0 34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; font-size:14px; }
.qs-take p { margin:0; font-size:15px; color:var(--ink); }

/* Guide layout: sticky TOC + article */
.qs-layout { display:grid; grid-template-columns:270px 1fr; gap:40px; align-items:start; }
.qs-toc { position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:0 14px 34px rgba(11,31,51,.06); }
.qs-toc b { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:15px; }
.qs-toc ol { list-style:none; margin:0; padding:0; counter-reset:t; }
.qs-toc li { counter-increment:t; }
.qs-toc a { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:12px; color:var(--muted); text-decoration:none; font-size:14.5px; line-height:1.6; transition:background .2s,color .2s; }
.qs-toc a:before { content:counter(t); flex:0 0 22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:800; background:var(--soft); color:var(--ink); font-family:'Montserrat',sans-serif; }
.qs-toc a:hover { background:var(--soft); color:var(--ink); }
.qs-toc a.on { background:rgba(224,92,42,.09); color:var(--accent); font-weight:800; }
.qs-toc a.on:before { background:var(--accent); color:#fff; }
.qs-toc .qs-btn { width:100%; justify-content:center; margin-top:12px; padding:12px; font-size:14.5px; }
.qs-article > section { scroll-margin-top:96px; margin-bottom:56px; }
.qs-sec-h { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.qs-sec-h .ic { flex:0 0 52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; font-size:21px; box-shadow:0 10px 22px rgba(11,31,51,.14); }
.qs-sec-h h2 { margin:0; }

/* Criteria cards */
.qs-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:16px; }
.qs-card { --cc:#E05C2A; position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 20px 18px; overflow:hidden; transition:transform .25s,box-shadow .25s; }
.qs-card:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(11,31,51,.09); }
.qs-card:before { content:""; position:absolute; top:0; inset-inline-start:0; width:5px; height:100%; background:var(--cc); }
.qs-card .n { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:color-mix(in srgb,var(--cc) 14%,#fff); color:var(--cc); font-weight:900; font-family:'Montserrat',sans-serif; margin-bottom:8px; }
.qs-card h3 { font-size:17px; }
.qs-card p { font-size:15px; margin:0; }

/* Lists, table, callouts */
.qs ul.qs-list { margin:12px 0 16px; padding:0; list-style:none; display:grid; gap:10px; }
.qs ul.qs-list li { position:relative; padding:12px 16px; padding-inline-start:48px; background:#fff; border:1px solid var(--line); border-radius:14px; color:var(--ink); font-size:16px; }
.qs ul.qs-list li:before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset-inline-start:14px; top:13px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; color:#fff; background:var(--lc,var(--ok)); }
.qs ul.qs-list.warn li:before { content:"\f071"; background:var(--ink); }
.qs ul.qs-list.ask li:before { content:"?"; font-family:'Montserrat',sans-serif; background:var(--accent); }
.qs-table { overflow-x:auto; border:1px solid var(--line); border-radius:18px; margin:16px 0; background:#fff; }
.qs table { width:100%; border-collapse:collapse; min-width:600px; }
.qs th,.qs td { padding:14px 16px; text-align:start; vertical-align:top; border-bottom:1px solid var(--line); font-size:15.5px; }
.qs th { background:var(--ink); color:#fff; font-weight:800; }
.qs th:nth-child(2) { background:linear-gradient(135deg,var(--accent),#F07B3F); }
.qs th:nth-child(3) { background:#1B3550; }
.qs td:first-child { font-weight:800; white-space:nowrap; }
.qs tr:hover td { background:#FBFCFE; }
.qs-callout { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; background:linear-gradient(135deg,#0B1F33,#173A5C); color:#fff; border-radius:20px; padding:20px 24px; margin:22px 0; }
.qs-callout p { margin:0; color:#fff; font-weight:700; font-size:16.5px; }
.qs-callout .qs-btn { padding:12px 20px; font-size:15px; }
.qs-sub { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px; }
.qs-sub div { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; border-top:4px solid var(--sc,#14B8A6); }
.qs-sub h3 { font-size:16.5px; }
.qs-sub p { font-size:15px; margin:0; }

/* Interactive tools */
.qs-tool { background:linear-gradient(160deg,#0B1F33,#13324F); color:#fff; border-radius:26px; padding:30px; position:relative; overflow:hidden; }
.qs-tool:after { content:""; position:absolute; width:320px; height:320px; inset-inline-end:-140px; top:-140px; background:radial-gradient(circle,rgba(224,92,42,.35),transparent 65%); pointer-events:none; }
.qs-tool h2 { color:#fff; }
.qs-tool p { color:#C7D5E3; }
.qs-tool-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:22px; align-items:start; position:relative; z-index:1; }
.qs-checks { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.qs-check { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:13px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); cursor:pointer; font-size:14.5px; transition:background .2s,border-color .2s; user-select:none; }
.qs-check input { position:absolute; opacity:0; pointer-events:none; }
.qs-check .box { flex:0 0 22px; height:22px; border-radius:7px; border:2px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:11px; color:transparent; transition:all .2s; }
.qs-check:has(input:checked) { background:rgba(224,92,42,.16); border-color:rgba(224,92,42,.6); }
.qs-check:has(input:checked) .box { background:var(--accent); border-color:var(--accent); color:#fff; }
.qs-check:has(input:focus-visible) { outline:2px solid var(--accent2); outline-offset:2px; }
.qs-score { position:sticky; top:96px; text-align:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:22px; }
.qs-gauge { --qs-p:0; width:150px; height:150px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--accent) calc(var(--qs-p)*1%),rgba(255,255,255,.1) 0); transition:--qs-p .6s ease; }
.qs-gauge b { width:118px; height:118px; border-radius:50%; background:#0F2740; display:grid; place-items:center; font-size:30px; font-family:'Montserrat',sans-serif; }
.qs-score h3 { color:#fff; margin-bottom:6px; }
.qs-score p { font-size:14.5px; margin:0 0 12px; }
.qs-quiz-q { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:16px; margin-bottom:12px; }
.qs-quiz-q b { display:block; margin-bottom:10px; font-size:15.5px; }
.qs-quiz-o { display:flex; flex-wrap:wrap; gap:8px; }
.qs-quiz-o button { padding:9px 14px; border-radius:11px; border:1.5px solid rgba(255,255,255,.22); background:transparent; color:#E2EAF2; font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; }
.qs-quiz-o button:hover { border-color:rgba(255,255,255,.55); }
.qs-quiz-o button[aria-pressed=true] { background:#fff; color:var(--ink); border-color:#fff; }
.qs-result { text-align:center; }
.qs-result .big { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:900; padding:12px 18px; border-radius:16px; background:rgba(255,255,255,.08); margin:6px 0 10px; }
.qs-result .meter { display:flex; height:12px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.08); margin:12px 0 6px; }
.qs-result .meter i { display:block; height:100%; transition:width .6s ease; }
.qs-result .legend { display:flex; justify-content:space-between; font-size:12.5px; color:#9FB3C8; }

/* FAQ + final CTA + related */
.qs details { background:#fff; border:1px solid var(--line); border-radius:16px; padding:4px 22px; margin-bottom:12px; transition:box-shadow .2s; }
.qs details[open] { box-shadow:0 14px 30px rgba(11,31,51,.07); border-color:transparent; }
.qs summary { cursor:pointer; font-weight:800; padding:16px 0; font-size:17px; list-style:none; }
.qs summary::-webkit-details-marker { display:none; }
.qs summary:after { content:"+"; float:inline-end; color:var(--accent); font-size:24px; line-height:1; transition:transform .2s; }
.qs details[open] summary:after { transform:rotate(45deg); }
.qs-final { position:relative; overflow:hidden; border-radius:30px; padding:56px 40px; text-align:center; color:#fff; background:linear-gradient(135deg,#E05C2A,#B23A12 45%,#0B1F33); }
.qs-final:before { content:""; position:absolute; inset:-40%; background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.12),transparent 30%); animation:qsSpin 12s linear infinite; }
@keyframes qsSpin { to{transform:rotate(360deg)} }
.qs-final > * { position:relative; }
.qs-final h2 { color:#fff; }
.qs-final p { color:#FFE6DA; max-width:640px; margin:0 auto 10px; }
.qs-final .qs-cta { justify-content:center; }
.qs-final .qs-btn.pri { background:#fff; color:var(--accent); }
.qs-related { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; justify-content:center; }
.qs-related a { border:1px solid var(--line); border-radius:999px; padding:9px 18px; text-decoration:none; color:var(--ink); font-weight:700; font-size:14.5px; background:#fff; transition:all .2s; }
.qs-related a:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* About-specific blocks */
.qs-split { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.qs-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.qs-fact { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; font-weight:700; transition:transform .2s; }
.qs-fact:hover { transform:translateY(-3px); }
.qs-fact i { flex:0 0 40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; }
.qs-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.qs-tile { --tc:#E05C2A; position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px; overflow:hidden; transition:transform .25s,box-shadow .25s; }
.qs-tile:before { content:""; position:absolute; inset:auto -40px -60px auto; width:150px; height:150px; border-radius:50%; background:var(--tc); opacity:.08; transition:transform .4s; }
.qs-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(11,31,51,.1); }
.qs-tile:hover:before { transform:scale(1.6); }
.qs-tile .ic { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:21px; color:#fff; background:var(--tc); margin-bottom:14px; }
.qs-tile p { font-size:15.5px; margin:0; }
.qs-tile.dark { background:linear-gradient(135deg,#0B1F33,#173A5C); color:#fff; border:0; }
.qs-tile.dark p { color:#C7D5E3; }
.qs-svc { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.qs-svc a { display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink); font-weight:700; font-size:15px; transition:transform .2s,box-shadow .2s,border-color .2s; }
.qs-svc a:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,31,51,.08); border-color:transparent; }
.qs-svc i { flex:0 0 42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:17px; }
.qs-inds { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.qs-inds span { display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:700; font-size:14.5px; box-shadow:0 6px 16px rgba(11,31,51,.05); transition:transform .2s; }
.qs-inds span:hover { transform:translateY(-2px); }
.qs-inds i { color:var(--accent); }
.qs-journey { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
.qs-journey:before { content:""; position:absolute; top:28px; inset-inline:8%; height:4px; border-radius:4px; background:var(--accent); opacity:.25; }
.qs-journey div { position:relative; text-align:center; }
.qs-journey .n { position:relative; z-index:1; width:58px; height:58px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:20px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 0 0 8px #fff,0 12px 26px rgba(224,92,42,.3); }
.qs-journey p { font-size:15px; }

/* Reveal */
.rv { opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease; }
.rv.in { opacity:1; transform:none; }
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s} .rv.d3{transition-delay:.24s}

@media (max-width:1020px) {
  .qs-layout { grid-template-columns:1fr; }
  .qs-toc { position:static; }
  .qs-svc { grid-template-columns:repeat(2,1fr); }
  .qs-take { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .qs-hero-grid,.qs-split,.qs-tool-grid { grid-template-columns:1fr; }
  .qs-visual { max-width:380px; }
  .qs-stats-grid { grid-template-columns:repeat(2,1fr); }
  .qs-stat:nth-child(2) { border-inline-end:0; }
  .qs-tiles,.qs-sub { grid-template-columns:1fr 1fr; }
  .qs-journey { grid-template-columns:repeat(2,1fr); row-gap:26px; }
  .qs-journey:before { display:none; }
  .qs-score { position:static; }
}
@media (max-width:560px) {
  .qs-sec { padding:60px 0; }
  .qs-hero { padding:86px 0 84px; }
  .qs-chip { display:none; }
  .qs-cards,.qs-tiles,.qs-sub,.qs-checks,.qs-facts { grid-template-columns:1fr; }
  .qs-svc { grid-template-columns:1fr; }
  .qs-stat strong { font-size:32px; }
  .qs-tool { padding:22px 16px; }
  .qs-final { padding:40px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  .qs *,.qs *:before,.qs *:after { animation:none!important; transition:none!important; }
  .rv { opacity:1; transform:none; }
}

/* Brand colour discipline: one accent (orange) + navy. Per-item colours passed inline are neutralised. */
.qs .qs-card { --cc:#E05C2A !important; }
.qs .qs-tile { --tc:#E05C2A !important; }
.qs .qs-sub div { --sc:#E05C2A !important; }
.qs .qs-sec-h .ic, .qs .qs-take i, .qs .qs-row i, .qs .qs-chip i, .qs .qs-fact i { background:var(--accent) !important; }
.qs .qs-row .bar b { background:var(--accent) !important; }
.qs .qs-svc i { background:rgba(224,92,42,.1) !important; color:var(--accent) !important; }
.qs .qs-tool .qs-eyebrow { color:#FFB08A !important; }
.qs .qs-result .meter .ma { background:var(--accent) !important; }
.qs .qs-result .meter .mb { background:#5B7896 !important; }
.qs .qs-result .big i { color:var(--accent) !important; }