/* ============================================================
   ak-investment-docs.css
   Unified stylesheet for all 6 AK Investment SEBI documents
   
   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────
   1.  CSS Variables (Design Tokens)
   2.  Reset & Base
   3.  COMMON – Layout
       3a. .topbar
       3b. .page-wrap
       3c. .doc-card
   4.  COMMON – Document Header
       4a. .doc-header
       4b. .header-row
       4c. .icon-circle
       4d. .annexure-label
       4e. .reg-line
   5.  COMMON – Document Body
   6.  COMMON – Section Headings
       6a. .sec-head  (PMLA, Investor Charter)
       6b. .section-head  (Redressal)
   7.  COMMON – Lists
       7a. .blist  (primary bullet list)
       7b. .sub-blist  (nested bullet list)
   8.  COMMON – Content Blocks
       8a. .contact-block
       8b. .address-block
       8c. .intro-box
       8d. .info-block
       8e. .note-box
       8f. .doc-divider
   9.  COMMON – Links & Typography
   
   ── SPECIFIC STYLES PER DOCUMENT ──────────────────────────
   
   10. Redressal of Grievance
       .steps, .step-num, .row-item, .info-block (specific)
   11. PMLA Policy  (no extra specifics beyond common)
   12. Disclaimer for Website
       .alert-mandatory, .disc-list, .disc-num
   13. Escalation Matrix
       .matrix-table-wrap, .matrix-table, .td.desig, .td.na
       .info-row, .portal-grid, .portal-card,
       .portal-label, .portal-name, .portal-url
   14. Standard Disclosures
       .disc-section, .disc-section-head, .disc-section-num,
       .disc-section-title, .disc-section-body,
       .points-wrap, .point-row, .point-num
   15. Annexure A – Investor Charter
       .vm-grid, .vm-card, .vm-label, .vm-text,
       .rights-grid, .right-item,
       .dos-donts, .dos-card, .donts-card,
       .dos-head, .donts-head,
       .dos-items, .donts-items,
       .dos-item, .donts-item,
       .mode-box
   16. Responsive / Media Queries
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. CSS Variables (Design Tokens)
───────────────────────────────────────────────────────────── */
:root {
  --brand:        #3e1b3d;   /* Primary brand colour – deep plum        */
  --brand-light:  #f5eef5;   /* Light brand tint – backgrounds, fills   */
  --brand-mid:    #ede1ed;   /* Hover tint on brand elements            */
  --accent:       #b71c1c;   /* Link / accent colour – deep red         */
  --border:       #e0d6e0;   /* Default border colour                   */
  --text-main:    #2c2c2c;   /* Primary text                            */
  --text-body:    #333333;   /* Body paragraph text                     */
  --text-muted:   #444444;   /* Sub-list / secondary text               */
  --text-faint:   #aaaaaa;   /* Placeholder / N/A cells                 */
  --bg-page:      #f4f4f7;   /* Page background                         */
  --bg-white:     #ffffff;   /* Card / surface background               */
  --bg-faint:     #fcf9fc;   /* Odd table rows / faint tint             */
  --shadow:       rgba(62, 27, 61, 0.09);

  /* Status colours (Disclaimer warnings) */
  --warn-bg:      #fff3cd;
  --warn-border:  #e6ac00;
  --warn-text:    #5a3e00;

  /* Do / Don't panel colours */
  --do-bg:        #e8f5e9;
  --do-border:    #c8e6c9;
  --do-text:      #1b5e20;
  --dont-bg:      #ffebee;
  --dont-border:  #ffcdd2;
  --dont-text:    #b71c1c;
}


/* ─────────────────────────────────────────────────────────────
   2. Reset & Base
───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background:  var(--bg-page);
  font-family: 'Segoe UI', Arial, sans-serif;
  color:       var(--text-main);
  margin:      0;
  padding:     0;
}

p {
  font-size:     0.95rem;
  line-height:   1.8;
  color:         var(--text-body);
  margin-bottom: 14px;
}

strong {
  color: #1a1a1a;
}

a {
  color:      var(--accent);
  word-break: break-all;
}
a:hover {
  color: var(--brand);
}


/* ─────────────────────────────────────────────────────────────
   3a. COMMON – Top Bar
───────────────────────────────────────────────────────────── */
.topbar {
  background:     var(--brand);
  color:          #fff;
  padding:        10px 0;
  font-size:      0.78rem;
  letter-spacing: 0.03em;
}

.topbar .inner {
  max-width: 960px;
  margin:    0 auto;
  padding:   0 24px;
  display:   flex;
  align-items: center;
  gap:       8px;
}

/* Wide variant for Escalation Matrix (needs 1100px) */
.topbar .inner--wide {
  max-width: 1100px;
}


/* ─────────────────────────────────────────────────────────────
   3b. COMMON – Page Wrapper
───────────────────────────────────────────────────────────── */
.page-wrap {
  max-width: 960px;
  margin:    32px auto 48px;
  padding:   0 16px;
}

/* Wide variant for Escalation Matrix */
.page-wrap--wide {
  max-width: 1100px;
}


/* ─────────────────────────────────────────────────────────────
   3c. COMMON – Document Card
───────────────────────────────────────────────────────────── */
.doc-card {
  background:    var(--bg-white);
  border-radius: 10px;
  box-shadow:    0 2px 18px var(--shadow);
  overflow:      hidden;
}


/* ─────────────────────────────────────────────────────────────
   4a. COMMON – Document Header
───────────────────────────────────────────────────────────── */
.doc-header {
  background: var(--brand);
  color:      #fff;
  padding:    32px 40px 28px;
}

.doc-header h1 {
  font-size:      1.65rem;
  font-weight:    700;
  margin:         0;
  letter-spacing: 0.02em;
  line-height:    1.3;
  color: white;
}

.doc-header p {
  margin:    10px 0 0;
  font-size: 0.92rem;
  opacity:   0.88;
  font-weight: 500;
  color:     #fff;
}


/* ─────────────────────────────────────────────────────────────
   4b. COMMON – Header Row (icon + title)
───────────────────────────────────────────────────────────── */
.header-row {
  display:     flex;
  align-items: center;
  gap:         16px;
}


/* ─────────────────────────────────────────────────────────────
   4c. COMMON – Icon Circle in header
───────────────────────────────────────────────────────────── */
.icon-circle {
  width:           52px;
  height:          52px;
  background:      rgba(255, 255, 255, 0.15);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}


/* ─────────────────────────────────────────────────────────────
   4d. COMMON – Annexure label (small uppercase above h1)
───────────────────────────────────────────────────────────── */
.annexure-label {
  font-size:      0.82rem;
  font-weight:    600;
  opacity:        0.70;
  letter-spacing: 0.10em;
  margin-bottom:  4px;
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────
   4e. COMMON – Registration line below title
───────────────────────────────────────────────────────────── */
.reg-line {
  margin:    10px 0 0;
  font-size: 0.82rem;
  opacity:   0.82;
}


/* ─────────────────────────────────────────────────────────────
   5. COMMON – Document Body
───────────────────────────────────────────────────────────── */
.doc-body {
  padding: 36px 40px 44px;
}


/* ─────────────────────────────────────────────────────────────
   6a. COMMON – Section Heading (.sec-head)
   Used in: PMLA Policy, Investor Charter
───────────────────────────────────────────────────────────── */
.sec-head {
  display:      flex;
  align-items:  center;
  gap:          10px;
  background:   var(--brand-light);
  border-left:  4px solid var(--brand);
  border-radius: 0 6px 6px 0;
  padding:      11px 16px;
  margin:       28px 0 16px;
  font-size:    1rem;
  font-weight:  700;
  color:        var(--brand);
}

.sec-head svg {
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   6b. COMMON – Section Heading (.section-head)
   Used in: Redressal of Grievance
   (Same visual as .sec-head – aliased for backward compat)
───────────────────────────────────────────────────────────── */
.section-head {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    var(--brand-light);
  border-radius: 6px;
  padding:       10px 16px;
  margin:        28px 0 16px;
  font-size:     1rem;
  font-weight:   700;
  color:         var(--brand);
}

.section-head svg {
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   7a. COMMON – Primary Bullet List (.blist)
   Used in: Redressal, PMLA, Disclosures, Investor Charter
───────────────────────────────────────────────────────────── */
.blist {
  list-style: none;
  padding:    0;
  margin:     0 0 14px;
}

.blist > li {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   0.94rem;
  line-height: 1.78;
  color:       var(--text-body);
  margin-bottom: 10px;
}

/* Filled circle bullet */
.blist > li::before {
  content:       '';
  width:         8px;
  height:        8px;
  background:    var(--brand);
  border-radius: 50%;
  margin-top:    9px;
  flex-shrink:   0;
}


/* ─────────────────────────────────────────────────────────────
   7b. COMMON – Sub Bullet List (.sub-blist)
   Used in: PMLA, Investor Charter
───────────────────────────────────────────────────────────── */
.sub-blist {
  list-style: none;
  padding:    0;
  margin:     8px 0 4px 22px;
}

.sub-blist > li {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   0.92rem;
  line-height: 1.72;
  color:       var(--text-muted);
  margin-bottom: 6px;
}

/* Hollow circle bullet */
.sub-blist > li::before {
  content:       '';
  width:         6px;
  height:        6px;
  border:        1.5px solid var(--brand);
  border-radius: 50%;
  margin-top:    8px;
  flex-shrink:   0;
}


/* ─────────────────────────────────────────────────────────────
   8a. COMMON – Contact Block
   Used in: Redressal, PMLA
───────────────────────────────────────────────────────────── */
.contact-block {
  background:    var(--brand-light);
  border-left:   4px solid var(--brand);
  border-radius: 0 6px 6px 0;
  padding:       16px 20px;
  margin:        14px 0;
  font-size:     0.93rem;
  line-height:   1.80;
}

.contact-block div,
.contact-block .row-item {
  margin-bottom: 4px;
}

.contact-block div:last-child,
.contact-block .row-item:last-child {
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────
   8b. COMMON – Address Block
   Used in: Redressal, PMLA
───────────────────────────────────────────────────────────── */
.address-block {
  background:    var(--brand-light);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       18px 22px;
  margin:        16px 0;
  font-size:     0.93rem;
  line-height:   1.90;
  font-weight:   600;
  color:         var(--text-main);
}


/* ─────────────────────────────────────────────────────────────
   8c. COMMON – Intro Box (light tinted info panel)
   Used in: PMLA (Introduction section)
───────────────────────────────────────────────────────────── */
.intro-box {
  background:    #fdf6fd;
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       18px 22px;
  margin-bottom: 22px;
  font-size:     0.95rem;
  line-height:   1.80;
  color:         var(--text-body);
}


/* ─────────────────────────────────────────────────────────────
   8d. COMMON – Info Block (light red tinted notice)
   Used in: Redressal of Grievance
───────────────────────────────────────────────────────────── */
.info-block {
  background:    #fff8f8;
  border:        1px solid #f5c6c6;
  border-radius: 6px;
  padding:       16px 20px;
  margin:        18px 0;
  font-size:     0.93rem;
  line-height:   1.75;
}


/* ─────────────────────────────────────────────────────────────
   8e. COMMON – Note Box (italic note with left border)
   Used in: Escalation Matrix
───────────────────────────────────────────────────────────── */
.note-box {
  background:    var(--brand-light);
  border-left:   4px solid var(--brand);
  border-radius: 0 6px 6px 0;
  padding:       14px 18px;
  margin:        0 0 22px;
  font-size:     0.90rem;
  line-height:   1.72;
  color:         var(--text-muted);
  font-style:    italic;
}

.note-box a {
  font-style: normal;
}


/* ─────────────────────────────────────────────────────────────
   8f. COMMON – Horizontal Divider
   Used in: Redressal, Standard Disclosures, Investor Charter
───────────────────────────────────────────────────────────── */
.doc-divider {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     24px 0;
}


/* ═══════════════════════════════════════════════════════════
   ── DOCUMENT-SPECIFIC STYLES ──────────────────────────────
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   10. Redressal of Grievance
       .steps  .step-num
───────────────────────────────────────────────────────────── */

/* Numbered ordered steps */
.steps {
  list-style: none;
  padding:    0;
  margin:     0 0 18px;
}

.steps li {
  display:     flex;
  gap:         14px;
  align-items: flex-start;
  margin-bottom: 18px;
  font-size:   0.95rem;
  line-height: 1.75;
  color:       var(--text-body);
}

/* Filled circle step number */
.step-num {
  min-width:       30px;
  height:          30px;
  background:      var(--brand);
  color:           #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.80rem;
  font-weight:     700;
  margin-top:      2px;
  flex-shrink:     0;
}


/* ─────────────────────────────────────────────────────────────
   12. Disclaimer for Website
       .alert-mandatory  .disc-list  .disc-num
───────────────────────────────────────────────────────────── */

/* Prominent amber regulatory warning box */
.alert-mandatory {
  background:    var(--warn-bg);
  border:        1.5px solid var(--warn-border);
  border-left:   5px solid var(--warn-border);
  border-radius: 0 6px 6px 0;
  padding:       14px 18px;
  margin:        14px 0;
  font-size:     0.95rem;
  font-weight:   700;
  line-height:   1.70;
  color:         var(--warn-text);
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
}

.alert-mandatory svg {
  flex-shrink: 0;
  margin-top:  2px;
}

/* Numbered disclaimer list */
.disc-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.disc-list > li {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  font-size:     0.94rem;
  line-height:   1.80;
  color:         var(--text-body);
  padding:       14px 0;
  border-bottom: 1px solid #f0e8f0;
}

.disc-list > li:last-child {
  border-bottom: none;
}

/* Circle number badge for .disc-list items */
.disc-num {
  min-width:       28px;
  height:          28px;
  background:      var(--brand);
  color:           #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.78rem;
  font-weight:     700;
  flex-shrink:     0;
  margin-top:      2px;
}


/* ─────────────────────────────────────────────────────────────
   13. Escalation Matrix
       .matrix-table-wrap  .matrix-table
       .info-row
       .portal-grid  .portal-card  .portal-label  .portal-name  .portal-url
───────────────────────────────────────────────────────────── */

/* Scrollable table wrapper */
.matrix-table-wrap {
  overflow-x:    auto;
  margin-bottom: 24px;
  border-radius: 8px;
  border:        1px solid var(--border);
}

/* Base table */
.matrix-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.88rem;
  min-width:       760px;
}

/* Header row */
.matrix-table thead tr {
  background: var(--brand);
  color:      #fff;
}

.matrix-table thead th {
  padding:        13px 14px;
  font-weight:    600;
  text-align:     left;
  border-right:   1px solid rgba(255, 255, 255, 0.15);
  font-size:      0.85rem;
  letter-spacing: 0.02em;
  white-space:    nowrap;
}

.matrix-table thead th:last-child {
  border-right: none;
}

/* Body rows */
.matrix-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.matrix-table tbody tr:last-child {
  border-bottom: none;
}

.matrix-table tbody tr:nth-child(odd)  { background: var(--bg-faint); }
.matrix-table tbody tr:nth-child(even) { background: var(--bg-white); }

.matrix-table tbody tr:hover {
  background: var(--brand-light);
}

/* Body cells */
.matrix-table td {
  padding:      12px 14px;
  vertical-align: top;
  color:        var(--text-body);
  border-right: 1px solid var(--border);
  line-height:  1.60;
}

.matrix-table td:last-child {
  border-right: none;
}

/* Designation cell – bold brand colour */
.matrix-table td.desig {
  font-weight: 600;
  color:       var(--brand);
}

/* Not applicable cell */
.matrix-table td.na {
  color:          var(--text-faint);
  font-weight:    600;
  text-align:     center;
  vertical-align: middle;
}

/* Info row (icon + text) */
.info-row {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       13px 16px;
  background:    #fafafa;
  border:        1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 12px;
  font-size:     0.94rem;
  line-height:   1.72;
  color:         var(--text-body);
}

.info-row svg {
  flex-shrink: 0;
  margin-top:  2px;
}

.info-row strong {
  color: var(--brand);
}

/* Portal card grid */
.portal-grid {
  display:    flex;
  gap:        16px;
  flex-wrap:  wrap;
  margin-top: 16px;
}

.portal-card {
  flex:            1;
  min-width:       220px;
  background:      var(--brand-light);
  border:          1.5px solid var(--border);
  border-radius:   8px;
  padding:         16px 20px;
  text-decoration: none;
  color:           var(--text-body);
  transition:      border-color 0.15s, background 0.15s;
}

.portal-card:hover {
  border-color: var(--brand);
  background:   var(--brand-mid);
}

.portal-label {
  font-size:      0.78rem;
  font-weight:    600;
  color:          var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  4px;
}

.portal-name {
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--brand);
  margin-bottom: 4px;
}

.portal-url {
  font-size:  0.82rem;
  color:      var(--accent);
  word-break: break-all;
}


/* ─────────────────────────────────────────────────────────────
   14. Standard Disclosures
       .disc-section  .disc-section-head  .disc-section-num
       .disc-section-title  .disc-section-body
       .points-wrap  .point-row  .point-num
───────────────────────────────────────────────────────────── */

/* One numbered disclosure section */
.disc-section {
  margin-bottom: 28px;
}

/* Section heading row (circle number + title) */
.disc-section-head {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 14px;
}

/* Filled circle section number */
.disc-section-num {
  width:           34px;
  height:          34px;
  background:      var(--brand);
  color:           #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.88rem;
  font-weight:     700;
  flex-shrink:     0;
}

/* Section title text */
.disc-section-title {
  font-size:   1.08rem;
  font-weight: 700;
  color:       var(--brand);
}

/* Section content (indented under the number) */
.disc-section-body {
  margin-left: 46px;
  font-size:   0.95rem;
  line-height: 1.80;
  color:       var(--text-body);
}

.disc-section-body p {
  margin-bottom: 10px;
}

/* Bordered container for points 7–12 */
.points-wrap {
  border:        1px solid var(--border);
  border-radius: 8px;
  overflow:      hidden;
  margin-top:    16px;
}

/* One row inside .points-wrap */
.point-row {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       12px 16px;
  border-bottom: 1px solid #f0e8f0;
  font-size:     0.94rem;
  line-height:   1.78;
  color:         var(--text-body);
}

.point-row:last-child {
  border-bottom: none;
}

/* Outlined circle number badge for .point-row */
.point-num {
  min-width:       26px;
  height:          26px;
  background:      var(--brand-light);
  border:          1.5px solid var(--border);
  color:           var(--brand);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.78rem;
  font-weight:     700;
  flex-shrink:     0;
  margin-top:      2px;
}


/* ─────────────────────────────────────────────────────────────
   15. Annexure A – Investor Charter
       .vm-grid  .vm-card  .vm-label  .vm-text
       .rights-grid  .right-item
       .dos-donts  .dos-card  .donts-card
       .dos-head  .donts-head
       .dos-items  .donts-items
       .dos-item  .donts-item
       .mode-box
───────────────────────────────────────────────────────────── */

/* Vision / Mission two-column grid */
.vm-grid {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           16px;
  margin-bottom: 28px;
}

.vm-card {
  background:    var(--brand-light);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       20px;
}

.vm-label {
  font-size:      0.78rem;
  font-weight:    700;
  color:          var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  8px;
  display:        flex;
  align-items:    center;
  gap:            6px;
}

.vm-text {
  font-size:   0.94rem;
  line-height: 1.70;
  color:       var(--text-body);
}

/* Investor rights two-column grid */
.rights-grid {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           10px;
  margin-bottom: 20px;
}

/* Individual right item card */
.right-item {
  background:    #fdfafd;
  border:        1px solid var(--border);
  border-left:   3px solid var(--brand);
  border-radius: 0 6px 6px 0;
  padding:       10px 14px;
  font-size:     0.88rem;
  line-height:   1.60;
  color:         var(--text-body);
}

/* Do / Don't two-column grid */
.dos-donts {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           16px;
  margin-top:    16px;
}

/* Do card */
.dos-card {
  border-radius: 8px;
  overflow:      hidden;
}

.dos-head {
  background:  var(--do-bg);
  color:       var(--do-text);
  padding:     10px 16px;
  font-size:   0.88rem;
  font-weight: 700;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.dos-items {
  border:        1px solid var(--do-border);
  border-top:    none;
  border-radius: 0 0 8px 8px;
}

.dos-item {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  padding:       9px 14px;
  font-size:     0.88rem;
  line-height:   1.65;
  color:         var(--text-body);
  border-bottom: 1px solid var(--do-bg);
}

.dos-item:last-child {
  border-bottom: none;
}

/* Don't card */
.donts-card {
  border-radius: 8px;
  overflow:      hidden;
}

.donts-head {
  background:  var(--dont-bg);
  color:       var(--dont-text);
  padding:     10px 16px;
  font-size:   0.88rem;
  font-weight: 700;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.donts-items {
  border:        1px solid var(--dont-border);
  border-top:    none;
  border-radius: 0 0 8px 8px;
}

.donts-item {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  padding:       9px 14px;
  font-size:     0.88rem;
  line-height:   1.65;
  color:         var(--text-body);
  border-bottom: 1px solid var(--dont-bg);
}

.donts-item:last-child {
  border-bottom: none;
}

/* Grievance mode information box */
.mode-box {
  background:    #fdf6fd;
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       18px 22px;
  margin:        14px 0;
  font-size:     0.93rem;
  line-height:   1.78;
}

.mode-box h4 {
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--brand);
  margin:      0 0 6px;
}


/* ─────────────────────────────────────────────────────────────
   16. Responsive / Media Queries
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Stack header icon + title vertically on small screens */
  .header-row {
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
  }

  /* Reduce header padding */
  .doc-header {
    padding: 24px 20px 20px;
  }

  /* Reduce body padding */
  .doc-body {
    padding: 24px 20px 32px;
  }

  /* Single column: Vision/Mission */
  .vm-grid {
    grid-template-columns: 1fr;
  }

  /* Single column: Rights grid */
  .rights-grid {
    grid-template-columns: 1fr;
  }

  /* Single column: Do/Don't */
  .dos-donts {
    grid-template-columns: 1fr;
  }

  /* Portal cards stack */
  .portal-grid {
    flex-direction: column;
  }

  .portal-card {
    min-width: unset;
  }

  /* Disc section body no longer indented */
  .disc-section-body {
    margin-left: 0;
  }
}


@media (max-width: 480px) {
  .topbar .inner,
  .topbar .inner--wide {
    font-size: 0.72rem;
    gap:       6px;
  }

  .doc-header h1 {
    font-size: 1.25rem;
    color: white;
  }

  .sec-head,
  .section-head {
    font-size: 0.92rem;
    padding:   9px 12px;
  }

  .matrix-table {
    font-size: 0.80rem;
  }
}