/* =============================================================================
   Serpee: the public pages beyond the homepage (/fitur, /cara-kerja, /harga,
   /faq, /tentang, /kontak, the policies, the 404 page)
   =============================================================================

   These pages wear the homepage's own stylesheet (coba.html, inlined by
   site.ts) and its components: the glass header, the sky, the paper bento
   cards, the dark steps block, the ruled FAQ, the plan cards and the orange
   closing block. This sheet holds only what the homepage has no use for,
   on the homepage's own tokens (--ink, --brand, --paper, --rule, --sh-rest).
   ========================================================================== */

/* the page you are on, in the header: ink, with the brand's dot under it */
.top-nav a[aria-current="page"] { position: relative; color: var(--ink); }
.top-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--brand);
}
.top.is-dark .top-nav a[aria-current="page"] { color: #fff; }
.top-menu nav a[aria-current="page"] { background: rgba(60, 45, 30, .06); }

/* ---------- a page's opening: the hero's sky and type, centred ------------ */

.page-hero { padding: 150px 0 72px; }
.page-hero .wrap { max-width: 960px; }
.page-hero h1 { max-width: 15em; margin-inline: auto; }
.page-hero .cta-row { justify-content: center; }
.page-hero .micro { margin-inline: auto; }

/* /harga opens on the homepage's pricing section, its heading the page's title */
.pricing.page-top { padding-top: 150px; }
.pricing.page-top h1 { max-width: 13em; margin-inline: auto; }

/* ---------- /fitur: what one keyword gets ---------------------------------- */

.feat-sec { padding-top: clamp(8px, 2vw, 24px); }
.feat-grid { display: grid; gap: 16px; }
.feat { position: relative; }
.feat .txt { padding: 26px 26px 28px; }
.feat h3 { margin: 0 0 .45em; font-size: 1.22rem; font-weight: 700; font-stretch: 104%; }
.feat .lead { margin: 0; color: var(--mute); font-size: .97rem; line-height: 1.6; }
.feat-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.feat-ico .ico { width: 24px; height: 24px; }

/* what Serpee does not do: ruled rows, like the homepage's manual-vs-Serpee list */
.limits { padding-top: 0; }
.limits-list { max-width: 820px; margin: 32px auto 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.limits-list li { position: relative; display: grid; gap: 4px; padding: 18px 4px 18px 34px; border-bottom: 1px solid var(--rule); }
.limits-list li::before { content: "–"; position: absolute; left: 8px; top: 17px; color: var(--faint); font-weight: 800; }
.limits-list b { color: var(--ink); font-weight: 680; }
.limits-list span { color: var(--mute); }

/* ---------- /cara-kerja: six steps in the dark block, then one check ----- */

.steps-six { margin-top: 36px; }
.how-grid { display: grid; max-width: 1000px; margin: 36px auto 0; column-gap: 48px; }

/* ---------- /faq: the homepage's questions, in groups --------------------- */

.faq-sec { padding-top: clamp(8px, 2vw, 24px); }
.faq-group { max-width: 780px; margin: 0 auto 44px; }
.faq-group > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink2);
  font: 500 .8125rem/1.2 var(--mono);
  letter-spacing: .01em;
}
.faq-group > h2::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.faq-group .faq { margin-top: 12px; }
.page-sub { max-width: 780px; margin: 0 auto; color: var(--mute); text-align: center; }
.page-sub a { color: var(--brand-ink); font-weight: 600; }
/* a phone number reads as one piece: never "+62 812-" on one line and the rest on the next */
.tel { white-space: nowrap; }

/* ---------- /harga: the plans side by side, on paper ---------------------- */

.plan-compare { padding-top: clamp(24px, 4vw, 48px); }
.compare-wrap {
  max-width: 900px;
  margin: 32px auto 0;
  overflow-x: auto;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--sh-rest);
}
.compare { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.compare th, .compare td { padding: 14px 18px; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.compare thead th, .compare thead td { border-top: 0; color: var(--ink); font-size: 1.02rem; font-weight: 700; }
.compare tbody th { color: var(--mute); font-weight: 500; }
.compare td { color: var(--ink2); }
.compare .is-pick { background: rgba(255, 153, 28, .07); }
.compare td.is-none { color: var(--faint); }
.compare thead .is-pick { box-shadow: inset 0 3px 0 var(--brand); }
.compare-money td { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-group th { padding-top: 20px; color: var(--ink); font-weight: 700; }
.compare-note { max-width: 640px; margin: 16px auto 0; color: var(--mute); font-size: .92rem; text-align: center; }

/* ---------- the policies, /tentang and /kontak: one column of text ------- */

.doc-head { padding: 150px 0 36px; }
.doc-col { max-width: calc(46rem + 2 * var(--gut)); }
.doc-col.doc-wide { max-width: calc(58rem + 2 * var(--gut)); }
.doc-head h1 { margin: 0; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; }
.doc-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--ink2);
  font: 500 .8125rem/1.2 var(--mono);
}
.doc-meta::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.doc-head .doc-lede { max-width: none; margin: 20px 0 0; color: var(--ink2); font-size: 1.12rem; }
.doc { padding-bottom: clamp(64px, 9vw, 112px); }
.doc section { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rule); }
.doc section:first-child { margin-top: 8px; }
.doc h2 { margin: 0 0 12px; font-size: 1.3rem; font-weight: 680; line-height: 1.25; letter-spacing: -.02em; }
.doc p, .doc li { color: var(--ink2); font-size: 1.02rem; line-height: 1.7; }
.doc p { margin: 0 0 12px; }
.doc ul { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 20px; }
.doc li::marker { color: var(--brand-ink); }
.doc a, .doc-head a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brand); }
.doc a:hover, .doc-head a:hover { color: var(--brand-ink); }
.doc b { color: var(--ink); font-weight: 650; }
.doc code { font-family: var(--mono); font-size: .92em; }

/* ---------- wider screens ------------------------------------------------- */

@media (min-width: 640px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero .cta-row .btn-primary { flex: 0 0 auto; }
}
@media (min-width: 900px) {
  .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .limits-list li { grid-template-columns: 1fr 1.5fr; gap: 0 36px; align-items: baseline; }
  .steps-six { grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- phones (the homepage's own break) ----------------------------- */

@media (max-width: 639px) {
  .page-hero { padding: 96px 0 26px; }
  .pricing.page-top { padding-top: 96px; }
  .doc-head { padding: 100px 0 20px; }
  .feat .txt { padding: 20px; }
  .feat-ico { width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; }
  .feat-ico .ico { width: 21px; height: 21px; }
  .limits-list { margin-top: 20px; }
  .limits-list li { padding: 14px 2px 14px 28px; font-size: .95rem; }
  .limits-list li::before { left: 6px; top: 13px; }
  .how-grid { margin-top: 18px; }
  .faq-group { margin-bottom: 32px; }
  .compare-wrap { margin-top: 20px; border-radius: 20px; }
  .compare { font-size: 12.5px; }
  .compare th, .compare td { padding: 10px 6px; }
  .compare th:first-child, .compare td:first-child { padding-left: 12px; }
  .compare-money td { font-size: 12px; letter-spacing: -.01em; }
  .doc p, .doc li { font-size: .98rem; }
}