@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   HALAMAN AWAM DALAMAN — Akademi Al-Quran Al-Hadi
   Berdiri sendiri. TIDAK bergantung pada styles.css.

   KENAPA FAIL BERASINGAN
   styles.css menetapkan pemilih elemen kosong — section, footer, nav,
   img, body — yang ditulis untuk laman pendaratan. Halaman artikel
   mewarisi kesemuanya secara senyap; contohnya setiap jalur cerita
   dalam blog.php mewarisi `section { padding: clamp(3.6rem,7vw,6.2rem) 5% }`
   dan membawa ~101px pelapik menegak yang tiada sesiapa reka. Satu
   ruang nama di dalam styles.css tidak menyelesaikannya, kerana pemilih
   elemen kosong tetap terpakai. Hanya stylesheet berasingan menjadikan
   kebocoran itu MUSTAHIL, bukan sekadar tidak mungkin.

   index.php ialah permukaan produksi yang dilindungi dan kekal pada
   styles.css. Tiada satu pun kelas di sini dikongsi dengannya.

   DISIPLIN EMAS diwarisi daripada styles.css dan cms.css:
     --pub-gold      isian di belakang teks putih      (4.75:1)
     --pub-gold-ink  emas sebagai TEKS atas latar cerah (5.02:1)
   #B8893E hanya 2.77:1 — hiasan sahaja, jangan sekali jadikan teks.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   1. TOKEN
   ─────────────────────────────────────────────── */
:root {
  /* Jenama — nilai sama seperti styles.css dan cms.css, diisytihar
     semula di sini supaya fail ini benar-benar berdiri sendiri. */
  --pub-gold: #966B23;
  --pub-gold-ink: #856019;
  --pub-gold-hover: #7A551A;
  --pub-gold-tint: rgba(184, 137, 62, 0.12);
  --pub-brown: #2F2117;

  /* Permukaan */
  --pub-ground: #F7F4EE;
  --pub-surface: #FFFFFF;
  --pub-soft: #FBF8F2;

  /* Teks */
  --pub-ink: #2F2117;
  --pub-text: #4A3728;
  --pub-muted: #7B644A;

  /* Garis */
  --pub-line: #EADFC9;
  --pub-line-strong: #DCCBAE;

  /* Teks atas latar coklat gelap (footer) */
  --pub-on-dark: #EFE3CE;
  --pub-on-dark-dim: #B7A48B;

  /* Jarak — satu skala, dipakai kedua-dua sistem awam dan CMS */
  --pub-s1: 4px;
  --pub-s2: 8px;
  --pub-s3: 12px;
  --pub-s4: 16px;
  --pub-s5: 24px;
  --pub-s6: 32px;
  --pub-s7: 48px;
  --pub-s8: 64px;
  --pub-s9: 96px;

  /* Bentuk — tiga peranan, bukan lima nilai sewenang-wenangnya */
  --pub-radius-control: 8px;
  --pub-radius-container: 10px;
  --pub-radius-feature: 14px;

  /* Kedalaman — dua sahaja. Bayang ketiga bermakna hierarki keempat
     yang halaman ini tidak ada. */
  --pub-shadow-sm: 0 1px 2px rgba(47, 33, 23, 0.05), 0 1px 3px rgba(47, 33, 23, 0.04);
  --pub-shadow-md: 0 4px 12px rgba(47, 33, 23, 0.07), 0 2px 4px rgba(47, 33, 23, 0.04);

  --pub-focus: rgba(184, 137, 62, 0.45);

  /* Muka taip — DM Sans untuk badan dan UI, Cormorant hanya untuk
     tajuk editorial. Kedua-duanya sudah muka taip jenama laman. */
  --pub-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pub-font-display: 'Cormorant Garamond', Georgia, serif;

  --pub-header-h: 72px;
}

/* ───────────────────────────────────────────────
   2. ASAS
   Skop sengaja sempit: hanya reset kotak dan asas dokumen. Tiada
   peraturan `section`, `footer` atau `nav` kosong di sini — itulah
   punca kebocoran dalam styles.css dan ia tidak diulang.
   ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 17px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pub-header-h) + var(--pub-s4));
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 480px) { html { font-size: 16px; } }

body {
  margin: 0;
  background: var(--pub-ground);
  color: var(--pub-text);
  font-family: var(--pub-font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@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;
  }
}

/* Satu cincin fokus untuk setiap sasaran boleh tekan dalam sistem ini. */
.pub-shell a:focus-visible,
.pub-shell button:focus-visible,
.pub-header a:focus-visible,
.pub-header button:focus-visible,
.pub-footer a:focus-visible {
  outline: 3px solid var(--pub-focus);
  outline-offset: 3px;
  border-radius: var(--pub-radius-control);
}

.pub-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lompat terus ke kandungan — pautan pertama pada setiap halaman. */
.pub-skip {
  position: absolute;
  left: var(--pub-s4);
  top: -100%;
  z-index: 200;
  padding: var(--pub-s3) var(--pub-s4);
  background: var(--pub-surface);
  color: var(--pub-gold-ink);
  font-size: 0.86rem;
  font-weight: 600;
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--pub-radius-control);
  text-decoration: none;
}
.pub-skip:focus { top: var(--pub-s3); }

/* ───────────────────────────────────────────────
   3. RANGKA HALAMAN
   ─────────────────────────────────────────────── */
.pub-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pub-main { flex: 1 0 auto; }

.pub-wrap {
  width: min(1120px, 100% - var(--pub-s6));
  margin-inline: auto;
}

/* ───────────────────────────────────────────────
   4. KEPALA DAN NAVIGASI
   Nav rata, tanpa dropdown. Halaman dalaman hanya perlu jalan pulang
   ke destinasi utama laman pendaratan; menu bertingkat di sini akan
   menduplikasi kelakuan JS index.php tanpa faedah.
   ─────────────────────────────────────────────── */
.pub-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 238, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pub-line);
}
.pub-header-inner {
  width: min(1120px, 100% - var(--pub-s6));
  margin-inline: auto;
  min-height: var(--pub-header-h);
  display: flex;
  align-items: center;
  gap: var(--pub-s4);
}

.pub-brand {
  display: flex;
  align-items: center;
  gap: var(--pub-s3);
  text-decoration: none;
  flex: 0 0 auto;
}
.pub-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
.pub-brand-text {
  font-family: var(--pub-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--pub-ink);
  white-space: nowrap;
}
.pub-brand-text span {
  display: block;
  font-family: var(--pub-font);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pub-gold-ink);
}

.pub-nav {
  display: flex;
  align-items: center;
  gap: var(--pub-s4);
  margin-inline-start: auto;
}
.pub-nav-list {
  display: flex;
  align-items: center;
  gap: var(--pub-s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pub-nav-list a {
  display: block;
  color: var(--pub-text);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.pub-nav-list a:hover { color: var(--pub-gold-ink); }

.pub-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--pub-s2);
}
.pub-nav-actions .pub-btn {
  padding-inline: 0.85rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Butang tetingkap — bentuk sama, dua berat. */
.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pub-s2);
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--pub-radius-control);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pub-btn-main {
  background: var(--pub-gold);
  border-color: var(--pub-gold);
  color: #fff;
}
.pub-btn-main:hover { background: var(--pub-gold-hover); border-color: var(--pub-gold-hover); }
.pub-btn-ghost {
  background: transparent;
  border-color: rgba(184, 137, 62, 0.45);
  color: var(--pub-gold-ink);
}
.pub-btn-ghost:hover { background: var(--pub-gold-tint); border-color: var(--pub-gold); }

/* Togol menu telefon — <button> sebenar dengan aria-expanded. */
.pub-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--pub-radius-control);
  color: var(--pub-ink);
  cursor: pointer;
}
.pub-nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 -5.5px 0 currentColor, 0 5.5px 0 currentColor;
}

@media (max-width: 900px) {
  .pub-nav-toggle { display: grid; }
  .pub-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pub-s4);
    margin: 0;
    padding: var(--pub-s5) max(var(--pub-s4), calc((100vw - 1120px) / 2));
    background: var(--pub-ground);
    border-bottom: 1px solid var(--pub-line);
    box-shadow: var(--pub-shadow-md);
  }
  .pub-header.is-open .pub-nav { display: flex; }
  .pub-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .pub-nav-list a {
    display: block;
    padding: var(--pub-s3) 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--pub-line);
  }
  .pub-nav-actions { flex-direction: column; align-items: stretch; }
  .pub-btn { width: 100%; }
}

/* Header editorial blog: lebih lapang daripada halaman transaksi, tetapi
   diasingkan melalui kelas body supaya landing page kelas tidak berubah. */
.pub-blog-page { --pub-header-h: 88px; }
.pub-blog-page .pub-header {
  border-bottom-color: rgba(150, 107, 35, 0.36);
  box-shadow: 0 8px 22px rgba(47, 33, 23, 0.06);
}
.pub-blog-page .pub-header-inner {
  width: min(1280px, 100% - var(--pub-s7));
  min-height: var(--pub-header-h);
  gap: var(--pub-s6);
}
.pub-blog-page .pub-nav { gap: var(--pub-s6); }
.pub-blog-page .pub-nav-list { gap: var(--pub-s5); }
.pub-blog-page .pub-nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.pub-blog-page .pub-nav-list a[aria-current="page"] {
  color: var(--pub-gold-ink);
  font-weight: 700;
}
.pub-blog-page .pub-nav-list a[aria-current="page"]::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--pub-gold);
}

@media (max-width: 1320px) {
  .pub-blog-page { --pub-header-h: 80px; }
  .pub-blog-page .pub-header-inner {
    width: min(100% - var(--pub-s6), 1280px);
    min-height: var(--pub-header-h);
    gap: var(--pub-s4);
  }
  .pub-blog-page .pub-nav-toggle { display: grid; }
  .pub-blog-page .pub-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pub-s5);
    margin: 0;
    padding: var(--pub-s5) max(var(--pub-s5), calc((100vw - 1280px) / 2));
    background: var(--pub-ground);
    border-bottom: 1px solid rgba(150, 107, 35, 0.36);
    box-shadow: 0 14px 28px rgba(47, 33, 23, 0.11);
  }
  .pub-blog-page .pub-header.is-open .pub-nav { display: flex; }
  .pub-blog-page .pub-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .pub-blog-page .pub-nav-list a {
    display: flex;
    min-height: 48px;
    padding: var(--pub-s3) var(--pub-s4);
    border-bottom: 1px solid var(--pub-line);
    font-size: 0.95rem;
  }
  .pub-blog-page .pub-nav-list a[aria-current="page"] {
    background: var(--pub-gold-tint);
  }
  .pub-blog-page .pub-nav-list a[aria-current="page"]::after { content: none; }
  .pub-blog-page .pub-nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pub-s3);
  }
  .pub-blog-page .pub-btn { width: 100%; min-height: 48px; }
}

/* ───────────────────────────────────────────────
   5. PAUTAN KEMBALI DAN LABEL
   ─────────────────────────────────────────────── */
.pub-backbar { padding-top: var(--pub-s5); }

.pub-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pub-s2);
  margin: 0;
  font-size: 0.82rem;
  color: var(--pub-muted);
  text-decoration: none;
}
.pub-back-link:hover { color: var(--pub-gold-ink); }

.pub-tag {
  display: inline-block;
  justify-self: start;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pub-gold-ink);
  background: var(--pub-gold-tint);
  padding: 0.24rem 0.6rem;
  border-radius: var(--pub-radius-control);
}

/* ───────────────────────────────────────────────
   6. ARTIKEL — GRID EDITORIAL

   Satu grid, tiga lajur bernama. Ini menggantikan jalur bergilir
   kiri/kanan yang lama, di mana kedudukan gambar dikira daripada
   bilangan perenggan dan lebar bacaan berubah-ubah dalam satu artikel.

     [wide-start] 1fr [content-start] min(64ch,100%) [content-end] 1fr [wide-end]

   Setiap anak jatuh ke lajur `content` secara lalai, jadi UKURAN BACAAN
   TIDAK PERNAH BERUBAH dari perenggan pertama hingga akhir. Hanya media
   yang ditanda `wide` menembusi keluar; `inset` kekal dalam lajur content
   tetapi lebih sempit. Tiga lebar, ditulis oleh editor, bukan dikira.

   Ukuran: shell 1120px · gutter 32px · measure 64ch (~680px)
           inset 480px · content 680px · wide 1000px
   ─────────────────────────────────────────────── */
.pub-article-shell {
  width: min(1120px, 100% - var(--pub-s6));
  margin-inline: auto;
  padding-block: var(--pub-s5) var(--pub-s8);
}

/* Artikel duduk terus atas latar halaman. Ia BUKAN kad: tiada panel
   lut sinar, tiada bayang besar, tiada sudut bulat gergasi. */
.pub-article { margin: 0; }

/* ── Kepala artikel ── */
.pub-article-head {
  display: grid;
  gap: var(--pub-s4);
  max-width: 72ch;
  margin-inline: auto;
  padding-block: var(--pub-s6) var(--pub-s5);
}
.pub-article-head h1 {
  margin: 0;
  font-family: var(--pub-font-display);
  /* 34px pada telefon → 52px pada desktop. Jauh daripada 93px lama. */
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.05rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--pub-ink);
  text-wrap: balance;
}
.pub-article-lede {
  margin: 0;
  max-width: 60ch;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--pub-muted);
}

/* Metadata mengundur: saiz kecil, berat biasa, tiada huruf besar
   memaksa dan tiada jarak huruf agresif. */
.pub-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pub-s2) var(--pub-s4);
  margin: 0;
  color: var(--pub-muted);
  font-size: 0.84rem;
  font-weight: 400;
}
.pub-article-meta > * { position: relative; }
.pub-article-meta > * + *::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--pub-s4) / -2);
  top: 50%;
  width: 3px; height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--pub-line-strong);
}

/* Garis emas nipis — satu-satunya isyarat jenama dalam badan artikel.
   Struktur, bukan hiasan: ia menandakan tempat kepala berakhir. */
.pub-rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, var(--pub-gold) 0 4rem, var(--pub-line) 4rem);
}

/* ── Media hero ── */
.pub-article-hero {
  margin: 0 0 var(--pub-s7);
}
.pub-article-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--pub-radius-container);
  background: var(--pub-soft);
}
.pub-article-hero figcaption,
.pub-figure figcaption {
  margin-top: var(--pub-s3);
  color: var(--pub-muted);
  font-size: 0.84rem;
  line-height: 1.55;
  max-width: 60ch;
}

/* ── Badan artikel: grid tiga lajur bernama ── */
.pub-article-body {
  display: grid;
  grid-template-columns:
    [wide-start] minmax(0, 1fr)
    [content-start] min(64ch, 100%) [content-end]
    minmax(0, 1fr) [wide-end];
  row-gap: var(--pub-s5);
}
.pub-article-body > * { grid-column: content; }

.pub-article-body p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--pub-text);
}
.pub-article-body h2,
.pub-article-body h3 {
  margin: var(--pub-s5) 0 0;
  font-family: var(--pub-font);
  color: var(--pub-ink);
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.pub-article-body h2 { font-size: 1.42rem; font-weight: 700; line-height: 1.3; }
.pub-article-body h3 { font-size: 1.14rem; font-weight: 600; line-height: 1.4; }
.pub-article-body h2 + p,
.pub-article-body h3 + p { margin-top: calc(var(--pub-s2) * -1); }

.pub-article-body ul,
.pub-article-body ol {
  margin: 0;
  padding-inline-start: var(--pub-s5);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--pub-text);
}
.pub-article-body li + li { margin-top: var(--pub-s2); }
.pub-article-body li::marker { color: var(--pub-gold-ink); }

.pub-article-body a {
  color: var(--pub-gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pub-article-body a:hover { text-decoration-thickness: 2px; }
.pub-article-body strong { font-weight: 600; color: var(--pub-ink); }

/* Petikan: dipimpin oleh satu peraturan emas, bukan tanda petik besar. */
.pub-article-body blockquote {
  margin: var(--pub-s3) 0;
  padding-inline-start: var(--pub-s5);
  border-inline-start: 2px solid var(--pub-gold);
}
.pub-article-body blockquote p {
  font-family: var(--pub-font-display);
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--pub-ink);
}

/* ── Tiga lebar media, tiada yang keempat ── */
.pub-figure { margin: var(--pub-s3) 0; }
.pub-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pub-radius-container);
  background: var(--pub-soft);
}
.pub-media-content { grid-column: content; }
.pub-media-inset   { grid-column: content; max-width: 480px; }
.pub-media-wide    { grid-column: wide; }
.pub-media-wide img { border-radius: var(--pub-radius-feature); }

/* Teks Arab: arah dan muka taip sistem, tanpa jarak huruf yang
   merosakkan sambungan huruf. */
.pub-article-body [lang="ar"],
.pub-article-body [dir="rtl"] {
  font-family: 'Traditional Arabic', 'Amiri', 'Scheherazade New', serif;
  font-size: 1.5em;
  line-height: 2;
  letter-spacing: normal;
  word-spacing: normal;
}

/* ── Hujung artikel ── */
.pub-article-end {
  max-width: 64ch;
  margin: var(--pub-s7) auto 0;
  padding-top: var(--pub-s5);
  border-top: 1px solid var(--pub-line);
}
.pub-article-end-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pub-s4);
}

/* ── Bar kongsi ── */
.pub-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pub-s2);
}
.pub-share-status {
  color: var(--pub-muted);
  font-size: 0.8rem;
}

/* ── Artikel berkaitan ── */
.pub-related {
  max-width: 64ch;
  margin: var(--pub-s8) auto 0;
  padding-top: var(--pub-s6);
  border-top: 1px solid var(--pub-line);
}
.pub-related h2 {
  margin: 0 0 var(--pub-s5);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pub-gold-ink);
}
.pub-related-list { display: grid; gap: var(--pub-s5); }

/* Baris, bukan kad terapung. Tiada sempadan, tiada bayang — hanya
   lakaran kecil, tajuk dan satu garis pemisah. */
.pub-story-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--pub-s4);
  align-items: start;
  padding-bottom: var(--pub-s5);
  border-bottom: 1px solid var(--pub-line);
}
.pub-related-list .pub-story-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pub-story-row.no-media { grid-template-columns: minmax(0, 1fr); }
.pub-story-thumb {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--pub-radius-control);
  background: var(--pub-soft);
}
.pub-story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-story-row h3 {
  margin: var(--pub-s1) 0 var(--pub-s2);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pub-ink);
  text-wrap: balance;
}
.pub-story-row h3 a { color: inherit; text-decoration: none; }
.pub-story-row h3 a:hover { color: var(--pub-gold-ink); text-decoration: underline; }
.pub-story-row p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--pub-muted);
}
.pub-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pub-s3);
  margin-top: var(--pub-s2);
  color: var(--pub-muted);
  font-size: 0.78rem;
}

/* Artikel tidak dijumpai */
.pub-article-missing {
  max-width: 52ch;
  margin-inline: auto;
  padding-block: var(--pub-s9);
  text-align: center;
}
.pub-article-missing h1 {
  margin: 0 0 var(--pub-s3);
  font-family: var(--pub-font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--pub-ink);
}
.pub-article-missing p { margin: 0 0 var(--pub-s5); color: var(--pub-muted); }

@media (max-width: 700px) {
  .pub-article-head { padding-block: var(--pub-s5) var(--pub-s4); }
  .pub-article-hero { margin-bottom: var(--pub-s6); }
  .pub-article-hero img { aspect-ratio: 4 / 3; }
  .pub-article-body { row-gap: var(--pub-s4); }
  .pub-article-body blockquote p { font-size: 1.18rem; }
  .pub-media-inset { max-width: 100%; }
  .pub-story-row { grid-template-columns: 72px minmax(0, 1fr); gap: var(--pub-s3); }
  .pub-share > .pub-btn { flex: 1 1 auto; }
}

/* ───────────────────────────────────────────────
   6b. ARKIB ARTIKEL (blog-index.php)
   Satu artikel utama, kemudian baris. Bukan dinding dua belas kad
   bulat yang serupa — susunan menyatakan keutamaan, bukan sekadar
   mengisi grid.
   ─────────────────────────────────────────────── */
.pub-index-shell {
  width: min(1120px, 100% - var(--pub-s6));
  margin-inline: auto;
  padding-block: var(--pub-s7) var(--pub-s8);
}
.pub-index-head {
  max-width: 60ch;
  padding-bottom: var(--pub-s5);
}
.pub-index-head h1 {
  margin: 0 0 var(--pub-s3);
  font-family: var(--pub-font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--pub-ink);
}
.pub-index-head p { margin: 0; color: var(--pub-muted); font-size: 1.06rem; }

.pub-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pub-s2);
  padding-block: var(--pub-s4) var(--pub-s6);
  border-bottom: 1px solid var(--pub-line);
}
.pub-filter-item {
  display: inline-flex;
  align-items: center;
  gap: var(--pub-s2);
  min-height: 38px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--pub-radius-control);
  color: var(--pub-text);
  font-size: 0.86rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pub-filter-item span { color: var(--pub-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pub-filter-item:hover { border-color: var(--pub-gold); color: var(--pub-gold-ink); }
.pub-filter-item.is-active {
  background: var(--pub-brown);
  border-color: var(--pub-brown);
  color: var(--pub-on-dark);
}
.pub-filter-item.is-active span { color: var(--pub-on-dark-dim); }

/* Artikel utama */
.pub-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--pub-s7);
  align-items: center;
  padding-block: var(--pub-s7);
  border-bottom: 1px solid var(--pub-line);
}
.pub-lead-media { display: block; border-radius: var(--pub-radius-feature); overflow: hidden; background: var(--pub-soft); }
.pub-lead-media img { display: block; width: 100%; height: auto; }
.pub-lead-copy h2 {
  margin: var(--pub-s3) 0 var(--pub-s3);
  font-family: var(--pub-font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pub-ink);
  text-wrap: balance;
}
.pub-lead-copy h2 a { color: inherit; text-decoration: none; }
.pub-lead-copy h2 a:hover { color: var(--pub-gold-ink); }
.pub-lead-copy > p { margin: 0; color: var(--pub-muted); font-size: 1.02rem; line-height: 1.65; }

.pub-index-list { display: grid; gap: var(--pub-s5); padding-top: var(--pub-s6); }
.pub-index-list .pub-story-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pub-index-list .pub-story-row { grid-template-columns: 160px minmax(0, 1fr); }
.pub-index-list .pub-story-row.no-media { grid-template-columns: minmax(0, 1fr); }
.pub-story-cat {
  display: inline-block;
  color: var(--pub-gold-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pub-index-empty {
  padding-block: var(--pub-s8);
  color: var(--pub-muted);
  font-size: 1.02rem;
}
.pub-index-empty a { color: var(--pub-gold-ink); }

/* Sepanduk pratonton draf */
.pub-preview-flag {
  margin: var(--pub-s4) 0 0;
  padding: var(--pub-s3) var(--pub-s4);
  background: var(--pub-gold-tint);
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--pub-radius-control);
  color: var(--pub-gold-ink);
  font-size: 0.86rem;
  font-weight: 600;
}

@media (max-width: 860px) {
  .pub-lead { grid-template-columns: minmax(0, 1fr); gap: var(--pub-s5); }
  .pub-index-list .pub-story-row { grid-template-columns: 110px minmax(0, 1fr); }
  .pub-index-list .pub-story-row.no-media { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pub-index-shell { padding-block: var(--pub-s6) var(--pub-s7); }
  .pub-index-list .pub-story-row { grid-template-columns: 84px minmax(0, 1fr); gap: var(--pub-s3); }
  .pub-index-list .pub-story-row.no-media { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────────────────────────────────────────
   7. HALAMAN PENGESAHAN (pendaftaran berjaya)
   Satu lajur berpusat, satu permukaan. Bukan kad dalam kad.
   ─────────────────────────────────────────────── */
.pub-confirm {
  width: min(620px, 100% - var(--pub-s6));
  margin-inline: auto;
  padding-block: var(--pub-s8) var(--pub-s9);
}
.pub-confirm-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--pub-s5);
  border-radius: 50%;
  background: var(--pub-gold-tint);
  color: var(--pub-gold-ink);
}
.pub-confirm-mark svg { width: 26px; height: 26px; }
.pub-confirm h1 {
  margin: 0 0 var(--pub-s4);
  font-family: var(--pub-font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--pub-ink);
  text-wrap: balance;
}
.pub-confirm-lede {
  margin: 0 0 var(--pub-s6);
  max-width: 56ch;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--pub-text);
}

/* Ringkasan apa yang direkodkan — senarai definisi, bukan kad. */
.pub-summary {
  margin: 0 0 var(--pub-s6);
  padding: var(--pub-s5);
  background: var(--pub-surface);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius-container);
}
.pub-summary dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pub-s3) var(--pub-s5);
  margin: 0;
}
.pub-summary dt {
  color: var(--pub-muted);
  font-size: 0.82rem;
}
.pub-summary dd {
  margin: 0;
  color: var(--pub-ink);
  font-size: 0.94rem;
  font-weight: 600;
}

/* Langkah seterusnya — nombor membawa maklumat sebenar (urutan masa). */
.pub-steps {
  margin: 0 0 var(--pub-s6);
  padding: 0;
  list-style: none;
  counter-reset: langkah;
}
.pub-steps li {
  position: relative;
  counter-increment: langkah;
  padding: 0 0 var(--pub-s4) var(--pub-s7);
  font-size: 0.96rem;
  line-height: 1.65;
}
.pub-steps li:last-child { padding-bottom: 0; }
.pub-steps li::before {
  content: counter(langkah);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pub-surface);
  border: 1px solid var(--pub-line-strong);
  color: var(--pub-gold-ink);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pub-steps strong { color: var(--pub-ink); font-weight: 600; }

.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pub-s3);
}

@media (max-width: 560px) {
  .pub-confirm { padding-block: var(--pub-s6) var(--pub-s8); }
  .pub-summary dl { grid-template-columns: 1fr; gap: var(--pub-s1); }
  .pub-summary dd { margin-bottom: var(--pub-s3); }
  .pub-summary dd:last-child { margin-bottom: 0; }
  .pub-actions > .pub-btn { width: 100%; }
}

/* ───────────────────────────────────────────────
   8. KAKI HALAMAN
   Coklat gelap sama seperti kaki laman pendaratan, tetapi membawa
   navigasi sebenar — halaman dalaman perlu jalan ke hadapan, bukan
   sekadar hak cipta.
   ─────────────────────────────────────────────── */
.pub-footer {
  flex: 0 0 auto;
  background: var(--pub-brown);
  color: var(--pub-on-dark-dim);
  padding-block: var(--pub-s7) var(--pub-s5);
}
.pub-footer-inner {
  width: min(1120px, 100% - var(--pub-s6));
  margin-inline: auto;
}
.pub-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--pub-s7);
  padding-bottom: var(--pub-s6);
}
.pub-footer-brand {
  display: flex;
  align-items: flex-start;
  gap: var(--pub-s3);
}
.pub-footer-brand img { width: 48px; height: 48px; object-fit: contain; }
.pub-footer-brand strong {
  display: block;
  font-family: var(--pub-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pub-on-dark);
}
.pub-footer-brand span {
  display: block;
  margin-top: var(--pub-s1);
  font-size: 0.78rem;
  line-height: 1.6;
}

.pub-footer h2 {
  margin: 0 0 var(--pub-s3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pub-on-dark);
}
.pub-footer ul { list-style: none; margin: 0; padding: 0; }
.pub-footer li { margin-bottom: var(--pub-s2); }
.pub-footer a {
  color: var(--pub-on-dark-dim);
  font-size: 0.86rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.pub-footer a:hover { color: var(--pub-on-dark); text-decoration: underline; }
.pub-footer address {
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.7;
}

.pub-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pub-s4);
  padding-top: var(--pub-s5);
  border-top: 1px solid rgba(239, 227, 206, 0.16);
  font-size: 0.78rem;
}
.pub-social {
  display: flex;
  gap: var(--pub-s2);
}
.pub-social a {
  display: grid;
  place-items: center;
  /* 44px ialah sasaran sentuh minimum; ikon kekal 17px di dalamnya. */
  width: 44px; height: 44px;
  border: 1px solid rgba(239, 227, 206, 0.24);
  border-radius: var(--pub-radius-control);
  color: var(--pub-on-dark-dim);
}
.pub-social a:hover {
  color: var(--pub-brown);
  background: var(--pub-on-dark);
  border-color: var(--pub-on-dark);
}
.pub-social svg { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .pub-footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--pub-s6); }
  .pub-footer-bar { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   LANDING PAGE SEO — satu intent, satu laluan pendaftaran
   ================================================================ */
.lp-shell { overflow: hidden; }
.lp-hero,
.lp-section,
.lp-value,
.lp-register {
  width: min(1120px, 100% - var(--pub-s6));
  margin-inline: auto;
}
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: clamp(var(--pub-s6), 6vw, var(--pub-s9));
  align-items: center;
  min-height: min(760px, calc(100vh - var(--pub-header-h)));
  padding-block: clamp(var(--pub-s7), 8vw, var(--pub-s9));
}
.lp-breadcrumb { display: flex; gap: var(--pub-s2); align-items: center; margin-bottom: var(--pub-s5); font-size: 0.78rem; color: var(--pub-muted); }
.lp-breadcrumb a { color: var(--pub-gold-ink); }
.lp-hero h1,
.lp-section h2,
.lp-value h2,
.lp-register h2 {
  margin: 0;
  font-family: var(--pub-font-display);
  color: var(--pub-ink);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lp-hero h1 { max-width: 20ch; font-size: clamp(2.3rem, 4vw, 3.4rem); }
.lp-lede { max-width: 61ch; margin: var(--pub-s5) 0; font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--pub-text); }
.lp-hero-points { display: grid; gap: var(--pub-s2); margin: 0; padding: 0; list-style: none; }
.lp-hero-points li { position: relative; padding-left: 1.6rem; color: var(--pub-ink); font-weight: 600; }
.lp-hero-points li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 9px; height: 9px; border-radius: 50%; background: var(--pub-gold); }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--pub-s3); margin-top: var(--pub-s6); }
.lp-assurance { max-width: 58ch; margin: var(--pub-s4) 0 0; font-size: 0.8rem; color: var(--pub-muted); }
.lp-hero-media { position: relative; margin: 0; }
.lp-hero-media img { display: block; width: 100%; max-height: 620px; object-fit: cover; aspect-ratio: 4 / 5; border-radius: var(--pub-radius-feature); box-shadow: var(--pub-shadow-md); }
.lp-hero-media figcaption { position: absolute; right: var(--pub-s4); bottom: var(--pub-s4); left: var(--pub-s4); padding: var(--pub-s3) var(--pub-s4); border-radius: var(--pub-radius-control); background: rgba(47, 33, 23, 0.9); color: var(--pub-on-dark); font-size: 0.78rem; line-height: 1.45; }

.lp-proof { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--pub-brown); color: var(--pub-on-dark); }
.lp-proof p { margin: 0; padding: var(--pub-s6) clamp(var(--pub-s5), 4vw, var(--pub-s7)); }
.lp-proof p + p { border-left: 1px solid rgba(239, 227, 206, 0.18); }
.lp-proof strong, .lp-proof span { display: block; }
.lp-proof strong { font-family: var(--pub-font-display); font-size: 1.45rem; line-height: 1.1; }
.lp-proof span { margin-top: var(--pub-s2); color: var(--pub-on-dark-dim); font-size: 0.78rem; }

.lp-section { padding-block: clamp(var(--pub-s8), 9vw, 120px); }
.lp-section-head { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1fr); gap: var(--pub-s7); align-items: end; margin-bottom: var(--pub-s7); }
.lp-section-head h2, .lp-value h2, .lp-register h2 { font-size: clamp(2.4rem, 5vw, 4.3rem); }
.lp-section-head p { max-width: 63ch; margin: 0; }
.lp-outcome-list { border-top: 1px solid var(--pub-line-strong); }
.lp-outcome-list article { display: grid; grid-template-columns: minmax(180px, 0.55fr) 1fr; gap: var(--pub-s7); padding-block: var(--pub-s5); border-bottom: 1px solid var(--pub-line); }
.lp-outcome-list h3, .lp-outcome-list p { margin: 0; }
.lp-outcome-list h3 { color: var(--pub-ink); font-size: 1rem; }

.lp-packages { padding-top: 0; }
.lp-locations { display: grid; gap: var(--pub-s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-location { padding: var(--pub-s5); background: var(--pub-surface); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-feature); }
.lp-location h3 { margin: 0 0 var(--pub-s4); color: var(--pub-ink); font-family: var(--pub-font-display); font-size: 1.3rem; }
.lp-location-map { margin-bottom: var(--pub-s4); border-radius: var(--pub-radius-control); overflow: hidden; }
.lp-location-map iframe { display: block; width: 100%; height: 220px; border: 0; }
.lp-location address { margin: 0; font-style: normal; font-size: 0.86rem; color: var(--pub-text); }
.lp-location-note { margin: var(--pub-s2) 0 0; font-size: 0.78rem; color: var(--pub-muted); }

.lp-package-list { display: grid; gap: var(--pub-s3); }
.lp-package { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(160px, auto); gap: var(--pub-s5); align-items: center; padding: var(--pub-s5); background: var(--pub-surface); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-feature); }
.lp-package.is-recommended { border-color: var(--pub-gold); box-shadow: var(--pub-shadow-md); }
.lp-package-label { position: absolute; top: -12px; left: var(--pub-s5); padding: 3px 10px; border-radius: 999px; background: var(--pub-gold); color: #fff; font-size: 0.7rem; font-weight: 700; }
.lp-package h3 { margin: 0; color: var(--pub-ink); font-family: var(--pub-font-display); font-size: 1.45rem; line-height: 1.15; }
.lp-package p { max-width: 67ch; margin: var(--pub-s2) 0 0; font-size: 0.84rem; color: var(--pub-muted); }
.lp-price { min-width: 118px; }
.lp-price strong, .lp-price span { display: block; }
.lp-price strong { color: var(--pub-ink); font-size: 1.55rem; }
.lp-price span { font-size: 0.72rem; color: var(--pub-muted); }

.lp-value { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr); gap: clamp(var(--pub-s7), 8vw, var(--pub-s9)); align-items: center; padding: clamp(var(--pub-s7), 8vw, var(--pub-s9)); background: var(--pub-soft); border-radius: var(--pub-radius-feature); }
.lp-value-copy > p { max-width: 65ch; margin: var(--pub-s5) 0 var(--pub-s6); }
.lp-value dl { margin: 0; }
.lp-value dl div { padding-block: var(--pub-s4); border-top: 1px solid var(--pub-line); }
.lp-value dt { color: var(--pub-ink); font-weight: 700; }
.lp-value dd { margin: var(--pub-s1) 0 0; font-size: 0.86rem; color: var(--pub-muted); }
.lp-value-media { position: relative; min-height: 430px; }
.lp-value-media img { position: absolute; display: block; object-fit: cover; border-radius: var(--pub-radius-feature); box-shadow: var(--pub-shadow-md); }
.lp-value-media img:first-child { width: 76%; height: auto; left: 0; top: 0; aspect-ratio: 1; }
.lp-value-media img:last-child { width: auto; height: 84%; max-width: 40%; right: 0; bottom: 0; object-position: top; }

.lp-testimonial { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr); gap: var(--pub-s8); align-items: center; }
.lp-testimonial blockquote { margin: 0; padding: 0; }
.lp-testimonial blockquote p { margin: 0; font-family: var(--pub-font-display); font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; color: var(--pub-ink); }
.lp-testimonial blockquote footer { margin-top: var(--pub-s5); color: var(--pub-gold-ink); font-weight: 700; }
.lp-testimonial h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
.lp-testimonial > div p { margin: var(--pub-s4) 0 0; }

.lp-faq { padding-top: 0; }
.lp-faq-list { max-width: 840px; border-top: 1px solid var(--pub-line-strong); }
.lp-faq details { border-bottom: 1px solid var(--pub-line); }
.lp-faq summary { cursor: pointer; padding: var(--pub-s5) 2.5rem var(--pub-s5) 0; color: var(--pub-ink); font-weight: 700; }
.lp-faq details p { max-width: 70ch; margin: 0 0 var(--pub-s5); color: var(--pub-muted); }

.lp-register { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1fr); gap: var(--pub-s8); margin-bottom: var(--pub-s9); padding: clamp(var(--pub-s6), 7vw, var(--pub-s8)); background: var(--pub-brown); color: var(--pub-on-dark); border-radius: var(--pub-radius-feature); }
.lp-register h2 { color: var(--pub-on-dark); }
.lp-register-copy > p { color: var(--pub-on-dark-dim); }
.lp-register-copy ol { padding-left: 1.35rem; }
.lp-register-copy li { margin-block: var(--pub-s2); }
.lp-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pub-s4); padding: var(--pub-s5); background: var(--pub-surface); color: var(--pub-text); border-radius: var(--pub-radius-feature); }
.lp-form label { display: grid; gap: var(--pub-s2); color: var(--pub-ink); font-size: 0.78rem; font-weight: 700; }
.lp-form input, .lp-form select, .lp-form textarea { width: 100%; min-height: 48px; padding: 0.75rem; border: 1px solid var(--pub-line-strong); border-radius: var(--pub-radius-control); background: #fff; color: var(--pub-ink); font: inherit; }
.lp-form textarea { resize: vertical; }
.lp-form input:focus, .lp-form select:focus, .lp-form textarea:focus { outline: 3px solid var(--pub-focus); border-color: var(--pub-gold); }
.lp-form-wide, .lp-form-error, .lp-form-submit, .lp-privacy { grid-column: 1 / -1; }
.lp-optional { color: var(--pub-muted); font-size: 0.7rem; font-weight: 500; }
.lp-form-error { min-height: 1.2em; margin: 0; color: #8f1f1f; font-size: 0.78rem; font-weight: 700; }
.lp-form-submit { justify-content: center; min-height: 52px; border: 0; cursor: pointer; }
.lp-privacy { margin: 0; color: var(--pub-muted); font-size: 0.7rem; line-height: 1.5; }

@media (max-width: 900px) {
  .lp-hero, .lp-value, .lp-testimonial, .lp-register { grid-template-columns: 1fr; }
  .lp-hero { min-height: auto; }
  .lp-hero h1 { max-width: 15ch; }
  .lp-locations { grid-template-columns: 1fr; }
  .lp-hero-media img { max-height: 500px; aspect-ratio: 16 / 10; }
  .lp-section-head { grid-template-columns: 1fr; gap: var(--pub-s4); }
  .lp-package { grid-template-columns: 1fr auto; }
  .lp-package .pub-btn { grid-column: 1 / -1; justify-content: center; }
  .lp-value-media { min-height: 380px; }
  .lp-register { margin-bottom: var(--pub-s7); }
}

@media (max-width: 620px) {
  .lp-hero, .lp-section, .lp-value, .lp-register { width: min(100% - var(--pub-s5), 1120px); }
  .lp-hero { padding-top: var(--pub-s6); }
  .lp-hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .lp-proof { grid-template-columns: 1fr; }
  .lp-proof p + p { border-left: 0; border-top: 1px solid rgba(239, 227, 206, 0.18); }
  .lp-outcome-list article { grid-template-columns: 1fr; gap: var(--pub-s2); }
  .lp-package { grid-template-columns: 1fr; }
  .lp-package .pub-btn { grid-column: auto; }
  .lp-value { padding: var(--pub-s6); }
  .lp-value-media { min-height: 330px; }
  .lp-form { grid-template-columns: 1fr; padding: var(--pub-s4); }
  .lp-form-wide, .lp-form-error, .lp-form-submit, .lp-privacy { grid-column: auto; }
  .lp-register { padding: var(--pub-s5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.pub-article-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pub-s5);
  align-items: center;
  margin: var(--pub-s8) 0 var(--pub-s6);
  padding: var(--pub-s5);
  border-radius: var(--pub-radius-feature);
  background: var(--pub-brown);
  color: var(--pub-on-dark-dim);
}
.pub-article-cta h2 { margin: 0; color: var(--pub-on-dark); font-family: var(--pub-font-display); font-size: 1.7rem; line-height: 1.1; }
.pub-article-cta p { margin: var(--pub-s2) 0 0; font-size: 0.84rem; }
@media (max-width: 700px) {
  .pub-article-cta { grid-template-columns: 1fr; }
  .pub-article-cta .pub-btn { justify-content: center; }
}