/* Shared customer-facing theme for packages, guides, portfolio and articles. */
:root {
  --cream: #071d17;
  --paper: #0d2a22;
  --ink: #f4eedf;
  --muted: rgba(244, 238, 223, .7);
  --sage: #9dac7c;
  --sage-dark: #d5b96f;
  --gold: #c9a65c;
  --coral: #ff7656;
  --line: rgba(244, 238, 223, .14);
  --cinema-deep: #051712;
  --cinema: #071d17;
  --cinema-mid: #0d2a22;
  --cinema-raised: #12352a;
  --ivory: #f4eedf;
  --ivory-soft: rgba(244, 238, 223, .72);
  --ivory-faint: rgba(244, 238, 223, .08);
  --antique-gold: #c9a65c;
}

html {
  background: var(--cinema-deep);
  color-scheme: dark;
}

body {
  color: var(--ivory);
  background:
    radial-gradient(circle at 88% 4%, rgba(201, 166, 92, .1), transparent 32rem),
    linear-gradient(180deg, var(--cinema) 0%, var(--cinema-deep) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

a { color: var(--antique-gold); }
a:hover { color: #e4c97f; }

.site-header {
  background: rgba(5, 23, 18, .9);
  border-color: var(--line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
}

.nav { min-height: 68px; }
.brand-logo { color: var(--ivory); }
.brand-logo b { color: var(--ivory); }
.brand-logo b em { color: var(--antique-gold); }
.brand-logo img {
  border: 1px solid rgba(201, 166, 92, .35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.breadcrumb,
.breadcrumb a { color: var(--ivory-soft); }
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--antique-gold); }

.hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 166, 92, .12), transparent 30rem),
    linear-gradient(180deg, #09251d 0%, var(--cinema) 100%);
  border-bottom: 1px solid var(--line);
}

.hero h1,
h1,
h2,
h3,
h4 {
  color: var(--ivory);
  text-wrap: balance;
}

.eyebrow,
.date,
.post-meta,
.tier,
.price,
.read-more,
.tldr-tag { color: var(--antique-gold); }

.lede,
.lead,
.hero p,
main p,
main li,
.post-card p,
.why p,
.card-body p,
.demo-body p,
.tldr p,
.callout p,
.related span,
.demo-meta,
.price-note { color: var(--ivory-soft); }

.section,
article,
main { background-color: transparent; }

.pkg,
.addons,
.comparison,
.post-card,
.empty-note,
.why,
.callout,
.toc,
.tldr,
.questions,
.faq,
.faq-list details,
.related a,
.demo-card,
.price-table,
.servis-table,
.pros,
.cons,
.own {
  background: rgba(13, 42, 34, .86);
  border-color: var(--line);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .13);
}

.pkg:hover,
.post-card:hover,
.related a:hover,
.demo-card:hover {
  border-color: rgba(201, 166, 92, .62);
  background: rgba(18, 53, 42, .96);
}

.pkg.featured {
  border-color: var(--antique-gold);
  background: linear-gradient(180deg, rgba(201, 166, 92, .11), rgba(13, 42, 34, .94));
}

.pkg .package-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.pkg .package-top h3 { margin: 0; font-size: 2.15rem; }
.pkg .package-note { margin: 2px 0 0; color: var(--ivory-soft); font-size: .8rem; }
.pkg .package-mark {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 166, 92, .42);
  border-radius: 50%;
  background: rgba(201, 166, 92, .08);
  color: var(--antique-gold);
}
.pkg .package-mark svg { width: 23px; height: 23px; fill: currentColor; }
.pkg .price { margin: 4px 0 20px; line-height: 1; }
.pkg .price s { display: block; margin: 0 0 4px; color: rgba(244, 238, 223, .48); font-size: 1.05rem; }
.pkg .price strong { display: block; color: var(--ivory); font: 600 2.6rem 'Cormorant Garamond', serif; }
.pkg .price small { display: block; margin-top: 8px; color: #ff8a73; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pkg .feat-list { list-style: none; display: grid; gap: 10px; margin: 0 0 28px; padding: 0; font-size: .84rem; }
.pkg .feat-list li { display: flex; align-items: flex-start; gap: 9px; color: var(--ivory-soft); }
.pkg .feat-list li::before { content: "✓"; flex: none; color: var(--antique-gold); font-weight: 700; }
.pkg .feat-list li.hl { color: var(--ivory); font-weight: 700; }
.pkg .pkg-actions { grid-template-columns: 1fr; gap: 10px; }
.pkg .pkg-actions .cta { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.pkg .pkg-actions .cta.ghost { border: 1px solid rgba(244, 238, 223, .38); color: var(--ivory); background: transparent; }
.pkg .pkg-actions .cta.ghost:hover,
.pkg .pkg-actions .cta.ghost:focus-visible { border-color: var(--antique-gold); color: var(--antique-gold); background: rgba(201, 166, 92, .08); }
.pkg .popular-ribbon { top: 16px; right: 16px; left: auto; transform: none; border-radius: 5px; }

.addons li {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(5, 31, 24, .7);
  border-color: rgba(201, 166, 92, .24);
}

.addons .addon-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: var(--ivory);
  line-height: 1.25;
}

.addons .addon-copy small {
  color: var(--ivory-soft);
  font-size: .72rem;
  font-weight: 400;
}

.addons .addon-price {
  flex: none;
  white-space: nowrap;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: var(--antique-gold);
  color: var(--cinema-deep);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.popular-ribbon {
  background: var(--antique-gold);
  color: var(--cinema-deep);
}

.features li,
.comparison th,
.comparison td,
.price-table th,
.price-table td,
.servis-table th,
.servis-table td {
  color: var(--ivory-soft);
  border-color: var(--line);
  background: transparent;
}

.features li.bold,
.comparison th,
.price-table th,
.servis-table th,
.related b,
.post-card h2,
.post-card h3,
.card-body h2,
.card-body h3,
.demo-body h2,
.demo-body h3,
strong { color: var(--ivory); }

.comparison .yes,
.features .yes { color: #c8dca0; }
.comparison .no,
.features .no { color: rgba(244, 238, 223, .38); }

/* Highlighted table rows previously kept their light-theme background,
   making the shared ivory text nearly invisible. */
.price-table .highlight td,
.servis-table .own,
.servis-table .own td {
  background: rgba(201, 166, 92, .14);
  color: var(--ivory);
}

.pros { border-left-color: #9fbd75; }
.pros b { color: #c8dca0; }
.cons { border-left-color: #dca35a; }
.cons b { color: #efc27f; }

.toc ol,
.toc ul,
.toc li { color: var(--ivory-soft); }

.cta-band {
  background: linear-gradient(125deg, #12392d, #0a271f);
  border: 1px solid rgba(201, 166, 92, .24);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}
.cta-band h2,
.cta-band h3,
.cta-band p { color: var(--ivory); }

.cta,
.btn.tempah,
.pkg-actions .primary,
.cta-band .cta {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--cinema-deep);
  box-shadow: 0 12px 28px rgba(255, 118, 86, .18);
}

.cta:hover,
.btn.tempah:hover,
.pkg-actions .primary:hover,
.cta-band .cta:hover {
  background: #ff8a6f;
  border-color: #ff8a6f;
  color: var(--cinema-deep);
  transform: translateY(-1px);
}

.cta.ghost,
.btn.ghost,
.pkg-actions .ghost,
.pkg-actions .secondary,
.cta-band .cta.ghost {
  background: transparent;
  border-color: rgba(201, 166, 92, .68);
  color: var(--ivory);
  box-shadow: none;
}

.cta.ghost:hover,
.btn.ghost:hover,
.pkg-actions .ghost:hover,
.pkg-actions .secondary:hover,
.cta-band .cta.ghost:hover {
  background: rgba(201, 166, 92, .12);
  color: var(--ivory);
}

.card,
.card-head,
.card-body,
.demo-body { background-color: var(--cinema-mid); }
.card,
.demo-card { border-color: var(--line); }

.callout,
.tldr {
  border-left-color: var(--antique-gold);
  background: linear-gradient(110deg, rgba(201, 166, 92, .12), rgba(13, 42, 34, .9));
}
.tldr strong { color: var(--ivory); }
.tldr-tag {
  background: var(--antique-gold);
  color: var(--cinema-deep);
}

.toc a,
.related a,
.post-card,
.demo-card { color: inherit; }

.faq summary,
.faq-list summary { color: var(--ivory); }
.faq p,
.faq-list p { color: var(--ivory-soft); }

.back-top {
  background: var(--antique-gold);
  color: var(--cinema-deep);
  border-color: transparent;
}

.site-footer {
  background: #051712;
  border-color: var(--line);
  color: rgba(244, 238, 223, .56);
}
.site-footer a { color: var(--ivory-soft); }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--antique-gold); }

:focus-visible {
  outline: 2px solid var(--antique-gold);
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .nav { padding-inline: 18px; }
  .breadcrumb { max-width: 48%; text-align: right; line-height: 1.35; }
  .hero { padding-top: 54px; }
  .section.wrap { padding-inline: 24px; }
  .hero h1 { font-size: clamp(2rem, 10vw, 3rem); overflow-wrap: anywhere; }
  .post-meta { flex-wrap: wrap; gap: 6px 12px; line-height: 1.5; }
  .post-meta > span { max-width: 100%; }
  .lede,
  .lead { font-size: .96rem; }
  .pkg,
  .post-card,
  .why,
  .callout,
  .toc,
  .tldr,
  .related a { border-radius: 14px; }
}

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