/* SureTutor static landing page.
   One small system: every colour, size, space, radius and shadow below comes from these tokens. */
:root {
  /* colour */
  --navy: #091F39;
  --navy-2: #0D2949;
  --navy-line: #1F3A5C;
  --on-navy: #B9C4CF;
  --on-navy-line: rgba(255, 255, 255, 0.24);
  --gold: #E7A33B;
  --gold-ink: #76541D;
  --gold-tint: #FFF8EB;
  --white: #FFFFFF;
  --surface: #F8F7F3;
  --muted: #5B6B7F;
  --line: #DCE2E9;
  --field: #7B8898;
  --wa: #008069;
  --wa-hover: #017561;
  --error: #B4232A;

  /* type: 14 / 17 / 20 / 26 / 32 / 44 */
  --fs-sm: 14px;
  --fs-body-sm: 15px; /* phone only: step text, tick lines, FAQ */
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;

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

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* shadow: only for things that float */
  --shadow-float: 0 4px 12px rgba(9, 31, 57, 0.18);
  --shadow-dialog: 0 24px 60px rgba(9, 31, 57, 0.35);

  --font-latin: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-bn: "Noto Sans Bengali", "Hind Siliguri", sans-serif; /* Noto is loaded for digits only: Hind's ১ reads as a tiny hook */
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; } /* clears the sticky header */
body {
  background: var(--surface);
  color: var(--navy);
  font-family: var(--font-latin);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Bangla pages: Latin glyphs use Inter, Bangla glyphs fall through to Hind Siliguri. */
body.bn { font-family: Inter, var(--font-bn); line-height: 1.7; }
h1, h2, h3 { font-weight: 600; line-height: 1.25; text-wrap: balance; }
body.bn h1, body.bn h2, body.bn h3 { font-family: var(--font-bn); font-weight: 700; line-height: 1.3; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s4); }
.wrap.narrow { max-width: 760px; }
.skip { position: absolute; left: -999px; top: var(--s2); background: var(--gold); color: var(--navy); padding: var(--s2) var(--s3); border-radius: var(--r-sm); z-index: 50; }
.skip:focus { left: var(--s2); }

/* focus: navy on light surfaces, gold on navy ones */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.notice { display: none; background: var(--surface); color: var(--navy); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.notice-in { display: flex; align-items: center; justify-content: center; position: relative; padding-top: var(--s2); padding-bottom: var(--s2); padding-left: 52px; padding-right: 52px; text-align: center; min-height: 44px; }
.notice p { line-height: 1.45; display: flex; align-items: center; justify-content: center; gap: var(--s2); text-align: left; }
.notice-ico { width: 20px; height: 20px; flex: none; color: var(--gold-ink); }
.notice strong { font-weight: 600; }
@media (min-width: 760px) { .notice { display: block; } }
.notice[hidden] { display: none !important; }
.notice-x { position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: var(--r-full); background: none; color: var(--muted); font-size: var(--fs-xl); line-height: 1; cursor: pointer; }
.notice-x:hover { background: var(--line); color: var(--navy); }
.hero :focus-visible { outline-color: var(--navy); }
.site-header :focus-visible, .site-footer :focus-visible, .m-call:focus-visible { outline-color: var(--gold); }

/* header */
.site-header { background: var(--navy); color: var(--white); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--on-navy-line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s2); padding-bottom: var(--s2); }
.site-header .logo { display: block; height: 50px; width: auto; }
@media (min-width: 640px) { .site-header .logo { height: 58px; } }
.site-header nav { font-family: Inter, var(--font-bn); display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); white-space: nowrap; }
.site-header nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); text-decoration: none; }
.site-header nav a:not(.btn):hover { color: var(--gold); }
.site-header nav a { transition: color 0.2s; }
.site-header nav a[aria-current] { color: var(--gold); font-weight: 600; }
.site-header .wrap nav { position: relative; }
.nav-ind { position: absolute; left: 0; bottom: 8px; height: 2px; background: var(--gold); border-radius: 2px; opacity: 0; pointer-events: none; }
.nav-ind.ready { transition: transform 0.25s ease, width 0.25s ease, opacity 0.2s; }
.hide-sm, .site-header nav a.hide-sm { display: none; }
@media (min-width: 900px) { .hide-sm { display: inline; } .site-header nav a.hide-sm { display: inline-flex; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2); justify-content: center;
  min-height: 44px; border-radius: var(--r-sm); padding: var(--s3) var(--s5);
  font-weight: 600; text-decoration: none; font-size: var(--fs-md);
  border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-2); }
.btn-line { border-color: var(--line); background: var(--white); }
.btn-line:hover { border-color: var(--navy); }
.btn-wa { background: var(--wa); color: var(--white); }
.btn-wa:hover { background: var(--wa-hover); }
.btn-sm { padding: var(--s2) var(--s4); font-size: var(--fs-sm); }

/* hero */
.hero { background: #FFFCF6; color: var(--navy); border-bottom: 1px solid var(--line); padding: var(--s6) 0 var(--s7); }
.hero-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 720px) { .hero-grid { grid-template-columns: 1.2fr 1fr; } }
@media (min-width: 900px) { .hero-grid { gap: var(--s7); } .hero { padding: var(--s8) 0; } }
.hero .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); padding: 2px var(--s3); border: 1px solid #E8D9BC; border-radius: var(--r-full); color: #3E4C5E; font-size: var(--fs-sm); }
.hero .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--gold-ink); flex: none; }
.hero h1 { margin-top: var(--s2); font-size: var(--fs-2xl); max-width: 22ch; text-wrap: balance; }
@media (min-width: 900px) { .hero h1 { font-size: var(--fs-3xl); } }
.hero h1 .hl { display: block; color: var(--gold-ink); text-wrap: balance; }
.hero p.lead { margin-top: var(--s4); max-width: 52ch; color: var(--muted); text-wrap: pretty; }
.roles { margin-top: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); max-width: 580px; }
.role { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--navy); text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.role:hover { border-color: var(--navy); }
.role strong { font-size: var(--fs-md); line-height: 1.3; }
.role small { color: #3E4C5E; font-size: var(--fs-sm); line-height: 1.4; }
.role-main { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-color: var(--navy); background: var(--navy); color: var(--white); }
.role-main:hover { border-color: var(--navy-2); background: var(--navy-2); }
.role-main strong { display: block; }
.role-main small { display: block; color: var(--on-navy); font-weight: 500; }
.role-main b { font-size: var(--fs-lg); color: var(--gold); }
.call-link { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; margin-top: var(--s2); color: #3E4C5E; text-decoration: none; font-size: var(--fs-body-sm); }
.call-link strong { color: var(--navy); font-family: var(--font-latin); font-size: var(--fs-md); font-weight: 600; }
.call-link:hover strong { color: var(--gold-ink); }
.tutor-link { display: flex; align-items: center; width: fit-content; min-height: 44px; color: #3E4C5E; font-size: var(--fs-body-sm); text-underline-offset: 4px; }
.tutor-link:hover { color: var(--navy); }
.former { margin-top: var(--s3); color: #3E4C5E; font-size: var(--fs-body-sm); }
.demo-claim { margin-top: var(--s4); max-width: 580px; }
.demo-claim summary { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); row-gap: 0; min-height: 44px; cursor: pointer; list-style: none; }
.demo-claim summary::-webkit-details-marker { display: none; }
.dc-main { display: inline-flex; align-items: center; gap: var(--s2); color: var(--gold-ink); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.dc-main svg { width: 22px; height: 22px; flex: none; }
.dc-cond { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; color: var(--navy); font-size: var(--fs-body-sm); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 4px; }
.dc-cond svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.demo-claim[open] .dc-cond svg { transform: rotate(180deg); }
.dc-panel { margin-top: var(--s1); padding: var(--s3) var(--s4); border: 1px solid #E8D9BC; border-radius: var(--r-md); background: var(--white); font-size: var(--fs-sm); }
.demo-claim[open] .dc-panel { animation: dc-in .2s ease; }
.dc-panel ul { margin: 0; padding-left: var(--s4); color: var(--navy); }
.dc-panel li + li { margin-top: var(--s1); }
.dc-panel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-ink); font-weight: 600; }
@keyframes dc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .demo-claim[open] .dc-panel { animation: none; } }
.hero-art { max-width: 440px; width: 100%; justify-self: center; margin: 0 auto; }
.hero-art > img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid #DCC9A0; box-sizing: border-box; }

/* trust strip: its own card, with space above (hero) and below (guardian section) */
.trust { padding-top: var(--s6); }
@media (min-width: 900px) { .trust { padding-top: var(--s7); } }
.trust ul { list-style: none; display: grid; gap: var(--s2) var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
@media (min-width: 560px) { .trust ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { .trust li:last-child { grid-column: 1 / -1; } }
@media (min-width: 960px) { .trust ul { grid-template-columns: repeat(5, 1fr); padding: var(--s5) var(--s5); } .trust li:last-child { grid-column: auto; } }
.trust li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s3) 0; }
.trust strong { display: block; line-height: 1.35; font-size: var(--fs-md); color: var(--navy); }
.trust li span:last-child { color: var(--muted); font-size: var(--fs-body-sm); line-height: 1.5; }
.t-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full); background: rgba(9, 31, 57, .06); color: var(--navy); flex: none; }
.t-ico svg { display: block; width: 24px; height: 24px; }

/* sections */
section.block { padding: var(--s7) 0; }
@media (min-width: 900px) { section.block { padding: var(--s8) 0; } }
section.block.white { background: var(--white); }
.kicker { color: var(--gold-ink); font-weight: 600; font-size: var(--fs-sm); }
section h1, section h2 { margin-top: var(--s1); font-size: var(--fs-xl); }
@media (min-width: 900px) { section h1, section h2 { font-size: var(--fs-2xl); } }
section.block p.intro { margin-top: var(--s3); color: var(--muted); max-width: 62ch; }

/* steps */
.steps { margin-top: var(--s6); display: grid; gap: var(--s4); list-style: none; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); counter-increment: step; }
section.white .steps li { background: var(--surface); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--navy); color: var(--gold); font-weight: 700; }
body.bn .steps li::before { content: counter(step, bengali); font-family: var(--font-bn); font-size: var(--fs-md); }
.steps h3 { margin-top: var(--s3); font-size: var(--fs-lg); }
.steps p { margin-top: var(--s1); color: var(--muted); }
.steps a { color: var(--navy); font-weight: 600; text-decoration-color: var(--gold); text-underline-offset: 3px; }
/* compact steps on phones: number beside the text */
@media (max-width: 719px) {
  .steps li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); padding: var(--s4); }
  .steps li::before { grid-row: span 2; align-self: start; }
  .steps h3 { margin-top: 2px; }
  .steps p { margin-top: 2px; }
}

.cta-row { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: center; }
@media (max-width: 559px) { .cta-row .btn { flex: 1 1 100%; } }
.note { color: var(--muted); font-size: var(--fs-sm); }
.note a { color: var(--navy); font-weight: 600; }

/* guardian section: steps as a numbered timeline beside the illustration */
.g-split { display: grid; gap: var(--s6); align-items: center; margin-top: var(--s6); }
.g-split .sec-art { order: -1; }
@media (min-width: 720px) {
  .g-split { grid-template-columns: 1.3fr 1fr; }
  .g-split .sec-art { order: 0; max-width: 420px; align-self: start; }
}
@media (min-width: 900px) { .g-split { gap: var(--s8); } }
.sec-art { display: block; width: 100%; max-width: 320px; height: auto; justify-self: center; border-radius: var(--r-lg); }
.steps.timeline { margin-top: 0; grid-template-columns: 1fr; gap: 0; }
.steps.timeline li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--s4); padding: 0 0 var(--s5); background: none; border: 0; border-radius: 0; }
.steps.timeline li::before { grid-row: span 2; align-self: start; }
.steps.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: var(--s2); width: 2px; background: var(--line); }
.steps.timeline h3 { margin-top: var(--s1); }
.steps.timeline p { margin-top: 2px; }
/* tutor steps: the same timeline, laid out across on wide screens */
.steps.timeline.across { margin-top: var(--s7); }
@media (min-width: 900px) {
  .steps.timeline.across { grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
  .steps.timeline.across li { display: block; padding: 0; }
  .steps.timeline.across li:not(:last-child)::after { left: 48px; right: -12px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .steps.timeline.across h3 { margin-top: var(--s3); }
}

/* guardian reassurance */
.assure-head { padding-top: var(--s5); border-top: 1px solid var(--line); font-weight: 700; color: var(--navy); }
.assure { list-style: none; display: grid; gap: var(--s2); padding-top: var(--s3); }
.cta-lead { flex-basis: 100%; text-align: center; font-size: var(--fs-md); font-weight: 600; color: var(--navy); }
.assure li { display: flex; gap: var(--s3); align-items: flex-start; font-weight: 500; }
.assure + .note, .faq + .note { margin-top: var(--s3); }
.assure svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--navy); }

/* subject categories */
.cat-grid { margin-top: var(--s5); list-style: none; display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }
.cat-grid li { display: flex; }
.cat-card { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cat-card:hover, .cat-card:focus-visible { border-color: var(--gold); box-shadow: 0 6px 18px rgba(9, 31, 57, .08); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cat-card { transition: none; } .cat-card:hover { transform: none; } }
@media (min-width: 640px) and (max-width: 899px) { .cat-card { flex-direction: row; align-items: center; gap: var(--s4); } }
.cat-ico { color: var(--navy); flex: none; }
.cat-ico svg { display: block; width: 28px; height: 28px; }
.cat-grid strong { display: block; line-height: 1.35; }
.cat-grid small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }

/* tutor section */
.tutor-head { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 720px) { .tutor-head { grid-template-columns: 1.3fr 1fr; } }
@media (min-width: 900px) { .tutor-head { gap: var(--s7); } }
.perks { margin-top: var(--s5); list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.perks li { display: inline-flex; align-items: center; gap: var(--s2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-full); padding: var(--s1) var(--s3); font-weight: 600; font-size: var(--fs-sm); }
.perks li::before { content: "✓"; color: var(--navy); font-weight: 700; }
.tutor-visual { width: 100%; max-width: 320px; justify-self: center; }
@media (min-width: 900px) { .tutor-visual { max-width: 400px; } }
.tutor-visual > img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }



/* tablet: text beside the image */
@media (min-width: 720px) and (max-width: 899px) {
  .tutor-head { column-gap: var(--s6); row-gap: 0; align-items: start; }
  .tutor-head > div:first-child { display: contents; }
  .tutor-head .kicker, .tutor-head h1, .tutor-head h2, .tutor-head .intro, .tutor-head .perks { grid-column: 1; }
  .tutor-visual { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}

/* fee */
.stages { margin-top: var(--s7); }
.stages h3 { margin-top: var(--s1); font-size: var(--fs-xl); }
.stage-list { margin: var(--s5) 0 var(--s3); list-style: none; display: grid; gap: var(--s5); }
.stage { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.stage h4 { font-size: var(--fs-lg); line-height: 1.3; }
.stage-label { align-self: flex-start; padding: 2px var(--s3); border: 1px solid var(--gold); border-radius: var(--r-full); background: var(--gold-tint); color: var(--gold-ink); font-size: var(--fs-sm); font-weight: 600; }
.stage-label.done { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.stage-sub { color: var(--muted); }
.stage ul { list-style: none; display: grid; gap: var(--s2); font-size: var(--fs-body-sm); }
.stage ul li { display: flex; gap: var(--s2); align-items: flex-start; }
.stage ul li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 10px; border-radius: var(--r-full); background: var(--gold); }
.stage .note { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.stage:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: var(--s5); background: var(--field); }
.stage:not(:last-child)::before { content: ""; position: absolute; left: calc(50% - 4px); top: calc(100% + var(--s5) - 6px); border: 4px solid transparent; border-top: 6px solid var(--field); border-bottom: 0; }
@media (min-width: 900px) {
  .stage-list { grid-template-columns: repeat(3, 1fr); }
  .stage:not(:last-child)::after { left: 100%; top: 40px; width: var(--s5); height: 2px; }
  .stage:not(:last-child)::before { left: calc(100% + var(--s5) - 6px); top: 36px; border: 4px solid transparent; border-left: 6px solid var(--field); border-right: 0; }
}
.fee-box { margin-top: var(--s7); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); }
@media (min-width: 720px) { .fee-box { padding: var(--s6); } }
.fee-box h3 { font-size: var(--fs-lg); }
.fee-box .note { margin-top: var(--s1); }
.fee-lead { margin-top: var(--s4); font-weight: 600; }
.fee-cards { margin: var(--s2) 0 var(--s4); list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.fee-cards li { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4) var(--s2); text-align: center; display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--muted); }
.fee-cards .dur { font-weight: 600; color: var(--navy); }
.fee-cards .pct { font-size: var(--fs-xl); font-weight: 700; color: var(--navy); line-height: 1.2; }
.fee-cards li.hot { background: var(--gold-tint); border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.fee-ex { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); background: var(--surface); border-radius: var(--r-sm); }
.rules { margin: var(--s1) 0 var(--s4); padding-left: 20px; display: grid; gap: var(--s2); }
.rules li::marker { color: var(--gold-ink); }
.fee-ex strong, .rules strong { font-weight: 600; }

/* faq */
.faq { margin-top: var(--s5); display: grid; gap: var(--s2); }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.faq summary { cursor: pointer; list-style: none; min-height: 44px; padding: var(--s4) var(--s7) var(--s4) var(--s4); font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%); font-size: var(--fs-lg); font-weight: 400; color: var(--navy); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 var(--s4) var(--s4); color: var(--muted); }
.faq details a { color: var(--navy); font-weight: 600; }

/* home: short link block to the /tutors page, centred */
#tutors-link .wrap { text-align: center; }
#tutors-link p { margin: var(--s3) auto 0; max-width: 52ch; color: var(--muted); }
#tutors-link .cta-row { margin-top: var(--s4); }
.tutor-head .cta-row { justify-content: flex-start; margin-top: var(--s4); }

/* footer: logo, links, contact, then a quiet bottom line */
.site-footer { font-family: Inter, var(--font-bn); background: var(--navy); color: var(--on-navy); padding: var(--s7) 0 96px; font-size: var(--fs-sm); }
@media (min-width: 760px) { .site-footer { padding-bottom: var(--s5); } }
.f-grid { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .f-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s7); } }
.f-logo { display: block; height: 56px; width: auto; }
/* the logo artwork has ~8px of empty space on its left; pull it back so it lines up with the text below */
@media (min-width: 760px) { .f-logo { margin-left: -8px; } }
.f-brand p { margin-top: var(--s3); max-width: 34ch; }
.f-brand .f-former { margin-top: var(--s1); }
.f-head { color: var(--white); font-weight: 600; font-size: var(--fs-md); margin-bottom: var(--s2); }
.f-links { list-style: none; }
@media (min-width: 760px) { .f-links { display: grid; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--s6); } }
.site-footer a { color: var(--on-navy); text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.site-footer a:hover { color: var(--gold); }
.f-links a { display: inline-flex; align-items: center; min-height: 40px; }
.f-phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-latin); font-size: var(--fs-lg); font-weight: 600; }
.site-footer .f-phone { color: var(--white); }
.f-mail { display: block; margin-top: -4px; margin-bottom: var(--s2); font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--on-navy); text-decoration: none; overflow-wrap: anywhere; }
.f-mail:hover { color: var(--gold); }
.f-social { list-style: none; display: flex; gap: var(--s2); margin-top: var(--s4); }
.f-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full); border: 1px solid var(--on-navy-line); color: var(--white); }
.f-social a:hover { border-color: var(--gold); color: var(--gold); }
.f-social svg { width: 20px; height: 20px; }
/* phone footer: centred and compact; contact first, links as a wrapped row */
@media (max-width: 759px) {
  .site-footer { text-align: center; }
  .f-grid { gap: var(--s5); }
  .f-logo { margin: 0 auto; }
  .f-brand p { margin-left: auto; margin-right: auto; }
  .f-head { display: none; }
  .f-grid > nav.f-col { order: 1; }
  .f-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--s4); }
  .f-social { justify-content: center; }
}
.f-bottom { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--navy-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: var(--s2) var(--s5); }
.f-bottom > p:first-child { font-family: var(--font-latin); }
/* desktop: keep the right end clear of the floating WhatsApp button */

/* phone menu: a hamburger in the header opens the same links as the desktop navbar */
.menu-btn, .site-header .m-menu { display: none; }
@media (max-width: 899px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--on-navy-line); border-radius: var(--r-sm); background: none; color: var(--white); cursor: pointer; }
  .menu-btn svg { width: 22px; height: 22px; }
  .menu-btn .x, .menu-btn[aria-expanded="true"] .bars { display: none; }
  .menu-btn[aria-expanded="true"] .x { display: block; }
  .site-header .m-menu:not([hidden]) { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; z-index: 3; background: var(--navy); border-bottom: 1px solid var(--on-navy-line); padding: var(--s1) var(--s4) var(--s2); }
  .site-header .m-menu a { justify-content: flex-start; border-bottom: 1px solid var(--on-navy-line); }
  .site-header .m-menu a:last-child { border-bottom: 0; }
  .site-header .m-menu a[aria-current] { color: var(--gold); font-weight: 600; }
}

/* phone: a strip under the header names the section being read (hidden on wider screens) */
.site-header .sec-nav { display: none; }
@media (max-width: 759px) {
  .site-header { position: sticky; }
  .site-header .sec-nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-bottom: 1px solid var(--on-navy-line); padding: 0 var(--s2); justify-content: space-around; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; font-family: Inter, var(--font-bn); font-size: var(--fs-sm); }
  .site-header .sec-nav.on { opacity: 1; visibility: visible; transform: none; }
  .site-header .sec-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s3); color: var(--on-navy); text-decoration: none; white-space: nowrap; }
  .site-header .sec-nav a[aria-current] { color: var(--gold); font-weight: 600; }
  .sec-nav .nav-ind { bottom: 0; height: 3px; }
  html { scroll-padding-top: 120px; } /* header + strip */
}

/* floating WhatsApp button (desktop) and back to top */
.wa-fab { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 30; width: 56px; height: 56px; border-radius: var(--r-full); background: var(--wa); color: var(--white); display: grid; place-items: center; box-shadow: var(--shadow-float); transition: background 0.15s; }
.wa-fab:hover { background: var(--wa-hover); }
.wa-fab svg { width: 28px; height: 28px; }
.to-top { position: fixed; right: 22px; bottom: 88px; z-index: 30; width: 44px; height: 44px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-float); transition: border-color 0.15s; }
.to-top[hidden] { display: none; }
.to-top:hover { border-color: var(--navy); }
.to-top svg { width: 20px; height: 20px; }

/* phone bar: WhatsApp and call, replaces the floating button on small screens */
.m-bar { display: none; }
@media (max-width: 759px) {
  .m-bar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); }
  .m-bar a { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; border-radius: var(--r-sm); padding: var(--s3); font-weight: 600; text-decoration: none; }
  .m-bar svg { width: 20px; height: 20px; }
  .m-wa { background: var(--wa); color: var(--white); }
  .m-call { background: var(--navy); color: var(--white); }
  .wa-fab { display: none; }
  .site-header nav .btn { display: none; }
  .to-top { bottom: 80px; right: var(--s4); }
}

/* phone: calmer text size for the long reading parts */
@media (max-width: 759px) {
  .steps.timeline h3 { font-size: var(--fs-md); }
  .steps.timeline p, .assure li { font-size: var(--fs-body-sm); }
  .faq summary, .faq details p { font-size: var(--fs-body-sm); }
}

/* terms and privacy pages */
.doc { overflow-wrap: anywhere; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); margin: var(--s6) 0 var(--s7); }
@media (min-width: 720px) { .doc { padding: var(--s7); } }
.doc h1 { font-size: var(--fs-xl); }
@media (min-width: 720px) { .doc h1 { font-size: var(--fs-2xl); } }
.doc h2 { margin-top: var(--s6); font-size: var(--fs-lg); padding-top: var(--s4); border-top: 1px solid var(--line); }
.doc ol { margin-top: var(--s3); padding-left: 22px; }
.doc ol > li { margin-top: var(--s3); }
.doc ul { margin-top: var(--s2); padding-left: 20px; }
.doc ul li { margin-top: var(--s1); }
.doc p { margin-top: var(--s2); }
.doc p.sub { margin-top: var(--s4); }
.doc .meta { color: var(--muted); margin-top: var(--s2); }
.doc .meta + .meta { margin-top: 2px; }
.doc .updated { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.lang-toggle { display: inline-flex; gap: var(--s1); margin-bottom: var(--s5); padding: var(--s1); border: 1px solid var(--line); border-radius: var(--r-full); }
.lang-toggle button { min-height: 44px; padding: var(--s2) var(--s4); border: 0; border-radius: var(--r-full); background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.lang-toggle button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.doc[data-lang="bn"] .l-en, .doc[data-lang="en"] .l-bn { display: none; }

/* step-by-step helper (dialog) */
.wiz { --wz-pad: var(--s4); border: 0; padding: 0; margin: auto; width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); border-radius: var(--r-lg); background: var(--white); color: var(--navy); box-shadow: var(--shadow-dialog); }
@media (min-width: 560px) { .wiz { --wz-pad: var(--s5); } }
.wiz::backdrop { background: rgba(9, 31, 57, 0.6); }
.wiz [hidden] { display: none !important; }
.wiz button, .wiz input { font: inherit; }
.wiz button:not(.btn), .wiz input { color: inherit; }
.wz-in { display: flex; flex-direction: column; max-height: inherit; }
.wz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--wz-pad) var(--s3); }
.wz-title { font-weight: 700; line-height: 1.3; }
.wz-count { color: var(--muted); font-size: var(--fs-sm); }
.wz-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-full); background: var(--surface); font-size: var(--fs-lg); line-height: 1; cursor: pointer; }
.wz-close:hover { background: var(--line); }
.wz-bar { height: 4px; margin: 0 var(--wz-pad); border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.wz-bar span { display: block; height: 100%; background: var(--gold); transition: width 0.2s; }
.wz-body { padding: var(--s4) var(--wz-pad); overflow-y: auto; }
.wz-q { margin-bottom: var(--s4); font-size: var(--fs-lg); outline: none; }
.wz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.wz-opt { min-height: 44px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); line-height: 1.35; text-align: left; cursor: pointer; }
.wz-opt:hover { border-color: var(--navy); }
.wz-opt[aria-pressed="true"] { border-color: var(--navy); background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--navy); font-weight: 600; }
.wz-chips { display: flex; flex-wrap: wrap; }
.wz-chips .wz-opt { padding: var(--s2) var(--s4); border-radius: var(--r-full); }
.wz-field { display: block; margin: var(--s4) 0 var(--s2); font-size: var(--fs-sm); font-weight: 600; }
.wz-field em { color: var(--muted); font-style: normal; font-weight: 400; }
.wz-field input { display: block; width: 100%; min-height: 44px; margin-top: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--field); border-radius: var(--r-sm); font-size: var(--fs-md); font-weight: 400; }
.wz-field input:focus { border-color: var(--navy); outline: 2px solid var(--navy); outline-offset: 0; }
.wz-field input:disabled { background: var(--surface); color: var(--muted); border-color: var(--line); }
.wz-check { display: flex; align-items: center; gap: var(--s2); min-height: 44px; color: var(--muted); font-size: var(--fs-sm); cursor: pointer; }
.wz-check input { width: 18px; height: 18px; accent-color: var(--navy); }
.wz-note { margin-bottom: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.wz-highlight { padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--gold-tint); color: var(--gold-ink); }
.wz-preview-label { margin-top: var(--s4); color: var(--muted); font-size: var(--fs-sm); }
.wz-preview { margin-top: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-sm); white-space: pre-line; }
.wz-links { display: grid; gap: var(--s2); }
.wz-link { display: block; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; }
.wz-link:hover { border-color: var(--navy); }
.wz-link strong { display: block; }
.wz-link small { color: var(--muted); font-size: var(--fs-sm); }
.wz-consent { padding: var(--s3) var(--wz-pad) 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.wz-consent a { color: var(--navy); }
.wz-req { color: var(--error); font-weight: 700; }
.wz-hint { padding: var(--s2) var(--wz-pad) 0; color: var(--muted); font-size: var(--fs-sm); }
.wz-hint + .wz-consent { padding-top: var(--s1); border-top: 0; }
.wz-foot { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--wz-pad); border-top: 1px solid var(--line); }
.wz-consent + .wz-foot { border-top: 0; padding-top: var(--s2); }
.wz-foot .btn { margin-left: auto; }
.wz-foot:has(> .wz-back[hidden]):has(> .btn[hidden] + .btn[hidden]) { display: none; }
.wz-back { min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.wz-back:hover { color: var(--navy); }
.wz-next:disabled, .wz-send[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.wz-direct { display: block; padding: var(--s3) var(--wz-pad) var(--s4); color: var(--muted); font-size: var(--fs-sm); text-align: center; }
@media (max-width: 559px) {
  .wiz { width: 100%; margin: auto 0 0; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .wz-foot { padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* analytics notice: small bar at the bottom, above the phone bar on phones */
.consent { position: fixed; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 40; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2) var(--s3); max-width: 640px; margin: 0 auto; padding: var(--s2) var(--s3); background: var(--navy); color: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-float); font-size: var(--fs-sm); }
.consent p { flex: 1 1 auto; margin: 0; line-height: 1.3; font-size: 13px; }
.consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.consent div { display: flex; gap: var(--s2); }
.consent button { min-height: 40px; padding: 0 10px; white-space: nowrap; border-radius: var(--r-sm); border: 1px solid var(--gold); font: inherit; font-weight: 600; cursor: pointer; background: transparent; color: var(--gold); }
.consent .consent-ok { background: var(--gold); color: var(--navy); padding: 0 20px; font-size: 16px; }
.consent .consent-no { min-height: 32px; padding: 0 8px; font-size: 13px; font-weight: 500; }
.consent :focus-visible { outline-color: var(--gold); }
@media (max-width: 759px) { .consent { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* scroll fade-in (class added by menu.js, so no-JS pages stay fully visible) */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rv.in { opacity: 1; transform: none; }