/* ==========================================================================
   pelepasancukai.my — shared stylesheet
   Single file, no external assets, no CDN, no webfonts, no inline styles.

   Design direction: "perkhidmatan maklumat awam" — civic formality borrowed
   from public-service information design: flat ink-navy chrome, one strong
   civic link-blue, boxy rules, plain system sans, no gradients, no ornament.
   The page should read like a public notice board, not a blog.

   IDENTITY IS DELIBERATELY INDEPENDENT. The style is civic; the site is not.
   No crest, no seal, no agency logo or lookalike wordmark, no "portal rasmi"
   language. The navy is a deep ink-navy chosen to sit clearly apart from the
   bright blue of MyTax, and a permanent grey honesty strip under the header
   states in plain Malay that this is not a government site.

   Contents
     1. Tokens
     2. Reset & base
     3. Typography
     4. Layout containers
     5. Header, wordmark, nav, nav toggle, honesty strip
     6. Breadcrumb
     7. Page head (h1, eyebrow, kemas kini)
     8. Quick answer + amount table
     9. Master table -> card stack (hub)
    10. Card
    11. FAQ
    12. Related
    13. Sources
    14. Callout, tag, clauses
    15. Disclaimer strip
    16. Footer
    17. A11y, motion, print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* colour — every value below is verified against WCAG 2.1 AA (text 4.5:1,
     non-text 3:1) for the surface it is actually used on. See the contrast
     table in .superpowers/sdd/restyle-report.md. */
  --navy:         #0b2545;  /* brand: chrome, table heads, rules, headings */
  --navy-deep:    #06192f;  /* pressed / hovered navy */
  --ink:          #14171a;  /* body text (18.0:1 on paper) */
  --ink-muted:    #4c5866;  /* secondary text (7.3:1 on paper) */

  --paper:        #ffffff;  /* page background */
  --paper-alt:    #f2f4f7;  /* recessed strips and panels */
  --rule:         #7f8792;  /* every visible hairline (3.6:1 on paper) */

  --link:         #14508c;  /* civic link blue (8.2:1 on paper) */
  --link-hover:   #0b2545;

  --info-tint:    #e8eff7;  /* quick answer / neutral notice */
  --warn-tint:    #fdf2e0;  /* warning notice */
  --warn-edge:    #8a5a10;  /* warning rule + label (5.9:1 on paper) */

  --on-navy:      #ffffff;  /* text on navy (15.4:1) */
  --on-navy-soft: #ccd8e6;  /* secondary text on navy (10.7:1) */
  --navy-rule:    #33517a;  /* divider inside navy surfaces */

  --focus:        #ffd94a;  /* focus ring (11.2:1 vs navy, 13.1:1 vs ink) */

  /* type — one plain system sans, nothing else */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* 1rem = 18px */
  --fs-xs:   0.75rem;    /* 13.5 */
  --fs-sm:   0.8333rem;  /* 15   */
  --fs-ui:   0.9444rem;  /* 17   */
  --fs-base: 1rem;       /* 18   */
  --fs-md:   1.1667rem;  /* 21   */
  --fs-lg:   1.4444rem;  /* 26   */
  --fs-xl:   1.7778rem;  /* 32   */
  --fs-2xl:  2.3333rem;  /* 42   */

  /* space */
  --s-1: 0.35rem;
  --s-2: 0.7rem;
  --s-3: 1.05rem;
  --s-4: 1.6rem;
  --s-5: 2.4rem;
  --s-6: 3.6rem;
  --s-7: 5rem;

  /* layout */
  --w-article: 760px;   /* relief + trust pages */
  --w-hub:    1080px;   /* hub, header, footer */
  --pad: clamp(1.15rem, 5vw, 2rem);

  /* civic surfaces are square. Kept as tokens so the contract is explicit. */
  --radius: 0;
  --radius-sm: 0;
}

/* 2. Reset & base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 112.5%;               /* 18px base, still honours user zoom */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;               /* generous — Malay runs long */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--navy); color: var(--on-navy); }

/* 3. Typography ------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--navy);
  line-height: 1.22;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(1.7778rem, 1.3rem + 2.2vw, 2.3333rem);
  font-weight: 700;
  letter-spacing: -0.018em;
}
h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.012em; }
h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.006em; }
h4 { font-size: var(--fs-base); font-weight: 700; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--s-3); }
p { text-wrap: pretty; overflow-wrap: break-word; }

/* Section rule: the thick civic break between major sections of a document.
   Applied to existing headings — no extra markup anywhere. */
.prose h2 {
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
  padding-top: var(--s-3);
  border-top: 2px solid var(--navy);
}
.prose h3 { margin-top: var(--s-4); margin-bottom: var(--s-2); }
.prose > :first-child { margin-top: 0; }
.prose > h2:first-child { border-top: 0; padding-top: 0; }

.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--navy); }

/* Links are underlined everywhere. Civic convention: a link must look like a
   link without relying on colour alone. */
.prose a,
.sources a,
.disclaimer-strip a,
.faq a,
.callout a,
.quick-answer a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.prose a:hover,
.sources a:hover,
.disclaimer-strip a:hover,
.faq a:hover,
.callout a:hover,
.quick-answer a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 3px;
}

strong, b { font-weight: 700; color: var(--ink); }
small { font-size: var(--fs-sm); }
abbr[title] { text-decoration-color: var(--rule); }

.lead {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: var(--s-4);
}

/* Utility label above headings and inside notice panels. */
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s-2);
}

/* 4. Layout containers ----------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--w-article);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container--wide { max-width: var(--w-hub); }

main { flex: 1 0 auto; padding-bottom: var(--s-6); }

/* Hub content spans the full container width — no capped reading column
   (owner preference: no empty space at the right side on desktop). */

/* 5. Header, wordmark, nav, honesty strip ---------------------------------- */

.site-header {
  background: var(--navy);
  color: var(--on-navy);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-3);
}

.wordmark {
  /* ~35px as plain inline text — under the 44px tap-target minimum on the
     header link. display:inline-block + padding grows the hit area; the
     matching negative margin keeps the header row's height unchanged
     (harmless on the footer's non-link .wordmark span too). */
  display: inline-block;
  padding-block: 0.35rem;
  margin-block: -0.35rem;
  margin-right: auto;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-navy);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__tld { color: var(--on-navy-soft); font-weight: 600; }
a.wordmark:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Slim honesty strip under the masthead. This is the site's whole posture in
   one line: civic in style, independent in identity. It is real markup (not
   CSS `content`) so screen readers and search engines get it too. */
.site-header__notice {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.site-header__notice p {
  margin: 0;
  padding-block: 0.5rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0.85rem;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-navy);
  background: transparent;
  border: 2px solid var(--on-navy);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--navy-deep); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 17px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] { background: var(--on-navy); color: var(--navy); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  flex-basis: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.site-nav.open { max-height: 18rem; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy-rule);
}
.site-nav li { border-bottom: 1px solid var(--navy-rule); }
.site-nav a {
  display: block;
  padding: 0.75rem 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--on-navy);
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav a[aria-current="page"] { font-weight: 700; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav,
  .site-nav.open { flex-basis: auto; max-height: none; overflow: visible; }
  .site-nav ul { display: flex; gap: var(--s-5); border-top: 0; align-items: center; }
  .site-nav li { border-bottom: 0; }
  .site-nav a {
    /* ~37px with the old 0.15rem padding — under the 44px tap-target
       minimum. Padding grows the real hit area; the matching negative
       margin keeps the header row the same visual height (it overlaps
       into the header's own vertical padding, not into other content). */
    display: inline-block;
    padding: 0.6rem 0;
    margin: -0.45rem 0;
    border-bottom: 4px solid transparent;
  }
  /* current page is marked with a solid bar, not colour alone */
  .site-nav a[aria-current="page"] { border-bottom-color: var(--on-navy); }
}

/* 6. Breadcrumb ------------------------------------------------------------ */

.breadcrumb {
  padding-block: var(--s-3) 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}
/* Generated separator carries empty alt text ("\203A" / "") so it stays out of
   accessible names — it is a separator, not content. */
.breadcrumb li + li::before {
  content: "\203A" / "";
  color: var(--ink-muted);
  margin-right: 0.45rem;
}
.breadcrumb a {
  /* ~25px as plain inline text — under the 44px tap-target minimum.
     display:inline-block + padding grows the hit area; the matching
     negative margin keeps the breadcrumb row's visual height unchanged. */
  display: inline-block;
  padding: 0.6rem 0;
  margin: -0.6rem 0;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.breadcrumb a:hover { color: var(--link-hover); text-decoration-thickness: 3px; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* 7. Page head ------------------------------------------------------------- */

.page-head {
  padding-block: var(--s-4) var(--s-4);
  border-bottom: 4px solid var(--navy);
  margin-bottom: var(--s-4);
}
.meta-updated {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.meta-updated time { color: var(--ink); font-weight: 700; }

/* 8. Quick answer + amount table ------------------------------------------- */

/* The civic notice panel: thick navy edge, flat tint, square corners. This is
   the one repeated device that marks "this is the authoritative summary". */
.quick-answer {
  background: var(--info-tint);
  border: 1px solid var(--rule);
  border-left: 10px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4) var(--s-4);
  margin: 0 0 var(--s-5);
}
.quick-answer > :last-child { margin-bottom: 0; }
.quick-answer p { margin-bottom: var(--s-3); }
.quick-answer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quick-answer li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: var(--s-2);
}
.quick-answer li:last-child { margin-bottom: 0; }
.quick-answer li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--navy);
}

/* Boxy reference table: navy head row, strong 1px rules, no zebra. */
.amount-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--rule);
  margin: var(--s-3) 0 0;
}
.amount-table caption {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: var(--s-2);
}
.amount-table th,
.amount-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;   /* fixed layout must not overflow its column */
}
.amount-table thead th {
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 0;
}
.amount-table tbody th {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--ink);
  /* Most row labels are short ("YA 2025"), but the sub-had tables (perubatan,
     ibu-bapa, kwsp-insurans-hayat, oku, anak, faedah-pinjaman-rumah,
     yuran-pendidikan) carry long slash-joined tokens such as
     "diri/suami/isteri/anak" that browsers will not break by default. nowrap
     here would push the whole page wider than the viewport, so wrap normally
     and break mid-word only when a single token still will not fit.
     `overflow-wrap` alone does exactly that. The stronger `word-break:
     break-word` that used to sit here shredded ordinary words on a phone
     ("RM1,0 / 00", "kesubura / n") and is deliberately gone. */
  white-space: normal;
  overflow-wrap: break-word;
}
.amount-table .amount {
  font-size: var(--fs-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  /* short RM figures ("RM10,000 (Terhad)") read fine wrapping at the space
     before "(Terhad)"; nowrap risked the page-width overflow described above */
  white-space: normal;
}
.amount-table tbody tr:last-child th,
.amount-table tbody tr:last-child td { border-bottom: 0; }
.amount-table .note {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0;
  white-space: normal;
  margin-top: 0.2rem;
}

/* Everything stays left-aligned. These are labelled money strings
   ("RM10,000 (Terhad)"), not decimals, so a shared left edge is what makes
   YA 2025 and YA 2026 comparable — and it keeps the three-column sub-had
   tables consistent, which right-aligning only the last column did not.

   Fixed layout at every width, because it is the only way to hold the YA 2025
   and YA 2026 columns exactly equal. Under auto layout the label column of the
   sub-had tables is dragged to 202px by one unbreakable token
   ("(diri/suami/isteri/anak)") and the table then overflows a 390px phone. */
.amount-table { table-layout: fixed; }
.amount-table th:first-child { width: 40%; }

/* The phone pays for fixed columns by stepping the type down and widening the
   label column, so ordinary words still fit their line and only the genuinely
   unbreakable slash tokens wrap mid-token. Measured against the narrowest
   real case: the 3-column perubatan sub-had table at 390px. */
@media (max-width: 767px) {
  .quick-answer { padding-inline: var(--s-3); }
  .amount-table { font-size: var(--fs-sm); }
  .amount-table th:first-child { width: 39%; }
  .amount-table th,
  .amount-table td { padding: 0.5rem 0.4rem; }
  .amount-table thead th { font-size: 0.7rem; letter-spacing: 0.05em; }
  .amount-table tbody th { font-size: var(--fs-sm); }
  .amount-table .amount,
  .amount-table .note { font-size: var(--fs-xs); }
}

/* 9. Master table (hub) -> labelled card stack under 768px ----------------- */

.master-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--rule);
  font-size: var(--fs-ui);
  margin-bottom: var(--s-5);
  /* Fixed columns: auto layout gave the relief names a third of the space the
     two amount columns were wasting. */
  table-layout: fixed;
}
.master-table thead th:nth-child(1) { width: 28%; }
.master-table thead th:nth-child(2),
.master-table thead th:nth-child(3) { width: 21%; }
.master-table thead th:nth-child(4) { width: 30%; }
.master-table caption {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: var(--s-2);
}
.master-table th,
.master-table td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  overflow-wrap: break-word;   /* fixed layout must not overflow its column */
}
.master-table thead th {
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 0;
  white-space: nowrap;
}
.master-table tbody tr:hover { background: var(--paper-alt); }
.master-table td.col-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--navy);
}
.master-table td:first-child { font-weight: 600; }
.master-table td:first-child a,
main a[href^="mailto:"],
.sources a {
  display: inline-block;            /* 44px tap target without growing the row */
  padding-block: 0.65rem;
  margin-block: -0.45rem;
}
.master-table td:first-child a {
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.master-table td:first-child a:hover { color: var(--link-hover); text-decoration-thickness: 3px; }
.master-table .col-note { color: var(--ink-muted); font-size: var(--fs-sm); font-weight: 400; }

@media (max-width: 767px) {
  .master-table,
  .master-table tbody,
  .master-table tr,
  .master-table th,
  .master-table td { display: block; width: 100%; }
  .master-table { border: 0; }
  .master-table thead { display: none; }
  .master-table caption { display: block; width: 100%; }
  .master-table tr {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 6px solid var(--navy);
    border-radius: var(--radius);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
  }
  .master-table tbody tr:hover { background: var(--paper); }
  .master-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    padding: 0.45rem 0;
    border-bottom: 0;
    border-top: 1px solid var(--rule);
    text-align: right;
  }
  /* every collapsed cell keeps its column name */
  .master-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: left;
  }
  .master-table td:first-child {
    border-top: 0;
    padding-top: 0;
    display: block;
    text-align: left;
    font-size: var(--fs-base);
  }
  .master-table td:first-child::before { content: none; }
  /* Card-stack relief name link: as short inline text ("Anak") this measured
     ~21px tall — under the 44px tap-target minimum. display:inline-block +
     padding grows the hit area; the matching negative margin keeps the card's
     own padding/rhythm unchanged. */
  .master-table td:first-child a {
    display: inline-block;
    padding-block: 0.5rem;
    margin-block: -0.5rem;
  }
  .master-table td.col-note { text-align: left; display: block; }
  .master-table td.col-note::before { display: block; margin-bottom: 0.2rem; }
}

/* 10. Card ----------------------------------------------------------------- */

.card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--s-3);
  text-decoration: none;
  color: inherit;
}
a.card:hover { background: var(--paper-alt); }
a.card:hover .card__title { text-decoration-thickness: 3px; }
.card h3, .card .card__title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  margin: 0 0 var(--s-1);
}
.card p, .card .card__meta {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}
.card .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* 11. FAQ ------------------------------------------------------------------ */

.faq { margin: var(--s-5) 0; }
.faq > h2 {
  margin-top: 0;
  margin-bottom: var(--s-3);
  padding-top: var(--s-3);
  border-top: 2px solid var(--navy);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--navy);
}
.faq-item > p:last-child { margin-bottom: 0; }

/* 12. Related -------------------------------------------------------------- */

.related { margin: var(--s-5) 0; }
.related h2 {
  margin-top: 0;
  margin-bottom: var(--s-3);
  padding-top: var(--s-3);
  border-top: 2px solid var(--navy);
}
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.related li { margin: 0; border-bottom: 1px solid var(--rule); }
/* Scoped to the list: on the hub a .card-grid also sits inside .related, and
   a bare `.related a` out-specifies `.card` and underlines the whole card. */
.related ul a {
  display: block;
  padding: 0.7rem 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.related ul a:hover { color: var(--link-hover); text-decoration-thickness: 3px; }
@media (min-width: 768px) {
  .related ul { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
}

/* 13. Sources -------------------------------------------------------------- */

.sources {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 4px solid var(--navy);
  font-size: var(--fs-ui);
}
.sources h2 {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s-3);
}
/* Numbered because the numbers are referenceable: each figure on the page
   cites a source by its position in this list. */
.sources ol {
  list-style: none;
  counter-reset: src;
  margin: 0 0 var(--s-3);
  padding: 0;
}
.sources li {
  counter-increment: src;
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--s-2);
  line-height: 1.5;
}
.sources li::before {
  content: counter(src) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--fs-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.sources .sources__note {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0;
}

/* 14. Callout, tag, clauses ------------------------------------------------ */

.callout {
  background: var(--info-tint);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--s-3);
  margin: var(--s-4) 0;
  font-size: var(--fs-ui);
}
.callout > :last-child { margin-bottom: 0; }
.callout--amber {
  background: var(--warn-tint);
  border-left-color: var(--warn-edge);
}

/* Rectangular status badge. */
.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--on-navy);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.4rem;
  text-decoration: none;
  vertical-align: 0.08em;
}
.tag--deep { color: var(--navy); background: var(--paper); }

/* Numbered clauses — used where the content really is an ordered document
   (penafian, privasi, tentang-kami). Not decoration: the numbers are cited. */
.clauses { counter-reset: clause; }
.clauses > section { counter-increment: clause; }
.clauses > section > h2::before {
  content: counter(clause, decimal-leading-zero);
  font-size: 0.7em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  margin-right: 0.7em;
  vertical-align: 0.12em;
}

/* 15. Disclaimer strip ----------------------------------------------------- */

/* Full-width bordered notice above the footer — the statutory footnote of the
   page. Kept quiet so the honesty strip at the top and the footer legal line
   are not competing for the same attention. */
.disclaimer-strip {
  background: var(--paper-alt);
  color: var(--ink);
  border-top: 4px solid var(--navy);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-ui);
  line-height: 1.55;
}
.disclaimer-strip .container { padding-block: var(--s-3); }
.disclaimer-strip p { margin: 0; }

/* 16. Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--on-navy-soft);
  font-size: var(--fs-ui);
}
.site-footer .container { padding-block: var(--s-5) var(--s-4); }
.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
@media (min-width: 768px) {
  .site-footer__cols { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-5); }
}
.site-footer .wordmark {
  display: inline-block;
  margin-right: 0;
  margin-bottom: var(--s-1);
}
.site-footer h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-navy);
  margin: 0 0 var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--navy-rule);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a {
  /* ~28px as plain inline text — under the 44px tap-target minimum.
     display:inline-block + padding grows the hit area; the matching
     negative margin keeps the footer column's list rhythm unchanged. */
  display: inline-block;
  padding: 0.5rem 0;
  margin: -0.5rem 0;
  color: var(--on-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.site-footer a:hover { text-decoration-thickness: 3px; }
.site-footer a[aria-current="page"] { font-weight: 700; }
.site-footer__blurb { margin: var(--s-2) 0 0; font-size: var(--fs-sm); line-height: 1.55; max-width: 36ch; }
.site-footer__legal {
  border-top: 1px solid var(--navy-rule);
  padding-top: var(--s-3);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* 17. A11y, motion, print -------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--fs-ui);
  font-weight: 700;
  padding: 0.6rem 1rem;
  text-decoration: underline;
}
.skip-link:focus { left: 0; }

/* Civic focus state: a thick yellow ring. On light surfaces the yellow alone
   is only 1.37:1, so it is paired with a 2px --ink keyline (17.99:1 on paper)
   that carries the non-text contrast — the ring is read as the yellow/dark
   pair, not the yellow alone.
   On the navy chrome the keyline is dropped: --focus on --navy is already
   11.19:1 unaided, and a dark keyline there would be invisible (1.15:1). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ink);
  border-radius: 0;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.skip-link:focus-visible {
  box-shadow: none;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .nav-toggle,
  .site-nav,
  .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header { background: #fff; color: #000; border-bottom: 2pt solid #000; }
  .wordmark, .wordmark__tld { color: #000; }
  .site-header__notice { background: #fff; border-bottom: 1pt solid #000; }
  h1, h2, h3, h4 { color: #000; }
  .prose h2, .faq > h2, .related h2 { border-top-color: #000; }
  .page-head, .sources { border-color: #000; }
  .quick-answer, .callout { background: #fff; border-color: #000; }
  .amount-table thead th, .master-table thead th { background: #fff; color: #000; border-bottom: 1.5pt solid #000; }
  .amount-table .amount, .master-table td.col-amount, .sources li::before { color: #000; }
  .tag { background: #fff; color: #000; border-color: #000; }
  .disclaimer-strip { background: #fff; color: #000; border-top: 2pt solid #000; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a, .site-footer h2 { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}