/* Finsightic Bangladesh (/bd) - shared stylesheet.
 *
 * The rest of finsightic.com inlines its CSS per page, which suits pages that
 * each look different. This section is one design across seven pages, so
 * inlining would mean seven copies of this file kept in step by hand - and the
 * eighth page would quietly drift. One request, cached after the first page.
 */
:root{
  --blue:#1D89E4; --blue-d:#0F63AE; --blue-l:#EAF3FC; --blue-xl:#F6FAFE;
  --ink:#0F1620; --ink-2:#2B3947; --grey:#6B7785; --line:#E5ECF3;
  --green:#12A06A; --green-l:#E8F7F0;
  --bn:"Hind Siliguri","Noto Sans Bengali","Kalpurush","SolaimanLipi","Nirmala UI",system-ui,sans-serif;
  --en:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:120px;}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--bn);font-size:18px;line-height:1.85;-webkit-font-smoothing:antialiased;}
body.lang-en{font-family:var(--en);line-height:1.7;}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.4;}
body.lang-en h1,body.lang-en h2{letter-spacing:-.02em;line-height:1.18;}
h1{font-size:clamp(1.95rem,5.2vw,3rem);}
h2{font-size:clamp(1.5rem,3.8vw,2.2rem);}
h3{font-size:1.14rem;}
p{margin:0;}
section{padding:70px 0;}
.soft{background:var(--blue-xl);}
.sec-top{max-width:660px;margin:0 auto 40px;text-align:center;}
.sec-top p{color:var(--grey);margin-top:12px;font-size:1.02rem;}
.kicker{display:inline-block;background:var(--blue-l);color:var(--blue-d);font-size:.85rem;font-weight:600;padding:6px 14px;border-radius:999px;margin-bottom:14px;}
.muted{color:var(--grey);}
.center{text-align:center;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:1rem;padding:15px 24px;border-radius:12px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:.18s;min-height:52px;font-family:inherit;}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.btn-b{background:var(--blue);color:#fff;}
.btn-b:hover{background:var(--blue-d);}
.btn-o{background:#fff;border-color:var(--line);color:var(--ink);}
.btn-o:hover{border-color:var(--blue);color:var(--blue-d);}
.btn-g{background:var(--green);color:#fff;}
.btn-sm{padding:10px 16px;min-height:44px;font-size:.94rem;}

/* top bar */
.topbar{background:var(--ink);color:#fff;font-size:.93rem;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;flex-wrap:wrap;}
.topbar a{text-decoration:none;font-weight:600;}
.topbar .free{display:inline-flex;align-items:center;gap:9px;}
.topbar .dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;display:inline-block;}
.topbar .ph{color:#8CC7F5;}

/* header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:70px;}
.logo img{height:30px;}
.nav{display:flex;gap:22px;align-items:center;}
.nav a{text-decoration:none;font-size:.97rem;font-weight:500;color:var(--ink-2);}
.nav a:hover{color:var(--blue-d);}
.hdr-r{display:flex;align-items:center;gap:9px;}
.lang{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;}
.lang button{background:#fff;border:0;padding:9px 12px;font-size:.87rem;font-weight:600;cursor:pointer;color:var(--grey);font-family:var(--bn);}
.lang button.on{background:var(--blue);color:#fff;}
.burger{display:none;background:#fff;border:1.5px solid var(--line);width:46px;height:44px;border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.burger span{width:19px;height:2px;background:var(--ink);display:block;}
.mnav{display:none;background:#fff;border-top:1px solid var(--line);}
.mnav.open{display:block;}
.mnav a{display:block;padding:15px 20px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500;}

/* hero */
.hero{padding:52px 0 60px;background:linear-gradient(180deg,var(--blue-xl),#fff);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
.hero h1{max-width:16ch;}
.hero .sub{margin-top:16px;font-size:1.1rem;color:var(--ink-2);max-width:46ch;}
.acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}
.acts .btn{flex:1 1 210px;}
.freelist{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;}
.freelist span{display:inline-flex;align-items:center;gap:8px;font-size:.96rem;color:var(--ink-2);}
.tick{width:19px;height:19px;border-radius:50%;background:var(--green-l);position:relative;flex:none;}
.tick::after{content:"";position:absolute;left:5px;top:6px;width:8px;height:4px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);}

/* A CHECKED LIST. The design shipped .tick as a standalone dot used inside
   hand-built flex rows, so every <ul class="ticks"> written since - the
   service pages, the new home page - was falling back to browser bullets and
   nobody noticed because a bullet list still looks like a list. Defining the
   class once fixes every page that already asked for it. */
.ticks{list-style:none;padding:0;margin:0;}
.ticks li{position:relative;padding-left:29px;margin:8px 0;}
.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:19px;height:19px;border-radius:50%;background:var(--green-l);}
.ticks li::after{content:"";position:absolute;left:5px;top:calc(.35em + 6px);width:8px;height:4px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);}
/* Two even columns where the content is short enough to pair up. CSS columns
   balance by line, which put three items left and one right. */
.ticks.two{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
@media (max-width:640px){.ticks.two{grid-template-columns:1fr;}}

/* report card */
.rep{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 22px 54px -34px rgba(15,22,32,.4);}
.rep h4{font-size:1.02rem;}
.rep .date{font-size:.85rem;color:var(--grey);}
.rep .r{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:.98rem;}
.rep .r:last-of-type{border-bottom:0;}
.rep .r span{color:var(--ink-2);}
.rep .r b{font-weight:600;}
.rep .good{color:var(--green);}
.rep .note{margin-top:12px;background:var(--green-l);color:#0B6B47;border-radius:10px;padding:11px 14px;font-size:.9rem;}

/* cards */
.grid{display:grid;gap:18px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;}
.card h3{margin-bottom:8px;}
.card p{color:var(--grey);font-size:.99rem;}
.icon{width:46px;height:46px;border-radius:13px;background:var(--blue-l);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:15px;}
.card.big{padding:30px 28px;}
.card.big ul{list-style:none;margin:16px 0 0;padding:0;}
.card.big ul li{position:relative;padding:6px 0 6px 26px;font-size:.98rem;color:var(--ink-2);}
.card.big ul li::before{content:"";position:absolute;left:3px;top:1em;width:9px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);}
.card .from{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.96rem;color:var(--grey);}
.card .from b{color:var(--ink);font-size:1.25rem;font-weight:700;}

/* calculator */
.calc{background:#fff;border:2px solid var(--blue);border-radius:20px;padding:30px 28px;box-shadow:0 26px 60px -40px rgba(29,137,228,.7);}
.calc .q{margin-bottom:20px;}
.calc .q > label{display:block;font-weight:600;margin-bottom:10px;font-size:1rem;}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.opts.two{grid-template-columns:repeat(2,1fr);}
.opt{position:relative;}
.opt input{position:absolute;opacity:0;width:0;height:0;}
.opt span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-size:.95rem;line-height:1.35;transition:.15s;background:#fff;}
.opt input:checked + span{border-color:var(--blue);background:var(--blue-l);color:var(--blue-d);font-weight:600;}
.opt input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px;}
.result{margin-top:24px;background:var(--blue-xl);border-radius:16px;padding:22px;}
.result .lbl{font-size:.95rem;color:var(--grey);}
.result .amt{font-size:2.1rem;font-weight:700;line-height:1.25;margin:4px 0 2px;}
.result .plan{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:.9rem;font-weight:600;margin-top:8px;}
.result .fine{font-size:.9rem;color:var(--grey);margin-top:12px;}
.result .btn{margin-top:16px;width:100%;}

/* pricing */
.toggle{display:inline-flex;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin:0 auto 30px;}
.toggle button{border:0;background:transparent;padding:10px 18px;border-radius:9px;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;color:var(--grey);}
.toggle button.on{background:var(--blue);color:#fff;}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;position:relative;}
.plan.pick{border-color:var(--blue);box-shadow:0 22px 54px -38px rgba(29,137,228,.8);}
.plan .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:.82rem;font-weight:600;padding:5px 15px;border-radius:999px;white-space:nowrap;}
.plan h3{font-size:1.24rem;}
.plan .fit{color:var(--grey);font-size:.95rem;margin-top:4px;}
.plan .p{font-size:2rem;font-weight:700;margin:16px 0 0;line-height:1.2;}
.plan .p small{font-size:.95rem;font-weight:500;color:var(--grey);}
.plan .save{color:var(--green);font-size:.9rem;font-weight:600;min-height:22px;}
.plan .lim{background:var(--blue-xl);border-radius:10px;padding:10px 14px;font-size:.94rem;margin:14px 0 4px;color:var(--ink-2);}
.plan ul{list-style:none;margin:12px 0 20px;padding:0;flex:1;}
.plan ul li{position:relative;padding:7px 0 7px 26px;font-size:.97rem;border-bottom:1px dashed var(--line);}
.plan ul li:last-child{border-bottom:0;}
.plan ul li::before{content:"";position:absolute;left:3px;top:1.05em;width:9px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);}
.paybar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:26px;color:var(--grey);font-size:.94rem;}
.paybar b{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 14px;color:var(--ink-2);font-weight:600;}

/* services accordion */
.svc{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;}
.svc summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:flex-start;padding:18px 20px;}
.svc summary::-webkit-details-marker{display:none;}
.svc summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;}
.svc .n{width:32px;height:32px;flex:none;border-radius:9px;background:var(--blue-l);color:var(--blue-d);font-weight:700;font-size:.92rem;display:flex;align-items:center;justify-content:center;}
.svc .h{flex:1;}
.svc .h b{display:block;font-weight:600;font-size:1.05rem;line-height:1.5;}
.svc .h span{display:block;color:var(--grey);font-size:.95rem;}
.svc .pl{width:20px;height:20px;flex:none;position:relative;margin-top:7px;}
.svc .pl::before,.svc .pl::after{content:"";position:absolute;background:var(--blue-d);transition:.22s;}
.svc .pl::before{top:9px;left:0;width:20px;height:2px;}
.svc .pl::after{left:9px;top:0;width:2px;height:20px;}
.svc[open] .pl::after{transform:rotate(90deg);}
.svc .body{padding:0 20px 22px 66px;}
.svc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px;}
.svc ul li{break-inside:avoid;position:relative;padding:5px 0 5px 24px;font-size:.97rem;color:var(--ink-2);}
.svc ul li::before{content:"";position:absolute;left:2px;top:.95em;width:9px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);}

/* steps */
.steps{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);}
.stp{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;}
.stp .num{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:14px;}
.stp p{color:var(--grey);font-size:.96rem;}

/* trust strip */
.tstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.tstrip > div{background:#fff;padding:22px 20px;text-align:center;}
.tstrip .k{display:block;font-weight:700;color:var(--blue-d);font-size:1.05rem;}
.tstrip .v{display:block;color:var(--grey);font-size:.92rem;margin-top:4px;}

/* review */
.rev{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;}
.rev .stars{color:#F5A623;letter-spacing:2px;}
.rev p{margin-top:10px;font-size:1.02rem;}
.rev .who{margin-top:14px;color:var(--grey);font-size:.94rem;}

/* faq */
.faq{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;}
.faq details{border-bottom:1px solid var(--line);}
.faq details:last-child{border-bottom:0;}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 22px;font-weight:600;font-size:1.03rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;}
.faq p{padding:0 22px 20px;color:var(--grey);font-size:.99rem;}
.faq .pl{width:20px;height:20px;flex:none;position:relative;margin-top:7px;}
.faq .pl::before,.faq .pl::after{content:"";position:absolute;background:var(--blue-d);transition:.22s;}
.faq .pl::before{top:9px;left:0;width:20px;height:2px;}
.faq .pl::after{left:9px;top:0;width:2px;height:20px;}
.faq details[open] .pl::after{transform:rotate(90deg);}

/* contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
.way{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 18px;text-decoration:none;margin-bottom:11px;}
.way:hover{border-color:var(--blue);}
.way .ic{width:44px;height:44px;border-radius:12px;background:var(--blue-l);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:none;}
.way b{display:block;}
.way span{display:block;color:var(--grey);font-size:.93rem;}
.form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;}
.field{margin-bottom:15px;}
.field label{display:block;font-size:.95rem;font-weight:600;margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);}
.field textarea{min-height:100px;resize:vertical;}
.fnote{font-size:.92rem;color:var(--grey);margin-top:12px;}

footer{background:#0D141D;color:#9FB0C0;padding:54px 0 24px;}
footer .logo img{height:28px;filter:brightness(0) invert(1);}
footer p{font-size:.95rem;margin-top:14px;max-width:32ch;}
footer h4{color:#fff;font-size:.95rem;margin-bottom:13px;}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:9px;}
footer a{text-decoration:none;font-size:.95rem;}
footer a:hover{color:var(--blue);}
.fbar{margin-top:36px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:.89rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.98);border-top:1px solid var(--line);}
.callbar .btn{flex:1;}

.rise{opacity:0;transform:translateY(14px);transition:.5s;}
.rise.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

@media (max-width:960px){
  .hero-grid,.cgrid{grid-template-columns:1fr;gap:34px;}
  .g3,.g4,.steps,.tstrip{grid-template-columns:repeat(2,1fr);}
  .nav{display:none;}
  .burger{display:flex;}
}
@media (max-width:640px){
  body{font-size:17px;padding-bottom:78px;}
  section{padding:52px 0;}
  .hero{padding:36px 0 46px;}
  .g2,.g3,.g4,.steps,.tstrip{grid-template-columns:1fr;}
  .opts{grid-template-columns:1fr;}
  .svc ul{columns:1;}
  .svc .body{padding:0 18px 20px;}
  .callbar{display:flex;}
  .acts .btn{flex:1 1 100%;}
  .topbar .wrap{justify-content:center;text-align:center;padding-top:6px;padding-bottom:6px;}
  .calc{padding:24px 20px;}

  /* HEADER CROWDING ON PHONES. Logo, language toggle, "Free consult" and the
     burger competed for one 390px row, and the loser was the Bangla label:
     "বাংলা" rendered clipped to "বাংল" - the toggle a Bangladeshi visitor is
     most likely to want, mangled on the device most of them will arrive on.

     The header CTA goes, not the toggle. The sticky bar pinned to the bottom
     of every phone screen already carries the same action and is closer to the
     thumb, so nothing is lost; the language switch has no second home. */
  .hdr-r .btn{display:none;}
  .lang button{padding:9px 11px;}
  .hdr-in{gap:10px;height:64px;}
}

/* Narrow Androids (360px and below) are still common in Bangladesh, so the
   toggle has to survive there too rather than only on a 390px iPhone. */
@media (max-width:380px){
  .lang button{padding:8px 9px;font-size:.83rem;}
  .hdr-in{gap:8px;}
}

/* DOWNLOAD TILES LINE UP ACROSS A ROW. The descriptions are different lengths,
   so a button placed straight after the text sat at a different height in
   every card of the row and the grid stopped reading as a grid. Pushing the
   button to the bottom of the card is what makes three tiles look like one
   row rather than three unrelated boxes. */
.card.dl{display:flex;flex-direction:column;}
.card.dl p{margin-bottom:18px;}
.card.dl > .btn{margin-top:auto;align-self:flex-start;}

/* CASE STUDIES FROM THE US PRACTICE.
   These are real engagements of the American practice, not Bangladesh
   clients, and the section header says so on every page that carries one.
   Styled deliberately unlike a testimonial: no faces, no quote marks, no
   stars - a problem, the work, and what changed. The outcome block is the
   only tinted thing, because it is the only part a buyer is scanning for. */
.cs{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:15px;}
.cs .tagp{align-self:flex-start;background:var(--blue-xl);color:var(--blue-d);font-size:.75rem;font-weight:700;letter-spacing:.05em;padding:5px 12px;border-radius:999px;}
.cs h3{font-size:1.1rem;margin:0;line-height:1.35;}
.cs .lab{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--grey);margin-bottom:6px;}
.cs .blk{border-top:1px solid var(--line);padding-top:13px;}
.cs .blk:first-of-type{border-top:0;padding-top:0;}
.cs p{margin:0;font-size:.94rem;color:var(--ink-2);line-height:1.65;}
.cs .out{background:var(--blue-xl);border-radius:12px;padding:14px 16px;margin-top:auto;}
.cs .out .lab{color:var(--blue-d);}
.cs .out p{color:var(--ink);font-weight:500;}
/* The standing disclaimer that keeps the section honest. */
.uspx{max-width:660px;margin:0 auto 26px;text-align:center;font-size:.94rem;color:var(--grey);}

/* PLATFORM LOGOS, rendered as masks like the US site.
   A silhouette rather than the full-colour mark: it keeps a row of nine
   brands from turning into a colour clash, and it goes full colour on hover
   for anyone who wants to check what they are looking at. */
.tlogo{display:block;height:var(--h,15px);width:calc(var(--h,15px) * var(--ar,3));background:#7C8AA0;-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;opacity:.85;transition:opacity .2s ease;}
.tlogo:hover{opacity:1;background:var(--mask) center/contain no-repeat;-webkit-mask:none;mask:none;}
/* A PNG mask has no transparency to key off, so it stays a silhouette and
   only darkens on hover. */
.tlogo.tlogo-mono:hover{opacity:1;background:var(--ink);-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 40px;padding:4px 0;}
.logos-note{text-align:center;color:var(--grey);font-size:.92rem;margin-top:18px;}
@media (max-width:640px){ .logos{gap:20px 26px;} }

/* Client logo row: real marks, greyed so ten brands read as one row. */
.logos img{filter:grayscale(1);opacity:.72;width:auto;transition:opacity .2s ease,filter .2s ease;}
.logos img:hover{filter:none;opacity:1;}

/* THE COST BAR ON THE LANDING PAGE.
   Emphasis form, not categorical: one accent for us, de-emphasis grey for the
   thing we are measured against. Colours were run through a CVD validator
   rather than eyeballed - #1D89E4 against #4A5A6E gives deutan dE 19.3 and
   normal-vision 20.3, both well clear of the floor. The grey deliberately
   "reads grey"; that is what de-emphasis means.
   Single theme on purpose: the rest of /bd is light-only, so a chart that
   flipped to dark on its own would sit dark on a white page. Every colour is
   painted explicitly rather than inherited. */
.costbar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;}
.costbar h3{font-size:1.06rem;margin:0 0 4px;}
.costbar .cb-sub{color:var(--grey);font-size:.94rem;margin:0 0 22px;}
.cb-row{margin-bottom:20px;}
.cb-lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px;}
.cb-lab .n{font-size:.95rem;color:var(--ink-2);}
.cb-lab .v{font-size:1.06rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.cb-track{position:relative;height:36px;border-radius:8px;}
.cb-rail{background:var(--blue-xl);border-radius:8px;}
/* Salary against everything else. Two shades of ONE grey, which is the
   allowed treatment for parts of a single quantity, with the 2px surface gap
   the stacked-bar spec asks for. The first version used a white marker line
   and it read as a gap in the bar rather than a boundary, which is the sort
   of thing only looking at the render catches.
   The lighter step sits at 2.83:1 against the surface, under the 3:1 line, so
   the validator asks for relief: both segments carry a visible label. */
.cb-track{display:flex;gap:2px;background:transparent;}
.cb-seg{height:100%;display:flex;align-items:center;padding:0 11px;font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;}
.cb-seg.salary{background:#4A5A6E;color:#fff;border-radius:8px 4px 4px 8px;}
.cb-seg.rest{background:#8B99AA;color:#0F1620;border-radius:4px 8px 8px 4px;}
.cb-seg.solo{background:#1D89E4;color:#fff;border-radius:8px;}
.cb-note{font-size:.86rem;color:var(--grey);margin-top:6px;}
.cb-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:4px;font-size:.88rem;color:var(--grey);line-height:1.6;}
@media (max-width:640px){
  .costbar{padding:22px 18px;}
  .cb-lab{flex-direction:column;gap:2px;}
  /* The narrow segment is about 87px on a 390px screen, which clipped
     "Everything else" mid-word. Drop the wording, keep the figure: the note
     under the bar already says what the two parts are. */
  .cb-word{display:none;}
  .cb-seg{padding:0 8px;font-size:.78rem;}
}

/* Article pages. The section had no blog at all, so this is the first
   long-form typography on /bd. Measure kept near 68 characters. */
.art{max-width:720px;margin:0 auto;}
.art .meta{color:var(--grey);font-size:.92rem;margin-bottom:6px;}
.art h1{margin-bottom:14px;}
.art .dek{font-size:1.12rem;color:var(--ink-2);line-height:1.65;margin:0 0 8px;}
.art h2{font-size:1.32rem;margin:34px 0 12px;}
.art h3{font-size:1.06rem;margin:26px 0 8px;}
.art p{margin:0 0 15px;line-height:1.75;}
.art ul,.art ol{margin:0 0 15px;padding-left:22px;}
.art li{margin:8px 0;line-height:1.7;}
.art a{color:var(--blue-d);}
.art .pull{background:var(--blue-xl);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;padding:16px 20px;margin:22px 0;}
.art .pull p{margin:0;}
.art .srcs{border-top:1px solid var(--line);margin-top:34px;padding-top:16px;font-size:.9rem;color:var(--grey);}
.art .srcs li{margin:5px 0;}
.art .asof{background:var(--blue-l);border-radius:10px;padding:14px 17px;font-size:.92rem;color:var(--ink-2);margin:26px 0 0;}
.plist{display:grid;gap:16px;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:block;text-decoration:none;color:inherit;}
.pcard:hover{border-color:var(--blue);}
.pcard .d{color:var(--grey);font-size:.87rem;}
.pcard h3{margin:5px 0 7px;font-size:1.12rem;}
.pcard p{margin:0;color:var(--grey);font-size:.95rem;line-height:1.6;}


/* The home page comparison table is five columns of prose. Below 760px it
   stops behaving as a table and becomes one block per question, each
   alternative labelled from its column header, because a horizontal
   scrollbar hides four of the five answers on a phone. */
@media (max-width:760px){
  #compare .card{overflow-x:visible;padding:0;border:0;background:none;box-shadow:none}
  #compare table{min-width:0;display:block}
  #compare thead{display:none}
  #compare tbody,#compare tbody tr,#compare tbody th,#compare tbody td{display:block}
  #compare tbody tr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 16px 14px;margin-bottom:14px}
  #compare tbody th[scope="row"]{border-top:0;padding:14px 0 4px;font-size:1.02rem;font-weight:700;color:var(--ink)}
  #compare tbody td{border-top:1px solid var(--line);padding:10px 0 0;margin-top:10px}
  #compare tbody td::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);margin-bottom:3px}
  #compare tbody td:last-child::before{color:var(--blue-d)}
}

/* Wide enough that five prose columns stay readable on a desktop; the
   scroller on .card handles anything narrower down to the 760px breakpoint
   above, where the table stops being a table. */
#compare table{min-width:900px}
@media (max-width:760px){#compare table{min-width:0}}