/* ============================================================
   Plume Host — theme.css (production)
   WHMCS 9.x client theme · templates/plume/assets/css/theme.css
   Bootstrap 4 compatible. Self-hosted fonts only.
   ============================================================ */

/* Self-hosted typefaces — drop the woff2 files into
   templates/plume/assets/fonts/ alongside this CSS. */

@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/archivo-black-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
}

:root {
  /* ── Color tokens ─────────────────────────── */
  --cream-bg:      #F5EDE3;
  --cream-bg-2:    #EFE5D8;   /* row hover, subtle band */
  --cream-card:    #FFFDF9;
  --line-cream:    #E8DDD0;
  --line-cream-2:  #D9CCBC;
  --ink:           #0E1014;
  --ink-2:         #1A1D22;
  --ink-3:         #2E3138;
  --muted:         #5D5042; /* WCAG AA on cream ~5.4:1 (was #7A6E60 / 4.39:1) */
  --muted-2:       #8D8270; /* slightly darker for AA where used on cream */
  --rust:          #B85C3C;
  --rust-hover:    #9C4A2D;
  --rust-soft:     rgba(184, 92, 60, 0.12);
  --rust-ring:     rgba(184, 92, 60, 0.30);
  --green:         #4B7A4B;
  --warn:          #B8893C;

  /* ── Typography ───────────────────────────── */
  --font-heading: "Archivo Black", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Spacing scale ────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-card:  0 1px 0 rgba(14, 16, 20, 0.04), 0 6px 18px -8px rgba(14, 16, 20, 0.08);
  --shadow-hover: 0 1px 0 rgba(14, 16, 20, 0.05), 0 14px 32px -10px rgba(14, 16, 20, 0.18);
  --shadow-lift:  0 24px 48px -20px rgba(14, 16, 20, 0.25);
}

/* ── Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--ink); color: var(--cream-bg); }

/* tabular numerals for everything financial */
.tnum, .price, .price-large, .price-renew, td.num, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── App shell (mocks the browser viewport) ──── */
.ph-app {
  min-height: 100vh;
  background: var(--cream-bg);
  display: flex;
  flex-direction: column;
}

.ph-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: fadeUp .35s ease-out both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Container ────────────────────────────────── */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 880px; }
.container-wide { max-width: 1320px; }

/* ── Header ───────────────────────────────────── */
.ph-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 237, 227, 0.85);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line-cream);
}
.ph-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.ph-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ph-logo img { height: 22px; width: auto; display: block; }
.ph-nav {
  display: flex; align-items: center; gap: 4px;
}
.ph-nav a {
  position: relative;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  border-radius: var(--r-sm);
  transition: background .15s ease, color .15s ease;
}
.ph-nav a:hover { background: var(--cream-bg-2); }
.ph-nav a.is-active { color: var(--ink); }
.ph-nav a.is-active::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--rust); border-radius: 2px;
}
.ph-actions { display: flex; align-items: center; gap: 8px; }

.ph-cart-btn, .ph-account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-cream);
  background: var(--cream-card);
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.ph-cart-btn:hover, .ph-account-btn:hover { background: var(--cream-bg-2); border-color: var(--line-cream-2); }
.ph-cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  background: var(--rust); color: var(--cream-card);
  border-radius: 9px;
  font-size: 11px; font-weight: 700;
  padding: 0 5px;
  font-variant-numeric: tabular-nums;
}

.ph-burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--line-cream);
  background: var(--cream-card);
}
.ph-burger span {
  display: block; width: 16px; height: 2px;
  background: var(--ink); position: relative;
}
.ph-burger span::before, .ph-burger span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
}
.ph-burger span::before { top: -5px; }
.ph-burger span::after  { top:  5px; }

/* ── Buttons ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink); color: var(--cream-bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--rust-hover); border-color: var(--rust-hover); color: #fff; }
.btn-secondary {
  background: var(--cream-card); color: var(--ink);
  border-color: var(--line-cream-2);
}
.btn-secondary:hover { background: var(--cream-bg-2); border-color: var(--ink); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--cream-bg-2); }
.btn-rust {
  background: var(--rust); color: #fff;
  border-color: var(--rust);
}
.btn-rust:hover {
  background: var(--rust-hover); border-color: var(--rust-hover);
  color: #fff;
}
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-icon { width: 38px; height: 38px; padding: 0; }

/* ── Rust dot motif (Active / Most Popular badge) ── */
.rust-dot {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--rust);
  border-radius: 2px;
  flex-shrink: 0;
}
.rust-dot-sm { width: 7px; height: 7px; border-radius: 1.5px; }
.rust-dot-lg { width: 14px; height: 14px; border-radius: 3px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.badge-rust { background: var(--ink); color: var(--cream-bg); border-color: var(--ink); }
.badge-soft { background: var(--rust-soft); color: var(--rust); border-color: transparent; }
.badge-green { background: rgba(75, 122, 75, 0.12); color: var(--green); border-color: transparent; }

/* ── Card ─────────────────────────────────────── */
.card {
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.card-tight { padding: 16px; }
.card-hover { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card-hover:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: var(--line-cream-2); }

/* ── Hero ─────────────────────────────────────── */
.hero {
  position: relative;
  padding: 92px 0 64px;
  overflow: hidden;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(44px, 6.8vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 12ch;
}
.hero h1 .accent-dot {
  display: inline-block;
  width: 0.42em; height: 0.42em;
  background: var(--rust);
  border-radius: 4px;
  vertical-align: 0.06em;
  margin: 0 0.04em;
}
.hero-sub {
  margin-top: 22px;
  font-size: 18px;
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.5;
}
.hero-cta {
  margin-top: 36px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.hero-meta {
  margin-top: 40px;
  display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.hero-meta-item { display: inline-flex; align-items: center; gap: 8px; }

/* Drifting feather */
.feather-drift {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 12px 24px rgba(14, 16, 20, 0.07));
}
.feather-drift svg { display: block; }
.feather-1 {
  right: -40px; top: 60px;
  width: 380px;
  animation: drift1 18s ease-in-out infinite;
}
.feather-2 {
  right: 280px; top: 220px;
  width: 180px;
  opacity: 0.55;
  animation: drift2 22s ease-in-out infinite;
}
.feather-3 {
  right: 80px; top: 360px;
  width: 110px;
  opacity: 0.35;
  animation: drift3 26s ease-in-out infinite;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) rotate(8deg); }
  50%      { transform: translate(-22px, 18px) rotate(2deg); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) rotate(-14deg); }
  50%      { transform: translate(14px, -22px) rotate(-22deg); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) rotate(26deg); }
  50%      { transform: translate(-18px, 12px) rotate(18deg); }
}

/* ── Plan grid ────────────────────────────────── */
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.section-head { margin-bottom: 36px; }
.section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust-hover); margin-bottom: 16px; }
.section-title { font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -0.025em; max-width: 16ch; }
.section-lede  { margin-top: 14px; color: var(--muted); font-size: 17px; max-width: 60ch; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
.plan-card {
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.plan-card:hover { border-color: var(--line-cream-2); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.plan-card.is-featured {
  background: var(--ink);
  color: var(--cream-bg);
  border-color: var(--ink);
  box-shadow: var(--shadow-lift);
  transform: translateY(-6px);
}
.plan-card.is-featured h3 { color: var(--cream-bg); }
.plan-card.is-featured .plan-feat li { color: rgba(245, 237, 227, 0.85); }
.plan-card.is-featured .plan-renew { color: var(--muted-2); }
.plan-card.is-featured .plan-tag { background: var(--rust-hover); color: var(--cream-bg); border-color: var(--rust-hover); }

.plan-tag {
  position: absolute; top: -10px; left: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink); color: var(--cream-bg);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
}
.plan-name { font-size: 22px; letter-spacing: -0.01em; }
.plan-tag-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.plan-blurb { font-size: 13.5px; color: var(--muted); margin-top: 6px; min-height: 38px; }
.plan-card.is-featured .plan-blurb { color: var(--muted-2); }

.plan-price {
  margin-top: 22px;
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-heading);
}
.plan-price .currency { font-size: 22px; line-height: 1; opacity: 0.7; margin-right: 2px; transform: translateY(-6px); display: inline-block; }
.plan-price .amount   { font-size: 52px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.plan-price .cents    { font-size: 22px; line-height: 1; opacity: 0.7; }
.plan-price .term     { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 8px; font-family: var(--font-body); align-self: center; }
.plan-card.is-featured .plan-price .term { color: var(--muted-2); }

.plan-renew {
  margin-top: 6px; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.plan-feat {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13.5px;
  flex: 1;
}
.plan-feat li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--ink-3);
}
.plan-feat li .check {
  flex-shrink: 0; width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: var(--rust-soft); color: var(--rust);
  margin-top: 2px;
}
.plan-card.is-featured .plan-feat li .check { background: rgba(245, 237, 227, 0.12); color: var(--cream-bg); }
.plan-cta { margin-top: 24px; }

/* ── Trust band ───────────────────────────────── */
.trust-band {
  border-top: 1px solid var(--line-cream);
  border-bottom: 1px solid var(--line-cream);
  padding: 36px 0;
  background: var(--cream-bg-2);
}
.trust-band-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.trust-item { display: flex; flex-direction: column; gap: 6px; }
.trust-item .num {
  font-family: var(--font-heading);
  font-size: 36px; line-height: 1; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 6px;
}
.trust-item .label { font-size: 13px; color: var(--muted); }

/* ── Footer CTA ───────────────────────────────── */
.footer-cta {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.footer-cta-card {
  background: var(--ink);
  color: var(--cream-bg);
  border-radius: var(--r-xl);
  padding: 64px 56px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}
.footer-cta-card h2 {
  color: var(--cream-bg);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1; letter-spacing: -0.03em;
  max-width: 18ch;
}
.footer-cta-card p { color: rgba(245, 237, 227, 0.75); margin-top: 14px; max-width: 44ch; font-size: 16px; }

/* ── Footer ───────────────────────────────────── */
.ph-footer {
  background: var(--ink);
  color: var(--cream-bg);
  padding: 64px 0 28px;
}
.ph-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(245, 237, 227, 0.1);
}
.ph-footer h4 {
  color: var(--cream-bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.6;
}
.ph-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ph-footer a { color: rgba(245, 237, 227, 0.78); font-size: 14px; transition: color .15s ease; }
.ph-footer a:hover { color: var(--cream-bg); }
.ph-footer-brand img { height: 28px; }
.ph-footer-brand p { margin-top: 14px; color: rgba(245, 237, 227, 0.6); font-size: 13px; line-height: 1.6; max-width: 28ch; }
.ph-footer-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(245, 237, 227, 0.55);
}
.lang-picker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(245, 237, 227, 0.06);
  border: 1px solid rgba(245, 237, 227, 0.12);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; color: var(--cream-bg);
  cursor: pointer;
}
.lang-picker:hover { background: rgba(245, 237, 227, 0.1); }

/* ── Forms ────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label, label.field-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-2);
}
.field-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.field-error { font-size: 12px; color: var(--rust); margin-top: 2px; }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--cream-bg);
  border: 1px solid var(--line-cream-2);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--rust);
  background: var(--cream-card);
  box-shadow: 0 0 0 4px var(--rust-ring);
}
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%230E1014' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .input-suffix {
  padding: 0 14px;
  display: inline-flex; align-items: center;
  background: var(--cream-card);
  border: 1px solid var(--line-cream-2); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px; color: var(--muted); font-weight: 500;
}

.check-line { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-line input[type="checkbox"], .check-line input[type="radio"] { accent-color: var(--rust); margin-top: 3px; }

/* ── Auth card ────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 68px);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
  position: relative; overflow: hidden;
}
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  position: relative; z-index: 2;
}
.auth-card h1 {
  font-size: 30px; letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.auth-card .auth-sub { color: var(--muted); margin-bottom: 28px; font-size: 14.5px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em;
  margin: 20px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line-cream);
}
.auth-foot { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 18px; }
.auth-foot a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--rust); }

/* ── Stepper ──────────────────────────────────── */
.stepper {
  display: flex; align-items: center; gap: 0;
  margin: 32px 0 28px;
  font-size: 13px;
}
.stepper-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  color: var(--muted);
  border: 1px solid var(--line-cream);
  background: var(--cream-card);
  position: relative;
}
.stepper-item:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); padding-left: 14px; }
.stepper-item:last-child  { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.stepper-item + .stepper-item { border-left: 0; }
.stepper-item .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cream-bg-2); color: var(--muted);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.stepper-item.is-done   { color: var(--ink); }
.stepper-item.is-done .step-num { background: var(--ink); color: var(--cream-bg); }
.stepper-item.is-current { color: var(--ink); background: var(--cream-card); border-color: var(--ink); z-index: 1; }
.stepper-item.is-current .step-num { background: var(--rust); color: var(--cream-bg); }

/* ── Tables ───────────────────────────────────── */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl thead th {
  background: var(--ink); color: var(--cream-bg);
  text-align: left; padding: 12px 16px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.tbl thead th:first-child { border-top-left-radius: var(--r-md); }
.tbl thead th:last-child  { border-top-right-radius: var(--r-md); text-align: right; }
.tbl tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--line-cream);
  font-size: 14px; vertical-align: middle;
}
.tbl tbody tr:hover td { background: var(--cream-bg-2); }
.tbl tbody td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Order layout ─────────────────────────────── */
.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
}
.order-summary {
  position: sticky; top: 92px;
}
.order-summary .summary-row {
  display: flex; justify-content: space-between; padding: 10px 0;
  font-size: 14px;
}
.order-summary .summary-row.total {
  border-top: 1px solid var(--line-cream); margin-top: 8px; padding-top: 16px;
  font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.01em;
}

/* ── Configure (product options) ──────────────── */
.opt-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.opt-card {
  border: 1px solid var(--line-cream);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--cream-bg);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  display: flex; align-items: flex-start; gap: 12px;
}
.opt-card:hover { border-color: var(--ink-3); }
.opt-card.is-selected {
  border-color: var(--ink); background: var(--cream-card);
  box-shadow: 0 0 0 1px var(--ink);
}
.opt-card .opt-mark {
  width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--line-cream-2);
  flex-shrink: 0; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-card);
}
.opt-card.is-selected .opt-mark { border-color: var(--ink); }
.opt-card.is-selected .opt-mark::after {
  content: ""; width: 8px; height: 8px; background: var(--rust); border-radius: 50%;
}
.opt-title { font-weight: 600; font-size: 14px; }
.opt-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.opt-price { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }

/* ── Dashboard ────────────────────────────────── */
.dash-grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px;
  padding: 32px 0 64px;
  align-items: start;
}
.dash-side {
  position: sticky; top: 92px;
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-lg);
  padding: 18px;
}
.dash-user {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-cream);
}
.dash-avatar {
  width: 36px; height: 36px;
  background: var(--ink); color: var(--cream-bg);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 14px;
}
.dash-user-name { font-weight: 600; font-size: 14px; }
.dash-user-mail { font-size: 12px; color: var(--muted); }
.dash-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.dash-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink-2); font-weight: 500;
  transition: background .15s ease;
}
.dash-nav a:hover { background: var(--cream-bg-2); }
.dash-nav a.is-active { background: var(--ink); color: var(--cream-bg); }
.dash-nav a .nav-ico { width: 16px; height: 16px; opacity: 0.8; }

.dash-hello {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.dash-hello h1 { font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.025em; line-height: 1; }
.dash-hello p { color: var(--muted); margin-top: 8px; font-size: 15px; }

.dash-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-md);
  padding: 18px;
}
.kpi-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.kpi-val {
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: 32px; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

.widget-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px;
  align-items: start;
}
.widget { background: var(--cream-card); border: 1px solid var(--line-cream); border-radius: var(--r-lg); }
.widget-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; border-bottom: 1px solid var(--line-cream);
}
.widget-head h3 { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0; }
.widget-head a { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.widget-head a:hover { color: var(--rust); }
.widget-body { padding: 6px 0; }
.widget-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-cream);
}
.widget-row:last-child { border-bottom: 0; }
.widget-row .row-main { flex: 1; min-width: 0; }
.widget-row .row-title { font-weight: 600; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.widget-row .row-sub   { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.widget-row .row-right { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }

.qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px; }
.qa-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--cream-bg);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
  text-align: left;
}
.qa-btn:hover { background: var(--cream-bg-2); border-color: var(--ink); }
.qa-btn .ico {
  width: 30px; height: 30px;
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Complete page ────────────────────────────── */
.complete-wrap {
  padding: 80px 0;
  text-align: center;
  max-width: 640px; margin: 0 auto;
}
.complete-icon {
  width: 80px; height: 80px;
  background: var(--ink); color: var(--cream-bg);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  position: relative;
}
.complete-icon::after {
  content: ""; position: absolute;
  inset: -10px;
  border: 2px solid var(--rust-soft);
  border-radius: 50%;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
.complete-wrap h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.03em; line-height: 1; }
.complete-wrap p { color: var(--muted); margin-top: 16px; font-size: 17px; }
.complete-receipt {
  margin: 32px auto 0;
  text-align: left;
  padding: 24px;
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-lg);
}

/* ── Promo / hero strip on inner pages ────────── */
.page-head {
  padding: 72px 0 28px;
}
.page-head h1 { font-size: clamp(40px, 5.2vw, 64px); letter-spacing: -0.03em; line-height: 0.98; }
.page-head .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 18px;
}
.page-head .crumb a:hover { color: var(--rust); }
.page-head .lede { color: var(--muted); margin-top: 14px; font-size: 17px; max-width: 56ch; }

/* ── Main content wrapper ───────────────────────
   Most plume page templates don't wrap their content in `.container`,
   relying on `<main class="ph-main">` for layout. Apply the same
   constraint `.container` uses so every page has proper margins.

   Opt-out: pages whose first child is a full-bleed marketing section
   (marketing homepage's `<section class="hero">` / `.section-hero`,
   or any page that wraps itself in `.ph-fullbleed`). Those handle
   their own `.container` per band. */
.ph-main {
  display: block;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px;
  box-sizing: border-box;
  /* Grow inside `.ph-app`'s flex column so the footer stays pinned to
     the viewport bottom even when the page content is short (auth
     pages, server-status, etc). */
  flex: 1 0 auto;
}
.ph-main:has(> section.hero),
.ph-main:has(> section.section-hero),
.ph-main:has(> .auth-wrap),
.ph-main:has(> .auth-shell),
.ph-main:has(> .ph-auth-shell),
.ph-main:has(> .ph-fullbleed) {
  max-width: none;
  padding: 0;
}
@media (max-width: 640px) {
  .ph-main { padding: 20px 20px; }
  .ph-main:has(> section.hero),
  .ph-main:has(> section.section-hero),
  .ph-main:has(> .auth-wrap),
  .ph-main:has(> .auth-shell),
  .ph-main:has(> .ph-auth-shell),
  .ph-main:has(> .ph-fullbleed) { padding: 0; }
}

/* ── Responsive ───────────────────────────────── */
/* Tablet+narrow-desktop: tighten nav so longer ES labels don't blow
   out the header. Below 980px the burger menu takes over (see below). */
@media (max-width: 1120px) {
  .ph-nav { gap: 0; }
  .ph-nav a { padding: 8px 10px; font-size: 13px; }
  .ph-actions .btn-sm { padding: 6px 10px; font-size: 13px; }
}
@media (max-width: 980px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-card.is-featured { transform: none; }
  .trust-band-inner { grid-template-columns: repeat(2, 1fr); }
  .order-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .widget-grid { grid-template-columns: 1fr; }
  .ph-footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-cta-card { padding: 40px 28px; }
}
@media (max-width: 640px) {
  .ph-nav { display: none; }
  .ph-burger { display: inline-flex; }
  .container { padding: 0 20px; }
  .plan-grid { grid-template-columns: 1fr; }
  .opt-group { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }

  /* Footer centered on mobile when stacked */
  .ph-footer-grid { grid-template-columns: 1fr; text-align: center; }
  .ph-footer-brand { display: flex; flex-direction: column; align-items: center; }
  .ph-footer-brand p { margin-left: auto; margin-right: auto; max-width: 32ch; }
  .ph-footer ul { align-items: center; }
  .ph-footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
  .ph-footer-bottom > span { display: block; }
  .lang-picker { margin: 0 auto; }
}

/* ── Misc ─────────────────────────────────────── */
.divider { height: 1px; background: var(--line-cream); margin: 24px 0; }
.muted { color: var(--muted); }
.mono  { font-family: var(--font-mono); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; gap: 8px; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }

/* image-as-svg-fallback for missing assets */
.img-fallback {
  background-image:
    linear-gradient(135deg, transparent 46%, var(--line-cream) 46%, var(--line-cream) 54%, transparent 54%);
  background-size: 14px 14px;
  background-color: var(--cream-bg-2);
  border: 1px dashed var(--line-cream-2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}


/* ============================================================
   WHMCS-specific extras (referenced from .tpl files)
   These classes don't appear in the React prototype because
   they correspond to template-only constructs: mobile drawer,
   account dropdown menu, status notification rows, dashboard
   sidebar promo block, etc. Keep paired with theme.css above.
   ============================================================ */

/* Mobile drawer */
.ph-mobile-drawer { padding: 0 0 16px; }
.ph-mobile-drawer .card { padding: 8px; }
.ph-mobile-link {
  display: block; padding: 10px 12px;
  font-weight: 500; font-size: 14px;
  border-radius: var(--r-sm);
}
.ph-mobile-link:hover { background: var(--cream-bg-2); }

/* Account dropdown (Bootstrap 4 dropdown-menu styled) */
.ph-account-wrap .dropdown-menu {
  background: var(--cream-card);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: var(--shadow-card);
  min-width: 220px;
}
.ph-account-wrap .dropdown-item {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.ph-account-wrap .dropdown-item:hover {
  background: var(--cream-bg-2);
  color: var(--ink);
}
.ph-account-wrap .dropdown-divider {
  border-top-color: var(--line-cream);
  margin: 6px 0;
}
.dash-avatar-sm { width: 22px; height: 22px; font-size: 11px; }

/* Notification bar */
.ph-notice-wrap { padding: 16px 0 0; }
.ph-notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-cream);
  background: var(--cream-card);
  font-size: 14px;
  margin-bottom: 12px;
}
.ph-notice-success { border-color: rgba(75, 122, 75, 0.3); }
.ph-notice-error   { border-color: rgba(184, 92, 60, 0.35); background: rgba(184, 92, 60, 0.06); }
.ph-notice-info    { border-color: var(--line-cream-2); }
.ph-notice-warning { border-color: rgba(184, 137, 60, 0.35); }

/* Homepage why-grid */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.why-ico {
  width: 36px; height: 36px;
  background: var(--rust-soft); color: var(--rust);
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.why-title { font-size: 19px; letter-spacing: -0.01em; }
.why-body  { margin-top: 8px; font-size: 14px; }

/* Footer-CTA actions */
.footer-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-secondary-on-ink {
  background: transparent;
  color: var(--cream-bg);
  border-color: rgba(245, 237, 227, 0.25);
}
.btn-secondary-on-ink:hover {
  background: rgba(245, 237, 227, 0.08);
  border-color: var(--cream-bg);
  color: var(--cream-bg);
}

/* Trust band num unit */
.num-unit { font-size: 20px; opacity: 0.55; margin-left: 4px; }

/* Sections */
.section-title-sm { font-size: 32px; line-height: 1; letter-spacing: -0.025em; }

/* Domain search */
.domainsearch-card { padding: 28px; }
.input-group-domain { display: flex; gap: 8px; }
.input-group-domain .input { flex: 1; }
.select-tld { width: 110px; }
.domain-results { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.domain-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.domain-name { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.domain-name .rust-dot.is-muted { background: var(--muted-2); }
.domain-cta { display: flex; align-items: center; gap: 12px; }
.domain-price { font-weight: 600; font-family: var(--font-heading); font-size: 16px; }

/* Configure layout */
.order-main { min-width: 0; }
.configure-card { margin-bottom: 18px; }
.card-h3 { font-size: 17px; font-family: var(--font-body); font-weight: 700; margin-bottom: 4px; }
.card-p  { font-size: 13.5px; margin-bottom: 16px; }

/* Cycle & addon grids */
.cycle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.opt-card-cycle { flex-direction: column; align-items: flex-start; }
.opt-card-addon { cursor: pointer; }
.opt-card-pay   { }
.payment-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }

.addon-list { display: flex; flex-direction: column; gap: 12px; }
.qty-wrap { display: flex; align-items: center; gap: 10px; }
.input-num { width: 100px; }

/* Summary */
.summary-h3 {
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.summary-plan h4 { font-size: 20px; letter-spacing: -0.01em; }
.plan-name-sm   { font-size: 20px; letter-spacing: -0.01em; }
.summary-sub    { font-size: 13px; margin-bottom: 18px; }
.summary-foot   { font-size: 12px; margin-top: 4px; }
.summary-foot-center { text-align: center; margin-top: 12px; }
.summary-row-discount { color: var(--rust); }
.summary-line { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.summary-line-dot { margin-top: 5px; }
.summary-line-main { flex: 1; }
.summary-line-name { font-weight: 600; }
.summary-line-price { font-size: 12.5px; }
.btn-mt-18 { margin-top: 18px; }
.btn-mt-10 { margin-top: 10px; }
.btn-mt-8  { margin-top: 8px; }

/* Page head */
.page-head-tight { padding-top: 48px; padding-bottom: 16px; }

/* Tables */
.tbl-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-cream);
}
.tbl .num.is-empty { color: var(--muted-2); }

/* Cart rows */
.cart-card-items { padding: 0; overflow: hidden; }
.cart-row {
  display: flex; gap: 18px;
  padding: 24px;
  border-bottom: 1px solid var(--line-cream);
}
.cart-row:last-child { border-bottom: 0; }
.cart-row-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--cream-bg);
  border: 1px solid var(--line-cream);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cart-row-thumb.is-featured { background: var(--ink); }
.cart-row-main { flex: 1; min-width: 0; }
.cart-row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cart-row-title { font-size: 19px; letter-spacing: -0.01em; }
.cart-row-kind  { font-family: var(--font-body); font-weight: 500; font-size: 13px; }
.cart-row-blurb { font-size: 13.5px; margin-top: 4px; }
.cart-row-price { text-align: right; }
.cart-row-cycle { font-size: 12px; margin-top: 2px; }
.cart-row-actions { display: flex; gap: 14px; margin-top: 14px; font-size: 13px; }
.btn-danger-text { color: var(--rust); }
.btn-danger-text:hover { color: var(--rust-hover); background: rgba(184, 92, 60, 0.08); }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.promo-card { margin-top: 18px; }
.promo-row { display: flex; gap: 8px; }
.promo-input { flex: 1; }
.promo-msg { margin-top: 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.promo-msg-success { color: var(--green); }
.promo-msg-error   { color: var(--rust); }
.card-empty { text-align: center; padding: 64px 24px; }
.card-h2    { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 6px; }

/* Checkout */
.grid-2   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-321 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.account-toggle {
  display: flex; gap: 16px; padding: 12px 0 18px;
  border-bottom: 1px solid var(--line-cream);
  margin-bottom: 18px;
}
.cc-fields { padding: 12px 0; }
.check-line-tos { margin-top: 18px; font-size: 13.5px; align-items: flex-start; }
.link-rust { font-weight: 600; border-bottom: 1px solid var(--rust); color: var(--ink); }
.link-rust:hover { color: var(--rust); }

/* Complete */
.receipt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.receipt-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.receipt-num   { font-size: 13px; }
.receipt-item-name { font-weight: 600; }
.receipt-item-meta { font-size: 12.5px; }
.complete-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.complete-foot    { font-size: 13.5px; margin-top: 28px; }

/* Auth */
.auth-card-wide { max-width: 540px; }
.auth-wrap-top  { align-items: flex-start; padding-top: 64px; }
.auth-feather   { right: 60px; top: 80px; width: 220px; opacity: 0.25; }
.field-label-flex { display: flex; justify-content: space-between; }
.forgot-link { font-weight: 500; color: var(--muted); font-size: 12px; }
.forgot-link:hover { color: var(--rust); }
.remember-line   { font-size: 13.5px; margin-bottom: 20px; }
.marketing-line  { font-size: 13.5px; margin-top: 4px; }
.tos-line        { font-size: 12.5px; margin-top: 16px; line-height: 1.5; }
.auth-icon-success {
  width: 56px; height: 56px;
  background: var(--rust-soft); color: var(--rust);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

/* Dashboard sidebar */
.dash-user-text { min-width: 0; }
.dash-user-mail { overflow: hidden; text-overflow: ellipsis; }
.dash-nav-badge { margin-left: auto; font-size: 10px; padding: 1px 6px; }
.dash-nav-marker { margin-left: auto; }
.dash-side-promo {
  margin-top: 16px;
  padding: 14px;
  background: var(--ink);
  color: var(--cream-bg);
  border-radius: 12px;
}
.promo-eyebrow {
  font-size: 12px; opacity: 0.7;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.promo-body { font-size: 13.5px; margin-top: 6px; opacity: 0.9; line-height: 1.5; }

/* Dashboard rows */
.row-ico {
  width: 36px; height: 36px;
  background: var(--cream-bg);
  border: 1px solid var(--line-cream);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.row-ico-attn { background: var(--rust-soft); color: var(--rust); border-color: transparent; }
.row-title-ticket { font-size: 13.5px; }
.row-right-meta   { font-size: 12.5px; color: var(--muted); }
.row-right-amount { font-weight: 600; }
.kpi-val-unit     { font-size: 20px; opacity: 0.6; }

.badge-rust-solid {
  background: var(--rust); color: var(--cream-bg); border-color: var(--rust);
}
.widget-empty { padding: 24px; text-align: center; color: var(--muted); }
.widget-grid-mt-18 { margin-top: 18px; }

.status-block { padding: 0 18px 18px; }
.status-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.status-row { display: flex; align-items: center; gap: 10px; }
.status-pulse {
  width: 10px; height: 10px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(75, 122, 75, 0.15);
}
.status-text { font-size: 13.5px; font-weight: 600; }
.status-foot { font-size: 12px; margin-top: 6px; }

/* SR-only helper for hidden but accessible labels */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 980px) {
  .why-grid { grid-template-columns: 1fr; }
  .cycle-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-grid { grid-template-columns: 1fr; }
  .grid-321 { grid-template-columns: 1fr; }
}

/* Bootstrap utility color overrides — keep Plume palette */
.text-primary,
a.text-primary { color: var(--ink) !important; }
.text-info,
a.text-info { color: var(--rust) !important; }
.text-success { color: #1b6f3b !important; }
.text-danger  { color: var(--rust-2, #8C4329) !important; }
.text-warning { color: #6E4A00 !important; }

.bg-primary { background-color: var(--ink) !important; color: var(--cream-bg) !important; }
.bg-info    { background-color: var(--rust) !important; color: #fff !important; }
.bg-light   { background-color: var(--cream-card) !important; color: var(--ink) !important; }

.btn-info,
.btn-info:focus {
  background-color: var(--rust) !important;
  border-color: var(--rust) !important;
  color: #fff !important;
}
.btn-info:hover {
  background-color: var(--rust-2, #8C4329) !important;
  border-color: var(--rust-2, #8C4329) !important;
}

.btn-outline-primary {
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--ink) !important;
  color: var(--cream-bg) !important;
}

/* Display-1 (404 hero) — Bootstrap default is blue; force ink */
.display-1, .display-2, .display-3, .display-4 { color: var(--ink) !important; }

/* Alert color overrides — Bootstrap defaults blueish */
.alert-info {
  background-color: var(--cream-bg-2) !important;
  border-color: var(--line-cream) !important;
  color: var(--ink) !important;
}
.alert-primary {
  background-color: #FDF1EB !important;
  border-color: var(--rust-3, #D88A6A) !important;
  color: var(--rust-2, #8C4329) !important;
}

/* Spinner / loading dots */
.fa-spinner, .fa-circle-notch, .fa-spin { color: var(--rust) !important; }

/* DataTables pagination */
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--cream-bg) !important;
}
.dataTables_wrapper .paginate_button:hover {
  background: var(--cream-bg-2) !important;
  border-color: var(--line-cream) !important;
  color: var(--ink) !important;
}

/* Tables (Bootstrap default) */
.table-bordered, .table { border-color: var(--line-cream) !important; }
.table-bordered td, .table-bordered th { border-color: var(--line-cream) !important; }
.table thead th { background: var(--ink) !important; color: var(--cream-bg) !important; border: 0 !important; }
.table tbody tr:hover { background: var(--cream-bg-2) !important; }

/* Forms */
.form-control:focus {
  border-color: var(--rust) !important;
  box-shadow: 0 0 0 3px rgba(184,92,60,0.15) !important;
}

/* Links inside content */
.primary-content a, .card a {
  color: var(--rust-2, #8C4329);
  text-decoration: underline;
  text-decoration-color: var(--rust-3, #D88A6A);
  text-underline-offset: 2px;
}
.primary-content a:hover, .card a:hover { color: var(--ink); }

/* Sidebar nav active state — WHMCS twenty-one uses .active list-group-item */
.list-group-item.active,
.nav-link.active {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--cream-bg) !important;
}
.list-group-item:hover { background-color: var(--cream-bg-2) !important; }

/* Headings inside content cards */
.card h1, .card h2, .card h3, .card h4 { color: var(--ink); }

/* Modal headers */
.modal-header { background: var(--ink) !important; color: var(--cream-bg) !important; }
.modal-header .close { color: var(--cream-bg) !important; opacity: 0.8; }
.modal-content { border-radius: 14px !important; border-color: var(--line-cream) !important; }

/* Card defaults — Bootstrap white -> plume cream-card */
.card { background-color: var(--cream-card) !important; border-color: var(--line-cream) !important; border-radius: 12px !important; }
.card-header { background-color: transparent !important; border-bottom-color: var(--line-cream) !important; }

/* Empty state / placeholders */
.no-records, .dataTables_empty { color: var(--muted, #5D5042); font-style: italic; }

/* ── Server-status / network-issues page (serverstatus.tpl) ─────────── */
.ph-status-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 28px;
  border-radius: 14px;
  border: 1px solid var(--line-cream);
  background: var(--cream-card);
  margin: 0 0 28px;
}
.ph-status-banner .ph-status-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rust-hover);
  box-shadow: 0 0 0 4px var(--rust-soft);
  flex: 0 0 14px;
}
.ph-status-banner--ok        { background: var(--cream-card); }
.ph-status-banner--ok .ph-status-dot      { background: #2F8757; box-shadow: 0 0 0 4px rgba(47,135,87,0.15); }
.ph-status-banner--issues    { background: #FFF6F1; }
.ph-status-banner--issues .ph-status-dot  { background: var(--rust-hover); }
.ph-status-title {
  font-family: var(--font-heading);
  font-size: 22px; line-height: 1.1; letter-spacing: -0.015em; margin: 0;
  color: var(--ink);
}
.ph-status-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.ph-notice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--line-cream);
  background: var(--cream-card);
  margin-bottom: 16px;
  font-size: 14px;
}
.ph-notice--info    { border-color: var(--line-cream); }
.ph-notice--warning { border-color: var(--rust-ring); background: var(--rust-soft); color: var(--ink); }
.ph-notice-link     { margin-left: auto; color: var(--rust-hover); font-weight: 600; text-decoration: none; }
.ph-notice-link:hover { text-decoration: underline; }

.ph-card-title { font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.015em; margin: 0 0 6px; }
.ph-card-lede  { color: var(--muted); margin: 0 0 16px; }

.ph-table { width: 100%; }
.ph-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--line-cream); }
.ph-table tbody td { border-bottom: 1px solid var(--line-cream); }
.ph-empty-row { text-align: center; color: var(--muted); padding: 24px 0; }
.ph-empty { color: var(--muted); padding: 20px 0; }

.ph-issue-card { padding: 0; margin-bottom: 16px; border-left: 3px solid var(--line-cream); }
.ph-issue-card--critical { border-left-color: #B33A2A; }
.ph-issue-card--warning  { border-left-color: var(--rust-hover); }
.ph-issue-card--ok       { border-left-color: #2F8757; }
.ph-issue-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line-cream);
}
.ph-issue-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.ph-issue-meta  { margin: 0 0 12px; }
.ph-issue-stats { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.ph-issue-body  { margin: 0; }

.ph-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--cream-bg-2); color: var(--ink);
}
.ph-pill--critical { background: #FBE8E4; color: #832A1F; }
.ph-pill--warning  { background: var(--rust-soft); color: var(--rust-hover); }
.ph-pill--ok       { background: #E7F2EC; color: #2F8757; }
.ph-pill--info     { background: var(--cream-bg-2); color: var(--ink); }

.ph-pagination .page-link { background: var(--cream-card); color: var(--ink); border-color: var(--line-cream); }
.ph-pagination .page-item.active .page-link { background: var(--ink); color: var(--cream-bg); border-color: var(--ink); }
.ph-pagination .page-item.disabled .page-link { color: var(--muted-2); }

/* ── Page hero (consistent across contact / announcements / KB / status) ─ */
.ph-page-hero {
  margin: 0 0 28px;
}
.ph-page-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rust-hover);
  margin-bottom: 12px;
}
.ph-page-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 44px); line-height: 1.05;
  letter-spacing: -0.025em; margin: 0 0 12px;
}
.ph-page-lede {
  color: var(--muted); font-size: 17px; max-width: 64ch; margin: 0;
}
.ph-page-back {
  display: inline-block; margin-bottom: 12px;
  color: var(--muted); text-decoration: none; font-size: 14px;
}
.ph-page-back:hover { color: var(--rust-hover); }

/* ── Lists (announcements + KB articles) ─────────────── */
.ph-list { display: flex; flex-direction: column; gap: 16px; margin: 0 0 24px; }
.ph-list-item-title { font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.015em; margin: 0 0 6px; }
.ph-list-item-title a { color: var(--ink); text-decoration: none; }
.ph-list-item-title a:hover { color: var(--rust-hover); }
.ph-list-item-body { color: var(--ink); margin: 12px 0; }

.ph-meta {
  list-style: none; padding: 0; margin: 6px 0 18px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  color: var(--muted); font-size: 13px;
}
.ph-meta li { display: inline-flex; align-items: center; gap: 6px; }

.ph-article .card-body p { margin-bottom: 1em; }
.ph-article .card-body h1, .ph-article .card-body h2, .ph-article .card-body h3 { margin-top: 1.4em; }

.ph-actions-row { display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap; }

.ph-empty { color: var(--muted); padding: 24px 0; text-align: center; }

/* ── Form on Plume pages ─────────────────────────────── */
.ph-form .form-group { margin-bottom: 20px; }
.ph-form label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; display: block; }
.ph-form .form-control {
  background: var(--cream-card); border: 1px solid var(--line-cream); border-radius: 10px;
  padding: 12px 14px; font-size: 15px; color: var(--ink); transition: border-color 150ms ease-out;
}
.ph-form .form-control:focus {
  border-color: var(--rust-hover); outline: 2px solid var(--rust-soft); outline-offset: 0;
}

/* ── Search hero (KB) ─────────────────────────────────── */
.ph-search {
  display: flex; gap: 8px; margin: 0 0 24px;
  background: var(--cream-card); border: 1px solid var(--line-cream);
  border-radius: 14px; padding: 8px;
}
.ph-search-input {
  flex: 1; border: 0 !important; background: transparent !important;
  padding: 10px 12px !important; font-size: 16px;
}
.ph-search-input:focus { box-shadow: none !important; }

/* ── KB category grid ─────────────────────────────────── */
.ph-kb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; margin: 0 0 24px;
}
.ph-kb-cat { text-decoration: none; color: var(--ink); display: block; transition: border-color 150ms ease-out, transform 150ms ease-out; }
.ph-kb-cat:hover { border-color: var(--rust-hover) !important; transform: translateY(-1px); }
.ph-kb-cat-count { float: right; }
.ph-kb-cat-name { font-family: var(--font-heading); font-size: 18px; letter-spacing: -0.015em; margin: 0 40px 6px 0; }
.ph-kb-cat-desc { color: var(--muted); font-size: 13px; margin: 0; }

/* ── Flat list (popular / related / category articles) ── */
.ph-list-flat { list-style: none; padding: 0; margin: 0; }
.ph-list-flat li { border-bottom: 1px solid var(--line-cream); }
.ph-list-flat li:last-child { border-bottom: 0; }
.ph-list-flat-item {
  display: block; padding: 14px 20px; text-decoration: none; color: var(--ink);
  transition: background 150ms ease-out;
}
.ph-list-flat-item:hover { background: var(--cream-bg-2); }
.ph-list-flat-title { display: block; font-weight: 600; }
.ph-list-flat-snippet { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ── KB helpful vote ──────────────────────────────────── */
.ph-kb-vote { display: flex; gap: 12px; }
.ph-kb-helpful { margin-top: 16px; }

/* ── Auth shell (login, register, pwreset, 2FA, verify) ── */
.ph-auth-shell {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 24px 0;
}
.ph-auth-card {
  width: 100%; max-width: 480px;
}
.ph-auth-card--centered .card-body { text-align: center; }
.ph-auth-card--centered .ph-auth-footer { justify-content: center; }
.ph-auth-header {
  margin: 0 0 24px;
}
.ph-auth-title {
  font-family: var(--font-heading);
  font-size: 28px; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.ph-auth-sub {
  color: var(--muted); font-size: 14px; margin: 0;
}
.ph-auth-footer {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px;
  padding-top: 16px; border-top: 1px solid var(--line-cream);
}
.ph-auth-link {
  color: var(--rust-hover); font-weight: 600; text-decoration: none;
}
.ph-auth-link:hover { text-decoration: underline; }
.ph-auth-help { color: var(--muted); }
.ph-auth-success-body { color: var(--ink); margin: 16px 0 0; }

.ph-form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.ph-form-hint { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Status dots used on email-verify success/warn/crit splash */
.ph-status-dot--lg {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-block; margin: 0 auto 16px;
}
.ph-status-dot--ok   { background: #2F8757; box-shadow: 0 0 0 6px rgba(47,135,87,0.15); }
.ph-status-dot--warn { background: #E4A03D; box-shadow: 0 0 0 6px rgba(228,160,61,0.15); }
.ph-status-dot--crit { background: #B33A2A; box-shadow: 0 0 0 6px rgba(179,58,42,0.15); }

/* Note: NO `!important` here. WHMCS-shipped TPLs render data tables with
   `class="... w-hidden"` and rely on inline JS `jQuery('#tableX').show()`
   to reveal them post-DataTable init. `.show()` only sets an inline
   `display: ''` style, which can't override `display: none !important`.
   Plain `display: none` is still beaten by `style="display: table"` from
   `.show()` because inline style wins by default specificity. */
.w-hidden { display: none; }

/* ── Error pages (404 / 403 / 429 / 500 / banned) ─────── */
.ph-error-page {
  text-align: center;
  padding: 80px 24px 64px;
  max-width: 640px; margin: 0 auto;
}
.ph-error-code {
  font-family: var(--font-heading);
  font-size: clamp(72px, 16vw, 144px);
  line-height: 1;
  color: var(--rust-hover);
  display: inline-block;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.ph-error-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.5vw, 36px);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.ph-error-body {
  color: var(--muted); font-size: 17px;
  max-width: 48ch; margin: 0 auto 28px;
}
.ph-actions-row--center { justify-content: center; }
.ph-error-perms { display: inline-block; text-align: left; margin: 0 0 24px; }
.ph-error-banned-meta { justify-content: center; }

/* ── WHMCS branding strip ─────────────────────────
   The Powered by WHMCompleteSolution link is injected into
   $footeroutput on every page. Hide the link and its centred
   wrapping paragraph (`:has` supported in current evergreen
   browsers — falls back to just hiding the anchor on older ones). */
.ph-app a[href*="whmcs.com"],
.ph-app a[href*="WHMCompleteSolution"] {
  display: none !important;
}
.ph-app p:has(> a[href*="whmcs.com"]) {
  display: none !important;
}


/* ────────────────────────────────────────────────────────────────────────
   Support ticket reply distinction
   ──────────────────────────────────────────────────────────────────────── */

.ticket-reply {
    background: var(--plume-cream-card, #FFFDF9);
    border: 1px solid var(--plume-line, #E8DDD0);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 14px;
    position: relative;
}

.ticket-reply .posted-by {
    font-size: 13px;
    color: var(--plume-muted, #5D5042);
    border-bottom: 1px solid var(--plume-line, #E8DDD0);
    padding-bottom: 8px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ticket-reply .posted-by-name {
    font-weight: 600;
    color: var(--plume-ink, #0E1014);
}

.ticket-reply .message {
    padding: 4px 0 0 !important;
    color: var(--plume-ink, #0E1014);
}

.requestor-badge {
    background: var(--plume-line, #E8DDD0);
    color: var(--plume-muted, #5D5042);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Customer reply (default) — left-anchored cream block. */
.ticket-reply:not(.staff) {
    border-left: 4px solid var(--plume-line, #E8DDD0);
}

/* Staff reply — rust accent + brighter background, right-anchored avatar
   chip indicates Plume Host Support spoke. */
.ticket-reply.staff {
    background: #FBF1E5;
    border: 1px solid #E8C9A0;
    border-left: 4px solid var(--plume-rust, #9C4A2D);
}

.ticket-reply.staff::before {
    content: "Plume Host Support";
    display: inline-block;
    font-family: "Archivo Black", Inter, system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--plume-rust, #9C4A2D);
    background: rgba(156, 74, 45, 0.08);
    border: 1px solid rgba(156, 74, 45, 0.25);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.ticket-reply.staff .posted-by-name {
    color: var(--plume-rust, #9C4A2D);
}

.ticket-reply.staff .requestor-badge {
    background: var(--plume-rust, #9C4A2D);
    color: #FFFDF9;
}

/* ────────────────────────────────────────────────────────────────────────
   Bootstrap btn-success / btn-info / btn-warning override → Plume palette
   WHMCS templates + module HTML inject btn-success (Manage Domain, Pay Now,
   etc.) which renders Bootstrap green and clashes with the Plume rust/ink
   palette. Map all semantic-coloured buttons to Plume tokens.
   ──────────────────────────────────────────────────────────────────────── */

.btn-success,
.btn-success:focus,
.btn-success:visited {
  background-color: var(--plume-rust, #9C4A2D) !important;
  border-color: var(--plume-rust, #9C4A2D) !important;
  color: var(--plume-cream, #F5EDE3) !important;
}
.btn-success:hover,
.btn-success:active,
.btn-success.active {
  background-color: #7E3B22 !important;
  border-color: #7E3B22 !important;
  color: var(--plume-cream, #F5EDE3) !important;
}

.btn-info,
.btn-info:focus,
.btn-info:visited {
  background-color: var(--plume-ink, #0E1014) !important;
  border-color: var(--plume-ink, #0E1014) !important;
  color: var(--plume-cream, #F5EDE3) !important;
}
.btn-info:hover, .btn-info:active, .btn-info.active {
  background-color: #1A1D24 !important;
  border-color: #1A1D24 !important;
}

.btn-warning,
.btn-warning:focus,
.btn-warning:visited {
  background-color: var(--plume-muted, #5D5042) !important;
  border-color: var(--plume-muted, #5D5042) !important;
  color: var(--plume-cream, #F5EDE3) !important;
}
.btn-warning:hover, .btn-warning:active {
  background-color: #4A3F35 !important;
  border-color: #4A3F35 !important;
}

/* Semantic card-header backgrounds */
.card-header.bg-success { background-color: var(--plume-rust, #9C4A2D) !important; color: var(--plume-cream, #F5EDE3) !important; }
.card-header.bg-info    { background-color: var(--plume-ink,  #0E1014) !important; color: var(--plume-cream, #F5EDE3) !important; }
.card-header.bg-warning { background-color: var(--plume-muted,#5D5042) !important; color: var(--plume-cream, #F5EDE3) !important; }
.card-title.bg-info     { background-color: var(--plume-ink,  #0E1014) !important; color: var(--plume-cream, #F5EDE3) !important; }