/* =========================================================================
   নিশ্চিত — one stylesheet, no framework.
   Tokens come from ~/.claude/skills/design/references/bd-saas-landing.md,
   where every pair below was measured. Do not add a value that is not on a
   scale here; a size between two steps is a bug, not a refinement.
   ========================================================================= */

:root{
  /* surface */
  --bg:#ffffff;
  --bg-sunken:#f5f8f7;
  --surface:#ffffff;
  --line:#dfe6e4;          /* decorative hairline — separates, carries no meaning */
  --line-strong:#82918d;   /* 3.29:1 — the edge of anything a person operates */

  /* three text colours, and no fourth */
  --fg:#111a19;            /* 17.71:1 on --bg */
  --fg-muted:#41504e;      /*  8.46:1 */
  --fg-faint:#63716f;      /*  5.09:1 — never below 15px */

  /* one accent */
  --accent:#0f766e;        /* 5.47:1 on --bg */
  --accent-deep:#0b5a54;
  --accent-ink:#ffffff;
  --accent-wash:#e7f3f1;
  --accent-ghost:#a3d0ca;   /* decorative only: the big step numerals */

  /* semantic — each wash has an ink that passes on it */
  --good:#166534;   --good-wash:#dcfce7;
  --warn:#854d0e;   --warn-wash:#fef3c7;
  --danger:#9f1239; --danger-wash:#ffe4e6;

  /* type — five steps. marketing scale, not the app's dense one. */
  --t-small:15px;
  --t-body:18px;
  --t-lead:22px;
  --t-h2:34px;
  --t-h1:52px;

  /* space — one scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* shape — two radii and a pill */
  --r:8px; --r-lg:16px; --r-pill:999px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Hind Siliguri','Noto Sans Bengali','Kohinoor Bangla','Nirmala UI',sans-serif;
  font-size:var(--t-body);
  line-height:1.75;          /* Bangla stacks three zones; 1.5 smudges it */
  letter-spacing:0;          /* never anything else on Bangla */
  hyphens:none;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.38; letter-spacing:0; text-wrap:balance; font-weight:700}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; height:auto; display:block}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:2px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.container{max-width:1180px; margin-inline:auto; padding-inline:var(--s5)}
section{padding-block:var(--s9)}
@media (max-width:760px){
  :root{--t-h1:34px; --t-h2:26px; --t-lead:19px; --t-body:17px}
  section{padding-block:var(--s8)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:0 var(--s5); border-radius:var(--r);
  font:inherit; font-size:var(--t-small); font-weight:600;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background-color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{border-color:var(--line-strong); color:var(--fg); background:var(--surface)}
.btn-ghost:hover{background:var(--bg-sunken)}
.btn-invert{background:var(--surface); color:var(--fg)}
.btn-invert:hover{background:var(--bg-sunken)}
.btn-lg{min-height:56px; font-size:var(--t-body); padding:0 var(--s6)}
.btn-block{width:100%}

/* ---------- nav ---------- */
/* On a phone the bar holds two things: the brand and the toggle. Everything
   else drops into the drawer. The first build put the language pill and both
   buttons on the bar at every width; at 390px they added up to more than the
   viewport, and the whole document scrolled sideways because of it. */
.nav{border-bottom:1px solid var(--line); position:relative; background:var(--bg)}
.nav .container{display:flex; align-items:center; gap:var(--s5); min-height:72px}
.brand{font-weight:700; font-size:var(--t-lead); color:var(--accent); white-space:nowrap}
.brand span{color:var(--fg)}
.nav-menu{display:flex; align-items:center; gap:var(--s6); flex:1; min-width:0}
.nav-links{display:flex; gap:var(--s5); font-size:var(--t-small); color:var(--fg-muted); min-width:0}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.nav-actions{margin-inline-start:auto; display:flex; align-items:center; gap:var(--s3)}
.lang{
  display:inline-flex; border:1px solid var(--line-strong);
  border-radius:var(--r-pill); overflow:hidden; flex:none;
  font-size:var(--t-small); font-weight:600;
}
.lang b,.lang a{padding:var(--s1) var(--s3); display:block}
.lang b{background:var(--fg); color:var(--bg)}
.lang a{color:var(--fg-muted)}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line-strong);
  border-radius:var(--r); min-height:48px; min-width:48px; cursor:pointer; flex:none;
  margin-inline-start:auto;
}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--fg); margin:4px auto}

@media (max-width:960px){
  .nav-toggle{display:block}
  .nav-menu{
    display:none; position:absolute; inset-inline:0; top:100%; z-index:20;
    flex-direction:column; align-items:stretch; gap:var(--s5);
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:var(--s5); font-size:var(--t-body);
  }
  .nav[data-open="1"] .nav-menu{display:flex}
  .nav-links{flex-direction:column; gap:var(--s4); font-size:var(--t-body)}
  .nav-actions{margin-inline-start:0; flex-wrap:wrap; gap:var(--s3)}
  .nav-actions .btn{flex:1}
}

/* ---------- section header: eyebrow, H2, one line ---------- */
.section-head{text-align:center; max-width:44rem; margin:0 auto var(--s8)}
.eyebrow{
  display:inline-block; font-size:var(--t-small); font-weight:600;
  color:var(--accent); background:var(--accent-wash);
  padding:var(--s1) var(--s4); border-radius:var(--r-pill); margin-bottom:var(--s4);
}
.section-head h2{font-size:var(--t-h2); margin-bottom:var(--s3)}
.section-head .sub{color:var(--fg-muted); font-size:var(--t-lead)}

/* ---------- hero ---------- */
.hero{padding-block:var(--s8) var(--s9)}
.chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r-pill);
  font-size:var(--t-small); font-weight:600; color:var(--fg-muted);
  padding:var(--s1) var(--s4); margin-bottom:var(--s5);
}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}
.hero h1{font-size:var(--t-h1); max-width:24ch; margin-bottom:var(--s4)}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .sub{font-size:var(--t-lead); color:var(--fg-muted); max-width:52ch; margin-bottom:var(--s6)}
.cta{display:flex; gap:var(--s3); flex-wrap:wrap}
.proof-row{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s5); font-size:var(--t-small); color:var(--fg-muted); flex-wrap:wrap}
.faces{display:flex; flex:none}
.faces span{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--bg);
  margin-inline-start:-9px; display:grid; place-items:center;
  font-size:15px; font-weight:600; color:var(--accent-ink);
}
.faces span:first-child{margin-inline-start:0}
@media (max-width:760px){ .cta .btn{width:100%} }

/* ---------- the product, drawn as a browser window ---------- */
.window{
  margin-top:var(--s8); position:relative;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
}
.chrome{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
  background:var(--bg-sunken); border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.lights{display:flex; gap:6px; flex:none}
.lights i{width:11px; height:11px; border-radius:50%; display:block}
.url{
  font-size:15px; color:var(--fg-faint); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:2px var(--s4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.win-body{padding:var(--s6) var(--s6) var(--s7)}
.win-head{display:flex; align-items:flex-start; gap:var(--s4); margin-bottom:var(--s6); flex-wrap:wrap}
.win-head .label{font-size:var(--t-small); color:var(--fg-faint)}
.win-head .big{font-size:40px; font-weight:700; line-height:1.2}
.win-head .delta{font-size:var(--t-small); font-weight:600; color:var(--good)}
.live-pill{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:var(--s2);
  font-size:15px; font-weight:600; color:var(--good);
  background:var(--good-wash); border-radius:var(--r-pill); padding:var(--s1) var(--s3);
}
.live-pill i{width:7px; height:7px; border-radius:50%; background:var(--good); display:block}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-bottom:var(--s6)}
.tile{border:1px solid var(--line); border-radius:var(--r); padding:var(--s4)}
.tile .k{font-size:15px; color:var(--fg-faint)}
.tile .v{font-size:26px; font-weight:700; line-height:1.3}
.tile .v.g{color:var(--good)} .tile .v.d{color:var(--danger)}
.toast{
  position:absolute; inset-inline-start:var(--s6); bottom:calc(var(--s5) * -1);
  background:var(--surface); border-radius:var(--r);
  box-shadow:0 10px 28px rgba(17,26,25,.16);   /* a floating thing gets a shadow; nothing else does */
  padding:var(--s4) var(--s5); max-width:390px;
  display:flex; gap:var(--s4); align-items:center;
}
.toast .icon{
  width:38px; height:38px; border-radius:var(--r); flex:none;
  background:var(--danger-wash); color:var(--danger);
  display:grid; place-items:center; font-size:19px; font-weight:700;
}
.toast b{display:block; font-size:var(--t-small)}
.toast em{display:block; font-style:normal; font-size:15px; color:var(--fg-faint)}

/* a wide table cannot shrink; it scrolls inside its own box */
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%}
.scroller table{min-width:720px}
table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.65}
th{
  text-align:start; font-weight:600; font-size:15px; color:var(--fg-faint);
  padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:var(--s3); border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td small{display:block; color:var(--fg-faint); font-size:15px}
.pill{display:inline-block; font-size:15px; font-weight:600; padding:1px var(--s3); border-radius:var(--r-pill); white-space:nowrap}
.pill.g{background:var(--good-wash); color:var(--good)}
.pill.w{background:var(--warn-wash); color:var(--warn)}
.pill.d{background:var(--danger-wash); color:var(--danger)}

@media (max-width:760px){
  .win-body{padding:var(--s5) var(--s5) var(--s8)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .win-head .big{font-size:30px}
  .toast{position:static; max-width:none; margin-top:var(--s5); box-shadow:none; border:1px solid var(--line)}
}

/* ---------- section 2: what you no longer buy ---------- */
.replaces{background:var(--bg-sunken); border-block:1px solid var(--line); padding-block:var(--s7)}
.replaces h2{font-size:var(--t-lead); margin-bottom:var(--s5); text-align:center}
.replaces h2 em{font-style:normal; color:var(--accent)}
.replaces ul{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s5)}
.replaces li{border-inline-start:1px solid var(--line); padding-inline-start:var(--s4)}
.replaces li:first-child{border-inline-start:0; padding-inline-start:0}
.replaces b{display:block; font-size:var(--t-small); text-decoration:line-through; text-decoration-color:var(--danger); text-decoration-thickness:2px}
.replaces span{display:block; font-size:15px; color:var(--fg-faint)}
@media (max-width:900px){
  .replaces ul{grid-template-columns:repeat(2,1fr)}
  .replaces li{border-inline-start:0; padding-inline-start:0}
}

/* ---------- stats ---------- */
.stats .container{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5)}
.stats b{display:block; font-size:44px; font-weight:700; line-height:1.2; color:var(--accent-deep)}
.stats span{font-size:var(--t-small); color:var(--fg-muted); display:block; max-width:22ch}
@media (max-width:760px){
  .stats .container{grid-template-columns:repeat(2,1fr); gap:var(--s6)}
  .stats b{font-size:32px}
}

/* ---------- flagship: one feature, its own section ---------- */
.flagship{background:var(--bg-sunken); border-block:1px solid var(--line)}
.flagship .grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--s8); align-items:center}
.flagship h2{font-size:var(--t-h2); margin-bottom:var(--s4)}
.flagship p{color:var(--fg-muted); max-width:46ch; margin-bottom:var(--s5)}
.flagship li{padding-inline-start:var(--s5); position:relative; margin-bottom:var(--s3); font-size:var(--t-small); color:var(--fg-muted)}
.flagship li::before{content:"✓"; position:absolute; inset-inline-start:0; color:var(--accent); font-weight:700}
.panel{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.panel-head{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); background:var(--bg-sunken); font-size:var(--t-small); font-weight:600; flex-wrap:wrap}
.panel-head .tag{font-weight:400; color:var(--fg-faint)}
.panel .scroller{padding:var(--s3) var(--s4) var(--s4)}
@media (max-width:900px){ .flagship .grid{grid-template-columns:1fr; gap:var(--s6)} }

/* ---------- feature cards ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5)}
.card{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); padding:var(--s6); display:block;
  transition:border-color .15s ease;
}
a.card:hover{border-color:var(--accent)}
.card h3{font-size:var(--t-lead); margin-bottom:var(--s2)}
.card p{color:var(--fg-muted); font-size:var(--t-small); margin-bottom:var(--s4)}
.card .mini{display:flex; flex-wrap:wrap; gap:var(--s2)}
.card .mini span{
  font-size:15px; color:var(--fg-muted);
  background:var(--bg-sunken); border-radius:var(--r-pill); padding:2px var(--s3);
}
.more{text-align:center; margin-top:var(--s7)}
@media (max-width:760px){ .cards{grid-template-columns:1fr} }

/* ---------- steps ---------- */
.steps{display:grid; gap:var(--s5)}
.step{display:grid; grid-template-columns:76px minmax(0,1fr); gap:var(--s5); align-items:start; border-top:1px solid var(--line); padding-top:var(--s5)}
.step .n{font-size:40px; font-weight:700; color:var(--accent-ghost); line-height:1}
.step h3{font-size:var(--t-lead); margin-bottom:var(--s2)}
.step p{color:var(--fg-muted); font-size:var(--t-small); max-width:62ch}
@media (max-width:760px){ .step{grid-template-columns:52px minmax(0,1fr); gap:var(--s4)} .step .n{font-size:30px} }

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); align-items:start}
.plan{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:var(--s5); position:relative}
.plan.best{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.plan .badge{
  position:absolute; top:calc(var(--s3) * -1); inset-inline-start:var(--s6);
  background:var(--accent); color:var(--accent-ink);
  font-size:15px; font-weight:600; padding:2px var(--s4); border-radius:var(--r-pill);
}
.plan h3{font-size:var(--t-lead)}
.plan .note{font-size:var(--t-small); color:var(--fg-faint); margin-bottom:var(--s4)}
.plan.best .note{color:#b9c6c3}
/* price and unit each keep their own line box, so a long Bangla unit cannot
   ride over the figure — the exact collision oxiosoft ships */
.plan .price{display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s2)}
.plan .price b{font-size:32px; line-height:1.2}
.plan .price span{font-size:var(--t-small); color:var(--fg-faint)}
.plan.best .price span{color:#b9c6c3}
.plan .cap{font-size:var(--t-small); color:var(--fg-muted); margin-bottom:var(--s5)}
.plan.best .cap{color:#d5dedc}
.plan ul{margin-bottom:var(--s6)}
.plan li{padding-inline-start:var(--s5); position:relative; margin-bottom:var(--s3); font-size:var(--t-small); color:var(--fg-muted)}
.plan.best li{color:#d5dedc}
.plan li::before{content:"✓"; position:absolute; inset-inline-start:0; color:var(--accent); font-weight:700}
.plan.best li::before{color:#5eead4}
@media (max-width:1100px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .plans{grid-template-columns:1fr} }

/* ---------- quota ---------- */
.quota{margin-top:var(--s5); border-top:1px solid var(--line); padding-top:var(--s5)}
.quota .top{display:flex; justify-content:space-between; gap:var(--s4); font-size:var(--t-small); flex-wrap:wrap}
.quota .top b{font-weight:600}
.bar{height:8px; border-radius:999px; background:var(--bg-sunken); overflow:hidden; margin-top:var(--s3)}
.bar i{display:block; height:100%; background:var(--accent); border-radius:999px}
.bar.warn i{background:var(--warn)}
.bar.over i{background:var(--danger)}
.quota .msg{font-size:15px; margin-top:var(--s3); color:var(--fg-muted)}
.quota.warn .msg{color:var(--warn)} .quota.over .msg{color:var(--danger)}
.limitnote{max-width:620px; margin:var(--s7) auto 0}
.limitnote div{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:var(--s4); padding-block:var(--s4); border-top:1px solid var(--line); font-size:var(--t-small)}
.limitnote b{font-weight:600}
.limitnote p{color:var(--fg-muted)}
.overline{text-align:center; font-size:var(--t-small); color:var(--fg-muted); margin-top:var(--s6)}
@media (max-width:760px){ .limitnote div{grid-template-columns:1fr; gap:var(--s1)} }

/* ---------- compare ---------- */
.compare{max-width:620px; margin-inline:auto; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.compare .row{display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); font-size:var(--t-small)}
.compare .row span:last-child{color:var(--fg-faint); white-space:nowrap}
.compare .total{background:var(--bg-sunken); font-weight:600; color:var(--fg)}
.compare .ours{background:var(--accent-wash); color:var(--accent-deep); font-weight:600; border-bottom:0}
.compare .ours span:last-child{color:var(--accent-deep)}

/* ---------- faq ---------- */
.faq{max-width:760px; margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:var(--s5) var(--s6) var(--s5) 0;
  font-size:var(--t-lead); font-weight:600; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; inset-inline-end:0; top:var(--s5);
  font-size:var(--t-lead); color:var(--accent); font-weight:400;
}
.faq details[open] summary::after{content:"−"}
.faq p{padding-bottom:var(--s5); color:var(--fg-muted); font-size:var(--t-small); max-width:65ch}

/* ---------- closing cta ---------- */
.closing{background:var(--fg); color:var(--bg); text-align:center}
.closing h2{font-size:var(--t-h2); margin-bottom:var(--s3); max-width:20ch; margin-inline:auto}
.closing p{color:#b9c6c3; margin-bottom:var(--s6)}
.closing .cta{justify-content:center}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:var(--bg-sunken); padding-block:var(--s8) var(--s6)}
.foot .cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--s6)}
.foot .about p{font-size:var(--t-small); color:var(--fg-muted); max-width:30ch; margin-top:var(--s3)}
.foot h4{font-size:var(--t-small); color:var(--fg); margin-bottom:var(--s3)}
.foot li{margin-bottom:var(--s2)}
.foot a{font-size:var(--t-small); color:var(--fg-muted)}
.foot a:hover{color:var(--fg)}
.foot .base{border-top:1px solid var(--line); margin-top:var(--s7); padding-top:var(--s5); font-size:15px; color:var(--fg-faint); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
@media (max-width:900px){ .foot .cols{grid-template-columns:repeat(2,1fr)} }

/* ---------- features page ---------- */
.fgroup{border-top:1px solid var(--line); padding-block:var(--s7)}
.fgroup .head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--s7); align-items:start}
.fgroup h2{font-size:var(--t-h2)}
.fgroup .lede{color:var(--fg-muted); font-size:var(--t-small); margin-top:var(--s3); max-width:38ch}
.flist li{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:var(--s4); padding-block:var(--s3); border-bottom:1px solid var(--line)}
.flist li:last-child{border-bottom:0}
.flist b{font-size:var(--t-small); display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.flist p{font-size:var(--t-small); color:var(--fg-muted)}
.soon{
  font-size:15px; font-weight:600; color:var(--warn); background:var(--warn-wash);
  border-radius:var(--r-pill); padding:0 var(--s3); white-space:nowrap;
}
@media (max-width:900px){
  .fgroup .head{grid-template-columns:1fr; gap:var(--s5)}
  .flist li{grid-template-columns:1fr; gap:var(--s1)}
}

/* ---------- checkout ---------- */
.checkout{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--s8); align-items:start}
.orderform{border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); background:var(--surface)}
.field{margin-bottom:var(--s5); border:0; padding:0}
.field label,.field legend{display:block; font-size:var(--t-small); font-weight:600; margin-bottom:var(--s2)}
.field .opt{font-weight:400; color:var(--fg-faint)}
.field input[type=text],.field input[type=tel],.field input[type=email]{
  width:100%; min-height:52px; padding:0 var(--s4);
  font:inherit; font-size:var(--t-body); color:var(--fg); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r);
}
.field input:focus-visible{outline:3px solid var(--accent); outline-offset:1px}
.field input[aria-invalid]{border-color:var(--danger)}
.field .hint{display:block; font-size:15px; color:var(--fg-faint); margin-top:var(--s2)}
.field .err{display:block; font-size:15px; font-weight:600; color:var(--danger); margin-top:var(--s2)}
.formerror{
  background:var(--danger-wash); color:var(--danger); font-size:var(--t-small); font-weight:600;
  padding:var(--s4); border-radius:var(--r); margin-bottom:var(--s5);
}
.planpick{
  display:flex; align-items:center; gap:var(--s4); cursor:pointer;
  border:1px solid var(--line-strong); border-radius:var(--r);
  padding:var(--s4); margin-bottom:var(--s3);
}
.planpick.on,.planpick:has(input:checked){border-color:var(--accent); background:var(--accent-wash)}
.planpick:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:2px}
.planpick input{margin:0; width:20px; height:20px; accent-color:var(--accent); flex:none}
.planpick .pp-text{flex:1; min-width:0}
.pp-name{display:block; font-size:var(--t-small); font-weight:600}
.pp-cap{display:block; font-size:15px; color:var(--fg-muted)}
.pp-price{flex:none; font-size:var(--t-lead); font-weight:700; text-align:end; white-space:nowrap}
.pp-price small{font-size:15px; font-weight:400; color:var(--fg-faint)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.finehint{font-size:15px; color:var(--fg-faint); margin-top:var(--s4)}
.checkout-side h2{font-size:var(--t-small); margin:var(--s6) 0 var(--s3)}
.checkout-side h2:first-child{margin-top:0}
.checkout-side p,.checkout-side li{font-size:var(--t-small); color:var(--fg-muted)}
.checkout-side li{padding-inline-start:var(--s5); position:relative; margin-bottom:var(--s2)}
.checkout-side li::before{content:"✓"; position:absolute; inset-inline-start:0; color:var(--accent); font-weight:700}
.checkout-side a{color:var(--accent); text-decoration:underline}
@media (max-width:900px){ .checkout{grid-template-columns:1fr; gap:var(--s6)} }

/* ---------- licence key ---------- */
.keybox{border:1px solid var(--accent); border-radius:var(--r-lg); background:var(--accent-wash); padding:var(--s6); text-align:center}
.keybox .k{font-size:var(--t-small); font-weight:600; color:var(--accent-deep)}
.keybox .key{
  font-size:30px; font-weight:700; letter-spacing:0; margin:var(--s3) 0 var(--s4);
  word-break:break-all; color:var(--fg);
}
.keymeta{display:flex; justify-content:center; gap:var(--s6); flex-wrap:wrap; margin-top:var(--s5); font-size:var(--t-small); color:var(--fg-muted)}
.keymeta b{display:block; font-size:15px; color:var(--fg-faint); font-weight:600}
@media (max-width:760px){ .keybox .key{font-size:22px} }

/* ---------- admin (Operate, not Persuade) ---------- */
/* Denser than the marketing pages on purpose: this is a screen to scan, not to
   read. 15px is the floor even here — below that Bangla conjuncts break. */
.admintabs{border-bottom:1px solid var(--line); background:var(--bg-sunken)}
.admintabs .container{display:flex; align-items:center; gap:var(--s6); min-height:60px; flex-wrap:wrap}
.admintabs .brand small{font-weight:400; font-size:15px; color:var(--fg-faint)}
.admintabs nav{display:flex; gap:var(--s5); font-size:var(--t-small)}
.admintabs nav a{color:var(--fg-muted); padding-block:var(--s2)}
.admintabs nav a[aria-current]{color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent)}
.admintabs .out{margin-inline-start:auto; font-size:var(--t-small); color:var(--fg-faint)}
.adminwrap{padding-block:var(--s6) var(--s9)}
.adminwrap h2{font-size:var(--t-lead); margin:var(--s7) 0 var(--s4)}
.adminwrap .empty{font-size:var(--t-small); color:var(--fg-faint); padding:var(--s5) 0}
.adminwrap table{font-size:var(--t-small)}
.adminwrap td small{font-size:15px}
.adminlogin{padding-block:var(--s9)}
.adminlogin .orderform{max-width:24rem; margin-inline:auto}
.adminlogin h1{font-size:var(--t-h2); margin-bottom:var(--s5)}
.adminlogin input[type=password]{
  width:100%; min-height:52px; padding:0 var(--s4); font:inherit; font-size:var(--t-body);
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--fg);
}
.figures{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.fig{border:1px solid var(--line); border-radius:var(--r); padding:var(--s5)}
.fig span{display:block; font-size:15px; color:var(--fg-faint)}
.fig b{display:block; font-size:30px; font-weight:700; line-height:1.3; color:var(--accent-deep)}
.fig em{display:block; font-style:normal; font-size:15px; color:var(--fg-muted)}
.filterbar{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; margin-bottom:var(--s5)}
.filterbar input[type=search]{
  min-height:44px; padding:0 var(--s4); font:inherit; font-size:var(--t-small);
  border:1px solid var(--line-strong); border-radius:var(--r); min-width:16rem; background:var(--surface); color:var(--fg);
}
.chipfilter{
  font-size:var(--t-small); border:1px solid var(--line-strong); border-radius:var(--r-pill);
  padding:var(--s2) var(--s4); color:var(--fg-muted);
}
.chipfilter.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.licences .acts form,.adminwrap .acts form{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}
.acts input[type=text]{
  min-height:34px; padding:0 var(--s3); font:inherit; font-size:15px; width:11rem;
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--fg);
}
a.act{display:inline-flex; align-items:center; text-decoration:none}
/* Named .act, not .mini — .mini is the pill group inside a feature card, and
   this rule's border was drawing a box around those pills on the homepage. */
.act{
  font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--fg);
  border-radius:var(--r); padding:var(--s1) var(--s3); min-height:34px; white-space:nowrap;
}
.act:hover{background:var(--bg-sunken)}
.act.danger{color:var(--danger); border-color:var(--danger)}
.act.good{color:var(--good); border-color:var(--good)}
@media (max-width:900px){ .figures{grid-template-columns:repeat(2,1fr)} }

/* ---------- customer dashboard ---------- */
.notice{background:var(--good-wash); color:var(--good); font-size:var(--t-small); font-weight:600; padding:var(--s4); border-radius:var(--r); margin-bottom:var(--s5)}
.lcard{border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); margin-bottom:var(--s5)}
.lhead{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4)}
.lhead .key{font-size:var(--t-lead); font-weight:700; word-break:break-all}
.lcard .keymeta{justify-content:flex-start; gap:var(--s6); margin-top:0}
.domform{margin-top:var(--s5); border-top:1px solid var(--line); padding-top:var(--s5)}
.domform label{display:block; font-size:var(--t-small); font-weight:600; margin-bottom:var(--s2)}
.domform .row{display:flex; gap:var(--s3); flex-wrap:wrap}
.domform input{
  flex:1; min-width:14rem; min-height:48px; padding:0 var(--s4); font:inherit; font-size:var(--t-small);
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--fg);
}
.domform .hint{display:block; font-size:15px; color:var(--fg-faint); margin-top:var(--s2)}
.empty{font-size:var(--t-small); color:var(--fg-faint)}

/* ---------- icons ---------- */
/* One colour for all of them, on purpose. Six features with six gradient hues
   is six accents, which is no accent — see references/tells.md. */
.ico{width:22px; height:22px; color:var(--accent); flex:none; vertical-align:-3px}
.ico-lg{width:28px; height:28px}
.brand{display:inline-flex; align-items:center; gap:var(--s2)}
.brand img{width:28px; height:28px}
.stats .ico-lg{display:block; width:30px; height:30px; margin-bottom:var(--s3); color:var(--accent)}
.card .ico-lg{display:block; margin-bottom:var(--s4)}
.replaces li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--s1) var(--s3); align-items:start}
.replaces li b,.replaces li span{grid-column:2}
.replaces .ico{grid-row:span 2; color:var(--fg-faint)}
.fgroup h2 .ico-lg{color:var(--accent)}
@media (max-width:900px){ .replaces li{grid-template-columns:22px minmax(0,1fr)} }

/* ---------- admin settings ---------- */
.settings-lede{font-size:var(--t-small); color:var(--fg-muted); max-width:60ch; margin-bottom:var(--s5)}
.orderform.settings{max-width:38rem}
.settings .field label{display:flex; gap:var(--s3); align-items:baseline; flex-wrap:wrap}
.src{font-size:15px; font-weight:600; border-radius:var(--r-pill); padding:0 var(--s3)}
.src.db{background:var(--good-wash); color:var(--good)}
.src.config{background:var(--warn-wash); color:var(--warn)}
.src.none{background:var(--bg-sunken); color:var(--fg-faint)}
.settings input[type=text],.settings input[type=tel]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--t-small)}

/* ---------- plan editor ---------- */
.planedit td b{display:block}
.planedit td small{display:block; color:var(--fg-faint); font-size:15px}
.planedit input[type=number]{
  width:8rem; min-height:44px; padding:0 var(--s3); font:inherit; font-size:var(--t-small);
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--fg);
}
.adminwrap .orderform.settings{max-width:none}
.planedit{max-width:56rem}

/* ---------- legal ---------- */
.legal{max-width:68ch}
.legal h2{font-size:var(--t-lead); margin:var(--s7) 0 var(--s3)}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--fg-muted); font-size:var(--t-small); margin-bottom:var(--s3)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}