/* =============================================================================
   Cyber Check Hub — Auth UI design system
   Concept: a device diagnostic panel. Navy-to-indigo chassis, cyber-green
   "checking" LED, indigo "pass" LED. Plex Mono carries data/labels like a
   status readout.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand palette sampled directly from the CCH logo mark: sky-blue,
     indigo and violet rings around a navy wordmark. Semantic variable
     names kept the same as the earlier build so every existing rule
     repaints automatically. */
  --bg: #EAF5FC;
  --surface: #FFFFFF;
  --surface-raised: #DDEEF9;
  --border: #C3E1F1;
  --text-primary: #0F0F2D;       /* logo navy */
  --text-secondary: #43507A;
  --text-muted: #838DAE;
  --accent-amber: #2AACDD;       /* primary action blue, logo cyan ring */
  --accent-amber-dim: #1C7CA3;
  --accent-amber-hover: #45BCE8;
  --accent-teal: #343381;        /* secondary/brand accent, logo indigo ring */
  --accent-purple: #5E3284;      /* tertiary accent, logo violet ring — premium/add-on features */
  --accent-purple-rgb: 94, 50, 132;
  --accent-red: #D64550;
  --accent-red-text: #B3232B;    /* higher-contrast red for text on tinted fills */
  --accent-warn-text: #7A5B12;   /* higher-contrast amber for text on tinted fills */
  --accent-sky: #A6D8ED;         /* soft fills */
  --accent-sky-rgb: 42, 172, 221;
  --accent-teal-rgb: 52, 51, 129;

  --font-display: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  --radius: 6px;
  --radius-lg: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

a { color: var(--accent-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .5rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-amber);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 6px var(--accent-amber);
}

/* ---- Layout: split panel, stacks on mobile (BRD 5.2 mobile-first) ---- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .auth-shell {
    flex-direction: row;
  }
}

.brand-panel {
  background: linear-gradient(135deg, #DBEEF9 0%, #AEDAF0 100%);
  border-bottom: 1px solid var(--border);
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
}

@media (min-width: 900px) {
  .brand-panel {
    width: 42%;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.brand-mark {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-primary);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.brand-mark .dot { color: var(--accent-teal); }
a.brand-mark, a.brand-mark:hover { text-decoration: none; color: var(--text-primary); }
.brand-logo {
  height: 80px;
  width: auto;
  display: block;
}
.brand-panel .brand-logo { height: 80px; margin-bottom: 2rem; }
.mini-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.mini-logo img { height: 34px; width: auto; }

/* Standalone auth pages (code entry, resend, reset...) put the logo above the
   card inside .form-panel; stack them instead of placing them side by side. */
.form-panel:has(> .mini-logo) {
  flex-direction: column;
}

.brand-panel h1 {
  font-size: 1.6rem;
  line-height: 1.3;
  max-width: 20ch;
}

.brand-panel .lede {
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 1.75rem;
}

/* Signature element: boot-sequence diagnostic checklist */
.boot-sequence {
  font-family: var(--font-mono);
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.boot-sequence .check {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-muted);
  opacity: 0;
  animation: bootIn .4s ease forwards;
}

.boot-sequence .check:nth-child(1) { animation-delay: .15s; }
.boot-sequence .check:nth-child(2) { animation-delay: .55s; }
.boot-sequence .check:nth-child(3) { animation-delay: .95s; }
.boot-sequence .check:nth-child(4) { animation-delay: 1.35s; }

.boot-sequence .check .status {
  color: var(--accent-teal);
  font-weight: 600;
  opacity: 0;
  animation: statusIn .3s ease forwards;
}
.boot-sequence .check:nth-child(1) .status { animation-delay: .5s; }
.boot-sequence .check:nth-child(2) .status { animation-delay: .9s; }
.boot-sequence .check:nth-child(3) .status { animation-delay: 1.3s; }
.boot-sequence .check:nth-child(4) .status { animation-delay: 1.7s; }

.boot-sequence .check .label { color: var(--text-secondary); }

@keyframes bootIn { to { opacity: 1; } }
@keyframes statusIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .boot-sequence .check, .boot-sequence .check .status { animation: none; opacity: 1; }
}

/* ---- Form panel ---- */

.form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 3rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-card h2 {
  font-size: 1.35rem;
  margin-bottom: .35rem;
}

.auth-card .subtitle {
  color: var(--text-secondary);
  font-size: .9rem;
  margin-bottom: 1.75rem;
}

.field {
  margin-bottom: 1.1rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

label {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: .4rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .7rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder { color: var(--text-muted); }

input:focus, select:focus {
  outline: none;
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 3px rgba(var(--accent-sky-rgb), .18);
}

input:disabled, select:disabled {
  background: var(--surface-muted, #f3f6f8);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .7;
}

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}

/* ---- Password show/hide toggle (assets/js/password-toggle.js) ---- */

.password-field-wrap {
  position: relative;
}
.password-field-wrap input[type="password"],
.password-field-wrap input[type="text"] {
  padding-right: 2.7rem;
}
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 0;
}
.password-toggle-btn:hover,
.password-toggle-btn:focus-visible { color: var(--text-secondary); }
.password-toggle-btn svg { width: 19px; height: 19px; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.1rem;
}

.checkbox-row input { width: auto; }
.checkbox-row label { margin: 0; text-transform: none; font-family: var(--font-body); font-size: .9rem; color: var(--text-primary); }

.hint {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .35rem;
}

button.btn-primary {
  width: 100%;
  background: var(--accent-amber);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  padding: .8rem 1rem;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  margin-top: .3rem;
}

button.btn-primary:hover { background: var(--accent-amber-hover); }
button.btn-primary:active { transform: translateY(1px); }

.divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--text-muted);
  font-size: .8rem;
  margin: 1.5rem 0;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.footer-link {
  text-align: center;
  font-size: .88rem;
  color: var(--text-secondary);
  margin-top: 1.25rem;
}

.alert {
  border-radius: var(--radius);
  padding: .8rem .95rem;
  font-size: .88rem;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}

.alert-error {
  background: rgba(229, 72, 77, .1);
  border-color: rgba(229, 72, 77, .3);
  color: var(--accent-red-text);
}

.alert-success {
  background: rgba(var(--accent-teal-rgb), .1);
  border-color: rgba(var(--accent-teal-rgb), .3);
  color: var(--accent-teal);
}

.alert ul { margin: .3rem 0 0; padding-left: 1.1rem; }

.mfa-code-input {
  letter-spacing: .5em;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  text-align: center;
}

.secret-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .08em;
  word-break: break-all;
  color: var(--accent-teal);
  margin-bottom: 1rem;
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(var(--accent-sky-rgb), .15);
  color: var(--accent-amber);
  border: 1px solid rgba(var(--accent-sky-rgb), .3);
}

/* =============================================================================
   PHASE 2 — signed-in shell: plans, checkout, subscription, admin.
   Same chassis as the auth screens. The organising idea stays the diagnostic
   readout: mono for anything that is data, sans for anything that is prose,
   amber for "your attention here", teal for "this passed".
   ============================================================================= */

/* ---- Top bar + page frame ---- */

:root { --topbar-h: 136px; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
}

.topbar-admin { border-bottom-color: var(--accent-amber-dim); }

.topbar-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.6rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
}

.topbar .brand-mark {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.topbar .brand-logo { height: 80px; }

.topbar .brand-mark:hover { text-decoration: none; }
.brand-sub { color: var(--text-muted); font-weight: 400; }

.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.25rem;
  margin-left: auto;
  font-size: .88rem;
}

.topnav a {
  color: var(--text-secondary);
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}

.topnav a:hover { color: var(--text-primary); text-decoration: none; }

.topnav a.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-amber);
}

.topnav .nav-quiet { color: var(--text-muted); }
.topnav .nav-role {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-muted);
  letter-spacing: .04em;
}

/* ---- Admin header profile icon: username/role/logout on hover or focus ---- */

.admin-profile { position: relative; display: flex; align-items: center; outline: none; }

.admin-profile-trigger {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  cursor: pointer;
}
.admin-profile-trigger svg { width: 19px; height: 19px; }

.admin-profile-menu {
  display: none;
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(15, 15, 45, .12);
  padding: .75rem .9rem;
  z-index: 30;
  text-align: left;
}

.admin-profile:hover .admin-profile-menu,
.admin-profile:focus-within .admin-profile-menu {
  display: block;
}

.admin-profile-id { font-family: var(--font-mono); font-size: .82rem; color: var(--text-primary); font-weight: 600; }
.admin-profile-role {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .15rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.admin-profile-logout {
  display: block;
  margin-top: .55rem;
  font-size: .82rem;
  color: var(--accent-red-text);
}
.admin-profile-logout:hover { text-decoration: underline; }

.page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.page-wide { max-width: 1360px; }

/* ---- Signed-in shell: left sidebar + content ---- */
/* Full-height rail flush to the left edge, fixed in place while the content
   column scrolls under it — same pattern as a typical hosting/app dashboard
   sidebar (Home highlighted as a solid filled box, the rest plain rows). */

.app-shell {
  display: flex;
  flex-direction: column;
}

.sidenav {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.sidenav-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .75rem 1rem;
}

.app-shell .page {
  flex: 1;
  min-width: 0;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.app-shell .page-wide { max-width: none; }

.sidenav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .94rem;
  color: var(--text-primary);
}

.sidenav a svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--text-primary);
}

.sidenav a:hover {
  background: var(--bg);
  text-decoration: none;
}

.sidenav a.is-active {
  background: var(--accent-amber);
  border-color: var(--accent-amber-dim);
  color: #FFFFFF;
  font-weight: 700;
}

.sidenav a.is-active svg { color: #FFFFFF; }

@media (min-width: 821px) {
  :root { --sidenav-w: 230px; }

  .app-shell { flex-direction: row; padding-left: var(--sidenav-w); }

  .sidenav {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: var(--sidenav-w);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    border-bottom: none;
    border-right: 1px solid var(--border);
    z-index: 15;
  }

  .sidenav-inner {
    flex-direction: column;
    gap: .3rem;
    padding: 1.5rem 1rem;
  }

  .app-shell .page { padding: 2.5rem 1.25rem 4rem; }
}

.page-title {
  font-size: 1.55rem;
  line-height: 1.3;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.page-lede {
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 74ch;
  margin: 0 0 1.75rem;
}

.page-lede-wide { max-width: none; }

/* ---- Products intro: Guardian strip + Q&A cards ---- */

.guardian-strip {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-teal-rgb), .22), transparent 60%), var(--bg);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.25rem;
}

.guardian-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(var(--accent-teal-rgb), .7), rgba(var(--accent-teal-rgb), 0) 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.guardian-strip-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--accent-teal-rgb), .18);
  color: var(--accent-teal);
  box-shadow: 0 0 0 6px rgba(var(--accent-teal-rgb), .06);
}

.guardian-strip-badge svg { width: 22px; height: 22px; }

.guardian-strip p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.6;
  position: relative;
}

.guardian-strip strong { color: var(--text-primary); }

.qa-grid {
  display: grid;
  gap: 0;
  margin-bottom: .5rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 760px) {
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
  .qa-card:first-child { border-right: 1px solid var(--border); }
}

.qa-card {
  padding: 1.75rem 2rem 1.75rem 0;
}

@media (min-width: 760px) {
  .qa-card:last-child { padding-left: 2rem; }
}

.qa-eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-amber);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
}

.qa-eyebrow svg { width: 15px; height: 15px; }

.qa-q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin: 0 0 .6rem;
}

.qa-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .88rem;
  line-height: 1.65;
}

.section-divider-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 2rem 0 1.5rem;
  position: relative;
}

.section-divider-label::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  margin-bottom: 1.5rem;
}

.pagefoot {
  border-top: 1px solid var(--border);
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.breadcrumb { font-size: .85rem; margin: 0 0 1.25rem; }

.muted { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); font-size: .85em; }

/* ---- Panels ---- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}

.panel h3 { font-size: 1rem; margin-bottom: .75rem; }
.panel h4 { font-size: .92rem; margin: 0 0 .35rem; }
.panel p:last-child { margin-bottom: 0; }

.panel-quiet { background: transparent; }
.panel-empty { text-align: center; padding: 3rem 1.75rem; }
.panel-action { border-color: var(--accent-amber-dim); }

/* Dashboard "Cover status" panel and its lapsed-plan variant. */
.cover-panel .btn-row { margin-top: 1.1rem; }
.cover-panel .hint { margin-top: 1rem; }
.cover-panel-lapsed .cover-panel-form { margin: 1.1rem 0 .6rem; }
.cover-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.cover-panel-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm, 8px);
  flex: 0 0 auto;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: baseline;
  justify-content: space-between;
}

.card-grid, .split-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 760px) {
  .card-grid  { grid-template-columns: repeat(3, 1fr); }
  .split-grid { grid-template-columns: repeat(2, 1fr); }
}

.card-grid .panel, .split-grid .panel { margin-bottom: 0; }

.link-list { margin: 0; padding-left: 1.1rem; color: var(--text-secondary); font-size: .9rem; line-height: 1.9; }
.link-list a { font-weight: 700; text-decoration: underline; }

.stat-line { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; flex-wrap: wrap; }
.stat-big { font-size: 1.3rem; font-weight: 600; }

/* ---- Buttons ---- */

.btn-secondary, .btn-ghost, .btn-danger, .btn-primary-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  padding: .7rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.btn-secondary { width: 100%; }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--accent-amber); text-decoration: none; }
.btn-small { padding: .35rem .7rem; font-size: .78rem; }

.btn-ghost { background: transparent; color: var(--text-secondary); }

.btn-primary-link {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  color: var(--bg);
}
.btn-primary-link:hover { background: var(--accent-amber-hover); text-decoration: none; }

.btn-danger { border-color: rgba(229, 72, 77, .45); color: var(--accent-red-text); background: transparent; }
.btn-danger:hover { border-color: var(--accent-red); }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.btn-row .btn-secondary { width: auto; }

/* ---- Status pills ---- */

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pill-ok    { background: rgba(var(--accent-teal-rgb), .12); color: var(--accent-teal);  border-color: rgba(var(--accent-teal-rgb), .32); }
.pill-warn  { background: rgba(var(--accent-sky-rgb), .12); color: var(--accent-amber); border-color: rgba(var(--accent-sky-rgb), .32); }
.pill-bad   { background: rgba(229, 72, 77, .12);  color: var(--accent-red-text);             border-color: rgba(229, 72, 77, .32); }
.pill-muted { background: rgba(156, 163, 168, .1); color: var(--text-muted);   border-color: var(--border); }

.alert-warn {
  background: rgba(201, 138, 43, .12);
  border-color: rgba(201, 138, 43, .35);
  color: var(--accent-warn-text);
}

.alert code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: rgba(0, 0, 0, .25);
  padding: .1rem .3rem;
  border-radius: 3px;
}

/* ---- Plans ---- */

.notice-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.plan-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 720px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}

/* Mosaic layout for exactly 3 products: CCH Guardian Nomad (1) and CCH
   Guardian Media (2) sit side by side in the top row; CCH Guardian Small &
   Medium Sized Business (3) — the featured, highest-tier product — spans
   the full width underneath so its extra detail has room to breathe. */
@media (min-width: 720px) {
  .plan-grid-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; align-items: start; }
  .plan-grid-mosaic .plan-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .plan-grid-mosaic .plan-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .plan-grid-mosaic .plan-card:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
}

.plan-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-teal);
  box-shadow: 0 18px 40px -18px rgba(var(--accent-teal-rgb), .45);
}

.plan-card-featured {
  border-color: var(--accent-amber);
  background: var(--surface-raised);
}

.plan-card-current { border-color: var(--accent-teal); }

.plan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 1.25rem;
  background: radial-gradient(circle at 30% 30%, rgba(var(--accent-teal-rgb), .28), rgba(var(--accent-teal-rgb), .06));
  border: 1px solid var(--border);
}

.plan-icon svg { width: 28px; height: 28px; stroke: var(--accent-teal); }

/* Branded product artwork (packages with dedicated hero art use this
   instead of .plan-icon — see plan_hero_image() in includes/billing.php). */
.plan-hero {
  margin: -2rem -1.75rem 1.25rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--bg);
}

.plan-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plan-desc {
  color: var(--text-secondary);
  font-size: .88rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.plan-flag {
  position: absolute;
  top: -.7rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent-amber);
  color: var(--bg);
  padding: .25rem .6rem;
  border-radius: 3px;
}

.plan-name { font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .25rem; }

.plan-tagline {
  color: var(--accent-teal);
  font-size: .8rem;
  font-weight: 600;
  margin: 0 0 .6rem;
}

.plan-price { display: flex; align-items: baseline; gap: .45rem; margin-bottom: 1.25rem; }
.plan-price .amount { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.plan-price .period { color: var(--text-muted); font-size: .85rem; }

/* Signature element: the plan's key number set as a bench-report readout line,
   picking up the mono/status language of the boot-sequence on the auth pages. */
.plan-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .7rem 0;
  margin-bottom: 1.25rem;
}

.plan-spec .spec-key { color: var(--text-muted); }
.plan-spec .spec-val { color: var(--accent-teal); font-size: 1.1rem; font-weight: 600; }

.plan-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  flex: 1;
}

.device-preview-list {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.device-preview-list li {
  position: relative;
  padding-left: 1.1rem;
}

.device-preview-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-teal);
}

.device-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.plan-features li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .55rem;
}

.plan-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-teal);
  opacity: .55;
}

/* ---- Per-device Guardian Plus list (my-subscription.php) ---- */

.device-guardian-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.device-guardian-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 0;
  border-top: 1px solid var(--border);
}
.device-guardian-row:first-child { border-top: none; padding-top: 0; }

.device-guardian-info {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

.device-guardian-name { font-weight: 600; font-size: .92rem; }

.device-guardian-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.hint-inline {
  font-size: .8rem;
  color: var(--text-muted);
}

.device-guardian-cancel {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.device-guardian-cancel svg { width: 14px; height: 14px; }
.device-guardian-cancel:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background: rgba(214, 69, 80, .08);
}

/* ---- Confirmation dialog (native <dialog>) ---- */

.confirm-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  max-width: 420px;
  width: calc(100% - 2rem);
  box-shadow: 0 30px 60px -24px rgba(15, 15, 45, .45);
}

.confirm-dialog::backdrop {
  background: rgba(15, 15, 45, .45);
}

.confirm-dialog-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--accent-sky-rgb), .12);
  color: var(--accent-amber-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.confirm-dialog-icon svg { width: 22px; height: 22px; }

.confirm-dialog h3 {
  margin: 0 0 .6rem;
  font-size: 1.05rem;
}

.confirm-dialog-device {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 .6rem;
}

.confirm-dialog .hint { margin-bottom: 1.25rem; }

.confirm-dialog .btn-row {
  justify-content: flex-end;
}

/* ---- Guardian Plus tier breakdown (configure-devices.php) ---- */

.guardian-plus-info { margin-top: -.4rem; }

.guardian-plus-tiers {
  list-style: none;
  margin: .75rem 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.guardian-plus-tiers li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem .75rem;
  padding: .75rem .9rem;
  border-top: 1px solid var(--border);
}
.guardian-plus-tiers li:first-child { border-top: none; }

.guardian-plus-tier-name {
  font-weight: 600;
  font-size: .88rem;
  grid-column: 1;
}

.guardian-plus-tier-price {
  font-weight: 600;
  font-size: .82rem;
  color: var(--accent-purple);
  grid-column: 2;
  text-align: right;
  white-space: nowrap;
}

.guardian-plus-tier-desc {
  grid-column: 1 / -1;
  font-size: .8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.replacement-service-steps {
  list-style: none;
  counter-reset: replacement-step;
  margin: .75rem 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.replacement-service-steps li {
  counter-increment: replacement-step;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .9rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  line-height: 1.5;
}
.replacement-service-steps li:first-child { border-top: none; }

.replacement-service-steps li::before {
  content: counter(replacement-step);
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--accent-purple);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}

.vat-line {
  text-align: right;
  margin-top: -.5rem;
  font-size: .78rem;
}

.plan-action { margin: 1.25rem 0 0; }
.plan-foot { text-align: center; font-size: .8rem; color: var(--text-muted); margin: .75rem 0 0; }

.plan-learnmore {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent-teal);
  margin-top: .35rem;
  cursor: pointer;
  list-style: none;
}

.plan-learnmore::-webkit-details-marker { display: none; }
.plan-learnmore svg { width: 14px; height: 14px; transition: transform .15s ease; }
.plan-more[open] .plan-learnmore svg { transform: rotate(90deg); }
.plan-card:hover .plan-learnmore svg { transform: translateX(3px); }
.plan-more[open] .plan-card:hover .plan-learnmore svg { transform: rotate(90deg); }

.plan-more { margin: 0; }
.plan-more-body { padding-top: 1.25rem; }
.plan-more .plan-price { margin-top: 0; }

/* Learn more + Get started, side by side as two equal-height, equal-width
   buttons. Both get the same padding/border/line-height regardless of
   whether they render as a <summary> (btn-ghost) or a <button>
   (btn-primary/btn-secondary), since those start with different sizing. */
.plan-cta-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.25rem;
}
.plan-cta-row .plan-more { flex: 1; }
.plan-cta-row .plan-action { flex: 1; margin: 0; }

.plan-cta-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 100%;
  min-height: 3rem;
  padding: .8rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  border-radius: var(--radius);
  margin: 0;
  list-style: none;
}
.plan-cta-btn::-webkit-details-marker { display: none; }
.plan-cta-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .15s ease; }

/* Override button.btn-primary's own margin-top/padding (they're more
   specific than .plan-cta-btn alone) so the featured "Get started" button
   lines up exactly with the Learn more button beside it. */
.plan-cta-row .plan-getstarted-btn.btn-primary {
  margin-top: 0;
  padding: .8rem 1.1rem;
}

.plan-more[open] .plan-learnmore-btn svg { transform: rotate(90deg); }
.plan-cta-row .plan-more:not([open]):hover .plan-learnmore-btn svg { transform: translateX(3px); }
.plan-getstarted-btn:hover svg { transform: translateX(3px); }

/* "Read more" — the threat list, kept separate from "Learn more" (which
   stays focused on price/devices/capabilities). */
.plan-readmore { margin: 0 0 .35rem; }
.plan-readmore-body { padding-top: 1rem; }
.plan-readmore-lede {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .6rem;
}
.plan-features-threats { margin-bottom: 0; }
.plan-features-threats li::before { background: var(--accent-amber); }

/* ---- Checkout ---- */

.section-rule { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

.device-row {
  display: grid;
  grid-template-columns: 2rem 1fr 1fr;
  align-items: end;
  gap: .6rem;
  padding: .85rem 0;
  border-top: 1px solid var(--border);
}
.device-row:first-child { border-top: none; padding-top: 0; }
.device-row .field, .device-row > div { margin-bottom: 0; }
.device-row-num {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-muted);
  padding-bottom: .8rem;
}

/* Each device row on the device-selection pages (configure-devices.php,
   manage-devices.php) captures 4 fields (type, make, model, OS) instead of
   the 2-field .device-row used elsewhere, so it gets its own wider grid. */
.device-row-full {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.device-row-full:first-child { border-top: none; padding-top: 0; }
.device-row-full .device-row-num { padding-top: .8rem; flex: 0 0 auto; }

.device-row-remove {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: .55rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.device-row-remove svg { width: 13px; height: 13px; }
.device-row-remove:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background: rgba(214, 69, 80, .08);
}

.device-row-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
}
.device-row-grid .field,
.device-row-grid > div {
  margin-bottom: 0;
  /* Without this, a bare <select>'s small native intrinsic width becomes
     that column's floor, so it ignores the equal 1fr track and squeezes
     down while text inputs (wider intrinsic default) hog the row. This
     makes every column actually split the row evenly. */
  min-width: 0;
}
/* Labels here vary between one line ("Exact model number") and two
   ("Make / brand *"). Reserve room for two lines on every column so the
   inputs/selects below all start on the same row regardless of which
   label wrapped — otherwise the row zig-zags. */
.device-row-grid label {
  min-height: 2.3em;
  line-height: 1.15;
}

@media (min-width: 640px) {
  .device-row-grid { grid-template-columns: repeat(2, 1fr); }
}

/* On the wide layout the device panel has enough room to lay all four
   fields for a device out on a single line instead of wrapping to two. */
@media (min-width: 1180px) {
  .page-wide .device-row-grid { grid-template-columns: repeat(4, 1fr); }
}

.req { color: var(--accent-amber, #b45309); }

/* "+ Add another device" — a quiet, dashed-outline button so it reads as
   an inline affordance to extend the list rather than a normal action. */
.add-device-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.add-device-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Product thumbnail, deliberately small and tucked in the bottom-right
   corner of the pricing panel — a visual reminder of what's being bought,
   not a second hero image. */
.purchase-summary-thumb {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.purchase-summary-thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(14, 42, 61, .14);
  display: block;
}

.checkout-grid { display: grid; gap: 1.25rem; align-items: start; }

@media (min-width: 820px) {
  .checkout-grid { grid-template-columns: 1fr .9fr; }
}

/* On the wide layout (device setup / manage devices), the left "Your
   details" panel is short static text while the right panel holds the
   6-field-per-device grid — give it a fixed, comfortable width instead of
   letting it stretch, and hand the rest of the extra space to the device
   panel so its columns aren't cramped. */
@media (min-width: 820px) {
  .page-wide .checkout-grid { grid-template-columns: minmax(280px, 340px) 1fr; }
}

.checkout-grid .panel { margin-bottom: 0; }
.panel-summary { border-color: var(--accent-amber-dim); }

.summary-list { margin: 0 0 1.25rem; font-size: .9rem; }
.summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
.summary-list dt { color: var(--text-secondary); }
.summary-list dd { margin: 0; text-align: right; }

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .9rem 0 1.25rem;
  font-size: .95rem;
  color: var(--text-secondary);
}
.summary-total strong { font-size: 1.5rem; color: var(--text-primary); }

/* ---- Payment result ---- */

.panel-result { text-align: center; padding: 2.5rem 1.75rem; }
.panel-result .summary-list { text-align: left; max-width: 420px; margin-inline: auto; }
.panel-result .btn-row { justify-content: center; }

.result-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  margin-bottom: 1.5rem;
}

.result-ok    { color: var(--accent-teal); }
.result-warn  { color: var(--accent-amber); }
.result-bad   { color: var(--accent-red); }
.result-muted { color: var(--text-muted); }

/* ---- Subscription status panel ---- */

.status-panel {
  background: linear-gradient(160deg, var(--surface-raised) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}

.status-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.status-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

.status-plan { font-size: 1.6rem; margin: 0; }

/* Signature element: cover shown as a depleting bench meter rather than a date
   in a paragraph — the one number a customer actually wants is "how long left". */
.status-meter { margin-bottom: 1.75rem; }

.meter-track {
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-amber));
  border-radius: 999px;
  transition: width .6s ease;
}

@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

.meter-labels {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .55rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-muted);
}

.meter-remaining { color: var(--accent-amber); font-weight: 600; }

.readout { margin: 0; font-size: .9rem; }
.readout > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
}
.readout dt { color: var(--text-secondary); }
.readout dd { margin: 0; text-align: right; }

.readout-features { margin-top: 1.5rem; }
.readout-features .plan-features { margin-bottom: 0; }

/* ---- Tables ---- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 560px;
}

.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: .8rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child,  .data-table td:last-child  { padding-right: 0; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table .row-action { text-align: right; white-space: nowrap; }

.cell-sub { color: var(--text-muted); font-size: .8rem; margin-top: .15rem; }

.data-table tr.subrow td {
  background: rgba(0, 0, 0, .18);
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.inline-form input[type="text"] { width: auto; flex: 1 1 220px; padding: .5rem .7rem; font-size: .85rem; }
.inline-form button { padding: .5rem .9rem; font-size: .82rem; width: auto; }

.inline-label {
  margin: 0;
  font-size: .68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- KPIs ---- */

.kpi-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 1.75rem;
}

@media (min-width: 860px) { .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

a.kpi {
  display: block;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
a.kpi:hover {
  border-color: var(--accent-amber);
  transform: translateY(-1px);
  text-decoration: none;
}

.kpi-label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .6rem;
}

.kpi-value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kpi-sub { font-size: .78rem; color: var(--text-secondary); margin-top: .35rem; }

/* ---- Filters + pager ---- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.filter-field { flex: 0 0 auto; min-width: 150px; }
.filter-field label { margin-bottom: .3rem; }
.filter-grow { flex: 1 1 260px; min-width: 220px; }

.filter-field input, .filter-field select { padding: .55rem .7rem; font-size: .88rem; }

.filter-actions { display: flex; gap: .5rem; align-items: center; }
.filter-actions .btn-secondary { width: auto; padding: .55rem 1rem; font-size: .85rem; }
.filter-actions .btn-ghost { padding: .55rem 1rem; font-size: .85rem; }

input[type="date"], input[type="number"] {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .7rem .8rem;
}

input[type="date"] { color-scheme: dark; }

textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.55;
  padding: .7rem .8rem;
  resize: vertical;
}

textarea:focus, input[type="date"]:focus, input[type="number"]:focus {
  outline: none;
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 3px rgba(var(--accent-sky-rgb), .18);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  font-size: .85rem;
  color: var(--text-muted);
}

/* ---- Staff action boxes ---- */

/* Staff area reuses the same sky-blue palette as the customer portal. The
   amber-dim top border on .topbar-admin (below) is the only cue that this is
   the staff side, so the two areas read as one product, not two brands. */

.action-grid { display: grid; gap: 1.25rem; }

.action-grid { display: grid; gap: 1.25rem; }

@media (min-width: 760px) { .action-grid { grid-template-columns: repeat(2, 1fr); } }

.action-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.action-box .field { margin-bottom: .85rem; }
.action-box .hint { margin-top: 0; margin-bottom: .9rem; }

/* =============================================================================
   PHASE 7 — Public homepage (home.php)
   Marketing front page built from the CCH GUARDIAN PAGE layout brief.
   Reuses the sky-blue palette above; adds hero, steps, and product-spotlight
   blocks that don't exist elsewhere in the app.
   ============================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: 3rem 2rem;
  margin: 1.5rem 0 3rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(140% 160% at 100% 0%, rgba(255, 255, 255, .12), transparent 55%),
    linear-gradient(120deg, var(--accent-amber-dim), var(--accent-amber) 70%);
  color: #FFFFFF;
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr .9fr; padding: 4.5rem 3.5rem; }
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: .9rem;
}

.hero h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 1.1rem;
}

@media (min-width: 900px) { .hero h1 { font-size: 2.75rem; } }

.hero .lede {
  color: rgba(255, 255, 255, .92);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0 0 1.75rem;
  padding-left: 1rem;
  border-left: 3px solid rgba(255, 255, 255, .55);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; position: relative; z-index: 1; }
.hero-actions .btn-primary-link,
.hero-actions .btn-ghost { width: auto; padding: .85rem 1.5rem; font-size: .95rem; }
.hero-actions .btn-primary-link {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--accent-amber-dim);
}
.hero-actions .btn-primary-link:hover { background: rgba(255, 255, 255, .88); }
.hero-actions .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .65);
  color: #FFFFFF;
}
.hero-actions .btn-ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .1); }

.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 2rem;
  opacity: .35;
}

.hero-art svg { width: 100%; max-width: 280px; height: auto; color: #FFFFFF !important; }

/* ---- Trust / partner strip reuses .guardian-strip but stacks two blurbs ---- */

.trust-block { display: grid; gap: 1.1rem; margin-bottom: 2.25rem; }

.info-panel {
  background: rgba(var(--accent-sky-rgb), .12);
  border: 1px solid transparent;
  border-left: 4px solid var(--accent-amber);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
}

.info-panel h3 {
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.info-panel p { color: var(--text-secondary); font-size: .92rem; line-height: 1.65; margin: 0; }

/* ---- 4-step strip ---- */

.steps-section { margin: 3rem 0; text-align: center; }

.steps-section h2 { font-size: 1.6rem; margin-bottom: 2rem; }

.steps-grid {
  display: grid;
  gap: 1.5rem;
  text-align: left;
}

@media (min-width: 760px) {
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
}

.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-amber);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 600;
  margin-bottom: .9rem;
}

.step-card h4 { font-size: .98rem; margin: 0; color: var(--text-primary); }

/* ---- Product grid (homepage) ----
   2x2 grid: CCH Guardian Nomad, CCH Guardian Media on top; CCH Guardian
   Small & Medium Sized Business bottom-left; a deliberately empty fourth
   slot bottom-right, reserved for a future product. Packages come back
   from get_active_packages() in sort_order, so DOM order alone gives the
   right placement — no nth-child targeting needed. */

.spotlight-section { margin: 3.5rem 0; }

.spotlight-head { text-align: center; margin-bottom: 2rem; }
.spotlight-head .eyebrow { justify-content: center; }
.spotlight-head h2 { font-size: 1.65rem; }

.home-plan-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 760px) {
  .home-plan-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}

.home-plan-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.home-plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-teal);
  box-shadow: 0 18px 40px -18px rgba(var(--accent-teal-rgb), .45);
}

.home-plan-hero {
  margin: -1.75rem -1.75rem 1.25rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--bg);
}

.home-plan-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.home-plan-name { font-size: 1.25rem; margin-bottom: .25rem; }
.home-plan-tagline { color: var(--accent-teal); font-size: .85rem; font-weight: 600; margin: 0 0 1rem; }

.home-plan-price { display: flex; align-items: baseline; gap: .45rem; margin-bottom: 1.1rem; }
.home-plan-price .amount { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.home-plan-price .period { color: var(--text-muted); font-size: .85rem; }

.home-plan-card .plan-features { flex: 1; }

.home-plan-cta-form {
  align-self: flex-start;
  margin: .5rem 0 0;
}

.home-plan-cta {
  width: auto;
  padding: .8rem 1.75rem;
  font-size: .92rem;
  margin-top: 0;
}

.home-plan-card-empty {
  background: transparent;
  border: 1px dashed var(--border);
  box-shadow: none;
}

.home-plan-card-empty:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

.login-admin-link {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
    font-size: 14px;
    color: #5a6b85;
}
.login-admin-link a {
    margin-left: 6px;
    font-weight: 600;
    color: #29a9dc; /* match your Log in button blue */
    text-decoration: none;
}
.login-admin-link a:hover {
    text-decoration: underline;
}