/* ═══════════════════════════════════════════════════════════════════
   public.css — navbar, hero, harga, footer, halaman legal.
   Tema kaca di atas air. Nilai warna HANYA var().
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ NAVBAR ═══ kaca beku menempel di atas, tinggi 64px ═══════════ */
.nav-wrap {
  position: sticky; top: 0; z-index: 100;
  height: var(--navbar-h);
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat));
  backdrop-filter: blur(22px) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 10px 34px var(--abyss);
}
.nav {
  max-width: var(--wrap); height: 100%; margin: 0 auto; padding: 0 var(--s6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
}

/* Gaya .brand / .brand-mark / .brand-name ADA DI components.css.
   Alasannya: merek dipakai juga di halaman masuk dan sidebar dashboard,
   dan kedua halaman itu TIDAK memuat public.css. Waktu gayanya masih di
   sini, logo di halaman masuk muncul sebagai tautan biru bergaris bawah. */

.nav-mid { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-mid a {
  display: block; padding: 9px 13px; border-radius: var(--radius-sm);
  color: var(--text2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  transition: color var(--tr), background var(--tr);
}
.nav-mid a:hover { color: var(--text); background: var(--glass-2); }
.nav-mid a[aria-current] { color: var(--accent); background: var(--accent-soft); }

.nav-right { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }

/* Tombol alat = kaca kecil */
.tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 11px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-brd); border-radius: var(--radius-sm);
  color: var(--text2); font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.tool:hover { color: var(--text); border-color: var(--glass-brd-hi); background: var(--glass-2); }

.lang-wrap { position: relative; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 110;
  min-width: 158px; padding: 6px; list-style: none;
  background: var(--panel-glass);
  border: 1px solid var(--glass-brd); border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-sheen);
  /* visibility+opacity, BUKAN display:none — supaya tautan bahasa
     tetap ada di DOM dan bisa ditemukan crawler (Protokol 04 §SWITCHER) */
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: var(--tr);
}
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  display: block; padding: 10px 12px; min-height: 44px; line-height: 24px;
  border-radius: var(--radius-sm); color: var(--text2);
  text-decoration: none; font-size: var(--fs-sm);
}
.lang-menu a:hover { background: var(--glass-2); color: var(--text); }
.lang-menu a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.burger { display: none; }
.nav-panel { display: none; }

/* ═══ HERO ═══════════════════════════════════════════════════════ */
.hero { padding: var(--s11) 0 var(--s9); }
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s6);
  padding: 8px 16px; border-radius: 100px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--accent-line);
  color: var(--accent); font-size: var(--fs-sm); font-weight: 500;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(1.4)} }

/* Judul kena cahaya dari atas: terang di puncak, meredup ke bawah */
.hero h1 {
  max-width: 800px;
  background: var(--head-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lead { max-width: 600px; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.hero-note { margin-top: var(--s4); }

/* Hero dua kolom: teks kiri, gambar kandang kanan (config/iso_art.php).
   Di bawah 1100px gambarnya turun ke bawah tombol — kolom kanan di layar
   selebar itu terlalu sempit, ayamnya jadi sebesar semut. */
.hero-grid {
  display: grid; align-items: center; gap: var(--s6);
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
}
.hero-grid h1 { font-size: clamp(29px, 4.3vw, 48px); }
/* Sedikit melewati tepi kanan wadah (16px < padding .wrap 24px),
   jadi tidak pernah memunculkan scroll horizontal. */
.hero-art { margin: calc(var(--s6) * -1) calc(var(--s4) * -1) 0 0; }
/* Layar lebar: tepi wadah masih jauh dari tepi layar, gambar boleh lebih besar. */
@media (min-width: 1240px) {
  .hero-art { margin-right: calc(var(--s9) * -1); }
}

/* ═══ PAPAN SIMULASI ═══ panel kaca mengambang ═══════════════════ */
.board {
  position: relative; margin-top: var(--s9); overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow-hi), inset 0 1px 0 var(--glass-sheen);
}
.board-head, .board-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: 14px 20px; font-size: var(--fs-xs); color: var(--text3);
}
.board-head {
  border-bottom: 1px solid var(--glass-brd);
  letter-spacing: 1.3px; text-transform: uppercase; font-weight: 600;
  background: var(--glass-top);
}
.board-foot { border-top: 1px solid var(--glass-brd); }
.sw-in, .sw-out { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.sw-in  { background: var(--surface-2); border: 1px solid var(--border-strong); }
.sw-out { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); margin-left: var(--s4); }
.cell-in  { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--border-strong); }
.cell-out { font-weight: 700; }
.st-ok { color: var(--success); } .st-warn { color: var(--warning); }

/* ═══ ALUR HITUNGAN ═══════════════════════════════════════════════ */
.calc { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s6); align-items: center; }
.calc-col {
  position: relative; padding: var(--s6);
  background: var(--glass); border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-sheen);
}
.calc-h {
  margin-bottom: var(--s4); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text3);
}
.calc ul { list-style: none; display: grid; gap: 10px; }
.calc li { padding: 11px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.calc-in  li { background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text2); }
.calc-out li { background: var(--accent-soft); border: 1px solid var(--accent-line);
               color: var(--accent); font-weight: 500; }
.calc-arrow { display: flex; justify-content: center; color: var(--accent); }

/* ═══ HARGA ═══════════════════════════════════════════════════════ */
.bill-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 auto var(--s8);
  padding: 5px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-brd); border-radius: 100px;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  max-width: 100%; flex-wrap: wrap;
}
.bill-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 20px; border: none; border-radius: 100px;   /* 03 §6.4: minimum target sentuh */
  background: transparent; color: var(--text2);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: var(--tr);
}
.bill-btn:hover { color: var(--text); }
.bill-btn.on {
  background: var(--grad); color: var(--on-accent);
  box-shadow: 0 6px 18px var(--accent-glow);
}
.bill-save {
  padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 700;
  background: var(--success-soft); border: 1px solid var(--success); color: var(--success);
}
.bill-btn.on .bill-save {
  background: var(--glass-2); border-color: transparent; color: var(--on-accent);
}

.plans {
  display: grid; gap: var(--s6); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
/* CATATAN: JANGAN pasang overflow:hidden di sini — .plan-badge duduk di
   top:-12px, jadi label "PALING LARIS" akan terpotong separuh. Lapisan
   kaca ::before sudah rapi dikurung border-radius, tidak butuh clipping. */
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: var(--s8) var(--s6);
  background: var(--glass); border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-sheen);
  transition: transform var(--tr-slow), border-color var(--tr), box-shadow var(--tr-slow);
}
.plan::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; background: var(--glass-top);
}
.plan > * { position: relative; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hi), inset 0 1px 0 var(--glass-sheen); }
.plan.hot {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 46px var(--accent-glow),
              var(--glass-shadow-hi), inset 0 1px 0 var(--glass-sheen);
}
.plan-badge {
  position: absolute; top: -12px; left: var(--s6); z-index: 2;
  padding: 5px 14px; border-radius: 100px;
  background: var(--grad); color: var(--on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  box-shadow: 0 6px 18px var(--accent-glow);
}
.plan-name { font-size: var(--fs-lg); font-weight: 700; }
.plan-tag  { min-height: 42px; margin-top: 6px; font-size: var(--fs-sm); color: var(--text2); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: var(--s6) 0 4px; }
.plan-amt  { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -1.4px; }
.plan-per  { font-size: var(--fs-sm); color: var(--text3); }
.plan-sub  { min-height: 20px; font-size: var(--fs-xs); color: var(--text3); }
/* Satu batas per baris: tinggi blok ini jadi sama persis di semua kartu,
   jadi daftar fitur di bawahnya rata — tidak lagi bergeser waktu ada
   paket yang teksnya lebih panjang ("Tanpa batas"). */
.plan-lim {
  display: grid; gap: var(--s2);
  padding: var(--s4) 0 var(--s5); margin-top: var(--s3);
  border-bottom: 1px solid var(--glass-brd);
  font-size: var(--fs-sm); color: var(--text2);
}
.plan-lim span { display: inline-flex; align-items: center; gap: 7px; }
.plan-lim b { color: var(--text); }
.plan-feats { flex: 1; list-style: none; display: grid; gap: 11px; margin: var(--s6) 0; }
.plan-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--text2); }
.plan-feats li svg { margin-top: 3px; }
.fy svg { color: var(--success); }
.fn { opacity: .48; } .fn svg { color: var(--text3); }

/* tabel perbandingan
   min-width WAJIB. Tanpa itu, di layar 430px tabel dipaksa muat 100% lebar
   wadah, tiga kolom paket mengunci 3×124px, dan kolom nama fitur cuma
   kebagian ~44px — "Kandang" jadi menurun satu huruf per baris.
   Dengan min-width, tabel melebar melewati wadah dan .table-scroll
   yang menggesernya. */
.cmp { width: 100%; min-width: 540px; border-collapse: collapse; font-size: var(--fs-sm); }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--glass-brd); text-align: left; }
.cmp thead th { font-size: var(--fs-xs); letter-spacing: .8px; text-transform: uppercase; color: var(--text3); }
.cmp tbody th { font-weight: 500; color: var(--text2); }
.cmp th:first-child, .cmp tbody th { min-width: 168px; }
.cmp td { text-align: center; width: 124px; }
.cmp .yes { color: var(--success); }
.cmp .no  { color: var(--text3); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: none; }

/* ═══ CTA & FOOTER ════════════════════════════════════════════════ */
.cta-box {
  position: relative; overflow: hidden;
  padding: var(--s10) var(--s7); text-align: center;
  background: var(--glass-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xl);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow-hi), inset 0 1px 0 var(--glass-sheen),
              0 0 60px var(--accent-glow);
}
.cta-box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; background: var(--glass-top);
}
.cta-box > * { position: relative; }
.cta-box p { max-width: 480px; margin: var(--s3) auto var(--s7); color: var(--text2); }

.site-foot {
  position: relative; z-index: 1; margin-top: var(--s11);
  padding: var(--s9) 0 var(--s6);
  border-top: 1px solid var(--glass-brd);
  background: var(--foot-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--s7); }
.foot-brand .brand-name { max-width: 100%; }
.foot-tag { max-width: 300px; margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text2); }
.foot-h {
  margin-bottom: var(--s4); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text3);
}
.foot-col ul { list-style: none; display: grid; gap: 2px; }
.foot-col a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text2); text-decoration: none; font-size: var(--fs-sm);
  transition: color var(--tr);
}
.foot-col a:hover { color: var(--accent); }
/* ── Blok kontak di kolom merek ───────────────────────────────────
   Ini yang membuat footer tidak terasa kosong. Ikon dalam kotak kecil
   supaya baris-barisnya rata kiri walau panjang teksnya berbeda. */
.foot-contact { list-style: none; display: grid; gap: 2px; margin-top: var(--s5); }
.foot-contact li,
.foot-contact li > a {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 38px;
  font-size: var(--fs-sm); color: var(--text2); text-decoration: none;
}
.foot-contact li > a { min-height: 44px; }
.foot-contact li > a:hover { color: var(--accent); }
.foot-contact li > a:hover .fc-ico {
  border-color: var(--accent-line); color: var(--accent);
}
.fc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--glass-brd);
  color: var(--text3);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  transition: color var(--tr), border-color var(--tr);
}
.foot-contact .brk { overflow-wrap: anywhere; }

.foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--glass-brd);
}
.foot-bottom p { font-size: var(--fs-sm); color: var(--text3); max-width: none; }

/* ── Ikon sosial bundar ───────────────────────────────────────────
   44px penuh, sesuai aturan target sentuh — bukan cuma sebesar ikonnya. */
.foot-social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.fs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-brd);
  color: var(--text2); text-decoration: none;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  transition: color var(--tr), border-color var(--tr),
              background var(--tr), transform var(--tr);
}
.fs-btn:hover {
  color: var(--accent); border-color: var(--accent-line);
  background: var(--glass-2); transform: translateY(-2px);
}

/* ═══ LEGAL & INFO ════════════════════════════════════════════════ */
.legal { max-width: 780px; }
.legal h2 { margin: var(--s8) 0 var(--s4); font-size: var(--fs-lg); }
.legal p, .legal li { font-size: var(--fs-base); color: var(--text2); line-height: 1.8; }
.legal ul, .legal ol { margin: var(--s4) 0 var(--s5) 24px; display: grid; gap: 8px; }

.info-list { list-style: none; display: grid; gap: var(--s6); }
.info-list li { display: flex; gap: var(--s4); }
.info-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
.info-k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 1px;
          text-transform: uppercase; color: var(--text3); }
.info-v { margin-top: 3px; font-size: var(--fs-base); color: var(--text); min-width: 0; }
.info-v a { color: var(--accent); text-decoration: none; }

/* ═══ RESPONSIF ═══════════════════════════════════════════════════
   Angka breakpoint mengikuti Protokol 03 §6.1 */

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .hero-art { max-width: 540px; width: 100%; margin: var(--s4) auto 0; }
}

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .foot-brand { grid-column: 1 / -1; }
  .calc { grid-template-columns: 1fr; }
  .calc-arrow { transform: rotate(90deg); }
}

@media (max-width: 768px) {
  .nav { gap: var(--s3); }
  .nav-mid { display: none; }
  .nav-right .btn-ghost, .nav-right .tool-login { display: none; }
  .burger { display: inline-flex; }

  .nav-panel {
    position: absolute; top: var(--navbar-h); left: 0; right: 0; z-index: 99;
    display: none; flex-direction: column; gap: var(--s2);
    padding: var(--s5) var(--s6) var(--s6);
    /* Pekat, bukan kaca tipis — lihat catatan --panel-glass di tokens.css */
    background: var(--panel-glass);
    border-bottom: 1px solid var(--glass-brd);
    box-shadow: var(--glass-shadow-hi);
  }
  .nav-panel.open { display: flex; }

  /* Kunci gulir halaman selagi panel terbuka. Tanpa ini, menu melayang diam
     di tempatnya sementara isi halaman meluncur di belakangnya — terbaca
     seperti kerusakan, bukan seperti menu. Kelasnya dipasang ui.js. */
  body.nav-open { overflow: hidden; }

  .nav-panel a {
    display: flex; align-items: center; min-height: 48px; padding: 0 12px;
    border-radius: var(--radius-sm); color: var(--text2); text-decoration: none; font-weight: 500;
  }
  .nav-panel a:hover { background: var(--glass-2); color: var(--text); }
  .nav-panel a[aria-current] { color: var(--accent); background: var(--accent-soft); }
  .nav-panel hr { border: none; border-top: 1px solid var(--glass-brd); margin: var(--s2) 0; }

  .sec  { padding: var(--s9) 0; }
  .hero { padding: var(--s9) 0 var(--s7); }
  .cta-box { padding: var(--s8) var(--s5); }
  .board { margin-top: var(--s7); }
}

/* ── Petunjuk "masih bisa digeser ke kanan" ────────────────────────
   Ambangnya 600px, bukan 768px, dan itu dihitung bukan ditebak:
     .dtable beranda ±556px · .cmp harga 540px
     lebar wadah = viewport − 48px padding .wrap
   Di 640px wadahnya 592px — kedua tabel masih muat, jadi bayangan
   tepi di situ justru berbohong. Di 600px wadahnya 552px, keduanya
   sudah menggantung. */
@media (max-width: 600px) {
  .board::after,
  .card:has(> .table-scroll)::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    pointer-events: none; z-index: 1;
    background: linear-gradient(to left, var(--abyss), var(--abyss-fade));
  }
  .board::after { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}

@media (max-width: 600px) {
  /* Tombol "Daftar" sudah ada di panel hamburger — di sini dilepas
     supaya navbar muat di layar 375px tanpa scroll horizontal. */
  .nav-right > .btn-primary { display: none; }
  /* Pemilih bahasa jadi ikon saja */
  .lang-wrap #langBtn span { display: none; }
  .lang-wrap #langBtn { padding: 0; }
}

@media (max-width: 480px) {
  :root { --navbar-h: 56px; }
  .wrap, .nav { padding-left: var(--s4); padding-right: var(--s4); }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: var(--fs-base); }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-brand { grid-column: auto; }
  .cta-row .btn { width: 100%; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .bill-toggle { width: 100%; justify-content: center; }
  .bill-btn { padding: 0 14px; flex: 1 1 auto; justify-content: center; }
  .plan { padding: var(--s7) var(--s5); }
  .sec { padding: var(--s8) 0; }
  .board-head, .board-foot { padding: 12px var(--s4); }
  .dtable th, .dtable td { padding: 11px 13px; }
  .cta-box { padding: var(--s7) var(--s4); border-radius: var(--radius-lg); }
}

@media (max-width: 380px) {
  .wrap, .nav { padding-left: var(--s3); padding-right: var(--s3); }
  .nav-right { gap: 6px; }
  .tool { padding: 0 8px; }
}

@media print {
  .nav-wrap, .site-foot, .cta-row, .bill-toggle { display: none; }
  body::before, body::after, #seaCanvas { display: none; }
}