/* EPFO on Bindu. The hero is the one place with visual character: a clean
   task panel (passbook, claim status, Know your UAN) on the kattha dye, and
   one supporting illustration, the dot chart of a balance growing. Every
   section below is built from the Bindu content patterns. Logical
   properties throughout so right-to-left scripts work. */

/* ------------------------------------------------------------- keys */
.k { display: inline-block; flex-shrink: 0; width: 0.625rem; height: 0.625rem; border-radius: 50%; vertical-align: -0.05em; }
.k-you { background: var(--b-rang); }
.k-er { box-shadow: inset 0 0 0 1.75px var(--b-rang); }
.k-int { background: var(--b-rang-glow); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-rang) 40%, transparent); }
.k-eps { background: var(--b-rang-glow); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--b-rang) 60%, transparent); }
.pb-art .k-you { background: var(--b-rang-tie); }
.pb-art .k-er { box-shadow: inset 0 0 0 1.5px rgba(255, 238, 221, 0.85); }
:root[data-contrast="high"] .k-you, :root[data-contrast="high"] .pb-art .k-you { background: #000; }
:root[data-contrast="high"] .k-er, :root[data-contrast="high"] .pb-art .k-er { box-shadow: inset 0 0 0 1.75px #000; }
:root[data-contrast="high"] .k-int, :root[data-contrast="high"] .k-eps { background: #000; border-radius: 1px; box-shadow: none; }

/* ================================================================ hero */
.pb-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 3rem; row-gap: 1.5rem;
  grid-template-areas: "head head" "task art"; padding-top: 0.75rem; align-items: start;
}
.pb-head { grid-area: head; display: grid; gap: 0.625rem; max-width: 46rem; }
.pb-head .b-display { font-size: clamp(2.25rem, 4.3vw, 3.75rem); }
.pb-lede { font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); max-width: 46rem; }
:root:not([data-script="latn"]) .pb-head .b-display { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.2; }
:root[data-contrast="high"] .pb-lede { color: #000; }

/* the task panel: standard tabs, standard fields, then the statement */
.pb-task { grid-area: task; min-width: 0; background: var(--b-paper); color: var(--b-ink); border-radius: var(--b-r-block); box-shadow: 0 0 0 1px var(--b-rule); }
.pb-task .b-tabs { padding-top: 0.375rem; }
.pb-task .b-tab { padding-block: 0.625rem 0.75rem; }
:root:not([data-script="latn"]) .pb-task .b-tab .b-icon { display: none; }
.pb-panels { padding: 1.25rem 1.5rem 1.5rem; }
.leaf { display: grid; gap: 1rem; align-content: start; }
.leaf-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 0.75rem; }
.leaf-entry .entry-go { margin-top: calc(var(--b-t-small) * 1.55 + 0.375rem); min-height: 3rem; }
.pb-hero .pb-task .b-btn { background: var(--b-neel); color: #fff; }
.pb-hero .pb-task .b-btn:hover { background: var(--b-neel-hover); }
.uan-in, #cl-id, #ku-mobile { letter-spacing: 0.04em; }
.otp-in { letter-spacing: 0.25em; }
.pb-otp { max-width: 16rem; }
.entry-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; margin-top: -0.375rem; }
.entry-link {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0; border: 0; background: none; cursor: pointer;
  font-size: var(--b-t-small); font-weight: 600; color: var(--b-neel); text-decoration: underline; text-decoration-color: rgba(42, 56, 145, 0.35); text-underline-offset: 0.25em;
}
.entry-link:hover { text-decoration-color: currentColor; }
.entry-link .b-icon { width: 1rem; height: 1rem; --b-icon-dot: var(--b-kesar); }

/* the statement: the balance first and biggest */
.pb-balance { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0.15rem 2rem; padding-top: 1.125rem; border-top: 1px solid var(--b-rule); }
.bal-label { grid-column: 1; font-size: var(--b-t-small); font-weight: 600; color: var(--b-ink-2); }
.bal-num { grid-column: 1; font-size: clamp(2.375rem, 3.4vw, 3rem); font-weight: 650; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.05; color: var(--b-ink); }
.bal-as { grid-column: 1; font-size: var(--b-t-micro); color: var(--b-ink-3); margin-top: 0.25rem; }
.bal-split { grid-column: 2; grid-row: 1 / 4; display: grid; gap: 0.35rem; margin: 0; align-self: end; font-size: var(--b-t-small); }
.bal-split > div { display: flex; justify-content: space-between; gap: 1rem; }
.bal-split dt { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--b-ink-2); }
.bal-split dd { margin: 0; font-weight: 600; color: var(--b-ink); }
.is-new { animation: fresh 1.4s var(--b-ease) 1; }
@keyframes fresh { 0% { background: color-mix(in srgb, var(--b-haldi) 35%, transparent); } 100% { background: transparent; } }

/* recent credits: a plain table */
.credits-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: -0.5rem; }
.credits-head h3 { font-size: 1rem; font-weight: 600; }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.875rem; table-layout: fixed; }
.ledger thead th { padding: 0.5rem 0.4rem; font-size: var(--b-t-micro); font-weight: 600; color: var(--b-ink-3); text-align: end; line-height: 1.2; border-bottom: 1px solid var(--b-rule-strong); vertical-align: bottom; }
.ledger thead th:first-child { text-align: left; width: 25%; padding-inline-start: 0; }
[dir="rtl"] .ledger thead th:first-child { text-align: right; }
.ledger th[scope="row"] { text-align: start; font-weight: 500; color: var(--b-ink-2); padding-inline-start: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger td { text-align: end; white-space: nowrap; color: var(--b-ink); }
.ledger tbody th, .ledger tbody td { height: 2.125rem; padding: 0 0.4rem; border-bottom: 1px solid var(--b-rule); }
.ledger td.c-bal { font-weight: 600; padding-inline-end: 0; }
.ledger tr.bf th, .ledger tr.bf td { color: var(--b-ink-3); }
.ledger tr.has-int td.c-int { color: var(--b-rang); font-weight: 600; }
.ledger td.is-empty { color: var(--b-ink-3); }
.foot-note { font-size: var(--b-t-micro); line-height: 1.5; color: var(--b-ink-3); }

/* claim status */
#cl-out { display: grid; gap: 0.625rem; }
#cl-out:empty { display: none; }
.claim-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--b-rule); }
.claim-head h3 { font-size: 1.125rem; line-height: 1.3; }
.claim-head p { font-size: var(--b-t-small); color: var(--b-ink-3); letter-spacing: 0.03em; }
.claim-tags { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; }
.claim-ledger { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.claim-ledger td.st-dot { width: 2rem; min-width: 2rem; padding: 0; text-align: center; position: relative; }
.claim-ledger td.st-dot i { position: relative; z-index: 1; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--b-paper); box-shadow: inset 0 0 0 2px var(--b-rule-strong); vertical-align: middle; }
.claim-ledger td.st-dot::before { content: ""; position: absolute; inset-inline-start: 50%; top: 0; bottom: 0; border-inline-start: 2px solid var(--b-rule); }
.claim-ledger tr:first-child td.st-dot::before { top: 50%; }
.claim-ledger tr:last-child td.st-dot::before { bottom: 50%; }
.claim-ledger tr[data-state="done"] td.st-dot i { background: var(--b-patti); box-shadow: none; }
.claim-ledger tr[data-state="done"] td.st-dot::before { border-color: var(--b-patti); }
.claim-ledger tr[data-state="now"] td.st-dot i { background: var(--b-kesar); box-shadow: 0 0 0 4px var(--b-kesar-tint); }
.claim-ledger th, .claim-ledger td { height: 2.375rem; border-bottom: 1px solid var(--b-rule); }
.claim-ledger th { padding-inline-start: 0.5rem; color: var(--b-ink); font-weight: 600; text-align: start; width: 100%; }
.claim-ledger td.b-num { text-align: end; white-space: nowrap; font-weight: 600; }
.claim-ledger tr[data-state="next"] th, .claim-ledger tr[data-state="next"] td { color: var(--b-ink-3); font-weight: 500; }
.claim-kv, .member { display: grid; margin: 0; width: 100%; }
.claim-kv > div, .member > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--b-rule); font-size: var(--b-t-small); }
.claim-kv dt, .member dt { color: var(--b-ink-2); }
.claim-kv dd, .member dd { margin: 0; text-align: end; font-weight: 600; min-height: 1.5em; }

/* know your UAN */
.ku-grid { --cols: 3; }
.ku-grid .ku-wide { grid-column: 1 / -1; }
@media (min-width: 560px) { .ku-grid #ku-id-field { grid-column: span 2; } }
.ku-note { margin-top: -0.375rem; }
.member-sheet { display: grid; gap: 0.5rem; justify-items: start; padding-top: 0.75rem; border-top: 1px solid var(--b-rule); }
.member .m-uan dd { font-size: 1.625rem; font-weight: 650; font-stretch: 110%; letter-spacing: 0.04em; color: var(--b-ink); }
.member.is-blank dd { color: var(--b-ink-3); }

/* the one illustration: the projection on the dye, quieter than the balance */
.pb-art { grid-area: art; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; color: #fff; padding-top: 0.5rem; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.chart-title { font-size: 1.0625rem; font-weight: 600; color: #fff; }
/* - and + for pay and years, right on the dye */
.chart-ctl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ctl { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.1875rem; border-radius: 999px; background: rgba(255, 238, 221, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 238, 221, 0.22); }
.ctl button { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.ctl button:hover:not(:disabled) { background: rgba(255, 238, 221, 0.16); }
.ctl button:disabled { opacity: 0.35; cursor: default; }
.ctl button:focus-visible { outline: 2px solid var(--b-rang-glow); outline-offset: 1px; }
.ctl .b-icon { width: 1rem; height: 1rem; --b-icon-dot: transparent; }
.ctl output { min-width: 6.5rem; padding-inline: 0.25rem; text-align: center; font-size: var(--b-t-small); font-weight: 600; color: #fff; white-space: nowrap; }
:root[data-contrast="high"] .ctl { background: #fff; box-shadow: inset 0 0 0 2px #000; }
:root[data-contrast="high"] .ctl button, :root[data-contrast="high"] .ctl output { color: #000; }
.pb-art canvas { width: 100%; height: 23rem; display: block; touch-action: pan-y; cursor: crosshair; }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--b-t-micro); color: rgba(255, 255, 255, 0.86); }
.legend > span { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.chart-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 238, 221, 0.22); }
.chart-cap .big { font-size: 1.75rem; font-weight: 600; font-stretch: 108%; line-height: 1.1; color: #fff; white-space: nowrap; }
.cap-text { display: grid; gap: 0.1rem; min-width: 0; }
.chart-cap b { font-size: var(--b-t-small); color: #fff; font-weight: 600; }
.chart-cap #cap-sub { font-size: var(--b-t-micro); color: rgba(255, 255, 255, 0.84); }
.pb-hero .b-hero-foot { height: 3rem; }

:root[data-contrast="high"] .pb-task { box-shadow: inset 0 0 0 2px #000; }
:root[data-contrast="high"] .pb-art, :root[data-contrast="high"] .chart-title, :root[data-contrast="high"] .chart-cap .big, :root[data-contrast="high"] .chart-cap b,
:root[data-contrast="high"] .chart-cap #cap-sub, :root[data-contrast="high"] .legend, :root[data-contrast="high"] .chart-change { color: #000; }
:root[data-contrast="high"] .chart-cap { border-color: #000; }
:root[data-contrast="high"] .ledger thead th, :root[data-contrast="high"] .ledger tbody th, :root[data-contrast="high"] .ledger tbody td { border-color: #000; color: #000; }
:root[data-contrast="high"] .foot-note, :root[data-contrast="high"] .bal-label, :root[data-contrast="high"] .bal-as, :root[data-contrast="high"] .bal-split dt { color: #000; }

/* ============================================== sections */
/* 1. the calculator: two standard fields and a summary list */
.calc { margin-top: 1.75rem; max-width: 46rem; }
.calc-inputs { align-items: start; }
.calc-pre { position: relative; display: block; }
.calc-pre > span { position: absolute; inset-inline-start: 0.875rem; top: 50%; translate: 0 -50%; color: var(--b-ink-2); font-weight: 500; font-size: 1.0625rem; pointer-events: none; }
.calc-pre input { padding-inline-start: 1.875rem; }
.b-input input[type="number"] { -moz-appearance: textfield; }
.calc-sum dd { font-weight: 600; color: var(--b-ink); }
.calc-sum .calc-total dt { font-weight: 600; }
.calc-sum .calc-total dd { font-size: 1.5rem; font-weight: 650; font-stretch: 108%; color: var(--b-ink); }

/* 2. three accounts */
.accts-table th[scope="row"] { min-width: 9rem; }
.accts-table .acr { display: block; font-size: 1.125rem; font-weight: 700; color: var(--b-ink); }
.accts-table th small { display: block; font-weight: 400; color: var(--b-ink-3); font-size: var(--b-t-micro); margin-top: 0.125rem; }
.accts-table td.num { font-weight: 600; color: var(--b-ink); }
.accts-table td { color: var(--b-ink-2); }

/* ============================================== smaller screens */
@media (max-width: 1039px) {
  .pb-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "task" "art"; }
  .pb-art canvas { height: 17rem; }
}
@media (max-width: 699px) {
  .pb-lede { font-size: 0.9375rem; }
  .pb-panels { padding: 1rem 1rem 1.25rem; }
  .leaf-entry { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .leaf-entry .entry-go { margin-top: 0; width: 100%; }
  #panel-uan .entry-go { width: 100%; }
  .pb-balance { grid-template-columns: minmax(0, 1fr); }
  .bal-split { grid-column: 1; grid-row: auto; margin-top: 0.75rem; }
  /* recent credits on a phone: the last four months, each as two lines */
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; }
  .ledger thead { display: none; }
  .ledger tbody tr:nth-child(-n+4) { display: none; }
  .ledger tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding-block: 0.625rem; border-bottom: 1px solid var(--b-rule); }
  .ledger tbody th, .ledger tbody td { height: auto; padding: 0; border: 0; }
  .ledger tbody th { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--b-ink); font-size: 0.9375rem; }
  .ledger td.c-bal { grid-column: 2; grid-row: 1; font-size: 0.9375rem; }
  .ledger td.c-you, .ledger td.c-er { grid-row: 2; text-align: start; font-size: var(--b-t-micro); color: var(--b-ink-2); font-weight: 500; }
  .ledger td.c-you { grid-column: 1; }
  .ledger td.c-er { grid-column: 2; text-align: end; }
  .ledger td.c-you::before, .ledger td.c-er::before { content: attr(data-label) " "; color: var(--b-ink-3); }
  .ledger td.c-eps, .ledger td.c-int { display: none; }
  .accts-table th[scope="row"] { min-width: 0; }
}

/* ================================================= Day 5: section craft */
/* big plain headings and generous rhythm, the ABHA standard */
.ep-big { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; font-stretch: 108%; max-width: 18ch; }
:root:not([data-script="latn"]) .ep-big { line-height: 1.25; letter-spacing: 0; max-width: 20em; }
.ep-lede { margin-top: 0.875rem; font-size: var(--b-t-lede); color: var(--b-ink-2); max-width: 36rem; }
.ep-head { margin-bottom: 2.5rem; }
#withdraw { padding-top: 5.5rem; }

/* 1. withdrawals: situations on the left, the rule on the right */
.wd-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.5rem 3rem; align-items: start; }
.wd-pick { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.wd-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: center; min-height: 4.75rem; padding: 0.875rem 1rem; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--b-rule); cursor: pointer; transition: box-shadow 160ms, background 160ms; }
.wd-opt:hover { box-shadow: 0 0 0 1.5px var(--b-rule-strong); }
.wd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wd-opt:has(input:focus-visible) { outline: 3px solid var(--b-haldi); outline-offset: 2px; }
.wd-opt.is-on { box-shadow: 0 0 0 2px var(--b-rang); background: color-mix(in srgb, var(--b-rang) 5%, #fff); }
.wd-opt b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--b-ink); }
.wd-opt small { display: block; margin-top: 0.125rem; font-size: var(--b-t-small); line-height: 1.35; color: var(--b-ink-2); }
.wd-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--b-sunk, #f1eee6); color: var(--b-ink-2); transition: background 160ms, color 160ms; }
.wd-ic .b-icon { width: 1.25rem; height: 1.25rem; }
.wd-opt.is-on .wd-ic { background: var(--b-rang); color: #fff; --b-icon-dot: var(--b-rang-glow); }

.wd-out { position: sticky; top: 6rem; display: grid; gap: 1.25rem; padding: 1.75rem 2rem 2rem; border-radius: var(--b-r-block); background: #fff; box-shadow: 0 0 0 1px var(--b-rule), 0 24px 48px -36px rgba(38, 17, 10, 0.45); }
.wd-out-head { display: grid; gap: 0.375rem; justify-items: start; border-radius: 12px; }
.wd-out-head h3 { margin-top: 0.375rem; font-size: 1.5rem; font-weight: 600; font-stretch: 106%; line-height: 1.2; }
.wd-take { display: grid; gap: 0.125rem; margin-top: 0.5rem; }
.wd-take span { font-size: var(--b-t-small); font-weight: 600; color: var(--b-ink-2); }
.wd-take b { font-size: clamp(2.25rem, 3.4vw, 3rem); font-weight: 650; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.05; color: var(--b-rang); }
.wd-of { font-size: var(--b-t-small); color: var(--b-ink-2); }
.wd-sum { margin: 0; }
.wd-sum dd { color: var(--b-ink); }
.wd-warn { margin: 0; }
.wd-acts { display: grid; gap: 0.75rem; justify-items: start; }
.wd-acts .b-btn { min-height: 3rem; }
[dir="rtl"] .wd-acts .b-icon { transform: scaleX(-1); }
.wd-src { margin-top: 2rem; max-width: 52rem; }

/* 2. transfer: a full-bleed kattha band, the steps beside one phone */
.ep-band { position: relative; margin-top: 6rem; color: #fff; background: radial-gradient(80% 120% at 70% 0%, var(--b-rang) 0%, var(--b-rang-deep) 72%); overflow: hidden; }
.ep-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 238, 221, 0.08) 1px, transparent 1.6px); background-size: 16px 16px; pointer-events: none; }
.ep-tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 3rem 5rem; align-items: center; padding-block: 5.5rem; }
.ep-band .ep-big { color: #fff; }
.ep-band .ep-lede { color: rgba(255, 245, 235, 0.82); }
.tr-steps { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; max-width: 34rem; border-top: 1px solid rgba(255, 238, 221, 0.18); }
.tr-steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-block: 1.125rem; border-bottom: 1px solid rgba(255, 238, 221, 0.18); opacity: 0.68; transition: opacity 240ms; }
.tr-steps li[data-on="true"], .tr-steps li[data-done="true"] { opacity: 1; }
.tr-steps li > .b-num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 238, 221, 0.45); font-weight: 700; font-size: var(--b-t-small); transition: background 240ms, color 240ms; }
.tr-steps li[data-on="true"] > .b-num { background: var(--b-rang-glow); color: var(--b-rang-deep); box-shadow: none; }
.tr-steps li[data-done="true"] > .b-num { background: rgba(255, 238, 221, 0.9); color: var(--b-rang-deep); box-shadow: none; }
.tr-steps b { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.tr-steps small { display: block; margin-top: 0.25rem; font-size: var(--b-t-small); color: rgba(255, 245, 235, 0.78); }
.tr-why { display: flex; gap: 0.625rem; align-items: flex-start; margin-top: 1.75rem; max-width: 34rem; font-size: var(--b-t-small); color: rgba(255, 245, 235, 0.86); }
.tr-why .b-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--b-rang-glow); --b-icon-dot: var(--b-rang-glow); }

.ep-device-wrap { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.ep-device-wrap figcaption { font-size: var(--b-t-small); color: rgba(255, 245, 235, 0.78); }
.ep-device { width: min(100%, 19.5rem); aspect-ratio: 300 / 630; padding: 9px; border-radius: 46px; background: linear-gradient(150deg, #3a3532, #0d0b0a 45%); box-shadow: inset 0 0 0 1.5px #57504b, 0 50px 80px -40px rgba(0, 0, 0, 0.6), 0 16px 32px -20px rgba(0, 0, 0, 0.4); }
.ep-device-screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; color: #1c1612; text-align: start; }
.ep-device-screen::before { content: ""; position: absolute; z-index: 6; top: 9px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 12px; background: #000; }
.ep-device-screen::after { content: ""; position: absolute; z-index: 6; bottom: 7px; left: 50%; width: 108px; height: 4px; margin-left: -54px; border-radius: 2px; background: rgba(28, 22, 18, 0.85); }

.ph-top { position: relative; z-index: 2; color: #fff; padding-bottom: 14px; background: radial-gradient(120% 140% at 80% 0%, var(--b-rang) 0%, var(--b-rang-deep) 75%); }
.ph-top::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0.8px, transparent 1.3px); background-size: 9px 9px; pointer-events: none; }
.ph-status { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 20px 0 28px; font-size: 13px; font-weight: 600; }
.ph-sb { width: 58px; height: 11px; color: currentColor; }
.ph-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0 16px; min-height: 30px; }
.ph-bar b { font-size: 17px; font-weight: 600; }
.ph-back { display: grid; place-items: center; width: 26px; height: 26px; margin-inline-start: -5px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.ph-back .b-icon { width: 20px; height: 20px; stroke-width: 2.2; }
.ph[data-state="list"] .ph-back { visibility: hidden; }
[dir="rtl"] .ph-back .b-icon { transform: scaleX(-1); }
.ph-uan { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 8px; padding: 4px 16px 0; }
.ph-uan small { font-size: 11px; font-weight: 600; color: rgba(255, 238, 221, 0.7); }
.ph-uan span { font-size: 15px; font-weight: 600; letter-spacing: 0.05em; color: var(--b-rang-glow); }
.ph-body { position: relative; flex: 1; padding: 14px 16px 0; overflow: hidden; }
.ph-foot { padding: 12px 16px 24px; box-shadow: 0 -1px 0 #efebe6; background: #fff; }
.ph-label { font-size: 12px; font-weight: 600; color: #75685f; }
.ph-view { display: none; }
.ph[data-state="list"] .ph-view--list, .ph[data-state="confirm"] .ph-view--confirm, .ph[data-state="done"] .ph-view--done { display: grid; align-content: start; animation: ep-in 380ms var(--b-ease-deal, ease) both; }
@keyframes ep-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ph-view { animation: none !important; } }

.ph-jobs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ph-job { display: grid; gap: 3px; padding: 11px 12px; border-radius: 14px; box-shadow: 0 0 0 1px #ebe5df; }
.ph-job--now { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--b-rang) 45%, #fff); background: color-mix(in srgb, var(--b-rang) 4%, #fff); }
.ph-job-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ph-job-top b { font-size: 13.5px; font-weight: 600; }
.ph-job small { font-size: 10.5px; color: #8b7f76; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; }
.ph-job-row { display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; font-size: 12px; color: #5f544c; }
.ph-job-row b { font-size: 14px; font-weight: 650; color: #1c1612; }
.ph-tag { flex: none; padding: 2px 7px; border-radius: 999px; background: #f2eee9; font-size: 10.5px; font-weight: 600; color: #75685f; }
.ph-tag--now { background: color-mix(in srgb, var(--b-rang) 12%, #fff); color: var(--b-rang); }
.ph-tot { margin: 12px 0 0; background: #f8f5f1; box-shadow: none; }
.ph-tot dd { white-space: nowrap; }
.ph-note { display: flex; gap: 8px; margin-top: 12px; font-size: 11.5px; line-height: 1.4; color: #75685f; }
.ph-note .b-icon { flex: none; width: 15px; height: 15px; --b-icon-dot: currentColor; }
.ph-svc { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #f5f1ec; font-size: 12px; color: #5f544c; }
.ph-svc b { font-size: 13px; font-weight: 650; color: #1c1612; white-space: nowrap; }
.ph-amt { margin-top: 2px; font-size: 30px; font-weight: 650; font-stretch: 110%; letter-spacing: -0.01em; color: var(--b-rang); }
.ph-kv { margin: 10px 0 14px; display: grid; border-radius: 14px; box-shadow: 0 0 0 1px #ebe5df; }
.ph-kv > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 12.5px; }
.ph-kv > div + div { box-shadow: inset 0 1px 0 #ebe5df; }
.ph-kv dt { color: #75685f; }
.ph-kv dd { margin: 0; font-weight: 600; text-align: end; }
.ph-otp { margin-top: 6px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ph-otp i { display: grid; place-items: center; height: 38px; border-radius: 10px; background: #f5f1ec; font-style: normal; font-size: 17px; font-weight: 650; }
.ph-hint { margin-top: 8px; font-size: 11.5px; color: #8b7f76; }
.ph-view--done { justify-items: center; text-align: center; gap: 6px; padding-top: 30px; }
.ph-mark { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 50%; background: #e2f2e9; color: var(--b-patti); }
.ph-mark .b-icon { width: 28px; height: 28px; stroke-width: 2.4; --b-icon-dot: transparent; }
.ph-done-t { font-size: 19px; font-weight: 600; }
.ph-done-p { font-size: 12px; color: #75685f; letter-spacing: 0.03em; }
.ph-track { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; display: grid; text-align: start; }
.ph-track li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 40px; font-size: 13px; color: #8b7f76; }
.ph-track li::before { content: ""; position: absolute; inset-inline-start: 10px; top: 0; bottom: 0; border-inline-start: 2px solid #ebe5df; }
.ph-track li:first-child::before { top: 50%; }
.ph-track li:last-child::before { bottom: 50%; }
.ph-track i { position: relative; z-index: 1; width: 12px; height: 12px; margin-inline-start: 5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #d8d0c8; }
.ph-track li[data-state="done"] { color: #1c1612; font-weight: 600; }
.ph-track li[data-state="done"] i { background: var(--b-patti); box-shadow: none; }
.ph-track li[data-state="now"] { color: #1c1612; font-weight: 600; }
.ph-track li[data-state="now"] i { background: var(--b-kesar); box-shadow: 0 0 0 4px var(--b-kesar-tint); }
.ph-btn { display: grid; place-items: center; width: 100%; min-height: 44px; padding: 4px 8px; border: 0; border-radius: 12px; background: var(--b-neel); color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer; }
.ph-btn:hover { background: var(--b-neel-hover); }
.ph-btn:focus-visible, .ph-back:focus-visible { outline: 2px solid var(--b-haldi); outline-offset: 2px; }

/* 3. retirement: the calculator and the pension it earns */
.rt-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
.rt-main .calc { margin-top: 0; max-width: none; }
.rt-main .calc-sum { margin-top: 1.5rem; }
.rt-pension { display: grid; gap: 0.75rem; padding: 1.75rem 2rem 2rem; border-radius: var(--b-r-block); background: color-mix(in srgb, var(--b-rang) 6%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--b-rang) 18%, #fff); }
.rt-pension h3 { font-size: 1.125rem; font-weight: 600; }
.rt-pn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.rt-pn b { font-size: clamp(2.25rem, 3.4vw, 3rem); font-weight: 650; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.05; color: var(--b-rang); }
.rt-pn b.is-none { font-size: 1.75rem; color: var(--b-ink); }
.rt-pn span { font-size: 1.0625rem; color: var(--b-ink-2); }
.rt-pn-d { color: var(--b-ink-2); }
.rt-pn-sum { margin: 0.25rem 0 0; display: grid; }
.rt-pn-sum > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--b-rang) 14%, #fff); font-size: var(--b-t-small); }
.rt-pn-sum dt { color: var(--b-ink-2); }
.rt-pn-sum dd { margin: 0; font-weight: 600; color: var(--b-ink); text-align: end; }
.rt-table { margin-top: 3rem; }
.rt-table caption { text-align: start; font-size: 1.125rem; font-weight: 600; color: var(--b-ink); padding-bottom: 0.75rem; }
.rt-table tbody th { font-weight: 600; }
.rt-table tr.is-last th, .rt-table tr.is-last td { font-weight: 700; color: var(--b-ink); }
.rt-table td.num, .rt-table th.num { text-align: end; }
#retire { padding-top: 6rem; }

/* 4. three accounts */
.ep-acc { padding-top: 6rem; }
.ac-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; align-items: start; margin-top: 1.5rem; }
.ac-notes > * { margin: 0; }

/* 5. questions: the heading holds its place */
.ep-faqs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; padding-top: 6rem; }
.ep-faq-side { position: sticky; top: 7rem; }
.ep-arrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-weight: 600; text-decoration: none; }
.ep-arrow .b-icon { width: 1.125rem; height: 1.125rem; transition: transform 160ms; }
.ep-arrow:hover .b-icon { transform: translateX(3px); }
[dir="rtl"] .ep-arrow .b-icon, [dir="rtl"] .ep-help-go { transform: scaleX(-1); }
.ep-faq-list { border-top: 1px solid var(--b-rule); }
.ep-q { border-bottom: 1px solid var(--b-rule); }
.ep-q summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.375rem; cursor: pointer; list-style: none; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; color: var(--b-ink); }
.ep-q summary::-webkit-details-marker { display: none; }
.ep-q summary:hover { color: var(--b-rang); }
.ep-q summary i { flex: none; position: relative; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); transition: background 160ms, box-shadow 160ms; }
.ep-q summary i::before, .ep-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; margin: -0.875px 0 0 -6px; border-radius: 1px; background: currentColor; transition: transform 200ms var(--b-ease-deal, ease); }
.ep-q summary i::after { transform: rotate(90deg); }
.ep-q[open] summary i { background: var(--b-ink); color: #fff; box-shadow: none; }
.ep-q[open] summary i::after { transform: rotate(0deg); }
.ep-q p { padding: 0 3.5rem 1.5rem 0; color: var(--b-ink-2); font-size: 1.0625rem; max-width: 42rem; }
[dir="rtl"] .ep-q p { padding: 0 0 1.5rem 3.5rem; }

/* 6. help */
.ep-last { padding-top: 6rem; padding-bottom: 6rem; }
.ep-help-grid { margin-top: 2.25rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; }
.ep-help-call { position: relative; display: grid; align-content: space-between; gap: 0.5rem; min-height: 19rem; padding: 2rem 2.25rem; border-radius: var(--b-r-block); color: #fff; text-decoration: none; overflow: hidden; background: radial-gradient(110% 130% at 85% 0%, var(--b-rang) 0%, var(--b-rang-deep) 70%); }
.ep-help-call::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.6px); background-size: 14px 14px; pointer-events: none; }
.ep-help-call > * { position: relative; }
.ep-help-k { font-size: var(--b-t-small); font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.ep-help-n { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 600; font-stretch: 112%; line-height: 1; letter-spacing: -0.02em; color: var(--b-rang-glow); }
.ep-help-d { font-size: 1.125rem; color: rgba(255, 255, 255, 0.85); }
.ep-help-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1rem; }
.ep-help-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 12px; background: #fff; color: var(--b-rang-deep); font-weight: 600; }
.ep-help-btn .b-icon { width: 1.125rem; height: 1.125rem; }
.ep-help-call:hover .ep-help-btn { background: var(--b-rang-glow); }
.ep-help-alt { font-size: var(--b-t-small); color: rgba(255, 255, 255, 0.75); }
.ep-help-side { display: grid; gap: 1.25rem; }
.ep-help-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1.5rem; border-radius: var(--b-r-block); background: #fff; box-shadow: 0 0 0 1px var(--b-rule); color: var(--b-ink); text-decoration: none; transition: box-shadow 160ms; }
.ep-help-card:hover { box-shadow: 0 0 0 1.5px var(--b-rang), 0 14px 30px -22px rgba(38, 17, 10, 0.4); }
.ep-help-card > span:nth-child(2) { display: grid; gap: 0.25rem; }
.ep-help-card b { font-size: 1.125rem; font-weight: 600; }
.ep-help-card .b-num { color: var(--b-rang); font-weight: 600; overflow-wrap: anywhere; }
.ep-help-card small { font-size: var(--b-t-small); color: var(--b-ink-2); }
.ep-help-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: color-mix(in srgb, var(--b-rang) 10%, #fff); color: var(--b-rang); }
.ep-help-ic .b-icon { width: 1.375rem; height: 1.375rem; }
.ep-help-go { width: 1.25rem; height: 1.25rem; color: var(--b-ink-3); margin-top: 0.25rem; }
.ep-camp { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2rem 2.5rem; align-items: center; padding: 1.25rem; border-radius: var(--b-r-block); background: #fff; box-shadow: 0 0 0 1px var(--b-rule); }
.ep-camp-photo { margin: 0; aspect-ratio: 4 / 3; }
.ep-camp-body { display: grid; gap: 0.625rem; justify-items: start; max-width: 40rem; padding-inline-end: 1rem; }
.ep-camp-body h3 { font-size: 1.5rem; font-weight: 600; font-stretch: 106%; }
.ep-camp-body p { color: var(--b-ink-2); font-size: 1.0625rem; }
.ep-camp-body .ep-arrow { margin-top: 0.25rem; }

:root[data-contrast="high"] .ep-band, :root[data-contrast="high"] .ep-help-call { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000; }
:root[data-contrast="high"] .ep-band *:not(.ep-device *), :root[data-contrast="high"] .ep-help-call * { color: #000 !important; }
:root[data-contrast="high"] .wd-opt.is-on { box-shadow: 0 0 0 3px #000; }

@media (max-width: 1039px) {
  .wd-grid, .rt-grid, .ep-faqs, .ep-help-grid { grid-template-columns: minmax(0, 1fr); }
  .wd-out, .ep-faq-side { position: static; }
  .ep-tr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  #withdraw, #retire, .ep-acc, .ep-faqs, .ep-last { padding-top: 4rem; }
  .ep-band { margin-top: 4rem; }
  .ep-tr { padding-block: 3.5rem; }
  .wd-pick { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .wd-opt { min-height: 0; padding: 0.75rem 0.875rem; }
  .wd-out { padding: 1.25rem; }
  .ac-notes { grid-template-columns: minmax(0, 1fr); }
  .ep-q summary { font-size: 1.0625rem; }
  .ep-q p { padding-inline-end: 0; }
  .ep-help-call { min-height: 0; padding: 1.5rem; }
  .ep-camp { grid-template-columns: minmax(0, 1fr); padding: 0.75rem 0.75rem 1.25rem; }
  .ep-camp-body { padding-inline: 0.5rem; }
  .rt-pension { padding: 1.25rem; }
  .chart-head { align-items: flex-start; }
  .ctl output { min-width: 5.5rem; }
}