/* =====================================================================
   10-public.css — public site + sign-in pages (views/public.js)
   Scopes: .auth* / .pn-* / .lg-* (sign-in split screens), .pub-* (site
   pages), .plan-* (plan card, also used on /app/subscription),
   details.faq. Tokens only; the pine panel uses the raw scale, which is
   identical in light and dark (it is a brand surface). Shared components
   (.step-n, .toc, .alert-prose, .table-plain, .contact-card, .link-tile,
   .section-head, .dl.stacked, .mac-paper) are only toned or laid out here.
   ===================================================================== */

/* ---------------- pine brand surface ---------------- */
.auth-aside,.pub-band{
  --pn-bg:var(--p-950);
  --pn-tx:var(--n-50);
  --pn-tx-2:color-mix(in srgb,var(--n-50) 78%,var(--p-950));
  --pn-tx-3:color-mix(in srgb,var(--n-50) 60%,var(--p-950));
  --pn-line:color-mix(in srgb,var(--n-50) 12%,var(--p-950));
  --pn-line-2:color-mix(in srgb,var(--n-50) 22%,var(--p-950));
  --pn-raise:color-mix(in srgb,var(--n-50) 4%,var(--p-950));
  --pn-hover:color-mix(in srgb,var(--n-50) 9%,var(--p-950));
  --pn-mint:var(--p-300);
  --pn-hi:var(--a-300);
  --ring:var(--p-300);--ring-soft:color-mix(in srgb,var(--p-300) 30%,transparent);
  --link:var(--p-200);
  background:var(--pn-bg);color:var(--pn-tx);
}
.auth-aside ::selection,.pub-band ::selection{background:var(--p-700);color:var(--n-0)}

/* =====================================================================
   Sign-in pages: form on paper + pine brand panel
   ===================================================================== */
body.pub-auth{background:var(--bg);color:var(--text);font-size:var(--fs-base);line-height:1.5}
.auth{
  --auth-foot-h:84px; /* a little more than the footer, so a one-line footer never adds a scroll */
  display:grid;min-height:100vh;min-height:100dvh;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"main aside" "foot aside";
}
.auth-main{grid-area:main;display:flex;flex-direction:column;min-width:0;padding:22px 48px 0}
/* The main column is one viewport tall and sits at the top: a tall brand panel never pushes the form down. */
@media (min-width:861px){
  .auth-main{align-self:start;min-height:calc(100vh - var(--auth-foot-h));min-height:calc(100dvh - var(--auth-foot-h))}
}
/* sign-in: the form also stays in view while the brand panel scrolls past (only where it fits) */
@media (min-width:861px) and (min-height:640px){
  .auth-login .auth-main{position:sticky;top:0}
}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.auth-top .tb-icon{margin-right:-8px}
.auth-body{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 0}
.auth-form{width:100%;max-width:384px}
.auth-register .auth-form{max-width:566px} /* from ~1500px wide a long full name shows whole */
.auth-title{margin:0 0 10px;font-family:var(--font-display);font-size:44px;font-weight:500;line-height:1.08;letter-spacing:-.02em;color:var(--text)}
.auth-sub{margin:0 0 28px;font-size:var(--fs-md);line-height:1.6;color:var(--text-3)}
.auth-sub a{color:var(--text-2)}
.auth-form .alert{margin:0 0 20px}
.auth-errs{white-space:normal}
.auth-errs ul{margin:2px 0 0;padding-left:1.1em}
.auth-errs li{margin:2px 0}
.auth-errs a{color:inherit;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.auth-errs a:hover{text-decoration-thickness:2px}
.auth-form .field-err{align-items:flex-start;font-weight:500;line-height:1.45}
.auth-form .field-err>.i{flex-shrink:0;margin-top:1px}
.auth-form .field-err+.hint{margin-top:3px}
.auth-fields label,.auth-field{margin:0 0 18px}
.auth-field>label{margin:0}
.auth-form :is(input[type=text],input[type=email],input[type=password],input[type=tel]){height:40px}
.auth-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.auth-label-row>label{margin:0}
.auth-label-row>a{font-size:var(--fs-sm);font-weight:500}
.auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.auth-register .auth-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} /* name / email get the wider column */
.auth-fields .btn-block{margin-top:6px}
/* register: the optional professional details, folded under the password row (open again after a failed submit
   that had them filled in). Folded it is one slim text row, so the form still fits one screen; open, the usual
   disclosure box */
.auth-register details.reg-pro{margin:-6px 0 14px}
.auth-register details.reg-pro:not([open]){border-color:transparent;background:none}
.auth-register .reg-pro>summary{justify-content:flex-start;gap:6px;padding:8px 12px;font-size:var(--fs-sm);color:var(--text-2)}
.auth-register .reg-pro:not([open])>summary{padding:2px 0}
.auth-register .reg-pro>summary:hover{color:var(--text)}
.reg-pro-opt{font-weight:400;color:var(--text-4)}
.auth-register .reg-pro>.body{padding:0 12px}
.reg-pro-note{margin:0 0 12px;font-size:var(--fs-sm);line-height:1.5;color:var(--text-3)}
.auth-register .reg-pro .auth-field{margin-bottom:12px}
/* short screens: the folded row and the button under it tighten with register's own height steps below */
@media (min-width:861px) and (max-height:820px){
  .auth-register details.reg-pro{margin:-8px 0 9px}
  .auth-register .reg-pro:not([open])>summary{line-height:17px}
  .auth-register .auth-fields .btn-block{margin-top:0}
}
@media (min-width:861px) and (max-height:560px){
  .auth-register details.reg-pro{margin:-7px 0 6px}
  .auth-register .reg-pro:not([open])>summary{padding:0;font-size:var(--fs-xs)}
}
.auth-alt{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--border-subtle);font-size:var(--fs-base);color:var(--text-3)}
.auth-alt a{font-weight:500}
.auth-back{display:inline-flex;align-items:center;gap:6px}
.auth-help{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--text-3)}
.auth-help>.i{flex-shrink:0;margin-top:2px;color:var(--text-4)}
.auth-help a{color:var(--text-2);font-weight:500}
.auth-note{margin:12px 0 0;font-size:var(--fs-sm);line-height:1.55;color:var(--text-3)}
.auth-status{margin:0 0 16px}
.auth-callout{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:0 0 20px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-xs);font-size:var(--fs-sm);color:var(--text-3)}
.auth-foot{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding:18px 48px 22px;font-size:var(--fs-xs);color:var(--text-3)}
.auth-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.auth-links a{color:var(--text-3)}
.auth-links a:hover{color:var(--text)}

/* ---------------- brand panel ---------------- */
.auth-aside{grid-area:aside;display:flex;align-items:center;min-width:0;padding:44px 56px 40px;box-shadow:inset 1px 0 0 var(--pn-line)}
.auth-aside-in{width:100%;max-width:540px;margin:0 auto}
.auth-login .auth-aside-in{max-width:700px}
.auth-aside a{color:var(--pn-tx)}
.pn-eyebrow{margin:0 0 16px;color:var(--pn-tx-3)}
.auth-login .pn-eyebrow{color:var(--pn-hi)} /* the panel's single accent highlight */
.pn-statement{margin:0 0 14px;max-width:21ch;font-family:var(--font-display);font-size:42px;font-weight:400;line-height:1.06;letter-spacing:-.024em;color:var(--pn-tx);text-wrap:balance}
.pn-statement+:is(.pub-steps,.pn-facts){margin-top:28px}
.pn-lead{margin:0 0 30px;max-width:54ch;font-size:var(--fs-md);line-height:1.6;color:var(--pn-tx-2)}
.pn-facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--pn-line)}
.pn-facts li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--pn-line)}
.pn-facts li>.i{flex-shrink:0;margin-top:1px;color:var(--pn-mint)}
.pn-facts strong{display:block;font-size:var(--fs-base);font-weight:600;color:var(--pn-tx);line-height:1.4}
.pn-facts span{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:1.5;color:var(--pn-tx-2)}
.pn-facts span[lang="bn"]{display:inline;font-size:inherit}
.pn-support{display:flex;align-items:flex-start;gap:10px;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--pn-line);font-size:var(--fs-sm);line-height:1.6;color:var(--pn-tx-2)}
.pn-support>.i{flex-shrink:0;margin-top:3px;color:var(--pn-tx-3)}
.pn-support a{font-weight:500}

/* ---------------- every sign-in page fits one screen (side-by-side layout) ----------------
   The brand panel is exactly one viewport tall, so it never makes the page scroll or pushes the footer
   down; only the form column sets the page height. On shorter screens the panel drops content in order of
   importance (on log-in: lead line, then padding, then — with promos live, on very short screens — the
   sample sheet + facts), so the headline stays in view. If content still doesn't fit (tiny windows), the
   panel scrolls on its own; once it reaches its end, the wheel carries on to the page (a long error form). */
@media (min-width:861px){
  .auth-aside{position:sticky;top:0;height:100vh;height:100dvh;align-items:stretch;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--pn-line-2) transparent}
  .auth-aside:focus-visible{outline:2px solid var(--ring);outline-offset:-4px} /* an overflowing panel is a Tab stop */
  .auth-aside-in{margin:auto} /* centred while it fits; top-aligned (never clipped) when it doesn't */
  .auth-note-more{display:none} /* register: the panel beside the form already says this */
  .auth-copy{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* a very long site name ends in … instead of wrapping the footer */
}
@media (min-width:861px) and (max-height:900px){
  .auth-login .auth-aside{padding-top:28px;padding-bottom:24px}
  .auth-login .pn-eyebrow{margin-bottom:12px}
  .auth-login .pn-statement{margin-bottom:24px;font-size:clamp(30px,5.2vh,40px)}
  .auth-login .pn-lead{display:none}
  .auth-login .lg-sheet{padding:14px 16px 12px}
  .auth-login .lg-sheet-head{padding-bottom:7px}
  .auth-login .lg-sheet-meta{padding:5px 0}
  .auth-login .lg-meals li{padding:4px 0}
  .auth-login .lg-sheet-total{padding:7px 0 6px}
  .auth-login .lg-side{gap:14px}
  .auth-login .pn-facts li{padding:9px 0}
  .auth-login .lg-tour{padding:12px 16px 10px}
  .auth-login .lg-featured,.auth-login .lg-adline{margin-top:18px;padding-top:12px}
  .auth .auth-body{padding:24px 0}
  /* promos live: the sample sheet sheds its meta line so the promo row (with captions) stays on screen */
  .auth-login.has-ads .lg-sheet-meta{display:none}
  .auth-login.has-ads .pn-statement{margin-bottom:18px}
  .auth-login.has-ads .lg-featured{margin-top:14px}
}
/* narrow side-by-side (861–1240px): the panel is too narrow for sheet + highlights side by side and they
   stack, so the sample sheet steps aside at every height */
@media (min-width:861px) and (max-width:1240px){
  .auth-login .lg-sheet{display:none}
}
@media (min-width:861px) and (max-height:680px){
  .auth-login.has-ads .lg-cols{display:none}
  .auth-login.has-ads .lg-featured{margin-top:4px}
  .auth-login:not(.has-ads) .lg-tour{display:none}
}
@media (min-width:861px) and (max-height:560px){
  .auth-login:not(.has-ads) .lg-sheet{display:none}
  .auth-login .pn-statement{font-size:28px;margin-bottom:14px}
}
/* the form column on short screens (browser zoom, small laptops): tighter rhythm, slimmer footer. Log-in and
   the short account pages (forgot / reset / change password, pending) share these steps, so the logo, title
   and footer stay put when moving between them; register has its own, earlier steps below. */
@media (min-width:861px) and (max-height:700px){
  .auth-login{--auth-foot-h:72px} /* room for the footer's two-line wrap in narrow form columns */
  .auth .auth-main{padding-top:14px}
  .auth .auth-foot{padding-top:10px;padding-bottom:14px}
  .auth:not(.auth-register) .auth-body{padding:12px 0}
  .auth:not(.auth-register) .auth-title{font-size:36px;margin-bottom:6px}
  .auth:not(.auth-register) .auth-sub{margin-bottom:18px}
  .auth:not(.auth-register) .auth-form .alert{margin-bottom:14px;padding-top:8px;padding-bottom:8px}
  .auth:not(.auth-register) .auth-fields>label,.auth:not(.auth-register) .auth-field{margin-bottom:14px}
  .auth:not(.auth-register) .auth-alt{margin-top:16px;padding-top:14px}
  .auth-login .auth-help{margin-top:8px}
}
@media (min-width:861px) and (max-height:600px){
  .auth:not(.auth-register) .auth-title{font-size:30px}
  .auth:not(.auth-register) .auth-sub{margin-bottom:14px}
  .auth-login .auth-help{display:none}
}
@media (min-width:861px) and (max-height:540px){
  .auth-login .auth-sub{display:none}
  .auth.auth-login .auth-title{margin-bottom:14px}
  .auth:not(.auth-register) .auth-body{padding:6px 0}
  .auth:not(.auth-register) .auth-alt{margin-top:12px;padding-top:10px}
  .auth .auth-copy{display:none} /* keeps the footer on one line */
}
/* log-in showing a message (after a reset request, sign-up, a pending account …): the message takes the intro
   line's place, and the phone and © lines step aside earlier; on very short screens an info message also
   replaces the sign-up line (people who see those already have an account) */
@media (min-width:861px) and (max-height:780px){
  .auth-login:has(.auth-form .alert) :is(.auth-sub,.auth-help,.auth-copy){display:none}
  .auth.auth-login:has(.auth-form .alert) .auth-title{margin-bottom:14px}
}
@media (min-width:861px) and (max-height:560px){
  .auth.auth-login .auth-form .alert{padding-top:6px;padding-bottom:6px;font-size:var(--fs-sm);line-height:1.45}
}
@media (min-width:861px) and (max-height:540px){
  .auth-login:has(.auth-form .alert:not(.alert-err)) .auth-alt{display:none}
}

/* ---------------- account pages: forgot / reset / change password, pending, register ----------------
   Their form column fills whatever height the footer leaves (however it wraps — e.g. a longer site name),
   instead of reserving a guessed footer height. Register is the tallest form, so it tightens earlier and in
   more steps: spacing first, then the intro line, then the privacy line (the footer's Privacy link stays just
   below), then the field rhythm on tiny windows. With validation errors the form may scroll; the error
   summary and the first fields stay at the top. */
@media (min-width:861px){
  .auth:not(.auth-login) .auth-main{align-self:stretch;min-height:0}
}
@media (min-width:861px) and (max-height:900px){
  .auth:not(.auth-login) .auth-aside{padding-top:28px;padding-bottom:24px}
  .auth:not(.auth-login) .pn-statement{font-size:clamp(30px,5.2vh,42px)}
}
@media (min-width:861px) and (max-width:1240px) and (max-height:900px){
  .auth:not(.auth-login) .pn-statement{font-size:clamp(30px,5.2vh,40px)} /* never above the narrow panel's 40px */
}
@media (min-width:861px) and (max-height:820px){
  .auth:not(.auth-login) .pub-step:not(:last-child){padding-bottom:18px}
  .auth:not(.auth-login) .pn-support{margin-top:20px;padding-top:14px}
  .auth.auth-register .auth-body{padding:12px 0}
  .auth.auth-register .auth-title{font-size:36px;margin-bottom:6px}
  .auth.auth-register .auth-sub{margin-bottom:18px}
  .auth.auth-register .auth-form .alert{margin-bottom:14px;padding-top:8px;padding-bottom:8px}
  .auth.auth-register .auth-field{margin-bottom:14px}
  .auth.auth-register .auth-alt{margin-top:16px;padding-top:14px}
}
@media (min-width:861px) and (max-height:700px){
  .auth:not(.auth-login) .pn-lead{display:none}
}
@media (min-width:861px) and (max-height:600px){
  .auth:not(.auth-login) .pn-eyebrow{margin-bottom:10px}
  .auth:not(.auth-login) .pn-statement{font-size:28px;margin-bottom:14px}
  .auth:not(.auth-login) .pn-statement+.pub-steps{margin-top:18px}
  .auth:not(.auth-login) .pub-step:not(:last-child){padding-bottom:12px}
  .auth:not(.auth-login) .pn-support{margin-top:14px;padding-top:12px}
}
@media (min-width:861px) and (max-height:540px){
  .auth:not(.auth-login) .auth-aside{padding-top:16px;padding-bottom:12px}
}
/* change / reset password showing an error: the error repeats the password rule (and replaces the
   temporary-password warning), so on shorter screens that repeated text steps aside and the page still fits */
@media (min-width:861px) and (max-height:800px){
  .auth:not(.auth-login):not(.auth-register):has(.auth-form .alert-err):has(.pw-field) :is(.auth-sub,.alert-warn,.auth-field>.hint){display:none}
}
@media (min-width:861px) and (max-height:690px){
  .auth-register .auth-copy{display:none} /* one-line footer: the © line (with the site name) wraps in narrow columns */
}
@media (min-width:861px) and (max-height:650px){
  .auth-register .auth-sub{display:none}
  .auth.auth-register .auth-title{font-size:32px;margin-bottom:16px}
}
@media (min-width:861px) and (max-height:616px){
  .auth-register .auth-note{display:none}
  .auth.auth-register .auth-title{font-size:30px}
  .auth.auth-register .auth-field{margin-bottom:12px}
  .auth.auth-register .auth-alt{margin-top:12px;padding-top:10px}
}
@media (min-width:861px) and (max-height:560px){
  .auth.auth-register .auth-main{padding-top:8px}
  .auth.auth-register .auth-body{padding:6px 0}
  .auth.auth-register .auth-title{margin-bottom:12px}
  .auth.auth-register .auth-alt{margin-top:10px;padding-top:8px}
}
@media (min-width:861px) and (max-height:530px){
  .auth.auth-register .auth-main{padding-top:4px}
  .auth.auth-register .auth-body{padding:10px 0 0} /* keeps the title clear of the logo when an error form overflows */
  .auth.auth-register .auth-title{font-size:26px;margin-bottom:8px}
  .auth.auth-register .pn-statement{font-size:26px} /* no larger than the form's title */
  .auth.auth-register .auth-field{margin-bottom:8px}
  .auth.auth-register .auth-form :is(input[type=text],input[type=email],input[type=password],input[type=tel]){height:36px}
  .auth.auth-register .auth-alt{margin-top:8px;padding-top:6px}
  .auth.auth-register .auth-foot{padding-top:6px;padding-bottom:8px}
}

/* stacked (phones / small tablets): promos move up under the headline as large swipeable cards */
@media (max-width:860px){
  .auth-login.has-ads .auth-aside-in{display:flex;flex-direction:column}
  .auth-login.has-ads .lg-featured{order:1;margin:4px 0 32px;padding-top:0;border-top:0}
  .auth-login.has-ads .lg-cols{order:2}
  .auth-login .lg-promos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,300px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:0 20px;scroll-padding:0 20px}
  .auth-login .lg-promos::-webkit-scrollbar{display:none}
  .auth-login .lg-promo{scroll-snap-align:start}
}
@media (max-width:640px){
  .auth-login .lg-promos{margin:0 -16px;padding:0 16px;scroll-padding:0 16px}
}

/* ---------------- login: sample sheet + highlights ---------------- */
.lg-cols{display:grid;grid-template-columns:minmax(304px,1fr) minmax(0,1.08fr);gap:28px;align-items:start}
.lg-side{display:flex;flex-direction:column;gap:18px;min-width:0}

/* a printed A4 diet chart in miniature: always paper, whatever the theme */
.lg-sheet{margin:0 10px 10px 0;padding:18px 18px 16px;background:var(--n-0);color:var(--n-950);border-radius:2px;box-shadow:10px 10px 0 0 var(--pn-line);font-size:12px;line-height:1.45}
.lg-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-bottom:9px;border-bottom:2px solid var(--p-700)}
.lg-sheet-head strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--n-950)}
.lg-sheet-head [lang="bn"]{display:block;font-size:12px;line-height:1.5;color:var(--n-600)}
.lg-sheet-tag{flex-shrink:0;padding:1px 6px;border:1px solid var(--n-300);border-radius:3px;font-size:12px;font-weight:500;color:var(--n-600);white-space:nowrap}
.lg-sheet-meta{display:flex;justify-content:space-between;gap:2px 10px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--n-200);font-size:12px;color:var(--n-600)}
.lg-meals{list-style:none;margin:0;padding:0}
.lg-meals li{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--n-150)}
.lg-meal-t{white-space:nowrap;font-size:12px;font-weight:500;color:var(--n-600)}
.lg-meal-i{font-size:13px;line-height:1.5;color:var(--n-900)}
.lg-meal-k{font-size:12px;color:var(--n-700);text-align:right}
.lg-sheet-total{display:flex;align-items:baseline;justify-content:space-between;padding:9px 0 8px;font-size:12px;color:var(--n-600)}
.lg-sheet-total strong{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--n-950)}
.lg-sheet .u{color:var(--n-600)}
.lg-macro{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden}
.lg-sheet .m-p{background:var(--mac-protein)} /* .lg-sheet is also .mac-paper: print (light) macro colours in both themes */
.lg-sheet .m-c{background:var(--mac-carb)}
.lg-sheet .m-f{background:var(--mac-fat)}
.lg-macro-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:var(--n-600)}
.lg-macro-legend span{display:inline-flex;align-items:center;gap:5px}
.lg-macro-legend i{display:inline-block;width:7px;height:7px;border-radius:2px}

/* feature highlights carousel (JS contract: #slides, #dots span[data-i].active, #prevBtn, #nextBtn, #pauseBtn[aria-pressed]) */
.lg-tour{padding:16px 18px 12px;border:1px solid var(--pn-line);border-radius:var(--r-lg);background:var(--pn-raise)}
.lg-tour-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.lg-tour-label{margin:0;font-size:var(--fs-xs);font-weight:500;line-height:1.5;letter-spacing:0;color:var(--pn-tx-3)}
.lg-tour-nav{display:flex;gap:4px}
.lg-tour-nav button{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--pn-line-2);border-radius:var(--r-sm);background:transparent;color:var(--pn-tx-2);cursor:pointer;transition:background-color var(--dur-1),color var(--dur-1)}
.lg-tour-nav button:hover{background:var(--pn-hover);color:var(--pn-tx)}
.lg-tour-nav button[aria-pressed="true"]{border-color:var(--pn-tx-3);background:var(--pn-hover);color:var(--pn-tx)}
.lg-tour-nav .i-play,.lg-tour-nav [aria-pressed="true"] .i-pause{display:none}
.lg-tour-nav [aria-pressed="true"] .i-play{display:block}
.lg-tour-view{overflow:hidden}
.lg-slides{display:flex;transition:transform var(--dur-4) var(--ease-out)}
.lg-slide{min-width:100%;padding-right:8px}
.lg-slide h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;color:var(--pn-tx)}
.lg-slide h3 .i{color:var(--pn-mint)}
.lg-slide p{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--pn-tx-2)}
.lg-dots{display:flex;margin:4px 0 -6px -6px}
/* 28x24 hit area around a 16x3 bar (active: 40x24 around 28x3) */
.lg-dots span{display:block;width:28px;height:24px;padding:10.5px 6px;background:var(--pn-line-2);background-clip:content-box;border-radius:var(--r-xs);cursor:pointer;transition:width var(--dur-3) var(--ease-out),background-color var(--dur-2)}
.lg-dots span:hover{background-color:var(--pn-tx-3)}
.lg-dots span.active{width:40px;background-color:var(--pn-tx-2)}
.lg-dots span:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}

/* admin promo slots (hero_1, hero_2, rail_1): three equal 3:2 tiles in a fixed order once any slot has an
   image. The whole image always shows (contain, never cropped — advertisers' text stays intact). An empty
   slot offers the space. The product tour steps aside while promos are live (.has-ads). */
.lg-featured{margin-top:28px;padding-top:14px;border-top:1px solid var(--pn-line)}
.lg-featured-label{margin:0 0 10px;font-size:var(--fs-xs);font-weight:500;line-height:1.5;letter-spacing:0;color:var(--pn-tx-3)}
.lg-featured-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.lg-featured-head .lg-featured-label{margin:0}
/* one control pauses every rotating position (WCAG 2.2.2); hidden when nothing rotates or with reduced motion */
.lg-feat-pause{display:inline-flex;align-items:center;gap:5px;height:24px;margin:-4px 0;padding:0 9px 0 7px;border:1px solid var(--pn-line-2);border-radius:var(--r-pill);background:transparent;color:var(--pn-tx-3);font:inherit;font-size:var(--fs-xs);font-weight:500;cursor:pointer;transition:color var(--dur-1),background-color var(--dur-1),border-color var(--dur-1)}
.lg-feat-pause:hover{color:var(--pn-tx);background:var(--pn-hover);border-color:var(--pn-tx-3)}
.lg-feat-pause:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.lg-feat-pause .i-play,.lg-feat-pause.is-paused .i-pause{display:none}
.lg-feat-pause.is-paused .i-play{display:inline-block}
.lg-promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.lg-promo{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--pn-tx-2);text-decoration:none}
a.lg-promo:hover{text-decoration:none}
.lg-promo-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--pn-line-2);border-radius:var(--r-md);background:var(--pn-raise);text-align:center}
.lg-promo img{display:block;width:100%;height:100%;object-fit:contain}
a.lg-promo:hover .lg-promo-frame{border-color:var(--pn-tx-3)}
.lg-promo-cap{display:flex;align-items:center;gap:4px;min-width:0;font-size:var(--fs-xs);line-height:1.4;color:var(--pn-tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-promo-cap>.i{flex-shrink:0}
.lg-promo-open .lg-promo-frame{gap:3px;padding:10px;color:var(--pn-tx-3);font-size:var(--fs-xs);line-height:1.4}
.lg-promo-open .lg-promo-frame>.i{margin-bottom:3px}
.lg-promo-open strong{font-size:var(--fs-sm);font-weight:600;color:var(--pn-tx-2)}
a.lg-promo-open:hover .lg-promo-frame{color:var(--pn-tx-2);background:var(--pn-hover)}
.has-ads .lg-tour{display:none}
.lg-promo-cap:empty{min-height:1.4em}
/* rotating position (2–3 banners): banners stack in one cell and crossfade; dots sit on the caption line */
.lg-rot{position:relative;min-width:0}
.lg-rot-stack{display:grid}
.lg-rot-item{grid-area:1/1;min-width:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity 700ms var(--ease-out),visibility 0s linear 700ms}
.lg-rot-item.is-on{opacity:1;visibility:visible;transition:opacity 700ms var(--ease-out),visibility 0s}
/* prev/next arrows over the image's side edges: revealed on hover/keyboard focus (the artwork stays clean
   otherwise), always shown on touch screens. The overlay box is the 3:2 frame, so arrows centre on the image. */
.lg-rot-nav{position:absolute;left:0;right:0;top:0;aspect-ratio:3/2;display:flex;align-items:center;justify-content:space-between;padding:0 6px;pointer-events:none}
.lg-rot-nav button{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid color-mix(in srgb,var(--n-50) 22%,transparent);border-radius:50%;background:color-mix(in srgb,var(--p-950) 78%,transparent);color:var(--n-50);box-shadow:var(--shadow-sm);cursor:pointer;pointer-events:auto;opacity:0;transform:scale(.92);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),background-color var(--dur-1)}
.lg-rot-nav button:hover{background:var(--p-950)}
.lg-rot:hover .lg-rot-nav button,.lg-rot:focus-within .lg-rot-nav button{opacity:1;transform:none}
.lg-rot-nav button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;opacity:1}
@media (hover:none){.lg-rot-nav button{opacity:1;transform:none;width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.lg-rot-item,.lg-rot-item.is-on,.lg-rot-nav button{transition:none}}
.lg-adline{display:flex;align-items:center;gap:8px;margin:28px 0 0;padding-top:14px;border-top:1px solid var(--pn-line);font-size:var(--fs-xs);line-height:1.5;color:var(--pn-tx-3)}
.lg-adline>.i{flex-shrink:0}
.auth-aside .lg-adline a{color:var(--pn-tx-2);font-weight:500}
.auth-aside .lg-adline a:hover{color:var(--pn-tx)}

/* ---------------- timeline (register, pending, reset, plans) ---------------- */
.pub-steps{
  --st-line:var(--border);--st-bd:var(--border-input);--st-bg:var(--surface);--st-num:var(--text-3);
  --st-done:var(--primary);--st-on-done:var(--on-primary);--st-cur:var(--primary);
  --st-title:var(--text);--st-text:var(--text-3);
  list-style:none;margin:0;padding:0;
}
.auth-aside .pub-steps{--st-line:var(--pn-line-2);--st-bd:var(--pn-line-2);--st-bg:var(--pn-bg);--st-num:var(--pn-tx-2);--st-done:var(--p-300);--st-on-done:var(--p-950);--st-cur:var(--pn-tx);--st-title:var(--pn-tx);--st-text:var(--pn-tx-2)}
.pub-step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;padding:0 0 26px}
.pub-step:last-child{padding-bottom:0}
.pub-step::before{content:"";position:absolute;left:13.5px;top:34px;bottom:6px;width:1px;background:var(--st-line)}
.pub-step:last-child::before{display:none}
.pub-step>.step-n{position:relative;border-color:var(--st-bd);background:var(--st-bg);color:var(--st-num)}
.pub-step.is-done>.step-n{border-color:var(--st-done);background:var(--st-done);color:var(--st-on-done)}
.pub-step.is-current>.step-n{border:2px solid var(--st-cur);color:var(--st-title)}
.pub-step-body{min-width:0;padding-top:3px}
.pub-step-title{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.4;color:var(--st-title)}
.pub-step-tag{display:inline-block;margin:6px 0 2px;padding:1px 8px;border:1px solid currentColor;border-radius:var(--r-pill);font-size:11px;font-weight:500;line-height:1.5;color:var(--st-cur)}
.pub-step-text{display:block;margin-top:3px;font-size:var(--fs-sm);line-height:1.55;color:var(--st-text)}
.pub-step-text a{color:var(--st-title);font-weight:500}
.pub-steps-h{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 24px}
.pub-steps-h .pub-step{grid-template-columns:1fr;gap:14px;padding:0}
.pub-steps-h .pub-step::before{left:40px;right:-12px;top:14px;bottom:auto;width:auto;height:1px}
.pub-steps-h .pub-step-body{padding-top:0}

/* =====================================================================
   Site pages (chrome:'site'): plans, docs, support, privacy, contributors, errors
   ===================================================================== */
.pub-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.pub-head{margin:0 0 48px;padding:56px 0 40px;border-bottom:1px solid var(--border)}
.pub-head .eyebrow{margin:0 0 14px}
.pub-title{margin:0;max-width:24ch;font-family:var(--font-display);font-size:44px;font-weight:500;line-height:1.08;letter-spacing:-.02em;color:var(--text)}
.pub-title:lang(bn){font-size:40px;font-weight:600;line-height:1.3;letter-spacing:0}
.pub-lead{margin:16px 0 0;max-width:62ch;font-size:var(--fs-lg);line-height:1.65;color:var(--text-2)}
.pub-lead:lang(bn){font-size:17px;line-height:1.75}
.pub-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:var(--fs-sm);color:var(--text-3)}
.pub-meta>span{display:inline-flex;align-items:center;gap:7px}
.pub-meta .i{color:var(--text-4)}
.pub-meta strong{color:var(--text);font-weight:600}
.pub-trial{color:var(--text-2);font-size:var(--fs-md)}
.pub-head.has-aside{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end}
.pub-head.has-aside>:not(.pub-head-aside){grid-column:1}
.pub-head-aside{grid-column:2;grid-row:1/span 4;align-self:end}
.pub-meta .pub-trial .i{color:var(--primary)}

.pub-section{margin:0 0 72px}
.pub-sec-intro{max-width:70ch;margin:0 0 24px}
.pub-h2{margin:0;font-size:var(--fs-2xl);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--text)}
.pub-h2:lang(bn){font-size:24px;line-height:1.45;letter-spacing:0}
.pub-h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:var(--fs-md);font-weight:600;color:var(--text)}
.pub-h3 .i{color:var(--text-3)}
.pub-sub{margin:6px 0 0;font-size:var(--fs-md);line-height:1.65;color:var(--text-3)}
.pub-fine{margin:14px 0 0;font-size:var(--fs-sm);line-height:1.65;color:var(--text-3)}

/* ---------------- FAQ (faq() helper: details.faq > summary + .ans) ---------------- */
.pub-faq{border-top:1px solid var(--border)}
details.faq{border-bottom:1px solid var(--border)}
details.faq>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 2px;cursor:pointer;list-style:none;font-size:var(--fs-md);font-weight:500;line-height:1.5;color:var(--text)}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::after{content:"";flex-shrink:0;width:16px;height:16px;background:currentColor;opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-1)}
details.faq>summary:hover::after{opacity:.8}
details.faq[open]>summary::after{transform:rotate(180deg)}
details.faq .ans{padding:0 36px 20px 2px;font-size:var(--fs-md);line-height:1.75;color:var(--text-2)}
details.faq .ans ul{margin:8px 0;padding-left:1.3em}
details.faq .ans li{margin:3px 0}
details.faq .ans p{margin:8px 0 0}
.pub-faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:24px 56px;align-items:start}

/* ---------------- plan card (shared with /app/subscription, inside .subs-plans) ---------------- */
.plan-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.plan-card.featured{border-color:var(--accent-soft-border);box-shadow:var(--shadow-sm),inset 0 3px 0 var(--accent)}
.plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0 0 20px}
.plan-name{font-size:var(--fs-md);font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--text)}
.plan-name-bn{font-size:var(--fs-sm);line-height:1.5;color:var(--text-3)}
.plan-flag{flex-shrink:0}
.plan-price{display:flex;align-items:baseline;gap:2px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.plan-price .cur{margin-right:3px;font-size:20px;font-weight:500;color:var(--text-2)}
.plan-price .amt{font-size:38px;font-weight:600;line-height:1;letter-spacing:-.032em}
.plan-price .per{margin-left:3px;font-size:var(--fs-sm);font-weight:400;line-height:1;color:var(--text-3)}
.plan-monthly{margin-top:10px;font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.plan-save{font-size:var(--fs-sm);font-weight:500;line-height:1.6;color:var(--primary-text)}
.plan-save.none{font-weight:400;color:var(--text-4)}
.plan-fee{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);font-size:var(--fs-xs);line-height:1.6;color:var(--text-3)}
.plan-fee .tnum{color:var(--text-2);font-weight:500}
.plan-features{display:grid;gap:6px;list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);color:var(--text-2)}
.plan-features li{display:flex;align-items:center;gap:8px;line-height:1.5}
.plan-features .i{color:var(--primary)}
.plan-spacer{flex:1 1 auto;min-height:20px}
.plan-cta{margin-top:auto}
.plan-cta:lang(bn){font-size:var(--fs-md)}

/* public plans page: one bordered ladder, hairlines between durations */
.plan-ladder{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;overflow:hidden;background:var(--border);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}
.plan-ladder .plan-card{padding:26px 26px 24px;border:0;border-radius:0;box-shadow:none}
.plan-ladder .plan-card.featured{background:color-mix(in srgb,var(--accent) 6%,var(--surface));box-shadow:inset 0 3px 0 var(--accent)}
.plan-ladder .plan-features{display:none}
.plan-ladder .plan-price .amt{font-size:40px}

.pub-incl-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:32px 48px;align-items:start}
.pub-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;list-style:none;margin:20px 0 0;padding:0}
.pub-checks.one{grid-template-columns:1fr;margin:16px 0 22px}
.pub-checks li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-md);line-height:1.6;color:var(--text-2)}
.pub-checks .i{flex-shrink:0;margin-top:.3em;color:var(--primary)}
.pub-trial-card{padding:24px 26px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2)}
.pub-trial-card p{margin:10px 0 0;color:var(--text-2);line-height:1.7}

.pub-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.pub-feats li{display:flex;align-items:center;gap:12px;min-width:0;padding:15px 0;border-bottom:1px solid var(--border-subtle);font-family:var(--font-sans);font-size:var(--fs-base);font-weight:500;line-height:1.4;color:var(--text)}
.pub-feats .i{flex-shrink:0;color:var(--text-3)}

.pub-pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 32px;align-items:start}
.pub-methods{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.pub-methods li{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-base);color:var(--text-2)}
.pub-methods .i{color:var(--text-3)}
.pub-bkash{padding:20px 22px 16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.pub-bkash-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pub-bkash-label{font-size:var(--fs-sm);font-weight:500;color:var(--text-3)}
.pub-bkash-num{margin:10px 0 0;font-family:var(--font-sans);font-size:36px;font-weight:600;line-height:1.15;letter-spacing:.01em;color:var(--text)}
.pub-bkash-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.pub-bkash-type{font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--text-2)}
/* the other payment methods that are set up (Nagad, bank transfer, card): the same box as bKash, stacked under it */
.pub-paybox{padding:20px 22px 16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.pub-pay-left>.pub-bkash+.pub-paybox,.pub-pay-left>.pub-paybox+.pub-paybox{margin-top:12px}
.pub-bank{margin:10px 0 0}
.pub-bank>div{display:flex;justify-content:space-between;align-items:center;gap:6px 16px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border-subtle)}
.pub-bank>div:last-child{border-bottom:0}
.pub-bank dt{font-size:var(--fs-sm);color:var(--text-3)}
.pub-bank dd{display:flex;align-items:center;gap:10px;margin:0;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pub-card-how{margin:10px 0 0;color:var(--text);line-height:1.7}
.pub-paybox .pub-fine{margin:10px 0 0}
.pub-methods li.is-off{border-style:dashed;background:transparent;color:var(--text-3)}
.pub-m-note{font-size:var(--fs-xs);color:var(--text-3)}
.pub-fee{padding:22px 24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2)}
.pub-fee-title{margin:0;color:var(--text)}
.pub-ledger{margin:12px 0 0;padding:0}
.pub-ledger>div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px solid var(--border-subtle)}
.pub-ledger dt{font-weight:600;text-align:center;color:var(--text-3);font-variant-numeric:tabular-nums}
.pub-ledger dd{margin:0;color:var(--text-2)}
.pub-ledger .is-total{border-bottom:0;border-top:1px solid var(--border-strong);margin-top:-1px}
.pub-ledger .is-total dd strong{color:var(--text)}
.pub-fee-ex{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;margin-top:10px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);color:var(--text-3)}
.pub-fee-ex strong{color:var(--text)}
.pub-fee-note{margin:14px 0 0;font-size:var(--fs-sm);line-height:1.75;color:var(--text-2)}

/* closing band (pine) */
.pub-band{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin:0 0 8px;padding:40px 44px;border-radius:var(--r-xl)}
.pub-band h2{margin:0;font-family:var(--font-display);font-size:36px;font-weight:400;line-height:1.15;letter-spacing:-.02em;color:var(--pn-tx)}
.pub-band h2:lang(bn){font-size:30px;font-weight:600;line-height:1.35;letter-spacing:0}
.pub-band p{margin:6px 0 0;font-size:var(--fs-lg);color:var(--pn-tx-2)}
.pub-band-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn.pub-btn-paper{background:var(--n-50);border-color:var(--n-50);color:var(--p-950)}
.btn.pub-btn-paper:hover{background:var(--n-0);border-color:var(--n-0);color:var(--p-950)}
.btn.pub-btn-line{background:transparent;border-color:var(--pn-line-2);color:var(--pn-tx);box-shadow:none}
.btn.pub-btn-line:hover{background:var(--pn-hover);border-color:var(--pn-tx-3);color:var(--pn-tx)}

/* ---------------- reading pages (docs, privacy) ---------------- */
.pub-doc{--toc-top:88px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;align-items:start}
.pub-doc-side{align-self:stretch;min-width:0} /* full row height, so the sticky .toc inside can travel */
.pub-doc details.toc-m{display:none}
.pub-doc-main{min-width:0}

.pub-prose{max-width:720px;font-size:var(--fs-lg);line-height:1.8;color:var(--text-2)}
.pub-sec{margin:0 0 44px;padding:0 0 44px;border-bottom:1px solid var(--border)}
.pub-sec:last-child{margin-bottom:0;padding-bottom:8px;border-bottom:0}
.pub-sec>h2{margin:0 0 20px;font-size:26px;font-weight:600;line-height:1.4;color:var(--text)}
.pub-sec-num{margin:0 0 2px;font-size:var(--fs-sm);font-weight:500;color:var(--text-3)}
.pub-prose h3{margin:28px 0 8px;font-size:var(--fs-xl);font-weight:600;line-height:1.45;color:var(--text)}
.pub-prose h3:first-child{margin-top:0}
.pub-sec>h2+h3{margin-top:4px}
.pub-prose p{margin:0 0 14px}
.pub-prose ul,.pub-prose ol{margin:0 0 16px;padding-left:1.5em}
.pub-prose ol{list-style-type:bengali}
.pub-prose li{margin:4px 0;padding-left:.2em}
.pub-prose li::marker{color:var(--text-4)}
.pub-prose strong{color:var(--text)}
.pub-prose code{font-size:.8em}
.pub-arr{position:relative} /* contains its .sr-only arrow (absolutely positioned) */
.pub-arr .i{margin:0 1px;vertical-align:-.1em;color:var(--text-4)}
.pub-prose .note{margin:16px 0;padding:14px 18px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-md);line-height:1.75;color:var(--text-2)}
.pub-prose .note ul,.pub-prose .note ol{margin:6px 0 0}
.pub-prose .note>strong:first-child{color:var(--text)}
/* consecutive steps read as one ruled list, not a stack of boxes */
.pub-prose .note.step{margin:0;padding:14px 0;border:0;border-top:1px solid var(--border-subtle);border-radius:0;background:none}
.pub-prose .note.step:last-of-type{border-bottom:1px solid var(--border-subtle)}
.pub-prose .note.step>strong:first-child{font-size:var(--fs-md)}

/* closing contact block (docs, support, privacy): shared .contact-card + an email line and a call button */
.pub-contact-lines{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
.pub-contact-mail{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-base);color:var(--text-2)}
.pub-contact-mail .i{color:var(--text-3)}
.pub-contact-mail:hover{color:var(--link)}
.pub-doc-main>.contact-card{max-width:720px}
/* inside the privacy prose: undo the reading sizes and margins */
.pub-prose .contact-card{margin:12px 0 0;font-size:var(--fs-base);line-height:1.5}
.pub-prose .contact-card h3{margin:0 0 4px;font-size:var(--fs-lg)}
.pub-prose .contact-card p{margin:0}

/* ---------------- support ---------------- */
.pub-section-tight{margin-bottom:0}
.pub-section-tight>.pub-h2{margin-bottom:16px}
.pub-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);gap:12px}
.pub-support{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px 56px;align-items:start;margin:56px 0 0}
.pub-faq-col>.pub-h2{margin-bottom:12px}
.pub-hours{padding:20px 22px 8px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-xs)}
.pub-support-side>.alert{margin:16px 0 0}

/* ---------------- contributors ---------------- */
.pub-group{margin:0 0 48px}
.pub-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.pub-person{display:flex;align-items:flex-start;gap:16px;min-width:0;padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-xs)}
.pub-person-body{flex:1;min-width:0}
.pub-person-name{margin:3px 0 0;font-size:var(--fs-md);font-weight:600;line-height:1.35}
.pub-person-bn,.pub-person-alt{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-3)}
.pub-person-role{margin:10px 0 0;font-size:var(--fs-base);line-height:1.45;color:var(--text-2)}
.pub-person-affil{margin:2px 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--text-3)}
.pub-person-mail{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.pub-person-mail .i{color:var(--text-3)}
.pub-person-mail:hover{color:var(--link)}
.pub-callout{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin:16px 0 0;padding:28px 32px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface-2)}
.pub-callout h2{margin:0 0 4px;font-family:var(--font-display);font-size:30px;font-weight:400;letter-spacing:-.02em}
.pub-callout p{margin:0;color:var(--text-3)}

/* ---------------- errors / messages ---------------- */
.pub-error{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 72px;align-items:start;padding:88px 0 32px}
.pub-error-code{margin:16px 0 0;font-family:var(--font-display);font-size:148px;font-weight:400;line-height:.85;letter-spacing:-.04em;color:var(--border-strong)}
.pub-error-text .eyebrow{margin:0 0 12px}
.pub-error .btn-row{margin-top:28px}
.pub-error-links{max-width:520px;margin-top:44px;padding-top:20px;border-top:1px solid var(--border)}
.pub-error-links p{margin:0 0 10px;font-size:var(--fs-sm);color:var(--text-3)}
.pub-error-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;list-style:none;margin:0;padding:0}
.pub-error-links a{display:inline-flex;align-items:center;gap:9px;padding:4px 0;font-weight:500;color:var(--text-2)}
.pub-error-links a .i{color:var(--text-4)}
.pub-error-links a:hover{color:var(--link)}
.pub-error.is-plain{grid-template-columns:minmax(0,1fr)}
.pub-error-detail{max-width:62ch;margin:18px 0 0}
.pub-error-detail>summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text-3)}
.pub-error-detail>summary:hover{color:var(--text)}
.pub-error-detail pre{margin:8px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-2)}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1240px){
  .lg-cols{grid-template-columns:minmax(0,1fr)}
  .lg-cols .lg-sheet{max-width:420px}
  .lg-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
  .pn-statement{font-size:40px}
}
@media (max-width:1100px){
  .auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .auth-main{padding:22px 32px 0}
  .auth-foot{padding:18px 32px 22px}
  .auth-aside{padding:48px 36px}
  .lg-side{grid-template-columns:minmax(0,1fr)}
  .pub-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pub-feats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pub-support{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
}
@media (max-width:1000px){
  .pub-doc{grid-template-columns:minmax(0,1fr)}
  .pub-doc-side{display:none}
  .pub-doc details.toc-m{display:block}
  .plan-ladder{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pub-incl-grid,.pub-pay,.pub-faq-grid{grid-template-columns:minmax(0,1fr)}
  .pub-steps-h{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);max-width:560px}
  .pub-steps-h .pub-step{grid-template-columns:28px minmax(0,1fr);gap:16px;padding:0 0 22px}
  .pub-steps-h .pub-step:last-child{padding-bottom:0}
  .pub-steps-h .pub-step::before{left:13.5px;right:auto;top:34px;bottom:6px;width:1px;height:auto}
  .pub-steps-h .pub-step-body{padding-top:3px}
}
@media (max-width:860px){
  .pub-head.has-aside{display:block}
  .pub-head-aside{margin-top:24px}
  .auth{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"main" "aside" "foot"}
  .auth-main{padding:14px 20px 0}
  .auth-body{align-items:flex-start;padding:36px 0 44px}
  .auth-form,.auth-register .auth-form{max-width:520px}
  .auth-register .auth-grid{grid-template-columns:minmax(0,1fr)} /* stacked: every field gets the full width */
  .auth-aside{padding:44px 20px 48px}
  .auth-aside-in,.auth-login .auth-aside-in{max-width:560px}
  .auth-aside{box-shadow:none} /* no seam once the panel stacks under the form */
  .auth-foot{justify-content:center;padding:20px 20px 28px;border-top:1px solid var(--border-subtle);text-align:center}
  .auth-links{justify-content:center}
  .pn-statement{font-size:36px}
  .lg-side{grid-template-columns:minmax(0,1fr)}
  .pub-support{grid-template-columns:minmax(0,1fr)}
  .pub-head{padding:40px 0 32px;margin-bottom:40px}
  .pub-title,.auth-title{font-size:40px}
  .pub-title:lang(bn){font-size:34px}
  .pub-section{margin-bottom:56px}
}
@media (max-width:720px){
  .pub-tiles{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pub-wrap{padding:0 16px}
  .auth-main{padding:12px 16px 0}
  .auth-aside{padding:40px 16px 44px}
  .auth-grid{grid-template-columns:minmax(0,1fr)}
  .pn-statement{font-size:31px}
  .lg-promos{gap:8px}
  .plan-ladder{grid-template-columns:minmax(0,1fr)}
  .plan-ladder .plan-card{padding:20px 20px 18px}
  .plan-ladder .plan-price .amt{font-size:34px}
  .plan-ladder .plan-head{margin-bottom:14px}
  .plan-spacer{min-height:16px}
  .pub-checks{grid-template-columns:minmax(0,1fr)}
  .pub-feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .pub-bkash-num{font-size:30px}
  .pub-band{padding:28px 22px}
  .pub-band-actions,.pub-band-actions .btn{width:100%}
  .pub-wrap .contact-card>.btn{width:100%}
  .pub-callout{padding:24px 20px}
  .pub-title,.auth-title{font-size:36px}
  .pub-title:lang(bn){font-size:30px}
  .pub-sec>h2{font-size:22px}
  .pub-prose{font-size:var(--fs-md)}
  .pub-people{grid-template-columns:minmax(0,1fr)}
  .pub-error{grid-template-columns:minmax(0,1fr);gap:8px;padding:56px 0 24px}
  .pub-error-code{font-size:88px}
  .pub-error-links ul{grid-template-columns:minmax(0,1fr)}
}

/* ---------- features page (public.js featuresPage) ---------- */
.ft-jump{margin:-24px 0 40px}
.ft-blocks{margin:0 0 64px;border-top:1px solid var(--border)}
.ft-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 56px;padding:40px 0;border-bottom:1px solid var(--border);scroll-margin-top:84px}
.ft-block .pub-h2{display:flex;align-items:center;gap:12px}
.ft-block .pub-h2 .i{flex-shrink:0;color:var(--text-3)}
.ft-p{max-width:60ch;margin:12px 0 0;font-size:var(--fs-md);line-height:1.8;color:var(--text-2)}
.ft-list{margin:0}
.ft-text .ft-list{margin-top:18px}
.ft-calc{align-self:start;margin:0}
.ft-sample{align-self:start;margin:0;padding:14px 18px 8px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.ft-sample figcaption{margin:0 0 6px;font-size:var(--fs-xs);color:var(--text-3)}
.ft-sample-t{width:100%;border-collapse:collapse}
.ft-sample-t th,.ft-sample-t td{padding:9px 0;border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);text-align:left}
.ft-sample-t tr:first-child>*{border-top:0}
.ft-sample-t th{font-weight:500;color:var(--text);background:none}
.ft-sample-t th,.ft-sample-t td{height:auto;border-bottom:0}
.ft-sample-t td.num{padding-right:16px;text-align:right;font-variant-numeric:tabular-nums}
.ft-sample-t .u{margin-left:.3em;color:var(--text-3)}
.ft-also .pub-h2{margin-bottom:18px}
@media (max-width:860px){
  .ft-block{grid-template-columns:1fr;padding:32px 0}
  .ft-jump{margin:-16px 0 28px}
}

/* ---- parity round ---- */
/* log-in page: the administrator's site notice */
.auth-form .site-notice{margin:0 0 14px}
.site-notice .site-notice-t{margin:0}
.site-notice .site-notice-a{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-weight:500}
/* plans: no bKash number yet (installation placeholder) */
.pub-bkash-ask .pub-card-how{margin:6px 0 0}
/* features: live numbers strip, first-chart steps, FAQ, price teaser, everyday shortcuts */
.ft-stats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:1px;margin:-16px 0 40px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--border);overflow:hidden}
.ft-stat{display:flex;flex-direction:column;gap:4px;flex:1 1 190px;min-width:0;padding:16px 18px;background:var(--surface)} /* the last row stretches, so no empty cell */
.ft-stat-v{font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.ft-stat-v:lang(bn){letter-spacing:0}
.ft-stat-l{font-size:var(--fs-sm);line-height:1.5;color:var(--text-2)}
.ft-note{max-width:70ch;margin:14px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);line-height:1.7;color:var(--text-2)}
.ft-price{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;margin:0 0 56px;padding:24px 26px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.ft-price-v{margin:4px 0 0;font-size:var(--fs-lg);color:var(--text)}
.ft-price-v strong{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
.ft-price .btn-row{flex-wrap:wrap}
.ft-price .pub-h2{margin:0}
.ft-price .pub-sub{margin:6px 0 0}
.ft-start{margin-bottom:56px}
.ft-block .ft-note{align-self:start;margin:0}
@media (max-width:640px){.ft-stats{margin-top:-8px}.ft-stat{padding:14px}.ft-stat-v{font-size:22px}.ft-price{padding:20px 18px}.ft-price .btn-row,.ft-price .btn-row .btn{width:100%}}
/* ---------------- business details (site footer; Admin → Settings → Business details) ---------------- */
.site-footer .site-biz{display:flex;flex-direction:column;gap:2px;max-width:40ch;margin:12px 0 0;line-height:1.5}
.site-biz strong{font-weight:600;color:var(--text-2)}
/* ---------------- register: "I accept the Terms of service and the Privacy policy" ---------------- */
.auth-register .reg-terms{margin:0 0 14px}
.auth-register .reg-terms>.r{align-items:flex-start;gap:9px;font-size:var(--fs-sm);line-height:1.5;color:var(--text-2)}
.auth-register .reg-terms>.r>input{flex-shrink:0;margin-top:2px}
.auth-register .reg-terms a{font-weight:500}
.auth-register .reg-terms .field-err{margin-top:4px}
@media (min-width:861px) and (max-height:820px){.auth.auth-register .reg-terms{margin-bottom:10px}}
@media (min-width:861px) and (max-height:616px){.auth.auth-register .reg-terms{margin-bottom:8px}.auth-register .reg-terms>.r{line-height:1.4}}
@media (min-width:861px) and (max-height:530px){.auth.auth-register .reg-terms{margin-bottom:6px}.auth-register .reg-terms>.r{font-size:var(--fs-xs)}}
/* the privacy line under the register form stays as it was (hidden only below 616px, as before); the narrow-column
   steps further down make room for the terms box */
/* narrow side-by-side columns (861–1240px): the footer's Terms and Refunds links take one more line, which log-in keeps free */
@media (min-width:861px) and (max-width:1240px){.auth-login{--auth-foot-h:106px}}
@media (min-width:861px) and (max-width:1240px) and (max-height:700px){.auth-login{--auth-foot-h:94px}}
/* the eight footer links stay on one line wherever the column allows it (narrow side-by-side columns, up to 1300px) */
@media (min-width:861px) and (max-width:1300px){.auth-links{column-gap:10px}}
/* register on short or narrow side-by-side screens: the terms box (one more row) is paid for by a slightly tighter rhythm */
@media (min-width:861px) and (max-height:720px){
  .auth.auth-register .reg-terms{margin-bottom:6px}
  .auth-register .reg-terms>.r{font-size:var(--fs-xs);line-height:1.4}
  .auth-register details.reg-pro{margin-bottom:5px}
  .auth.auth-register .auth-alt{margin-top:10px;padding-top:8px}
}
@media (min-width:861px) and (max-height:620px){
  .auth.auth-register .reg-terms{margin-bottom:4px}
  .auth-register details.reg-pro{margin-bottom:3px}
  .auth.auth-register .auth-field{margin-bottom:10px}
  .auth.auth-register .auth-alt{margin-top:8px;padding-top:6px}
  .auth.auth-register .auth-fields .btn-lg{height:38px}
}
@media (min-width:861px) and (max-height:530px){
  .auth.auth-register .auth-field{margin-bottom:6px}
  .auth.auth-register .auth-alt{margin-top:6px;padding-top:4px}
}
/* register in narrow side-by-side columns (861–1240px), where the eight footer links take two lines and the terms box
   wraps: the privacy line and the © line stay where they were, and a tighter rhythm pays for the extra lines (each
   block only for its own height range, so the shorter screens' steps above still apply) */
@media (min-width:861px) and (max-width:1240px) and (min-height:821px) and (max-height:900px){
  .auth.auth-register .auth-body{padding:8px 0}
  .auth.auth-register .auth-title{font-size:36px;margin-bottom:6px}
  .auth.auth-register .auth-sub{margin-bottom:18px}
  .auth.auth-register .auth-field{margin-bottom:14px}
  .auth-register .auth-links{row-gap:0}
  .auth.auth-register .auth-foot{padding-top:10px;padding-bottom:12px}
}
@media (min-width:861px) and (max-width:1240px) and (min-height:721px) and (max-height:820px){
  .auth.auth-register .auth-body{padding:4px 0}
  .auth.auth-register .auth-field{margin-bottom:10px}
  .auth.auth-register .reg-terms{margin-bottom:6px}
  .auth.auth-register .auth-alt{margin-top:10px;padding-top:8px}
  .auth.auth-register .auth-note{margin-top:8px}
  .auth-register .auth-links{row-gap:0}
  .auth.auth-register .auth-foot{padding-top:10px;padding-bottom:12px}
}
@media (min-width:861px) and (max-width:1240px) and (min-height:621px) and (max-height:720px){
  .auth.auth-register .auth-body{padding:2px 0}
  .auth.auth-register .auth-field{margin-bottom:10px}
  .auth.auth-register .reg-terms{margin-bottom:4px}
  .auth.auth-register .auth-sub{margin-bottom:12px}
  .auth.auth-register .auth-note{margin-top:8px}
}
@media (min-width:861px) and (max-width:1240px) and (max-height:720px){
  .auth-register .auth-links{row-gap:0}
  .auth.auth-register .auth-foot{padding-top:8px;padding-bottom:10px}
  .auth.auth-register .auth-title{margin-bottom:8px}
}
@media (min-width:861px) and (max-width:1240px) and (max-height:620px){
  .auth.auth-register .auth-main{padding-top:8px}
  .auth.auth-register .auth-body{padding:4px 0}
  .auth.auth-register .auth-title{font-size:28px}
}
@media (min-width:861px) and (max-width:1240px) and (max-height:580px){
  .auth.auth-register .auth-title{font-size:26px}
  .auth.auth-register .reg-terms{margin-bottom:2px}
  .auth.auth-register .auth-alt{margin-top:6px;padding-top:4px}
}
@media (min-width:861px) and (max-width:1240px) and (max-height:530px){
  .auth.auth-register .auth-main{padding-top:4px}
  .auth.auth-register .auth-title{font-size:24px;margin-bottom:6px}
  .auth.auth-register .auth-form :is(input[type=text],input[type=email],input[type=password],input[type=tel]){height:32px}
  .auth.auth-register .auth-fields .btn-lg{height:34px}
  .auth.auth-register .reg-terms{margin-bottom:2px}
  .auth-register .reg-terms>.r{line-height:1.3}
  .auth.auth-register .auth-foot{padding-top:4px;padding-bottom:6px}
}