/* === Brand color mapping (Kingdom A.D.) === */
:root{
  --accent: #A79174;        /* primary */
  --accent-50: #f7f3ed;     /* very light bg */
  --accent-100:#eee6db;     /* softer bg */
  --accent-200:#D6C8B3;     /* light border */
  --accent-300:#c2ae8e;     /* mid border */
  --accent-700:#947f64;     /* hover/darker */
}

.text-sky-700 { color: var(--accent) !important; }
.bg-sky-600 { background-color: var(--accent) !important; }
.hover\:bg-sky-700:hover { background-color: var(--accent-700) !important; }
.border-sky-200 { border-color: var(--accent-200) !important; }
.bg-sky-50 { background-color: var(--accent-50) !important; }

/* === Core === */
.hero-gradient {
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(167,145,116,0.08), transparent 60%),
    radial-gradient(1200px 600px at 80% 0%, rgba(167,145,116,0.08), transparent 60%);
}
.brand-script{ font-family:"Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
.kad-badge{ border:1px solid rgba(0,0,0,0.08); }
.step-card{ border:1px solid rgba(0,0,0,0.06); }

/* === Badges === */
.badge{
  display:inline-block; padding:.15rem .5rem; border-radius:999px;
  font-size:.75rem; border:1px solid rgba(0,0,0,0.08);
}
.badge-advanced{ background:var(--accent-50); border-color:var(--accent-200); }
.badge-muted{ background:#f3f4f6; border-color:#e5e7eb; color:#374151; }

/* === How it works === */
.hiw-gradient{
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(167,145,116,0.08), transparent 60%),
    radial-gradient(1000px 500px at 85% -10%, rgba(167,145,116,0.06), transparent 60%);
}
.hiw-card{
  background:#fff; border:1px solid rgba(0,0,0,0.06);
  border-radius:1rem; padding:1rem;
  box-shadow:0 10px 20px -15px rgba(0,0,0,.20);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);
}
.hiw-card:hover{ transform:translateY(-1px); border-color:var(--accent-200); box-shadow:0 12px 24px -18px rgba(0,0,0,.22); }
.step-dot{
  width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-50);color:#111827;font-weight:700;border:1px solid var(--accent-200);
}
.hiw-ico{ width:18px;height:18px;color:var(--accent-700);display:inline-flex; }
.hiw-ico svg{ width:18px;height:18px; }
.fade-up{ opacity:0; transform:translateY(12px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.fade-up.is-visible{ opacity:1; transform:none; }

/* === Plans (tabs + cards) === */
.plan-tabs{
  display:inline-flex; gap:.25rem; padding:.25rem; border:1px solid rgba(0,0,0,.08);
  border-radius:999px; background:#fff; box-shadow:0 8px 20px -18px rgba(0,0,0,.4);
}
.plan-tab{
  position:relative; padding:.5rem 1rem; border-radius:999px; font-weight:600;
  border:1px solid transparent; color:#334155; background:transparent; cursor:pointer;
  transition:background .25s cubic-bezier(.22,.61,.36,1), border-color .25s cubic-bezier(.22,.61,.36,1), color .25s;
}
.plan-tab:hover{ background:#f8fafc; }
.plan-tab.active{ background:var(--accent-50); border-color:var(--accent-200); color:#0f172a; }
.save-pill{
  margin-left:.5rem; font-size:.7rem; padding:.1rem .45rem; border-radius:999px;
  background:var(--accent-100); border:1px solid var(--accent-200); color:#0f172a;
}
.plan-card{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:1rem; padding:1.25rem;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 10px 24px -20px rgba(0,0,0,.4);
  display:flex; flex-direction:column; /* allow CTA to pin to bottom */
  align-self: stretch; /* stretch to row height without forcing extra height */
}
.plan-cta{ margin-top:auto; align-self:flex-start; }
.plan-card:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -22px rgba(0,0,0,.45); }
.plan-featured{
  border-color:var(--accent-300);
  background:linear-gradient(0deg, rgba(167,145,116,.10), rgba(167,145,116,.10)) #fff;
  box-shadow:0 16px 38px -20px rgba(167,145,116,.45);
}
.inline-badge{
  display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.7rem;
  background:var(--accent-50); border:1px solid var(--accent-200); margin-left:.4rem;
}
.subtle{ color:#64748b; font-size:.875rem; }

/* === Footer rotation === */
.footer-wrap{ display:flex; align-items:center; gap:.5rem; }
.footer-city{ color:#4b5563; transition:opacity .25s ease; }
.footer-city.fade-out{ opacity:.2; }

/* === Unified Feature Table === */
/* Wrapper ensures tooltips can overflow; DO NOT hide overflow anywhere above tooltips */
.kad-features-wrap{ position:relative; overflow:visible; }
.kad-features-wrap .overflow-x-auto{ overflow: visible; }
.kad-features-wrap table{ overflow: visible; }
/* Table chrome (rounded outer corners without clipping tooltips) */
.kad-features-wrap table{
  width:100%;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;           /* rounded outside edges */
  border-collapse:separate;     /* keep radius visible */
  border-spacing:0;
  background:#fff;
}

/* Head + cells */
.kad-features-wrap thead tr{ background:#f8fafc; }
.kad-features-wrap th,
.kad-features-wrap td{
  padding:.75rem .75rem;
  border-top:1px solid rgba(0,0,0,.06);
  border-right:1px solid rgba(0,0,0,.06);
  vertical-align:middle;
}
.kad-features-wrap th:first-child,
.kad-features-wrap td:first-child{ border-left:none; text-align:left; }
.kad-features-wrap th:not(:first-child),
.kad-features-wrap td:not(:first-child){ text-align:center; } /* center all plan columns */

/* Round the very outside corners (visual polish) */
.kad-features-wrap thead th:first-child{ border-top-left-radius:12px; }
.kad-features-wrap thead th:last-child { border-top-right-radius:12px; }
.kad-features-wrap tbody tr:last-child td:first-child{ border-bottom-left-radius:12px; }
.kad-features-wrap tbody tr:last-child td:last-child { border-bottom-right-radius:12px; }
/* Rounded corners for the last *visible* row */
.kad-features-wrap tbody tr.is-last-visible td:first-child{ border-bottom-left-radius:12px; }
.kad-features-wrap tbody tr.is-last-visible td:last-child { border-bottom-right-radius:12px; }

/* Category header rows */
.kad-features-wrap tr[data-cat] td{ background:#f9fafb; font-weight:600; }
.cat-toggle{ display:inline-flex; align-items:center; gap:.5rem; user-select:none; cursor:pointer; }
.kad-features-wrap [data-chevron]{ transition:transform .15s ease; }

/* Empower column highlight (gold rails + soft fill) */
.kad-features-wrap th.emp-col,
.kad-features-wrap td.emp-col{
  background:var(--accent-50);
  border-left:2px solid var(--accent-200);
  border-right:2px solid var(--accent-200);
}

/* Ensure Empower column highlight wins on category header rows too */
.kad-features-wrap tr[data-cat] td.emp-col{
  background: var(--accent-50) !important;
  border-left: 2px solid var(--accent-200);
  border-right: 2px solid var(--accent-200);
}

/* Tiny check icon alignment */
.icon{ width:18px; height:18px; display:inline-block; vertical-align:middle; }

/* === Wide, above-all tooltips (no clipping) === */
.info-wrap{ position:relative; display:inline-flex; align-items:center; margin-left:.35rem; }
.info-tip{
  width:18px; height:18px; border-radius:9999px;
  border:1px solid #e2e8f0; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.info-tip svg{ width:12px; height:12px; color:#64748b; }
/* Simple, narrow, on-top tooltip */
.info-panel{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;

  /* ⬇️ wide enough for 1–3 lines, but not huge */
  max-width: 340px;
  min-width: 240px;

  box-shadow: 0 14px 34px rgba(15,23,42,.18);
  white-space: normal;
  overflow-wrap: anywhere;

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;

  /* on top of everything */
  z-index: 2147483647;
}
.info-wrap:hover .info-panel,
.info-wrap:focus-within .info-panel{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
.info-wrap:hover .info-panel,
.info-wrap:focus-within .info-panel{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.info-wrap:hover .info-panel,
.info-wrap:focus-within .info-panel{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* Ensure feature name cell doesn't clip the tooltip */
.kad-feature-name{ overflow:visible; }

/* Remove any legacy tooltip styles that could conflict */
.tooltip, .tooltip-panel{ all:unset; }