/* ============================================================================
   MyBills Tracker — blog
   The structure of the blog template sir shared (Bhoomi2Bhavan): a search-led
   hero with popular topics, a "Start here" list, topic chips and a grid of
   numbered cards with an illustrated band and Impact / Ease / Money saved dots.
   An article opens on the same page, with key insights, number tiles, charts,
   sourced facts, tables and a flow chart. Written by scripts/build-blog.mjs.
   Fraunces for headlines, Outfit for text, a monospace for small labels.
   Every class is prefixed .bq- so nothing here reaches the rest of the site.
========================================================================== */
:root{
  --bq-bg:#F5F7FA; --bq-card:#FFFFFF; --bq-soft:#EEF2F7; --bq-rule:#E1E7EF; --bq-rule-2:#C9D4E2;
  --bq-ink:#14213A; --bq-mid:#47566F; --bq-faint:#6F7D96; --bq-link:#2463B8;
  --bq-orange:#EA580C; --bq-orange-2:#F97316; --bq-navy:#0B1A33; --bq-blue:#2F6FC4;
  --bq-good:#167A4A; --bq-warn-bg:#FFF4E5; --bq-warn:#8A4B00;
  --bq-sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --bq-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --bq-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --bq-shadow:0 1px 2px rgba(15,30,60,.05),0 6px 22px -12px rgba(15,30,60,.18);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bq-bg:#0B1322; --bq-card:#121C30; --bq-soft:#18243A; --bq-rule:#223049; --bq-rule-2:#33456A;
    --bq-ink:#E9EEF7; --bq-mid:#B4BFD3; --bq-faint:#8592AB; --bq-link:#86B6F2;
    --bq-navy:#E9EEF7; --bq-blue:#6EA1EC; --bq-good:#5FD39A; --bq-warn-bg:#33270F; --bq-warn:#F2BE6B;
    --bq-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 22px -12px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bq-bg:#0B1322; --bq-card:#121C30; --bq-soft:#18243A; --bq-rule:#223049; --bq-rule-2:#33456A;
  --bq-ink:#E9EEF7; --bq-mid:#B4BFD3; --bq-faint:#8592AB; --bq-link:#86B6F2;
  --bq-navy:#E9EEF7; --bq-blue:#6EA1EC; --bq-good:#5FD39A; --bq-warn-bg:#33270F; --bq-warn:#F2BE6B;
  --bq-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 22px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* topic colours: --c for the icon and accents, --c-bg for the card band */
.bq-c-tracking{--c:#2F6FC4;--c-bg:#E4EEFB}
.bq-c-cashflow{--c:#0F8A86;--c-bg:#DDF3F1}
.bq-c-safety{--c:#1C7F4D;--c-bg:#E0F2E8}
.bq-c-debt{--c:#C2410C;--c-bg:#FDEBDD}
.bq-c-goals{--c:#6B46C1;--c-bg:#EDE7FA}
.bq-c-inflation{--c:#B42335;--c-bg:#FBE5E8}
.bq-c-markets{--c:#3949AB;--c-bg:#E5E8FA}
.bq-c-tax{--c:#475569;--c-bg:#E8ECF1}
.bq-c-behaviour{--c:#A21C6E;--c-bg:#F8E3EF}
.bq-c-life{--c:#9A6700;--c-bg:#FBF0D6}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bq-card{--c-bg:color-mix(in srgb,var(--c) 22%,#121C30)}
  :root:not([data-theme="light"]) :is(.bq-c-tracking,.bq-c-cashflow,.bq-c-safety,.bq-c-debt,.bq-c-goals,.bq-c-inflation,.bq-c-markets,.bq-c-tax,.bq-c-behaviour,.bq-c-life){--c:color-mix(in srgb,var(--c) 55%,#fff)}
}
:root[data-theme="dark"] .bq-card{--c-bg:color-mix(in srgb,var(--c) 22%,#121C30)}
:root[data-theme="dark"] :is(.bq-c-tracking,.bq-c-cashflow,.bq-c-safety,.bq-c-debt,.bq-c-goals,.bq-c-inflation,.bq-c-markets,.bq-c-tax,.bq-c-behaviour,.bq-c-life){--c:color-mix(in srgb,var(--c) 55%,#fff)}

:where(.bq-wrap,.bq-latest),:where(.bq-wrap,.bq-latest) *{box-sizing:border-box}
body.bq-page{margin:0;background:var(--bq-bg);color:var(--bq-ink);font:16px/1.6 var(--bq-sans);-webkit-font-smoothing:antialiased}
.bq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.bq-wrap,.bq-latest) :where(a,button,input,select,summary):focus-visible{outline:2px solid var(--bq-orange);outline-offset:3px;border-radius:8px}
.bq-wrap [hidden],.bq-latest [hidden]{display:none!important}
.bq-wrap a{color:var(--bq-link)}

.bq-wrap{max-width:1200px;margin:0 auto;padding:clamp(28px,4vw,48px) max(16px,4vw) 72px}
@media (min-width:1280px){.bq-wrap{padding-inline:40px}}

/* small spaced labels, the template's signature */
.bq-eyebrow{display:block;font:500 11.5px/1.5 var(--bq-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bq-faint);margin:0}
.bq-lede{font-size:1.05rem;color:var(--bq-mid);max-width:72ch;margin:6px 0 0}

/* ---------------------------------------------------------------- hero -- */
.bq-hero h1{font:600 clamp(2.1rem,4.6vw,3rem)/1.08 var(--bq-serif);letter-spacing:-.015em;margin:8px 0 6px;color:var(--bq-ink);text-wrap:balance}
.bq-search{margin-top:20px;max-width:760px;display:flex;align-items:center;gap:10px;background:var(--bq-card);border:1px solid var(--bq-rule-2);border-radius:999px;padding:0 20px;box-shadow:var(--bq-shadow);color:var(--bq-faint)}
.bq-search:focus-within{border-color:var(--bq-orange)}
.bq-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.02rem;color:var(--bq-ink);padding:15px 0;outline:none}
.bq-search input::-webkit-search-cancel-button{cursor:pointer}
.bq-popular{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;font-size:.88rem;color:var(--bq-faint)}
.bq-chip{appearance:none;border:1px solid var(--bq-rule-2);background:var(--bq-card);color:var(--bq-ink);font:inherit;font-size:.86rem;padding:5px 13px;border-radius:999px;cursor:pointer;line-height:1.5;transition:border-color .15s,background .15s}
.bq-chip:hover{border-color:var(--bq-orange)}
.bq-chip[aria-pressed="true"]{background:var(--bq-ink);border-color:var(--bq-ink);color:var(--bq-card)}
.bq-chip small{font-size:.78em;opacity:.7;margin-left:3px}
.bq-blogger{margin:14px 0 0;font-size:.9rem}
.bq-blogger a,.bq-link-out{display:inline-flex;align-items:center;gap:5px;font-weight:600;text-decoration:none}
.bq-blogger a:hover{text-decoration:underline}

/* ------------------------------------------------------------- section -- */
.bq-section{margin-top:clamp(36px,5vw,56px)}
.bq-h2{font:600 clamp(1.6rem,3.2vw,2.2rem)/1.15 var(--bq-serif);margin:8px 0 4px;letter-spacing:-.01em;text-wrap:balance}
.bq-start{margin-top:22px;background:var(--bq-card);border:1px solid var(--bq-rule);border-left:4px solid var(--bq-good);border-radius:10px;padding:16px 20px}
.bq-start ol{margin:8px 0 0;padding-left:1.4em}
.bq-start li{padding:3px 0}
.bq-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.bq-count{margin:0;color:var(--bq-mid);font-size:.92rem}
.bq-sort select{font:inherit;font-size:.92rem;color:var(--bq-ink);background:var(--bq-card);border:1px solid var(--bq-rule-2);border-radius:9px;padding:8px 12px}
.bq-topics{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px}
.bq-empty{margin-top:24px}
.bq-none,.bq-empty{color:var(--bq-mid);background:var(--bq-card);border:1px dashed var(--bq-rule-2);border-radius:12px;padding:22px;text-align:center}
.bq-linkbtn{appearance:none;border:0;background:none;color:var(--bq-link);font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* ---------------------------------------------------------------- cards -- */
.bq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.bq-card{display:flex;flex-direction:column;background:var(--bq-card);border:1px solid var(--bq-rule);border-top:3px solid var(--c);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--bq-ink)!important;box-shadow:var(--bq-shadow);transition:transform .18s,box-shadow .18s}
.bq-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,30,60,.06),0 16px 34px -16px rgba(15,30,60,.32)}
.bq-band{position:relative;height:78px;background:var(--c-bg);color:var(--c);display:flex;align-items:center;padding:0 18px;overflow:hidden}
.bq-band-ic{position:relative;z-index:1;width:48px;height:48px;border-radius:12px;background:var(--bq-card);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.bq-band-dots{position:absolute;inset:0 0 0 40%;background-image:radial-gradient(currentColor 1.3px,transparent 1.6px);background-size:14px 14px;opacity:.22;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.bq-card-in{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.bq-topic{color:var(--c)}
.bq-card-t{font:650 1.06rem/1.3 var(--bq-sans);margin:2px 0 0;text-wrap:balance}
.bq-card-s{color:var(--bq-mid);font-size:.9rem;line-height:1.55;flex:1}
.bq-draft-tag{color:var(--bq-warn);font-weight:700}
.bq-rates{display:flex;flex-wrap:wrap;gap:4px 12px;font:500 11.5px/1.6 var(--bq-mono);color:var(--bq-mid)}
.bq-rates>span{display:inline-flex;align-items:center;gap:5px}
.bq-dots{display:inline-flex;gap:2px}
.bq-dots i{width:7px;height:7px;border-radius:50%;background:var(--bq-rule-2)}
.bq-dots i.on{background:var(--bq-good)}
.bq-meta{font:500 11.5px/1.5 var(--bq-mono);color:var(--bq-faint)}

/* --------------------------------------------------------------- reading -- */
.bq-read{max-width:900px;margin:0 auto}
.bq-back{appearance:none;border:1px solid var(--bq-rule-2);background:var(--bq-card);color:var(--bq-ink);font:inherit;font-weight:600;font-size:.9rem;padding:7px 14px;border-radius:999px;cursor:pointer;margin-bottom:22px}
.bq-back:hover{border-color:var(--bq-orange)}
.bq-back-end{margin:28px 0 0}
.bq-title{font:600 clamp(1.8rem,4vw,2.6rem)/1.12 var(--bq-serif);letter-spacing:-.015em;margin:8px 0 10px;text-wrap:balance}
.bq-dek{font-size:1.15rem;color:var(--bq-mid);margin:0 0 12px;max-width:68ch}
.bq-byline{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.bq-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.bq-link-out{appearance:none;border:1px solid var(--bq-rule-2);background:var(--bq-card);color:var(--bq-link);font:inherit;font-size:.86rem;padding:6px 12px;border-radius:999px;cursor:pointer}
.bq-link-out:hover{border-color:var(--bq-link)}

.bq-insights{background:var(--bq-card);border:1px solid var(--bq-rule);border-left:4px solid var(--bq-blue);border-radius:10px;padding:16px 22px;margin:0 0 16px}
.bq-insights ul{margin:8px 0 0;padding-left:1.2em}
.bq-insights li{padding:4px 0}
.bq-panel{display:block;background:var(--bq-card);border:1px solid var(--bq-rule);border-radius:10px;padding:16px 18px;margin:0 0 16px}
.bq-panel figcaption{margin-bottom:12px}
.bq-panel figcaption b,.bq-panel-t{display:block;font-weight:650;font-size:1.02rem;margin-top:2px}
.bq-note{display:block;font:500 11.5px/1.6 var(--bq-mono);color:var(--bq-faint);margin:10px 0 0}
.bq-panel .bq-note:first-of-type{margin-top:2px}
.bq-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:12px}
.bq-tile{border-top:3px solid var(--bq-blue);padding-top:10px;display:flex;flex-direction:column;gap:3px}
.bq-tile b{font-size:1.45rem;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bq-tile span{color:var(--bq-mid);font-size:.9rem;line-height:1.45}
.bq-tile a,.bq-tile small{font-size:.8rem;line-height:1.4}
.bq-hbars{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:center;margin-top:14px;font:500 .9rem var(--bq-mono)}
.bq-hlab{text-align:right;color:var(--bq-mid)}
.bq-htrack{height:16px;background:var(--bq-soft);border-radius:4px;overflow:hidden}
.bq-htrack span{display:block;height:100%;background:var(--bq-blue);border-radius:0 4px 4px 0}
.bq-hval{font-weight:700;font-variant-numeric:tabular-nums}

.bq-vbars{display:flex;align-items:flex-end;gap:2px;height:200px;margin:28px 0 0;padding-bottom:22px;border-bottom:1px solid var(--bq-rule-2);position:relative}
.bq-vbar{position:relative;flex:1;height:var(--h);background:var(--bq-blue);border-radius:4px 4px 0 0;min-width:4px}
.bq-vbar:hover{background:var(--bq-orange)}
.bq-vbar b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:700 .8rem var(--bq-mono);color:var(--bq-ink);padding-bottom:3px;white-space:nowrap}
.bq-vlab{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:500 10.5px var(--bq-mono);color:var(--bq-faint);padding-top:5px}
.bq-axis{text-align:center;font:500 11.5px var(--bq-mono);color:var(--bq-faint);margin:26px 0 0}
.bq-data{margin-top:10px;font-size:.9rem}
.bq-data summary{cursor:pointer;color:var(--bq-link);font-weight:600}

.bq-tw{overflow-x:auto;border:1px solid var(--bq-rule);border-radius:8px}
.bq-wrap table{width:100%;border-collapse:collapse;font-size:.93rem;font-variant-numeric:tabular-nums}
.bq-wrap thead th{background:var(--bq-blue);color:#fff;font:600 11px/1.4 var(--bq-mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:10px 12px}
.bq-wrap tbody th{font:600 .82rem var(--bq-mono);color:var(--bq-mid);text-align:left;padding:10px 12px;vertical-align:top}
.bq-wrap tbody td{padding:10px 12px;vertical-align:top}
.bq-wrap tbody tr+tr :is(th,td){border-top:1px solid var(--bq-rule)}

.bq-flow{list-style:none;margin:6px 0 0;padding:0;max-width:580px;display:flex;flex-direction:column}
.bq-step{position:relative;border:1px solid var(--bq-rule-2);background:var(--bq-card);border-radius:10px;padding:10px 14px;font-size:.95rem}
.bq-step+.bq-step{margin-top:22px}
.bq-step+.bq-step::before{content:'';position:absolute;left:24px;top:-22px;height:22px;border-left:2px solid var(--bq-rule-2)}
.bq-step+.bq-step::after{content:'';position:absolute;left:20px;top:-8px;border:5px solid transparent;border-top-color:var(--bq-rule-2)}
.bq-step.is-start,.bq-step.is-end{background:var(--bq-navy);color:var(--bq-bg);border-color:var(--bq-navy);border-radius:999px;padding-inline:18px}
.bq-step.is-ask{border-style:dashed;border-color:var(--bq-orange);display:flex;gap:10px;align-items:flex-start}
.bq-q{flex:none;width:20px;height:20px;border-radius:50%;background:var(--bq-orange);color:#fff;font:700 .78rem/20px var(--bq-sans);text-align:center;margin-top:2px}

.bq-body{font-size:1.04rem;line-height:1.7;margin-top:8px}
.bq-body>p{margin:0 0 14px;max-width:72ch}
.bq-h{font:700 .95rem/1.4 var(--bq-sans);letter-spacing:.06em;text-transform:uppercase;margin:28px 0 8px;color:var(--bq-ink)}
.bq-list{margin:0 0 16px;padding-left:1.3em;max-width:72ch}
.bq-list li{padding:4px 0}
.bq-body .bq-panel{margin:18px 0}
.bq-tool{margin:22px 0;background:linear-gradient(135deg,#FFF3EA,#FFF9F4);border:1px solid #F8CBA8;border-radius:12px;padding:16px 20px}
.bq-tool p{margin:6px 0 12px;color:#4A2A12}
.bq-tool .bq-eyebrow{color:#B5470B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bq-tool{background:#2A1A10;border-color:#5A3218}:root:not([data-theme="light"]) .bq-tool p{color:#F6D9C3}:root:not([data-theme="light"]) .bq-tool .bq-eyebrow{color:#FDBA74}}
:root[data-theme="dark"] .bq-tool{background:#2A1A10;border-color:#5A3218}
:root[data-theme="dark"] .bq-tool p{color:#F6D9C3}
:root[data-theme="dark"] .bq-tool .bq-eyebrow{color:#FDBA74}
.bq-btn{display:inline-block;background:var(--bq-orange);color:#fff!important;text-decoration:none;font-weight:650;font-size:.92rem;padding:9px 16px;border-radius:9px}
.bq-btn:hover{background:var(--bq-orange-2)}
.bq-sources{margin-top:26px;font-size:.92rem}
.bq-sources ul{margin:6px 0 0;padding-left:1.2em}
.bq-sources li{padding:2px 0}
.bq-disclaimer{margin:22px 0 0;padding:12px 14px;border-radius:8px;background:var(--bq-soft);color:var(--bq-mid);font-size:.84rem}
.bq-related{margin-top:36px}
.bq-related .bq-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.bq-review{background:var(--bq-warn-bg);color:var(--bq-warn);border-radius:10px;padding:12px 16px;margin:0 0 18px;font-size:.92rem}
.bq-review ul{margin:6px 0 0;padding-left:1.2em}

/* -------------------------------------------- homepage "From the blog" -- */
.bq-latest{background:var(--bq-bg,#F5F7FA);padding:clamp(40px,6vw,72px) 0}
.bq-latest-in{max-width:1200px;margin:0 auto;padding:0 max(16px,4vw)}
.bq-latest-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.bq-latest-head h2{font:600 clamp(1.6rem,3vw,2.1rem)/1.15 var(--bq-serif);margin:0 0 4px;color:var(--bq-ink)}
.bq-latest-head p{margin:0;color:var(--bq-mid)}
.bq-all{font-weight:650;color:var(--bq-link);text-decoration:none}
.bq-all:hover{text-decoration:underline}
.bq-latest .bq-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

@media (max-width:600px){
  .bq-search{padding:0 16px}
  .bq-search input{padding:13px 0}
  .bq-vbars{gap:1px;height:170px}
  .bq-vlab{display:none}
  .bq-vbar:first-child .bq-vlab,.bq-vbar:last-child .bq-vlab{display:block}
  .bq-hbars{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){.bq-card{transition:none}.bq-card:hover{transform:none}}
@media print{
  .snav,.sf,#bqList,.bq-back,.bq-links,.bq-related,.cw-launch,.cw-panel,.back-to-top{display:none!important}
  body.bq-page{background:#fff;color:#000}
  .bq-read{max-width:none}
  .bq-panel,.bq-insights,.bq-tool{break-inside:avoid;box-shadow:none}
}