/* Pin heading ink on the light paper surface — the bound design-system
   stylesheet sets h1..h4{color:var(--fg)}, which flips to a light color
   under OS dark mode and would turn these headings white on cream paper.
   Scoped to our display classes so the dark footer/CTA (inline color) are
   untouched. */
.qpage .display,.qpage .sec-title{color:var(--ink);}

/* Keep the crawlable, no-JS index in the document without flashing its plain
   link list before React paints the designed blog. The noscript override in
   blog.html restores it for visitors who intentionally disable JavaScript. */
#root.app-pending{min-height:100vh;background:#ECE7F2;}
#root.app-pending>.crawler-fallback{visibility:hidden;}

/* ---- masthead: refreshed eyebrow pill + scribble underline + soft glow ---- */
.blog-masthead{position:relative;}
.blog-mast-deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible;}
.blog-mast-deco .g{position:absolute;top:-24%;right:2%;width:min(480px,40vw);height:min(480px,40vw);border-radius:50%;background:radial-gradient(circle, rgba(92,40,164,.14), transparent 66%);}
.blog-masthead > *{position:relative;z-index:1;}
.blog-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;
  border:2px solid var(--line);background:var(--card);box-shadow:3px 3px 0 var(--purple);
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink);}
.blog-eyebrow img{width:18px;height:18px;object-fit:contain;display:block;}
.blog-scribble{position:relative;display:inline-block;white-space:nowrap;color:var(--ink);}
.blog-scribble svg{position:absolute;left:-1%;bottom:-.16em;width:102%;height:.42em;overflow:visible;}
@media (max-width:600px){.blog-scribble{white-space:normal;}}

.blogcard,.blogfeat{transition:box-shadow .18s ease, transform .18s ease;}
.blogcard:hover{box-shadow:6px 6px 0 var(--purple);transform:translate(-2px,-2px);}
.blogfeat:hover{box-shadow:8px 8px 0 var(--purple);transform:translate(-2px,-2px);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
.blog-listing{scroll-margin-top:24px;}
.blog-pagination-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(36px,5vw,64px);}
.blog-pagination-status{margin:0;color:var(--ink-3);font-size:12px;letter-spacing:.04em;}
.blog-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;}
.blog-pagination button{min-width:44px;height:44px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-family:var(--font-mono);font-size:13px;font-weight:600;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease;}
.blog-pagination button:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--purple);}
.blog-pagination button.active{background:var(--purple);color:#fff;box-shadow:3px 3px 0 var(--ink);}
.blog-pagination button:disabled{cursor:not-allowed;opacity:.38;box-shadow:none;}
.blog-pagination .blog-page-step{min-width:104px;padding:0 16px;}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr;}
  .blog-pagination{gap:8px;}
  .blog-pagination button{min-width:40px;height:40px;}
  .blog-pagination .blog-page-step{min-width:92px;padding:0 12px;}}
@media (max-width:820px){.blogfeat{grid-template-columns:1fr!important;}
  .blogfeat > div:first-child{border-right:none!important;border-bottom:2px solid var(--line)!important;}}
@media (prefers-reduced-motion: reduce){.blogcard:hover,.blogfeat:hover{transform:none;}}

/* ---- newsletter: flat brand-purple CTA field with concentric rings ---- */
.blog-news{position:relative;overflow:hidden;background:var(--purple-deep);color:var(--paper);border-top:2px solid var(--line);}
.blog-news-deco{position:absolute;inset:0;pointer-events:none;z-index:0;}
.blog-news-deco .ring{position:absolute;border-radius:50%;left:78%;top:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(201,193,242,.16);}
.blog-news-deco .r1{width:420px;height:420px;}
.blog-news-deco .r2{width:660px;height:660px;border-color:rgba(201,193,242,.10);}
.blog-news-deco .r3{width:920px;height:920px;border-color:rgba(201,193,242,.06);}
.blog-news-mark{background:var(--amber);color:var(--ink);border:2.5px solid var(--paper);
  box-shadow:4px 4px 0 rgba(0,0,0,.35);padding:0 .12em;border-radius:3px;transform:rotate(-1.4deg);display:inline-block;}
.blog-news-badge{display:flex;justify-content:center;}
.blog-news-check{width:96px;height:96px;flex-shrink:0;background:var(--amber);border:2.5px solid var(--paper);
  box-shadow:6px 6px 0 rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transform:rotate(-3deg);}
@media (max-width:760px){.blog-news-badge{justify-content:flex-start;}}

/* ---- article layout: share rail · body · TOC ---- */
.qb-layout{display:grid;grid-template-columns:56px minmax(0,720px) 236px;justify-content:center;gap:clamp(28px,4vw,60px);align-items:start;}
.qb-main{min-width:0;}
.qb-share{position:sticky;top:96px;}
.qb-share-label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;}
.qb-share-btns{display:flex;flex-direction:column;gap:12px;}
.qb-sbtn{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;text-decoration:none;padding:0;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;}
.qb-sbtn:hover{background:var(--ink);color:var(--paper);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--purple);}
.qb-sbtn.copied{background:var(--purple);color:#fff;border-color:var(--purple);}
.qb-toc{position:sticky;top:96px;align-self:start;}
.qb-toc-label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;}
.qb-toc-list{list-style:none;margin:0;padding:0;border-left:2px solid rgba(26,22,17,.14);}
.qb-toc-list li{position:relative;}
.qb-toc-list li a{display:flex;gap:12px;padding:9px 0 9px 18px;text-decoration:none;color:var(--ink-3);font-size:14px;line-height:1.35;transition:color .15s ease;}
.qb-toc-list li a:hover{color:var(--ink);}
.qb-toc-num{font-family:var(--font-mono);font-size:12px;font-weight:600;flex-shrink:0;letter-spacing:.02em;}
.qb-toc-list li.active a{color:var(--ink);font-weight:600;}
.qb-toc-list li.active .qb-toc-num{color:var(--purple);}
.qb-toc-list li.active::before{content:"";position:absolute;left:-2px;top:9px;bottom:9px;width:2px;background:var(--purple);}
@media (max-width:1120px){
  .qb-layout{grid-template-columns:56px minmax(0,1fr);}
  .qb-toc{display:none;}
}
@media (max-width:720px){
  .qb-layout{grid-template-columns:1fr;gap:24px;}
  .qb-share{position:static;}
  .qb-share-label{margin-bottom:10px;}
  .qb-share-btns{flex-direction:row;}
}

/* ---- legal pages (privacy/terms/security): body + TOC, no share rail ---- */
.legal-layout{display:grid;grid-template-columns:minmax(0,760px) 236px;justify-content:center;gap:clamp(28px,4vw,60px);align-items:start;}
@media (max-width:1120px){
  .legal-layout{grid-template-columns:minmax(0,1fr);}
  .legal-layout .qb-toc{display:none;}
}

/* ---- article prose ---- */
.qb-prose{font-family:var(--font-product);color:var(--ink-2);font-size:17.5px;line-height:1.75;}
.qb-prose > *:first-child{margin-top:0;}
.qb-prose p{margin:0 0 1.2em;text-wrap:pretty;}
.qb-prose h2{font-family:var(--font-marketing);color:var(--ink);font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-0.03em;line-height:1.16;margin:1.7em 0 .5em;text-wrap:balance;}
.qb-prose h3{font-family:var(--font-marketing);color:var(--ink);font-size:clamp(19px,2.2vw,23px);font-weight:600;letter-spacing:-0.02em;line-height:1.25;margin:1.5em 0 .4em;}
.qb-prose h4{font-family:var(--font-marketing);color:var(--ink);font-size:18px;font-weight:600;margin:1.3em 0 .3em;}
.qb-prose a{color:var(--purple);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;font-weight:500;}
.qb-prose a:hover{background:var(--peri-soft);}
.qb-prose strong,.qb-prose b{color:var(--ink);font-weight:700;}
.qb-prose em,.qb-prose i{font-style:italic;}
.qb-prose ul,.qb-prose ol{margin:0 0 1.2em;padding-left:1.35em;}
.qb-prose li{margin:0 0 .5em;padding-left:.15em;}
.qb-prose li::marker{color:var(--purple);font-weight:700;}
.qb-prose blockquote{margin:1.6em 0;padding:22px 26px;background:var(--paper-2);border:2px solid var(--line);box-shadow:5px 5px 0 var(--ink);font-family:var(--font-marketing);font-size:19px;line-height:1.5;color:var(--ink);font-weight:500;}
.qb-prose blockquote p{margin:0;}
.qb-prose blockquote p + p{margin-top:.6em;}
.qb-prose img{width:100%;height:auto;border:2px solid var(--line);margin:1.5em 0;box-shadow:5px 5px 0 var(--ink);background:#fff;display:block;}
.qb-prose figure{margin:1.6em 0;max-width:100%!important;}
.qb-prose figure img{margin:0;}
.qb-prose figcaption{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:8px;text-align:center;}
.qb-prose .w-richtext-figure-type-video{position:relative;height:0;overflow:hidden;border:2px solid var(--line);box-shadow:5px 5px 0 var(--ink);}
.qb-prose .w-richtext-figure-type-video>div{position:absolute;inset:0;}
.qb-prose .w-richtext-figure-type-video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.qb-prose iframe{max-width:100%;}
.qb-prose hr{border:none;border-top:2px solid var(--line);margin:2em 0;}
.qb-prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:1.5em 0;font-size:15px;}
.qb-prose th,.qb-prose td{border:1.5px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
.qb-prose th{background:var(--paper-2);font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);}