/* ============================================================
   QUBI 360 — HOMEPAGE  v4
   Seven blocks. One accent. Everything else is space.
   ============================================================ */
:root{
  --blue:#168FF2; --blue-600:#0F76CE; --blue-050:#EDF5FE;
  --navy:#162538; --green:#4CCB3B; --orange:#FF8A16;
  --bg:#F7F9FC; --line:#E7ECF3; --muted:#5D6E85; --muted-2:#93A2B4;
  --max:1120px; --gut:32px;
  --ease:cubic-bezier(.22,.68,.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--navy);font-family:'Inter',-apple-system,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Manrope',sans-serif;margin:0;letter-spacing:-.032em;line-height:1.14;font-weight:700}
p{margin:0} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%} button{font-family:inherit;cursor:pointer}
::selection{background:var(--navy);color:#fff}

.q-wrap{width:min(var(--max),calc(100% - 2*var(--gut)));margin-inline:auto}
.q-sec{padding:132px 0}
.q-sec--tint{background:var(--bg)}
.q-sec--ink{background:var(--navy);color:#fff}

.q-label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.q-sec--ink .q-label{color:#8298B1}

/* one heading, one line of support, nothing else */
.q-head{max-width:620px;margin-bottom:72px}
.q-head h2{font-size:clamp(1.9rem,3.1vw,2.6rem);margin:18px 0 18px}
.q-head p{color:var(--muted);font-size:1.05rem}
.q-sec--ink .q-head h2{color:#fff}
.q-sec--ink .q-head p{color:#9BAEC5}

.q-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;
  font-size:.94rem;line-height:1;padding:15px 26px;border-radius:10px;border:1px solid transparent;
  transition:.22s var(--ease);white-space:nowrap}
.q-btn--primary{background:var(--blue);color:#fff}
.q-btn--primary:hover{background:var(--blue-600);transform:translateY(-1px)}
.q-btn--ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.q-btn--ghost:hover{border-color:#C9D6E5}
.q-btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.q-btn--line:hover{border-color:#fff}
.q-btn--sm{padding:11px 18px;font-size:.875rem}
.q-arrow{width:14px;height:14px;transition:transform .25s var(--ease)}
.q-btn:hover .q-arrow,.q-more:hover .q-arrow{transform:translateX(4px)}
.q-more{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.93rem;color:var(--blue)}

/* ---------------- header ---------------- */
.q-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s}
.q-header.q-stuck{border-bottom-color:var(--line)}
.q-nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:28px}
.q-brand{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.q-brand img{height:32px;width:auto;max-width:none;flex:none}
.q-menu ul{display:flex;align-items:center;gap:4px}
.q-menu a{display:block;padding:9px 15px;font-size:.92rem;font-weight:500;color:var(--muted);
  border-radius:8px;transition:.18s}
.q-menu a:hover{color:var(--navy)}
.q-menu .q-current a{color:var(--navy);font-weight:600}
.q-menu-signin{display:none}
.q-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.q-burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;
  border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.q-burger i{width:16px;height:1.5px;background:var(--navy)}

/* ---------------- hero ---------------- */
.q-hero{padding:96px 0 108px}
.q-hero__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.q-hero h1{font-size:clamp(2.8rem,5.2vw,4.3rem);font-weight:700;letter-spacing:-.045em;
  line-height:1.04;margin:24px 0 0}
.q-hero h1 span{display:block}
.q-hero h1 em{font-style:normal;color:var(--blue)}
.q-hero__sub{max-width:44ch;margin-top:26px;font-size:1.1rem;color:var(--muted)}
.q-hero__cta{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}
.q-hero__trust{margin-top:64px;padding-top:26px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted-2);max-width:44ch;line-height:1.7}
.q-hero__trust b{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}

/* the dial */
.q-dial{position:relative;width:100%;aspect-ratio:860/540}
.q-dial svg{width:100%;height:100%;overflow:visible}
.q-face{fill:transparent;stroke:#D3DEEA;stroke-width:1.2;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.q-face.q-on{fill:var(--c);stroke:var(--c)}
.q-leader{stroke:#DDE5EE;stroke-width:1;fill:none;transition:stroke .45s var(--ease)}
.q-leader.q-on{stroke:var(--c);stroke-width:1.6}
.q-cube-t{fill:#fff;stroke:#CBD8E6;stroke-width:1.1}
.q-cube-l{fill:#EFF3F8;stroke:#CBD8E6;stroke-width:1.1}
.q-cube-r{fill:#F9FBFC;stroke:#CBD8E6;stroke-width:1.1}
.q-dial__cap{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;fill:var(--navy)}
.q-pin{position:absolute;transform:translateY(-50%);font-family:'Manrope';font-weight:700;
  font-size:.95rem;letter-spacing:-.015em;color:#A6B3C2;white-space:nowrap;
  transition:color .35s var(--ease);cursor:default}
.q-pin.q-on{color:var(--navy)}
.q-pin--l{text-align:right}

/* ---------------- modules ---------------- */
.q-modules{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start}
.q-mrail{border-top:1px solid var(--line)}
.q-mrail button{position:relative;display:grid;grid-template-columns:22px 1fr auto;gap:15px;
  align-items:center;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:19px 14px 19px 0;
  transition:background .25s var(--ease),padding .25s var(--ease)}
.q-mrail button::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:0;
  background:var(--c);transition:width .28s var(--ease)}
.q-mrail button:hover b{color:var(--navy)}
.q-mrail button.q-on{background:#fff;padding-left:14px}
.q-mrail button.q-on::before{width:2px}
.q-mrail svg{width:21px;height:21px;stroke:var(--c);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.q-mrail b{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;color:#8C9AAC;
  letter-spacing:-.022em;transition:color .25s var(--ease)}
.q-mrail button.q-on b{color:var(--navy)}
.q-mrail em{font-style:normal;font-size:.74rem;color:var(--muted-2);font-variant-numeric:tabular-nums}

.q-mpanel{display:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:40px;
  box-shadow:0 1px 2px rgba(22,37,56,.04);min-height:392px}
.q-mpanel.q-on{display:block;animation:qm .45s var(--ease)}
@keyframes qm{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-mpanel__top{display:flex;align-items:center;gap:14px}
.q-mpanel__top i{width:9px;height:9px;background:var(--c);flex:none}
.q-mpanel h3{font-size:1.5rem;letter-spacing:-.032em}
.q-mpanel>p{color:var(--muted);font-size:1rem;margin-top:16px;max-width:48ch}
.q-mlist{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:32px;padding-top:28px;
  border-top:1px solid var(--line)}
.q-mlist--b{grid-template-columns:1fr;gap:15px}
.q-mlist--b li{align-items:flex-start;color:var(--muted)}
.q-mlist--b svg{width:15px;height:15px;stroke:var(--c);stroke-width:2.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px}
.q-mcount{margin-top:22px;font-size:.8rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.q-mlist li{display:flex;align-items:center;gap:11px;font-size:.92rem;color:var(--navy)}
.q-mlist i{width:6px;height:6px;background:var(--c);flex:none}
.q-mpanel__foot{margin-top:34px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.q-mpanel__foot span{font-size:.82rem;color:var(--muted-2)}

/* ---------------- all-modules index ---------------- */
.q-perm{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:56px}
.q-perm div{padding:0 30px;border-left:1px solid var(--line)}
.q-perm div:first-child{padding-left:0;border-left:0}
.q-perm b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.02em;margin-bottom:8px}
.q-perm b::before{content:"";display:inline-block;width:7px;height:7px;background:var(--blue);
  margin-right:10px;vertical-align:middle}
.q-perm span{font-size:.87rem;color:var(--muted);line-height:1.58}

.q-index{border-top:1px solid var(--line)}
.q-igroup{display:grid;grid-template-columns:216px 1fr;gap:44px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line)}
.q-igroup__h{display:flex;align-items:center;gap:12px;padding-top:6px}
.q-igroup__h i{width:8px;height:8px;background:var(--c);flex:none}
.q-igroup__h h3{font-size:1rem;letter-spacing:-.024em}
.q-igroup__h em{font-style:normal;margin-left:auto;font-size:.78rem;color:var(--muted-2);
  font-variant-numeric:tabular-nums}
.q-tags{display:flex;flex-wrap:wrap;gap:9px}
.q-tag{font-size:.87rem;color:var(--muted);background:#fff;border:1px solid var(--line);
  padding:8px 14px;border-radius:9px;white-space:nowrap;
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.q-tag:hover{border-color:var(--c);color:var(--navy);transform:translateY(-1px)}
.q-index__foot{margin-top:32px;font-size:.85rem;color:var(--muted-2);max-width:70ch}

/* ---------------- thread ---------------- */
.q-thread{display:grid;grid-template-columns:repeat(6,1fr)}
.q-thread__i{position:relative;padding:46px 24px 0 0}
.q-thread__i::before{content:"";position:absolute;top:9px;left:0;width:100%;height:1px;background:var(--line)}
.q-thread__i::after{content:"";position:absolute;top:9px;left:0;width:100%;height:1px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease)}
.q-thread.q-in .q-thread__i::after{transform:scaleX(1)}
.q-thread.q-in .q-thread__i:nth-child(2)::after{transition-delay:.2s}
.q-thread.q-in .q-thread__i:nth-child(3)::after{transition-delay:.4s}
.q-thread.q-in .q-thread__i:nth-child(4)::after{transition-delay:.6s}
.q-thread.q-in .q-thread__i:nth-child(5)::after{transition-delay:.8s}
.q-thread.q-in .q-thread__i:nth-child(6)::after{transition-delay:1s}
.q-node{position:absolute;top:3px;left:0;width:13px;height:13px;border-radius:50%;background:#fff;
  border:1.5px solid var(--line);z-index:2;transition:border-color .4s var(--ease) .35s}
.q-thread.q-in .q-node{border-color:var(--c)}
.q-thread__i h4{font-size:1rem;letter-spacing:-.022em}
.q-thread__i p{font-size:.85rem;color:var(--muted);margin-top:7px;line-height:1.55}

/* ---------------- proof ---------------- */
.q-proof{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center;--c:#168FF2}
.q-proof h2{font-size:clamp(1.8rem,2.9vw,2.4rem);margin:18px 0 20px}
.q-proof>div>p{color:var(--muted);font-size:1.04rem;max-width:46ch}
.q-checks{margin-top:34px}
.q-checks li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);
  font-size:.94rem;color:var(--muted)}
.q-checks li:last-child{border-bottom:1px solid var(--line)}
.q-checks b{color:var(--navy);font-weight:600}
.q-checks svg{width:15px;height:15px;stroke:var(--blue);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px}
.q-panel{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 40px 80px -56px rgba(22,37,56,.5)}
.q-panel__bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line)}
.q-panel__bar i{width:7px;height:7px;border-radius:50%;background:#E1E8F0}
.q-panel__bar span{margin-left:10px;font-size:.74rem;color:var(--muted-2)}
.q-panel__body{padding:26px}
.q-panel__h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.q-panel__h b{font-family:'Manrope';font-size:.92rem}
.q-panel__h span{font-size:.78rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.q-line{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.q-line:last-child{margin-bottom:0}
.q-line__k{font-size:.84rem;color:var(--muted);width:104px;flex:none}
.q-line__b{flex:1;height:5px;border-radius:4px;background:#EEF2F7;overflow:hidden}
.q-line__b i{display:block;height:100%;border-radius:4px;background:var(--blue)}
.q-line__v{font-size:.78rem;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;
  min-width:44px;text-align:right}

.q-is-green{background:var(--green) !important}
.q-handoff{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--line)}
.q-hchip{font-size:.8rem;font-weight:600;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);padding:7px 13px;border-radius:8px}
.q-hchip--on{color:var(--blue);background:var(--blue-050);border-color:#CFE5FB}
.q-harrow{width:15px;height:15px;color:#C3CEDB;flex:none}
.q-hnote{font-size:.78rem;color:var(--muted-2)}
.q-panel__cap{margin-top:14px;font-size:.75rem;color:var(--muted-2);text-align:right}

/* ---------------- testimonials ---------------- */
.q-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.q-tcard{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 32px 30px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(22,37,56,.04);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.q-tcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.q-tcard:hover{transform:translateY(-3px);border-color:#D8E2EE;box-shadow:0 18px 40px -26px rgba(22,37,56,.45)}
.q-tcard:hover::before{transform:scaleX(1)}
.q-tcard__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.q-tcard__co{font-family:'Manrope',sans-serif;font-weight:700;font-size:.9rem;color:#A6B3C2;letter-spacing:-.02em}
.q-tcard__mk{font-family:'Manrope',sans-serif;font-weight:700;font-size:2.4rem;line-height:.7;
  color:var(--c);opacity:.28;user-select:none}
.q-tcard blockquote{margin:0;font-size:1.02rem;line-height:1.66;color:var(--navy);flex:1}
.q-tcard figcaption{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:13px;font-size:.83rem;color:var(--muted)}
.q-tav{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:'Manrope',sans-serif;font-weight:700;font-size:.85rem;
  color:var(--c);background:color-mix(in srgb,var(--c) 11%,#fff)}
.q-tcard figcaption b{display:block;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:.95rem;color:var(--navy);letter-spacing:-.015em}
.q-tbar{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;padding-top:36px;
  border-top:1px solid var(--line)}
.q-tbar div{padding-right:32px}
.q-tbar b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.7rem;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.q-tbar span{display:block;margin-top:10px;font-size:.85rem;color:var(--muted)}

/* ---------------- pricing ---------------- */
.q-toggle{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:5px;margin-top:28px}
.q-toggle button{border:0;background:none;padding:9px 20px;border-radius:100px;font-family:inherit;
  font-size:.87rem;font-weight:600;color:var(--muted);transition:.24s var(--ease)}
.q-toggle button.q-on{background:var(--navy);color:#fff}
.q-toggle em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--green);margin-left:7px}
.q-toggle button.q-on em{color:#7FE06F}

.q-plans{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);
  border-radius:18px;overflow:hidden}
.q-plan{padding:38px 32px;border-left:1px solid var(--line);display:flex;flex-direction:column;position:relative}
.q-plan:first-child{border-left:0}
.q-plan--best{background:#F4FAFF}
.q-plan--best::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--blue)}
.q-plan__h{display:flex;align-items:center;gap:10px}
.q-plan h3{font-size:1.15rem;letter-spacing:-.028em}
.q-plan__badge{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:4px 9px;border-radius:100px}
.q-plan__d{font-size:.88rem;color:var(--muted);margin-top:10px;min-height:44px}
.q-plan__p{margin:26px 0 4px;display:flex;align-items:baseline;gap:7px}
.q-plan__p b{font-family:'Manrope',sans-serif;font-weight:700;font-size:2.5rem;letter-spacing:-.045em;
  line-height:1;font-variant-numeric:tabular-nums}
.q-plan__p span{font-size:.85rem;color:var(--muted-2)}
.q-plan__note{font-size:.78rem;color:var(--muted-2)}
.q-plan .q-btn{width:100%;margin:26px 0 28px}
.q-plan ul{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-direction:column;gap:13px}
.q-plan li{display:flex;gap:11px;font-size:.88rem;color:var(--muted);line-height:1.5}
.q-plan li svg{width:14px;height:14px;stroke:var(--blue);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px}
.q-plan li b{color:var(--navy);font-weight:600}
.q-plans__foot{margin-top:26px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}

/* ---------------- cta / footer ---------------- */
.q-cta{padding:120px 0}
.q-cta .q-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:80px;align-items:center}
.q-cta h2{font-size:clamp(2rem,3.4vw,2.8rem);color:#fff;letter-spacing:-.04em;max-width:15ch;margin-top:20px}
.q-cta p{color:#9BAEC5;margin:20px 0 36px;font-size:1.05rem;max-width:44ch}
.q-cta__btns{display:flex;gap:12px;flex-wrap:wrap}
.q-cta__fine{margin-top:26px;font-size:.8rem;color:#71879F}
.q-cta__card{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:34px}
.q-cta__card-h{display:block;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#8298B1;margin-bottom:26px}
.q-cta__list{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.q-cta__list li{display:flex;align-items:center;gap:11px;font-size:.93rem;color:#DCE5EF}
.q-cta__list i{width:7px;height:7px;background:var(--c);flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.q-cta__meta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14)}
.q-cta__meta b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.35rem;
  color:#fff;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.q-cta__meta span{display:block;margin-top:8px;font-size:.79rem;color:#8298B1}

.q-foot{padding:80px 0 0;border-top:1px solid var(--line)}
.q-foot__grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:48px;padding-bottom:64px}
.q-foot img{height:30px;width:auto}
.q-foot__brand p{font-size:.88rem;color:var(--muted);margin:20px 0 0;max-width:280px}
.q-foot h4{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--navy);margin-bottom:20px}
.q-foot li{margin-bottom:12px}
.q-foot li a{font-size:.89rem;color:var(--muted)}
.q-foot li a:hover{color:var(--navy)}
.q-foot__bot{border-top:1px solid var(--line);padding:26px 0;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:.83rem;color:var(--muted-2)}
.q-foot__bot nav{display:flex;gap:26px;flex-wrap:wrap}
.q-foot__bot a:hover{color:var(--navy)}

.q-rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.q-rv.q-in{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
/* dial is a wide diagram — hidden on tablet portrait and below */
@media(max-width:1024px){
  .q-dial{display:none}
  .q-hero__grid{gap:0}
  .q-hero__sub,.q-hero__trust{max-width:56ch}
}
@media(max-width:1060px){
  .q-hero__grid{grid-template-columns:1fr;gap:64px}
  .q-dial{max-width:600px;margin-inline:auto}
  .q-proof{grid-template-columns:1fr;gap:48px}
  .q-cta .q-wrap{grid-template-columns:1fr;gap:48px}
  .q-quotes{grid-template-columns:1fr;gap:20px}
  .q-plans{grid-template-columns:1fr}
  .q-plan{border-left:0;border-top:1px solid var(--line)}
  .q-plan:first-child{border-top:0}
  .q-tbar{grid-template-columns:1fr;gap:24px}
  .q-modules{grid-template-columns:1fr;gap:32px}
  .q-perm{grid-template-columns:1fr;gap:22px;margin-bottom:40px}
  .q-perm div{padding:0;border-left:0}
  .q-igroup{grid-template-columns:1fr;gap:16px}
  .q-igroup__h{padding-top:0}
}
@media(max-width:820px){
  /* Sign In stays, but sheds the border/padding that made the bar overflow */
  .q-actions .q-btn--ghost{background:none;border-color:transparent;padding:8px 6px}
}
@media(max-width:940px){
  .q-menu{display:none}
  .q-burger{display:flex}
  .q-menu.q-open{display:block;position:absolute;left:0;right:0;top:80px;background:#fff;
    border-bottom:1px solid var(--line);padding:16px 32px 22px}
  .q-menu.q-open ul{flex-direction:column;align-items:stretch;gap:2px}
  .q-menu.q-open .q-menu-signin{display:block;margin-top:10px;padding-top:12px;
    border-top:1px solid var(--line)}
  .q-menu.q-open .q-menu-signin a{color:var(--navy);font-weight:600}
  .q-sec{padding:92px 0}
  .q-thread{grid-template-columns:1fr}
  .q-thread__i{padding:0 0 28px 32px}
  .q-thread__i::before,.q-thread__i::after{top:0;left:6px;width:1px;height:100%}
  .q-thread__i::after{transform:scaleY(0);transform-origin:top}
  .q-thread.q-in .q-thread__i::after{transform:scaleY(1)}
  .q-thread__i:last-child::before,.q-thread__i:last-child::after{display:none}
  .q-node{top:0;left:0}
}
@media(max-width:640px){
  :root{--gut:20px}
  .q-nav{height:68px;gap:10px}
  .q-brand img{height:27px}
  .q-actions{gap:8px}
  .q-actions .q-btn--primary{padding:10px 14px}
  .q-actions .q-btn--ghost{padding:8px 2px;font-size:.88rem}
  .q-burger{width:38px;height:38px}
  .q-menu.q-open{top:68px;padding:14px 20px 20px}
  .q-hero{padding:64px 0 76px}
  .q-head{margin-bottom:48px}
  .q-row{grid-template-columns:40px 1fr;gap:16px 20px;padding:26px 0}
  .q-row p{grid-column:2}
  .q-row__go{display:none}
  .q-foot__grid{grid-template-columns:1fr 1fr;gap:36px}
}

/* ============================================================
   FEATURES PILLAR PAGE
   ============================================================ */
main section[id]{scroll-margin-top:152px}
.q-phero{padding:76px 0 64px;border-bottom:1px solid var(--line)}
.q-crumb{font-size:.8rem;color:var(--muted-2);margin-bottom:8px}
.q-crumb a:hover{color:var(--navy)}
.q-crumb span{margin:0 8px;opacity:.55}
.q-phero h1{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-.042em;
  line-height:1.06;margin:18px 0 0;max-width:17ch}
.q-phero__sub{margin-top:24px;font-size:1.1rem;color:var(--muted);max-width:52ch}
.q-phero__cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.q-phero__facts{display:flex;gap:52px;margin-top:52px;padding-top:26px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.q-phero__facts b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.5rem;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.q-phero__facts span{display:block;margin-top:8px;font-size:.8rem;color:var(--muted-2)}

.q-jump{position:sticky;top:80px;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.q-jump .q-wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.q-jump .q-wrap::-webkit-scrollbar{display:none}
.q-jump a{display:flex;align-items:center;gap:9px;padding:17px 15px;font-size:.88rem;font-weight:500;
  color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;transition:.2s var(--ease)}
.q-jump a:hover{color:var(--navy)}
.q-jump a.q-on{color:var(--navy);font-weight:600;border-bottom-color:var(--c)}
.q-jump i{width:7px;height:7px;background:var(--c);flex:none}
.q-jump em{font-style:normal;font-size:.74rem;color:var(--muted-2);font-variant-numeric:tabular-nums}

.q-fhead{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end;
  padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:40px}
.q-fhead h2{font-size:clamp(1.7rem,2.7vw,2.3rem);letter-spacing:-.036em;margin-top:16px}
.q-fhead p{color:var(--muted);font-size:1rem;padding-bottom:6px}
.q-flabel{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--muted-2)}
.q-flabel i{width:8px;height:8px;background:var(--c);flex:none}

.q-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.q-fcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:26px 26px 24px;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.q-fcard:hover{border-color:var(--c);transform:translateY(-2px);
  box-shadow:0 16px 32px -24px rgba(22,37,56,.55)}
.q-fcard h3{font-size:1.06rem;letter-spacing:-.026em;margin-bottom:10px}
.q-fcard p{font-size:.89rem;color:var(--muted);line-height:1.58;flex:1}
.q-fcard__go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:.83rem;
  font-weight:600;color:var(--muted-2);transition:color .25s var(--ease)}
.q-fcard:hover .q-fcard__go{color:var(--c)}
.q-fcard:hover .q-arrow{transform:translateX(4px)}

@media(max-width:1024px){
  .q-fgrid{grid-template-columns:repeat(2,1fr)}
  .q-fhead{grid-template-columns:1fr;gap:18px;align-items:start}
}
@media(max-width:640px){
  .q-phero{padding:52px 0 48px}
  .q-fgrid{grid-template-columns:1fr}
  .q-jump{top:68px}
  .q-jump a{padding:15px 12px}
  .q-phero__facts{gap:30px}
}

/* pillar page runs long — tighter section rhythm than the homepage */
.q-page-features .q-sec{padding:104px 0}
.q-page-features .q-fhead{margin-bottom:36px}

/* hero: platform map fills the right half */
.q-phero .q-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.q-phero__l{min-width:0}
.q-map{border:1px solid var(--line);border-radius:16px;padding:28px;background:#fff}
.q-map__h{display:block;font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted-2);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.q-map__row{display:grid;grid-template-columns:9px 1fr 84px 22px;gap:14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line);transition:padding .22s var(--ease)}
.q-map__row:last-child{border-bottom:0;padding-bottom:0}
.q-map__row:hover{padding-left:6px}
.q-map__row i{width:9px;height:9px;background:var(--c)}
.q-map__row b{font-family:'Manrope',sans-serif;font-weight:700;font-size:.93rem;letter-spacing:-.02em;
  color:var(--muted);transition:color .22s var(--ease);white-space:nowrap}
.q-map__row:hover b{color:var(--navy)}
.q-map__bar{height:4px;border-radius:3px;background:#EDF2F7;overflow:hidden}
.q-map__bar em{display:block;height:100%;border-radius:3px;background:var(--c);opacity:.75}
.q-map__row u{text-decoration:none;font-size:.8rem;color:var(--muted-2);text-align:right;
  font-variant-numeric:tabular-nums}

@media(max-width:1024px){
  .q-phero .q-wrap{grid-template-columns:1fr;gap:44px}
  .q-phero h1{max-width:none}
}
@media(max-width:640px){
  .q-page-features .q-sec{padding:72px 0}
  .q-map{padding:22px}
}

/* ============================================================
   SINGLE FEATURE PAGE
   ============================================================ */
.q-fmeta{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;padding-top:24px;
  border-top:1px solid var(--line)}
.q-fmeta>*{padding:0 22px;border-left:1px solid var(--line)}
.q-fmeta>*:first-child{padding-left:0;border-left:0}
.q-fmeta b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:-.02em}
.q-fmeta span{display:block;margin-top:6px;font-size:.78rem;color:var(--muted-2)}
.q-fmeta a:hover b{color:var(--blue)}

.q-caps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.q-cap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px}
.q-cap__n{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--muted-2);font-variant-numeric:tabular-nums}
.q-cap__n i{width:8px;height:8px;background:var(--c);flex:none}
.q-cap h3{font-size:1.12rem;letter-spacing:-.026em;margin:16px 0 10px}
.q-cap p{font-size:.92rem;color:var(--muted);line-height:1.6}

.q-connect{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.q-conn{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:24px;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.q-conn:hover{border-color:var(--c);transform:translateY(-2px)}
.q-conn__t{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.q-conn__t i{width:8px;height:8px;background:var(--c);flex:none}
.q-conn__t b{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.024em}
.q-conn p{font-size:.87rem;color:var(--muted);line-height:1.55;flex:1}
.q-conn__go{margin-top:18px;font-size:.82rem;font-weight:600;color:var(--muted-2);
  display:inline-flex;align-items:center;gap:8px;transition:color .25s var(--ease)}
.q-conn:hover .q-conn__go{color:var(--c)}
.q-conn:hover .q-arrow{transform:translateX(4px)}

.q-faq{border-top:1px solid var(--line);max-width:820px}
.q-faq details{border-bottom:1px solid var(--line)}
.q-faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;
  gap:28px;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.022em}
.q-faq summary::-webkit-details-marker{display:none}
.q-faq summary::after{content:"+";font-family:'Inter',sans-serif;font-size:1.4rem;font-weight:400;
  color:var(--blue);line-height:1;transition:transform .25s var(--ease)}
.q-faq details[open] summary::after{transform:rotate(45deg)}
.q-faq details p{padding:0 0 26px;color:var(--muted);font-size:.95rem;max-width:74ch}

.q-related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

@media(max-width:1024px){
  .q-connect{grid-template-columns:1fr 1fr}
  .q-related{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .q-caps,.q-connect,.q-related{grid-template-columns:1fr}
  .q-fmeta{gap:18px 0}
  .q-fmeta div{padding:0;border-left:0;width:50%}
}

/* single feature pages run shorter than the pillar — same tighter rhythm */
.q-page-feature .q-sec{padding:104px 0}
.q-page-feature .q-phero h1{max-width:20ch}

/* FAQ column + a support card so the right half is not dead space */
.q-faqwrap{display:grid;grid-template-columns:1.4fr .6fr;gap:64px;align-items:start}
.q-faq{max-width:none}
.q-ask{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;position:sticky;top:110px}
.q-ask h3{font-size:1.05rem;letter-spacing:-.024em;margin-bottom:10px}
.q-ask p{font-size:.89rem;color:var(--muted);line-height:1.6;margin-bottom:22px}
.q-ask .q-btn{width:100%}
.q-ask ul{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.q-ask li{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted);padding:7px 0}
.q-ask li::before{content:"";width:5px;height:5px;background:var(--c);flex:none}

@media(max-width:1024px){
  .q-faqwrap{grid-template-columns:1fr;gap:36px}
  .q-ask{position:static}
}
@media(max-width:640px){
  .q-page-feature .q-sec{padding:72px 0}
  .q-fmeta{grid-template-columns:1fr 1fr}
  .q-fmeta>*{padding:0;border-left:0}
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.q-page-pricing .q-sec{padding:104px 0}
.q-phero--center{text-align:center}
.q-phero--center .q-wrap{display:block}
.q-phero--center h1{max-width:20ch;margin-inline:auto}
.q-phero--center .q-phero__sub{margin-inline:auto}
.q-phero--center .q-crumb{margin-bottom:20px}
.q-phero--center .q-toggle{margin-top:34px}

.q-plans--page{margin-top:-70px;position:relative;z-index:2}
.q-plan__foot{margin-top:auto;padding-top:22px;font-size:.78rem;color:var(--muted-2)}

/* comparison table */
.q-cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.q-cmp{width:100%;border-collapse:collapse;font-size:.9rem;min-width:720px}
.q-cmp th,.q-cmp td{padding:15px 22px;text-align:left;border-bottom:1px solid var(--line)}
.q-cmp thead th{position:sticky;top:0;background:#fff;font-family:'Manrope',sans-serif;
  font-weight:700;font-size:.95rem;letter-spacing:-.022em;border-bottom:1px solid var(--navy);z-index:1}
.q-cmp thead th:first-child{width:38%}
.q-cmp thead th small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.76rem;
  color:var(--muted-2);margin-top:5px;letter-spacing:0}
.q-cmp td{color:var(--muted)}
.q-cmp td:first-child{color:var(--navy);font-weight:500}
.q-cmp tbody tr:hover{background:#FCFDFE}
.q-cmp tr.q-cmp__grp td{background:var(--bg);font-family:'Manrope',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);padding:12px 22px}
.q-cmp tbody tr:last-child td{border-bottom:0}
.q-yes{width:15px;height:15px;stroke:var(--green);stroke-width:2.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.q-no{color:#C6D1DE}
.q-cmp__best{background:#F4FAFF}

/* included-in-every-plan strip */
.q-incl{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.q-incl div{padding:0 28px;border-left:1px solid var(--line)}
.q-incl div:first-child{padding-left:0;border-left:0}
.q-incl b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.02em;margin-bottom:9px}
.q-incl b::before{content:"";display:inline-block;width:7px;height:7px;background:var(--blue);
  margin-right:10px;vertical-align:middle}
.q-incl span{font-size:.87rem;color:var(--muted);line-height:1.58}

@media(max-width:1024px){
  .q-plans--page{margin-top:0}
  .q-incl{grid-template-columns:1fr 1fr;gap:32px 0}
  .q-incl div:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:640px){
  .q-page-pricing .q-sec{padding:72px 0}
  .q-incl{grid-template-columns:1fr}
  .q-incl div{padding:0;border-left:0}
}

/* the price digits were being caught by .q-plan__p span (the /user/month label) */
.q-plan__p b span{font:inherit;color:inherit}
.q-plan__p b [data-q-price]{font-size:inherit;color:inherit}

/* plan feature-list heading */
.q-feats-t{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:4px}
.q-plan ul li.q-feats-t{display:block;padding:0}

/* navy button variant used by the Enterprise plan */
.q-btn--navy{background:var(--navy);color:#fff}
.q-btn--navy:hover{background:#0E1B2A;transform:translateY(-1px)}

/* plans sit inside the tinted band, no overlap needed */
.q-plans--page{margin-top:0}

/* the hero and the plans sit on the same tinted band — the divider between
   them read as a stray rule under the switcher */
.q-page-pricing .q-phero{border-bottom:0}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.q-page-about .q-sec,.q-page-contact .q-sec{padding:104px 0}

.q-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.q-vals div{padding:0 30px;border-left:1px solid var(--line)}
.q-vals div:first-child{padding-left:0;border-left:0}
.q-vals i{display:block;width:9px;height:9px;background:var(--c);margin-bottom:22px}
.q-vals h3{font-size:1.06rem;letter-spacing:-.024em;margin-bottom:11px}
.q-vals p{font-size:.9rem;color:var(--muted);line-height:1.62}

.q-tl{display:grid;gap:0}
.q-tl__i{display:grid;grid-template-columns:120px 1fr;gap:40px;padding:28px 0;
  border-bottom:1px solid var(--line)}
.q-tl__i:first-child{border-top:1px solid var(--line)}
.q-tl__y{display:flex;align-items:center;gap:12px;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:.95rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.q-tl__y i{width:8px;height:8px;background:var(--c);flex:none}
.q-tl__i h3{font-size:1.08rem;letter-spacing:-.024em;margin-bottom:9px}
.q-tl__i p{font-size:.93rem;color:var(--muted);line-height:1.62;max-width:64ch}

.q-nums{display:grid;grid-template-columns:repeat(4,1fr)}
.q-nums div{padding:0 34px;border-left:1px solid rgba(255,255,255,.13)}
.q-nums div:first-child{padding-left:0;border-left:0}
.q-nums i{display:block;width:9px;height:9px;background:var(--c);margin-bottom:22px}
.q-nums b{display:block;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:clamp(2rem,3.2vw,2.7rem);letter-spacing:-.045em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.q-nums span{display:block;margin-top:12px;font-size:.85rem;color:#93A7BF;line-height:1.5}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.q-contact{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.q-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px}
.q-card h2{font-size:1.35rem;letter-spacing:-.03em}
.q-card>p{font-size:.92rem;color:var(--muted);margin-top:10px}

.q-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.q-field{display:flex;flex-direction:column;gap:7px}
.q-field--full{grid-column:1/-1}
.q-field label{font-size:.83rem;font-weight:600;letter-spacing:-.01em}
.q-field input,.q-field select,.q-field textarea{
  font-family:'Inter',sans-serif;font-size:.93rem;color:var(--navy);width:100%;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.q-field textarea{resize:vertical;min-height:124px}
.q-field input:focus,.q-field select:focus,.q-field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,143,242,.13)}
.q-field input::placeholder,.q-field textarea::placeholder{color:#A9B7C6}
.q-form__fine{grid-column:1/-1;font-size:.79rem;color:var(--muted-2);text-align:center}

.q-cell{display:flex;gap:15px;padding:20px 0;border-bottom:1px solid var(--line)}
.q-cell:last-child{border-bottom:0;padding-bottom:0}
.q-cell i{width:8px;height:8px;background:var(--c);flex:none;margin-top:7px}
.q-cell b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.94rem;
  letter-spacing:-.02em;margin-bottom:5px}
.q-cell span{display:block;font-size:.88rem;color:var(--muted);line-height:1.6}
.q-cell a{color:var(--blue)}
.q-cell a:hover{text-decoration:underline}

.q-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.q-route{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.q-route:hover{border-color:var(--c);transform:translateY(-2px)}
.q-route__t{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.q-route__t i{width:8px;height:8px;background:var(--c);flex:none}
.q-route__t b{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.024em}
.q-route p{font-size:.89rem;color:var(--muted);line-height:1.58;margin-bottom:16px}
.q-route a{font-size:.88rem;font-weight:600;color:var(--blue)}
.q-route a:hover{text-decoration:underline}

@media(max-width:1024px){
  .q-vals{grid-template-columns:1fr 1fr;gap:40px 0}
  .q-vals div:nth-child(3){padding-left:0;border-left:0}
  .q-nums{grid-template-columns:1fr 1fr;gap:40px 0}
  .q-nums div:nth-child(3){padding-left:0;border-left:0}
  .q-contact{grid-template-columns:1fr;gap:32px}
  .q-routes{grid-template-columns:1fr}
}
@media(max-width:640px){
  .q-page-about .q-sec,.q-page-contact .q-sec{padding:72px 0}
  .q-vals,.q-nums{grid-template-columns:1fr}
  .q-vals div,.q-nums div{padding:0;border-left:0;padding-bottom:30px}
  .q-tl__i{grid-template-columns:1fr;gap:14px}
  .q-form{grid-template-columns:1fr}
  .q-card{padding:26px}
}

/* contact hero: the form column is tall, so the copy should sit at the top, not centre */
.q-page-contact .q-phero .q-wrap{align-items:start}
.q-page-contact .q-phero{padding-top:64px}

/* ============================================================
   BLOG — shared
   ============================================================ */
.q-page-blog .q-sec,.q-page-post .q-sec{padding:96px 0}

.q-tagline{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.q-cat{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.q-sep{width:3px;height:3px;border-radius:50%;background:#C9D4E1;flex:none}
.q-mins{font-size:.79rem;color:var(--muted-2)}

/* ---------- listing ---------- */
.q-cats{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line);
  margin-bottom:40px}
.q-cats a{font-size:.86rem;font-weight:500;color:var(--muted);border:1px solid var(--line);
  background:#fff;padding:8px 15px;border-radius:100px;transition:.2s var(--ease)}
.q-cats a:hover{color:var(--navy);border-color:#C9D6E5}
.q-cats a.q-on{background:var(--navy);border-color:var(--navy);color:#fff}


.q-sub{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:38px}
.q-sub__c{max-width:430px}
.q-sub h3{font-size:1.15rem;letter-spacing:-.026em;margin-bottom:9px}
.q-sub p{font-size:.9rem;color:var(--muted)}
.q-sub__f{display:flex;gap:10px;flex:1;min-width:290px;max-width:440px}
.q-sub__f input{flex:1;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  font-family:'Inter',sans-serif;font-size:.92rem;color:var(--navy)}
.q-sub__f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,143,242,.13)}

/* ---------- article ---------- */
.q-artwrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:72px;align-items:start}
.q-prose{max-width:68ch;font-size:1.06rem;line-height:1.78;color:var(--navy-700,#2C3E55)}
.q-prose>*+*{margin-top:24px}
.q-prose h2{font-size:1.65rem;letter-spacing:-.032em;line-height:1.25;margin-top:56px;
  padding-top:8px;scroll-margin-top:120px}
.q-prose h3{font-size:1.18rem;letter-spacing:-.026em;margin-top:38px;scroll-margin-top:120px}
.q-prose p{color:#3C4C62}
.q-prose strong{color:var(--navy);font-weight:600}
.q-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(22,143,242,.35)}
.q-prose a:hover{text-decoration-color:var(--blue)}
/* markers are absolutely positioned so the text stays a single inline flow —
   flex items would split a bolded lead-in onto its own column */
.q-prose ul,.q-prose ol{list-style:none;padding-left:0;display:block}
.q-prose li{position:relative;padding-left:26px;color:#3C4C62}
.q-prose li + li{margin-top:12px}
.q-prose ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;
  background:var(--c)}
.q-prose ol{counter-reset:q}
.q-prose ol li{counter-increment:q;padding-left:32px}
.q-prose ol li::before{content:counter(q);position:absolute;left:0;top:0;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.85rem;color:var(--c)}
.q-prose blockquote{margin:40px 0;padding:0 0 0 26px;border-left:2px solid var(--c);
  font-family:'Manrope',sans-serif;font-weight:600;font-size:1.22rem;line-height:1.5;
  letter-spacing:-.024em;color:var(--navy)}
.q-prose figure{margin:40px 0}
.q-prose figcaption{margin-top:12px;font-size:.82rem;color:var(--muted-2)}
.q-prose table{width:100%;border-collapse:collapse;font-size:.93rem;margin:36px 0}
.q-prose th,.q-prose td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.q-prose thead th{font-family:'Manrope',sans-serif;font-weight:700;font-size:.88rem;
  border-bottom:1px solid var(--navy)}
.q-prose td{color:var(--muted)}
.q-prose td:first-child{color:var(--navy);font-weight:500}

.q-callout{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:0 14px 14px 0;padding:26px 28px;margin:40px 0}
.q-callout b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  margin-bottom:8px;letter-spacing:-.02em}
.q-callout p{font-size:.94rem;color:var(--muted);line-height:1.65;margin:0}

.q-toc{position:sticky;top:110px}
.q-toc__h{display:block;font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted-2);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.q-toc a{display:block;padding:9px 0 9px 14px;font-size:.87rem;color:var(--muted);line-height:1.45;
  border-left:2px solid var(--line);transition:.2s var(--ease)}
.q-toc a:hover{color:var(--navy)}
.q-toc a.q-on{color:var(--navy);font-weight:600;border-left-color:var(--c)}
.q-toc__cta{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.q-toc__cta p{font-size:.84rem;color:var(--muted);margin-bottom:14px;line-height:1.55}

.q-artmeta{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:26px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.q-av{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--c) 12%,#fff);
  color:var(--c);display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;
  font-weight:700;font-size:.9rem;flex:none}
.q-artmeta b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.02em}
.q-artmeta span{font-size:.82rem;color:var(--muted-2)}
.q-share{margin-left:auto;display:flex;align-items:center;gap:9px}
.q-share span{font-size:.79rem;color:var(--muted-2)}
.q-share a{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:flex;
  align-items:center;justify-content:center;transition:.2s var(--ease)}
.q-share a:hover{border-color:var(--navy);background:var(--navy)}
.q-share svg{width:15px;height:15px;fill:var(--muted)}
.q-share a:hover svg{fill:#fff}

.q-artend{margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}

@media(max-width:1024px){
  .q-artwrap{grid-template-columns:1fr;gap:0}
  .q-toc{display:none}
  .q-feat{grid-template-columns:1fr}
  .q-feat   .q-feat__b{padding:32px}
  .q-posts{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .q-page-blog .q-sec,.q-page-post .q-sec{padding:64px 0}
  .q-posts{grid-template-columns:1fr}
  .q-prose{font-size:1.02rem}
  .q-prose h2{font-size:1.42rem;margin-top:44px}
  .q-sub{padding:26px}
  .q-share{margin-left:0;width:100%}
}

/* "most read" list in the blog hero */
.q-read{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;padding:15px 0;
  border-bottom:1px solid var(--line);transition:padding .22s var(--ease)}
.q-read:last-child{border-bottom:0;padding-bottom:0}
.q-read:hover{padding-left:5px}
.q-read__n{font-family:'Manrope',sans-serif;font-weight:700;font-size:.78rem;color:var(--c);
  font-variant-numeric:tabular-nums;padding-top:3px}
.q-read b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.9rem;
  line-height:1.4;letter-spacing:-.02em;color:var(--muted);transition:color .22s var(--ease)}
.q-read:hover b{color:var(--navy)}
.q-read em{display:block;margin-top:6px;font-style:normal;font-size:.76rem;color:var(--muted-2)}

/* ---------- editorial post list (no placeholder imagery) ---------- */
.q-feat{display:grid;grid-template-columns:1.25fr .75fr;gap:0;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:#fff;transition:border-color .25s var(--ease),
  box-shadow .25s var(--ease)}
.q-feat:hover{border-color:var(--c);box-shadow:0 22px 46px -34px rgba(22,37,56,.5)}
.q-feat__b{padding:44px}
.q-feat h2{font-size:clamp(1.5rem,2.5vw,2.1rem);letter-spacing:-.036em;line-height:1.18;margin-bottom:18px}
.q-feat p{color:var(--muted);font-size:1.01rem;line-height:1.66;max-width:52ch}
.q-feat__m{display:flex;align-items:center;gap:11px;margin-top:28px;padding-top:22px;
  border-top:1px solid var(--line);font-size:.82rem;color:var(--muted-2)}
.q-feat__side{background:var(--bg);border-left:1px solid var(--line);padding:44px 36px;
  display:flex;flex-direction:column;justify-content:center}
.q-feat__side span.q-map__h{margin-bottom:20px}
.q-keyn{padding:16px 0;border-bottom:1px solid var(--line)}
.q-keyn:last-child{border-bottom:0;padding-bottom:0}
.q-keyn b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.45rem;
  letter-spacing:-.04em;line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.q-keyn span{display:block;margin-top:8px;font-size:.82rem;color:var(--muted);line-height:1.5}

.q-plist{border-top:1px solid var(--line)}
.q-plist__i{display:grid;grid-template-columns:186px 1fr 76px;gap:32px;align-items:start;
  padding:30px 20px 30px 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding .3s var(--ease)}
.q-plist__i::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:0;background:var(--c);
  transition:width .3s var(--ease)}
.q-plist__i:hover{padding-left:20px}
.q-plist__i:hover::before{width:2px}
.q-plist__meta{display:flex;flex-direction:column;gap:7px;padding-top:3px}
.q-plist__meta time{font-size:.8rem;color:var(--muted-2)}
.q-plist__i h3{font-size:1.2rem;letter-spacing:-.03em;line-height:1.32;margin-bottom:9px;
  transition:transform .3s var(--ease)}
.q-plist__i:hover h3{transform:translateX(3px)}
.q-plist__i p{font-size:.93rem;color:var(--muted);line-height:1.6;max-width:62ch}
.q-plist__mins{font-size:.8rem;color:var(--muted-2);text-align:right;padding-top:5px;white-space:nowrap}

/* article column: prose was floating in a 1000px cell */
.q-artwrap{grid-template-columns:minmax(0,700px) 250px;gap:80px;justify-content:space-between}
.q-prose{max-width:none}
.q-page-post .q-phero .q-wrap>*{max-width:820px}

@media(max-width:1024px){
  .q-feat{grid-template-columns:1fr}
  .q-feat__side{border-left:0;border-top:1px solid var(--line);padding:32px}
  .q-feat__b{padding:32px}
  .q-artwrap{grid-template-columns:1fr}
}
@media(max-width:680px){
  .q-plist__i{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .q-plist__meta{flex-direction:row;align-items:center;gap:12px}
  .q-plist__mins{display:none}
}

/* newsletter: the input + button row overflowed a 390px viewport */
@media(max-width:520px){
  .q-sub__f{flex-direction:column;min-width:0;max-width:none;width:100%}
  .q-sub__f .q-btn{width:100%}
}

/* ---------- slim page-title bar (replaces the blog hero) ---------- */
.q-blogbar{padding:56px 0 0}
.q-blogbar h1{font-size:clamp(1.9rem,3vw,2.5rem);letter-spacing:-.038em;line-height:1.12;
  max-width:22ch;margin-top:6px}

/* ---------- post cards (no imagery) ---------- */
.q-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.q-card2{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:28px;overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.q-card2::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.q-card2:hover{border-color:var(--c);transform:translateY(-3px);
  box-shadow:0 18px 38px -28px rgba(22,37,56,.5)}
.q-card2:hover::before{transform:scaleX(1)}
.q-card2 h3{font-size:1.1rem;line-height:1.36;letter-spacing:-.028em;margin-bottom:11px}
.q-card2 p{font-size:.9rem;color:var(--muted);line-height:1.6;flex:1}
.q-card2__f{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted-2)}
.q-card2__go{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--muted-2);
  transition:color .25s var(--ease)}
.q-card2:hover .q-card2__go{color:var(--c)}
.q-card2:hover .q-arrow{transform:translateX(4px)}

@media(max-width:1024px){.q-cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .q-blogbar{padding-top:40px}
  .q-cards{grid-template-columns:1fr}
}

/* ---------- article header (matches the slim listing bar) ---------- */
.q-arthead{padding:56px 0 40px}
.q-arthead h1{font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.04em;line-height:1.1;
  max-width:20ch;margin-top:6px}
.q-arthead .q-phero__sub{margin-top:20px;font-size:1.08rem;color:var(--muted);max-width:60ch}
.q-arthead .q-crumb{margin-bottom:24px}
.q-arthead .q-tagline{margin:0}
.q-arthead h1{margin-top:14px}
.q-arthead .q-artmeta{max-width:820px}
@media(max-width:640px){.q-arthead{padding:40px 0 32px}}

/* ---------- article header: two columns, tinted band ---------- */
.q-arthead{background:var(--bg);border-bottom:1px solid var(--line);padding:56px 0 52px}
.q-arthead .q-wrap{display:grid;grid-template-columns:1.16fr .84fr;gap:64px;align-items:center}
.q-arthead__l{min-width:0}
.q-arthead h1{max-width:none}
.q-arthead .q-artmeta{max-width:none;border-top-color:#DFE6EF}
.q-keycard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 32px;
  box-shadow:0 20px 44px -38px rgba(22,37,56,.55)}
.q-keycard .q-map__h{margin-bottom:6px}
.q-keycard__f{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--muted);line-height:1.6}
.q-keycard__f a{color:var(--blue)}
.q-keycard__f a:hover{text-decoration:underline}

@media(max-width:1024px){
  .q-arthead .q-wrap{grid-template-columns:1fr;gap:36px}
}
@media(max-width:640px){
  .q-arthead{padding:40px 0 36px}
  .q-keycard{padding:24px}
}

/* ============================================================
   WORDPRESS CORE OUTPUT
   WordPress prints its own class names for pagination, comments,
   captions, alignments and search. These are styled here so core
   and plugin output inherits the design without extra markup.
   ============================================================ */

/* ---------- alignments & content width ---------- */
.entry-content > *{max-width:var(--max);margin-inline:auto}
.entry-content > .alignwide{max-width:1360px}
.entry-content > .alignfull{max-width:none;margin-inline:calc(50% - 50vw);width:100vw}
.alignleft{float:left;margin:6px 28px 20px 0}
.alignright{float:right;margin:6px 0 20px 28px}
.aligncenter{margin-inline:auto;display:block}
.wp-block-image img,.q-prose img{border-radius:14px;height:auto}
.wp-block-image figcaption,.wp-caption-text{margin-top:12px;font-size:.82rem;color:var(--muted-2)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:999;background:#fff;padding:11px 18px;
  border-radius:10px;box-shadow:0 18px 40px -22px rgba(22,37,56,.5)}
.sticky .q-plist__i::before{width:2px}

/* ---------- pagination (the_posts_pagination / query loop) ---------- */
.navigation.pagination,.wp-block-query-pagination{display:flex;justify-content:center;margin-top:56px}
.nav-links,.wp-block-query-pagination{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.page-numbers,.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-next,.wp-block-query-pagination-previous{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 14px;
  font-size:.88rem;font-weight:600;color:var(--muted);text-decoration:none;
  transition:.2s var(--ease)}
.page-numbers:hover,.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover{border-color:#C9D6E5;color:var(--navy)}
.page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.page-numbers.dots{border-color:transparent;background:none}

/* ---------- post navigation (previous / next single) ---------- */
.q-postnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;padding-top:36px;
  border-top:1px solid var(--line)}
.q-postnav a{display:block;border:1px solid var(--line);border-radius:14px;padding:24px;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.q-postnav a:hover{border-color:var(--c);transform:translateY(-2px)}
.q-postnav span{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.q-postnav b{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;line-height:1.4;
  letter-spacing:-.024em}
.q-postnav .q-next{text-align:right}

/* ---------- comments ---------- */
.q-comments{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)}
.q-comments h2,.comments-title{font-size:1.35rem;letter-spacing:-.03em;margin-bottom:32px}
.comment-list{list-style:none;padding:0;margin:0}
.comment-list li{padding:0}
.comment-body{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:24px 0;
  border-bottom:1px solid var(--line)}
.comment-list .children{list-style:none;margin:0 0 0 60px;padding:0}
.comment-author.vcard{grid-column:1;grid-row:1/3}
.comment-author img,.q-cavatar{width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);display:flex;align-items:center;
  justify-content:center;font-family:'Manrope',sans-serif;font-weight:700;font-size:.85rem}
.comment-meta b,.comment-author .fn{font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.02em;font-style:normal;color:var(--navy)}
.comment-metadata,.comment-meta time{font-size:.8rem;color:var(--muted-2)}
.comment-content p{font-size:.94rem;color:var(--muted);line-height:1.65;margin-top:10px}
.comment-reply-link{display:inline-block;margin-top:12px;font-size:.83rem;font-weight:600;color:var(--blue)}
.comment-reply-link:hover{text-decoration:underline}
#respond{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px}
#respond .comment-reply-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.1rem;
  letter-spacing:-.026em;margin-bottom:8px}
#respond .comment-notes{font-size:.86rem;color:var(--muted);margin-bottom:22px}
.comment-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.comment-form-comment{grid-column:1/-1}
.comment-form label{display:block;font-size:.83rem;font-weight:600;margin-bottom:7px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],
.comment-form textarea{width:100%;font-family:'Inter',sans-serif;font-size:.93rem;color:var(--navy);
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.comment-form textarea{min-height:130px;resize:vertical}
.comment-form :focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,143,242,.13)}
.form-submit{grid-column:1/-1;margin:0}
.comment-form .submit{display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.94rem;padding:14px 26px;border:0;
  border-radius:10px;background:var(--blue);color:#fff;cursor:pointer;transition:.22s var(--ease)}
.comment-form .submit:hover{background:var(--blue-600)}

/* ---------- search form (core block + widget) ---------- */
.q-searchform{display:flex;gap:10px;max-width:520px}
.q-searchform input,.wp-block-search__input{flex:1;font-family:'Inter',sans-serif;font-size:.95rem;
  padding:14px 16px;border:1px solid var(--line);border-radius:10px;color:var(--navy);background:#fff}
.q-searchform input:focus,.wp-block-search__input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(22,143,242,.13)}
.wp-block-search__button{background:var(--blue);color:#fff;border:0;border-radius:10px;
  padding:14px 24px;font-weight:600;font-size:.94rem;cursor:pointer}

/* ---------- archive header & empty state ---------- */
.q-archhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.q-archhead .q-count{font-size:.85rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.q-empty{border:1px solid var(--line);border-radius:16px;padding:56px 40px;text-align:center;
  background:#fff}
.q-empty h2{font-size:1.3rem;letter-spacing:-.028em;margin-bottom:12px}
.q-empty p{font-size:.95rem;color:var(--muted);max-width:52ch;margin:0 auto 26px}

/* ---------- 404 ---------- */
.q-404{text-align:center;padding:120px 0}
.q-404__code{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(4rem,11vw,8rem);
  letter-spacing:-.06em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.q-404 h1{font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.036em;margin:22px 0 16px}
.q-404 p{font-size:1.04rem;color:var(--muted);max-width:52ch;margin:0 auto 34px}
.q-404__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}
.q-404__links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left;
  max-width:900px;margin:0 auto;padding-top:40px;border-top:1px solid var(--line)}
.q-404__links a{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.q-404__links a:hover{border-color:var(--c);transform:translateY(-2px)}
.q-404__links b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.02em;margin-bottom:6px}
.q-404__links span{font-size:.83rem;color:var(--muted);line-height:1.5}

@media(max-width:768px){
  .q-postnav{grid-template-columns:1fr}
  .q-postnav .q-next{text-align:left}
  .comment-form{grid-template-columns:1fr}
  .comment-list .children{margin-left:24px}
  .q-404{padding:80px 0}
  .q-404__links{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .q-404__links{grid-template-columns:1fr}
  .q-searchform{flex-direction:column}
}

/* article left column wraps prose + post nav + comments as siblings */
.q-artcol{min-width:0}
.q-comments ol.comment-list li::before{content:none}

/* ============================================================
   CORE QUERY LOOP → editorial rows
   wp:post-template renders <li class="q-plist__i">; these rules make the
   block output land in the same grid as the static markup, so the pattern
   and the hand-built page are visually identical.
   ============================================================ */
.q-plist.wp-block-query,.q-plist .wp-block-post-template{list-style:none;margin:0;padding:0}
.wp-block-post-template.q-plist__i{display:block}
li.q-plist__i{display:grid;grid-template-columns:186px 1fr;gap:32px;align-items:start;
  padding:30px 20px 30px 0;border-bottom:1px solid var(--line);position:relative}
li.q-plist__i .wp-block-post-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.2rem;
  letter-spacing:-.03em;line-height:1.32;margin:0 0 9px}
li.q-plist__i .wp-block-post-title a{color:var(--navy);text-decoration:none}
li.q-plist__i:hover .wp-block-post-title a{color:var(--navy)}
li.q-plist__i .wp-block-post-excerpt__excerpt{font-size:.93rem;color:var(--muted);line-height:1.6;
  max-width:62ch;margin:0}
li.q-plist__i .wp-block-post-excerpt__more-text{display:none}
li.q-plist__i .wp-block-post-date{font-size:.8rem;color:var(--muted-2)}
li.q-plist__i .wp-block-post-terms{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c,var(--blue))}
li.q-plist__i .wp-block-post-terms a{color:inherit;text-decoration:none}

/* core post navigation, styled as the two-up cards */
.wp-block-post-navigation-link.q-postnav{display:block;border:1px solid var(--line);
  border-radius:14px;padding:24px;margin-top:16px}
.wp-block-post-navigation-link.q-postnav a{font-family:'Manrope',sans-serif;font-weight:700;
  font-size:1rem;line-height:1.4;letter-spacing:-.024em;color:var(--navy);text-decoration:none}

/* core comments block */
.wp-block-comments.q-comments .wp-block-comment-template li{padding:24px 0;
  border-bottom:1px solid var(--line);list-style:none}
.wp-block-comment-author-name{font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.02em}
.wp-block-comment-date{font-size:.8rem;color:var(--muted-2)}
.wp-block-comment-content p{font-size:.94rem;color:var(--muted);line-height:1.65}
.wp-block-avatar img{border-radius:12px}

/* core table of contents in the article sidebar */
.q-toc .wp-block-table-of-contents ol{list-style:none;margin:0;padding:0}
.q-toc .wp-block-table-of-contents a{display:block;padding:9px 0 9px 14px;font-size:.87rem;
  color:var(--muted);line-height:1.45;border-left:2px solid var(--line);text-decoration:none}
.q-toc .wp-block-table-of-contents a:hover{color:var(--navy)}

/* block styles registered in functions.php */
.is-style-q-section-tint{background:var(--bg)}
.is-style-q-section-ink{background:var(--navy);color:#fff}
.is-style-q-section-ink :is(h1,h2,h3,h4){color:#fff}
.is-style-q-section-ink p{color:#9BAEC5}

@media(max-width:680px){
  li.q-plist__i{grid-template-columns:1fr;gap:12px;padding:26px 0}
}

/* ============================================================
   RESOURCES PAGE
   ============================================================ */
.q-page-resources .q-sec{padding:96px 0}

.q-hubs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.q-hub{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px;position:relative;overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.q-hub::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.q-hub:hover{border-color:var(--c);transform:translateY(-3px);
  box-shadow:0 18px 38px -28px rgba(22,37,56,.5)}
.q-hub:hover::before{transform:scaleX(1)}
.q-hub__i{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;display:flex;
  align-items:center;justify-content:center;margin-bottom:20px;transition:.25s var(--ease)}
.q-hub__i svg{width:21px;height:21px;stroke:var(--c);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.q-hub:hover .q-hub__i{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,#fff)}
.q-hub h3{font-size:1.06rem;letter-spacing:-.026em;margin-bottom:9px}
.q-hub p{font-size:.88rem;color:var(--muted);line-height:1.58;flex:1}
.q-hub__f{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--muted-2);
  transition:color .25s var(--ease)}
.q-hub:hover .q-hub__f{color:var(--c)}
.q-hub:hover .q-arrow{transform:translateX(4px)}

/* featured resource: the meta row carries a button rather than an author */
.q-page-resources .q-feat__m{gap:16px}
.q-page-resources .q-feat__m .q-btn{cursor:pointer}

@media(max-width:1024px){.q-hubs{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .q-page-resources .q-sec{padding:64px 0}
  .q-hubs{grid-template-columns:1fr}
}

/* ============================================================
   RESOURCE DETAIL
   ============================================================ */
.q-reshead{background:var(--bg);border-bottom:1px solid var(--line);padding:52px 0 56px}
.q-reshead .q-wrap{display:grid;grid-template-columns:1.18fr .82fr;gap:64px;align-items:start}
.q-reshead__l{min-width:0}
.q-reshead h1{font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.04em;line-height:1.1;
  max-width:20ch;margin-top:8px}
.q-reshead p.q-lead{margin-top:20px;font-size:1.08rem;color:var(--muted);max-width:56ch;line-height:1.68}
.q-resfacts{display:flex;gap:0;margin-top:32px;padding-top:24px;border-top:1px solid #DFE6EF;flex-wrap:wrap}
.q-resfacts div{padding:0 24px;border-left:1px solid #DFE6EF}
.q-resfacts div:first-child{padding-left:0;border-left:0}
.q-resfacts b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.02em}
.q-resfacts span{display:block;margin-top:6px;font-size:.78rem;color:var(--muted-2)}

/* download card */
.q-dl{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;
  box-shadow:0 22px 46px -38px rgba(22,37,56,.55);position:sticky;top:110px}
.q-dl__cover{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:24px;
  margin-bottom:24px;position:relative;overflow:hidden}
.q-dl__cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.q-dl__cover span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.q-dl__cover b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.05rem;
  line-height:1.34;letter-spacing:-.026em}
.q-dl__cover i{display:block;margin-top:16px;font-style:normal;font-size:.78rem;color:var(--muted-2)}
.q-dl .q-btn{width:100%}
.q-dl__meta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.q-dl__meta div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:.84rem;
  color:var(--muted)}
.q-dl__meta b{color:var(--navy);font-weight:600}
.q-dl__note{margin-top:18px;font-size:.8rem;color:var(--muted-2);line-height:1.55;text-align:center}

/* chapters */
.q-chapters{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--line)}
.q-chapter{display:grid;grid-template-columns:38px 1fr;gap:18px;align-items:start;padding:22px 0;
  border-bottom:1px solid var(--line)}
.q-chapter span{font-family:'Manrope',sans-serif;font-weight:700;font-size:.8rem;color:var(--c);
  font-variant-numeric:tabular-nums;padding-top:3px}
.q-chapter h3{font-size:1.02rem;letter-spacing:-.024em;margin-bottom:6px}
.q-chapter p{font-size:.88rem;color:var(--muted);line-height:1.55}

@media(max-width:1024px){
  .q-reshead .q-wrap{grid-template-columns:1fr;gap:36px}
  .q-dl{position:static}
  .q-chapters{grid-template-columns:1fr;gap:0}
}
@media(max-width:640px){
  .q-reshead{padding:40px 0 40px}
  .q-resfacts div{padding:0 16px}
  .q-dl{padding:24px}
}

/* breadcrumb needs air before the type/format line — 8px read as a collision */
.q-reshead .q-crumb{margin-bottom:24px}
.q-reshead .q-tagline{margin-bottom:0}
.q-reshead h1{margin-top:14px}

/* ---------- video ---------- */
.q-video{position:relative;aspect-ratio:16/9;background:var(--navy);border-radius:16px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.q-video::before{content:"";position:absolute;inset:0;opacity:.16;
  background-image:repeating-linear-gradient(30deg,rgba(255,255,255,.5) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(-30deg,rgba(255,255,255,.5) 0 1px,transparent 1px 40px)}
.q-video__btn{position:relative;width:76px;height:76px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease)}
.q-video:hover .q-video__btn{transform:scale(1.06)}
.q-video__btn svg{width:26px;height:26px;stroke:var(--navy);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-left:3px}
.q-video__cap{position:absolute;left:26px;bottom:24px;color:#fff}
.q-video__cap b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.02rem}
.q-video__cap span{font-size:.82rem;color:#9BAEC5}

.q-chapters--time .q-chapter{grid-template-columns:58px 1fr}
.q-chapters--time .q-chapter span{font-variant-numeric:tabular-nums;color:var(--c)}

/* ---------- file list ---------- */
.q-files{border-top:1px solid var(--line)}
.q-file{display:grid;grid-template-columns:1fr 110px 90px 110px;gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);transition:padding .22s var(--ease)}
.q-file:hover{padding-left:6px}
.q-file b{font-family:'Manrope',sans-serif;font-weight:700;font-size:.96rem;letter-spacing:-.022em}
.q-file p{font-size:.85rem;color:var(--muted);margin-top:4px}
.q-file span{font-size:.83rem;color:var(--muted-2)}
.q-file a{font-size:.84rem;font-weight:600;color:var(--blue);text-align:right}
.q-file a:hover{text-decoration:underline}

/* ---------- checklist preview ---------- */
.q-checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--line)}
.q-checkitem{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;padding:16px 0;
  border-bottom:1px solid var(--line)}
.q-checkitem i{width:18px;height:18px;border:1.5px solid var(--c);border-radius:5px;margin-top:2px;
  display:block}
.q-checkitem b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.94rem;
  letter-spacing:-.02em;margin-bottom:4px}
.q-checkitem p{font-size:.86rem;color:var(--muted);line-height:1.55}

/* ---------- code / endpoints ---------- */
.q-code{background:var(--navy);border-radius:14px;padding:24px 26px;overflow-x:auto}
.q-code__h{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.q-code__h i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.q-code__h span{margin-left:8px;font-size:.76rem;color:#7E93AC}
.q-code pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;
  line-height:1.75;color:#DCE5EF;white-space:pre}
.q-code .k{color:#7FC4FF}
.q-code .s{color:#8FE07E}
.q-code .c{color:#7E93AC}

.q-endpoints{border-top:1px solid var(--line)}
.q-endpoint{display:grid;grid-template-columns:72px 1fr 1.2fr;gap:20px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line)}
.q-endpoint em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.76rem;font-weight:600;color:var(--c);border:1px solid var(--line);border-radius:6px;
  padding:4px 0;text-align:center}
.q-endpoint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:var(--navy)}
.q-endpoint span{font-size:.86rem;color:var(--muted)}

@media(max-width:768px){
  .q-file{grid-template-columns:1fr auto;gap:8px 16px}
  .q-file span:nth-of-type(2){display:none}
  .q-checkgrid{grid-template-columns:1fr;gap:0}
  .q-endpoint{grid-template-columns:64px 1fr;gap:10px 16px}
  .q-endpoint span{grid-column:1/-1}
}

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.q-page-integrations .q-sec{padding:96px 0}

.q-ints{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.q-int{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px;position:relative;overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.q-int::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.q-int:hover{border-color:var(--c);transform:translateY(-3px);
  box-shadow:0 18px 38px -28px rgba(22,37,56,.5)}
.q-int:hover::before{transform:scaleX(1)}

/* Logo slot. Replace the monogram with <img src="img/integrations/slack.svg" alt="Slack">
   — the slot is fixed height so mixed logo proportions still line up. */
.q-int__logo{height:52px;display:flex;align-items:center;margin-bottom:22px}
.q-int__logo img{max-height:32px;width:auto}
.q-int__mono{width:52px;height:52px;border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;
  font-weight:700;font-size:1.05rem;letter-spacing:-.03em;color:var(--c);
  background:color-mix(in srgb,var(--c) 8%,#fff);transition:.25s var(--ease)}
.q-int:hover .q-int__mono{border-color:var(--c)}
.q-int h3{font-size:1.06rem;letter-spacing:-.026em;margin-bottom:9px}
.q-int p{font-size:.89rem;color:var(--muted);line-height:1.58;flex:1}
.q-int__f{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line)}
.q-int__cat{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.q-int__go{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;font-weight:600;
  color:var(--muted-2);transition:color .25s var(--ease)}
.q-int:hover .q-int__go{color:var(--c)}
.q-int:hover .q-arrow{transform:translateX(4px)}

.q-build{display:grid;grid-template-columns:1fr 1fr;gap:20px}

@media(max-width:1024px){.q-ints{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .q-page-integrations .q-sec{padding:64px 0}
  .q-ints,.q-build{grid-template-columns:1fr}
}

/* header shares the resource-detail two-column band */
.q-page-integrations .q-reshead h1{max-width:16ch}
.q-page-integrations .q-reshead .q-lead{max-width:54ch}
.q-page-integrations .q-map{position:sticky;top:110px}
@media(max-width:1024px){.q-page-integrations .q-map{position:static}}

/* white hero against the tinted directory — the colour change separates them,
   so no divider is needed and the two bands stop merging */
.q-page-integrations .q-reshead{background:#fff;border-bottom:0;padding-bottom:52px}
.q-page-integrations .q-reshead .q-resfacts{border-top-color:var(--line)}
.q-page-integrations .q-reshead .q-resfacts div{border-left-color:var(--line)}
.q-page-integrations #directory{padding-top:72px}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.q-legalbar{background:var(--bg);border-bottom:1px solid var(--line);padding:52px 0 44px}
.q-legalbar .q-crumb{margin-bottom:24px}
.q-legalbar h1{font-size:clamp(2rem,3.4vw,2.7rem);letter-spacing:-.04em;line-height:1.1;margin-top:0}
.q-legalbar__meta{display:flex;gap:0;margin-top:28px;padding-top:22px;border-top:1px solid #DFE6EF;
  flex-wrap:wrap}
.q-legalbar__meta div{padding:0 22px;border-left:1px solid #DFE6EF}
.q-legalbar__meta div:first-child{padding-left:0;border-left:0}
.q-legalbar__meta b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.92rem;
  letter-spacing:-.02em}
.q-legalbar__meta span{display:block;margin-top:6px;font-size:.78rem;color:var(--muted-2)}

.q-short{background:#fff;border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:0 14px 14px 0;padding:26px 28px;margin-bottom:44px}
.q-short b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.02em;margin-bottom:9px}
.q-short p{font-size:.96rem;color:var(--muted);line-height:1.68;margin:0}
.q-short em{font-style:normal;display:block;margin-top:12px;font-size:.82rem;color:var(--muted-2)}

.q-legal .q-prose h2{font-size:1.4rem;margin-top:48px}
.q-legal .q-prose h2:first-of-type{margin-top:0}
.q-legal .q-prose p{font-size:1rem;line-height:1.74}

/* ============================================================
   ACCENT TOKENS
   One class per accent, so a block exposes `accent` as an
   attribute instead of writing an inline custom property.
   ============================================================ */
.q-mod-blue  {--c:#168FF2}
.q-mod-orange{--c:#FF8A16}
.q-mod-green {--c:#4CCB3B}
.q-mod-navy  {--c:#162538}

/* ============================================================
   WORDPRESS ADMIN BAR
   The toolbar is 32px (46px under 782px) and pushes everything
   down, so both sticky layers need offsetting for logged-in users.
   ============================================================ */
body.admin-bar .q-header{top:32px}
body.admin-bar .q-jump{top:112px}
@media(max-width:782px){
  body.admin-bar .q-header{top:46px}
  body.admin-bar .q-jump{top:126px}
}
@media(max-width:640px){
  body.admin-bar .q-jump{top:114px}
}

/* ============================================================
   BLOCK EDITOR SAFETY
   On the canvas nothing may be hidden: an author cannot select
   what does not render. Reveal animations and inactive tab
   panels are therefore neutralised inside the editor only.
   ============================================================ */
.block-editor-block-list__layout .q-rv,
.editor-styles-wrapper .q-rv{opacity:1 !important;transform:none !important;transition:none !important}
.block-editor-block-list__layout .q-mpanel,
.editor-styles-wrapper .q-mpanel{display:block !important;min-height:0}
.block-editor-block-list__layout .q-mpanel + .q-mpanel,
.editor-styles-wrapper .q-mpanel + .q-mpanel{margin-top:16px}
.block-editor-block-list__layout .q-header,
.block-editor-block-list__layout .q-jump,
.editor-styles-wrapper .q-header,
.editor-styles-wrapper .q-jump{position:static;background:#fff}
.block-editor-block-list__layout .q-face,
.editor-styles-wrapper .q-face{fill:transparent}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .q-rv{opacity:1 !important;transform:none !important;transition:none !important}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}