/*
 * Final — JasCloud theme
 * Loaded automatically by WHMCS after theme.css (see includes/head.tpl).
 * Docs: https://developers.whmcs.com/themes/css-styling/
 *
 * Direction: Tech / Cloud — clean, blue accent, generous whitespace,
 * sharp typography, subtle shadows, modern radii.
 */


/* ============================================================
 * 1. Design Tokens
 * ============================================================ */

:root {
  /* Brand */
  --jc-primary:        #2563eb;      /* blue-600 */
  --jc-primary-hover:  #1d4ed8;      /* blue-700 */
  --jc-primary-soft:   #eff6ff;      /* blue-50  */
  --jc-accent:         #06b6d4;      /* cyan-500 — used for highlights */

  /* Neutrals (slate) */
  --jc-bg:             #ffffff;
  --jc-bg-alt:         #f8fafc;      /* slate-50 */
  --jc-bg-soft:        #f1f5f9;      /* slate-100 */
  --jc-border:         #e2e8f0;      /* slate-200 */
  --jc-border-strong:  #cbd5e1;      /* slate-300 */
  --jc-text:           #0f172a;      /* slate-900 */
  --jc-text-soft:      #475569;      /* slate-600 */
  --jc-text-muted:     #94a3b8;      /* slate-400 */

  /* Semantic */
  --jc-success:        #16a34a;
  --jc-warning:        #f59e0b;
  --jc-danger:         #dc2626;
  --jc-info:           #0ea5e9;

  /* Typography */
  --jc-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --jc-font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --jc-radius-sm:      6px;
  --jc-radius:         10px;
  --jc-radius-lg:      14px;
  --jc-radius-xl:      20px;

  /* Shadows */
  --jc-shadow-sm:      0 1px 2px rgba(15, 23, 42, .05);
  --jc-shadow:         0 4px 12px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --jc-shadow-lg:      0 12px 32px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .05);
  --jc-shadow-focus:   0 0 0 4px rgba(37, 99, 235, .12);

  /* Spacing */
  --jc-space-1: .25rem;
  --jc-space-2: .5rem;
  --jc-space-3: .75rem;
  --jc-space-4: 1rem;
  --jc-space-5: 1.5rem;
  --jc-space-6: 2rem;
  --jc-space-8: 3rem;

  /* Transitions */
  --jc-ease: cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================
 * 2. Web fonts
 *    Inter (UI) + JetBrains Mono (code/numbers).
 *    Loaded over HTTPS from Google Fonts.
 * ============================================================ */

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


/* ============================================================
 * 3. Global resets / base typography
 * ============================================================ */

body {
  font-family: var(--jc-font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--jc-text);
  background-color: var(--jc-bg-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--jc-font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--jc-text);
}

h1, .h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.125rem; }

code, pre, kbd, samp, .text-monospace {
  font-family: var(--jc-font-mono);
  font-size: .9em;
}

a {
  color: var(--jc-primary);
  transition: color .15s var(--jc-ease);
}
a:hover, a:focus {
  color: var(--jc-primary-hover);
  text-decoration: none;
}


/* ============================================================
 * 4. Bootstrap overrides — buttons
 * ============================================================ */

.btn {
  font-weight: 500;
  border-radius: var(--jc-radius);
  padding: .55rem 1.1rem;
  transition: background-color .15s var(--jc-ease),
              border-color   .15s var(--jc-ease),
              box-shadow     .15s var(--jc-ease),
              transform      .05s var(--jc-ease);
  border-width: 1px;
}
.btn:focus,
.btn.focus {
  box-shadow: var(--jc-shadow-focus);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--jc-primary);
  border-color:     var(--jc-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--jc-primary-hover);
  border-color:     var(--jc-primary-hover);
}

.btn-outline-primary {
  color:        var(--jc-primary);
  border-color: var(--jc-primary);
}
.btn-outline-primary:hover {
  background-color: var(--jc-primary);
  border-color:     var(--jc-primary);
  color: #fff;
}

.btn-secondary {
  background-color: #fff;
  border-color:     var(--jc-border-strong);
  color:            var(--jc-text);
}
.btn-secondary:hover {
  background-color: var(--jc-bg-soft);
  border-color:     var(--jc-border-strong);
  color:            var(--jc-text);
}

.btn-success { background-color: var(--jc-success); border-color: var(--jc-success); }
.btn-danger  { background-color: var(--jc-danger);  border-color: var(--jc-danger);  }
.btn-warning { background-color: var(--jc-warning); border-color: var(--jc-warning); color: #fff; }
.btn-info    { background-color: var(--jc-info);    border-color: var(--jc-info);    }

.btn-lg { padding: .75rem 1.5rem; font-size: 1rem;    border-radius: var(--jc-radius-lg); }
.btn-sm { padding: .35rem .75rem; font-size: .8125rem; border-radius: var(--jc-radius-sm); }


/* ============================================================
 * 5. Cards & panels
 * ============================================================ */

.card,
.panel {
  background-color: #fff;
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-sm);
  transition: box-shadow .2s var(--jc-ease),
              transform  .2s var(--jc-ease);
}
.card:hover {
  box-shadow: var(--jc-shadow);
}

.card-header,
.panel-heading {
  background-color: #fff;
  border-bottom: 1px solid var(--jc-border);
  font-weight: 600;
  padding: 1rem 1.25rem;
}

.card-body { padding: 1.25rem; }
.card-footer {
  background-color: var(--jc-bg-alt);
  border-top: 1px solid var(--jc-border);
}


/* ============================================================
 * 6. Forms
 * ============================================================ */

.form-control,
.custom-select,
.input-group-text {
  border: 1px solid var(--jc-border-strong);
  border-radius: var(--jc-radius);
  font-size: .9375rem;
  padding: .55rem .85rem;
  height: auto;
  background-color: #fff;
  color: var(--jc-text);
  transition: border-color .15s var(--jc-ease),
              box-shadow   .15s var(--jc-ease);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--jc-primary);
  box-shadow: var(--jc-shadow-focus);
}
.form-control::placeholder { color: var(--jc-text-muted); }

label,
.form-label {
  font-weight: 500;
  font-size: .875rem;
  color: var(--jc-text-soft);
  margin-bottom: .35rem;
}


/* ============================================================
 * 7. Navbar
 * ============================================================ */

.navbar {
  background-color: #fff;
  border-bottom: 1px solid var(--jc-border);
  padding: .65rem 1rem;
  box-shadow: var(--jc-shadow-sm);
}
.navbar-brand {
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--jc-text) !important;
}
.navbar-nav .nav-link {
  color: var(--jc-text-soft) !important;
  font-weight: 500;
  font-size: .9375rem;
  padding: .5rem .85rem !important;
  border-radius: var(--jc-radius-sm);
  transition: background-color .15s var(--jc-ease),
              color .15s var(--jc-ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--jc-text) !important;
  background-color: var(--jc-bg-soft);
}
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: var(--jc-primary) !important;
  background-color: var(--jc-primary-soft);
}


/* ============================================================
 * 8. Sidebar
 * ============================================================ */

.sidebar .panel,
.sidebar .card {
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-lg);
  box-shadow: none;
}
.list-group-item {
  border-color: var(--jc-border);
  padding: .65rem 1rem;
  font-size: .9375rem;
}
.list-group-item.active {
  background-color: var(--jc-primary);
  border-color:     var(--jc-primary);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--jc-bg-soft);
  color: var(--jc-text);
}


/* ============================================================
 * 9. Alerts
 * ============================================================ */

.alert {
  border: 1px solid transparent;
  border-radius: var(--jc-radius);
  padding: .85rem 1rem;
  font-size: .9375rem;
}
.alert-success { background-color: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.alert-info    { background-color: #f0f9ff; border-color: #bae6fd; color: #0c4a6e; }
.alert-warning { background-color: #fffbeb; border-color: #fde68a; color: #78350f; }
.alert-danger  { background-color: #fef2f2; border-color: #fecaca; color: #7f1d1d; }


/* ============================================================
 * 10. Tables
 * ============================================================ */

.table {
  font-size: .9375rem;
  color: var(--jc-text);
}
.table thead th {
  background-color: var(--jc-bg-alt);
  border-bottom: 1px solid var(--jc-border);
  border-top: none;
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--jc-text-soft);
  padding: .85rem 1rem;
}
.table tbody td {
  border-top: 1px solid var(--jc-border);
  padding: .85rem 1rem;
  vertical-align: middle;
}
.table-hover tbody tr:hover { background-color: var(--jc-bg-alt); }


/* ============================================================
 * 11. Badges & pills
 * ============================================================ */

.badge {
  font-weight: 500;
  font-size: .75rem;
  padding: .35em .65em;
  border-radius: 999px;
  letter-spacing: .02em;
}
.badge-primary   { background-color: var(--jc-primary-soft); color: var(--jc-primary); }
.badge-success   { background-color: #dcfce7; color: #166534; }
.badge-danger    { background-color: #fee2e2; color: #991b1b; }
.badge-warning   { background-color: #fef3c7; color: #92400e; }
.badge-info      { background-color: #e0f2fe; color: #075985; }


/* ============================================================
 * 12. Footer
 * ============================================================ */

/* Sticky footer: make body a flex column so #footer always sits at
   the bottom of the viewport when the content is shorter than the screen. */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#main-body { flex: 1 0 auto; }
#footer    { flex-shrink: 0; }

.footer,
footer.footer {
  background-color: #fff;
  border-top: 1px solid var(--jc-border);
  color: var(--jc-text);
  font-size: .875rem;
  padding: 2rem 0;
  margin-top: 3rem;
}
/* Footer nav links — readable black, blue on hover/focus.
   Use `footer.footer` (matching Twenty-One's specificity) so we win
   without resorting to !important. */
footer.footer .nav-link,
footer.footer a,
footer.footer .copyright {
  color: var(--jc-text);
  font-weight: 500;
  opacity: 1;
}
footer.footer .nav-link:hover,
footer.footer .nav-link:focus,
footer.footer a:hover,
footer.footer a:focus {
  color: var(--jc-primary);
  text-decoration: none;
}

/* Social icons (and any .btn) inside the footer — same dark colour,
   override Twenty-One's footer.footer .btn { color:#fff }. */
footer.footer .btn,
footer.footer .btn:link,
footer.footer .btn:visited {
  color: var(--jc-text);
}
footer.footer .btn:hover,
footer.footer .btn:focus {
  color: var(--jc-primary);
}
footer.footer .btn .fab,
footer.footer .btn .fas,
footer.footer .btn .far,
footer.footer .btn i {
  color: inherit;
}


/* ============================================================
 * 13. Page header / breadcrumb
 * ============================================================ */

#main-body,
.main-content {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.page-header,
.header-lined {
  border-bottom: 1px solid var(--jc-border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1rem;
  font-size: .875rem;
}
.breadcrumb-item a       { color: var(--jc-text-soft); }
.breadcrumb-item.active  { color: var(--jc-text-muted); }


/* ============================================================
 * 14. Modal
 * ============================================================ */

.modal-content {
  border: none;
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--jc-border);
  padding: 1rem 1.25rem;
}
.modal-footer {
  border-top: 1px solid var(--jc-border);
  padding: .85rem 1.25rem;
}


/* ============================================================
 * 15. Dropdowns
 * ============================================================ */

.dropdown-menu {
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius);
  box-shadow: var(--jc-shadow-lg);
  padding: .35rem;
  font-size: .9375rem;
}
.dropdown-item {
  border-radius: var(--jc-radius-sm);
  padding: .45rem .75rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--jc-bg-soft);
  color: var(--jc-text);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--jc-primary);
  color: #fff;
}
.dropdown-divider {
  border-color: var(--jc-border);
  margin: .35rem 0;
}


/* ============================================================
 * 16. Pagination
 * ============================================================ */

.pagination .page-link {
  border-color: var(--jc-border);
  color: var(--jc-text-soft);
  margin: 0 2px;
  border-radius: var(--jc-radius-sm) !important;
}
.pagination .page-item.active .page-link {
  background-color: var(--jc-primary);
  border-color:     var(--jc-primary);
}


/* ============================================================
 * 17. Utility tweaks
 * ============================================================ */

hr { border-color: var(--jc-border); }

.text-muted        { color: var(--jc-text-muted) !important; }
.text-primary      { color: var(--jc-primary) !important; }
.bg-light          { background-color: var(--jc-bg-alt) !important; }
.border            { border-color: var(--jc-border) !important; }

::selection { background: var(--jc-primary-soft); color: var(--jc-primary); }


/* ============================================================
 * 18. Focus visibility (a11y)
 * ============================================================ */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible {
  outline: 2px solid var(--jc-primary);
  outline-offset: 2px;
}


/* ============================================================
 * 18a. Single-row header
 *      Brand · primary nav · search · cart · account, all in one bar.
 * ============================================================ */

.jc-navbar-single {
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.jc-navbar-single .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.jc-navbar-single .navbar-brand {
  flex-shrink: 0;
  margin-right: 1.5rem;
}
.jc-navbar-single .navbar-collapse {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.jc-navbar-single .navbar-nav {
  align-items: center;
}
.jc-navbar-single #nav.navbar-nav {
  flex-direction: row;
}
.jc-navbar-single #nav .nav-link {
  padding: .4rem .85rem !important;
  font-size: .9375rem;
}

/* Search inside the row — keep it compact but visible from md+. */
.jc-navbar-search {
  margin: 0;
}
.jc-navbar-search .input-group { width: 240px; }
.jc-navbar-search .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: .4rem .75rem;
  font-size: .875rem;
  height: auto;
}
.jc-navbar-search .btn-default {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: #fff;
  border: 1px solid var(--jc-border-strong);
  border-right: none;
  color: var(--jc-text-muted);
  padding: .4rem .65rem;
}

/* Cart & account icons. */
.jc-navbar-toolbar .cart-btn {
  position: relative;
  padding: .4rem .65rem !important;
  color: var(--jc-text-soft) !important;
}
.jc-navbar-toolbar .cart-btn:hover { color: var(--jc-text) !important; }
.jc-navbar-toolbar .cart-btn .badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(20%, -10%);
  font-size: .65rem;
  padding: .15em .4em;
}

/* Drop the older two-row toolbar styling override safely (no-op
   if Twenty-One has not added it). */
.jc-navbar-single .topbar { display: none; }

/* Mobile: collapse menu under the toggler, stack rows */
@media (max-width: 1199.98px) {
  .jc-navbar-single .container { flex-wrap: wrap; }
  .jc-navbar-single .navbar-collapse {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: .25rem;
    padding-top: .5rem;
  }
  .jc-navbar-single #nav.navbar-nav { flex-direction: column; }
  .jc-navbar-search { order: -1; margin-bottom: .5rem; }
  .jc-navbar-search .input-group { width: 100%; }
}


/* ============================================================
 * 19. Homepage — Precedent-style sections
 *     Naming: .jc-home-* — scoped to homepage, prefixed `jc-home-`
 *     to avoid clashing with any module/WHMCS class.
 * ============================================================ */

/* Hero */
.jc-home-hero {
  text-align: center;
  padding: 100px 24px 80px;
  max-width: 800px;
  margin: 0 auto;
}
.jc-home-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--jc-border);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--jc-text-soft);
  margin-bottom: 32px;
  transition: border-color .2s var(--jc-ease), color .2s var(--jc-ease);
  text-decoration: none;
}
.jc-home-hero__badge:hover {
  border-color: var(--jc-primary);
  color: var(--jc-text);
  text-decoration: none;
}
.jc-home-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jc-success);
  animation: jc-pulse 2s infinite;
}
@keyframes jc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
.jc-home-hero__title {
  font-family: var(--jc-font-sans);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--jc-text);
  margin: 0 0 24px;
}
.jc-home-hero__title-accent {
  background: linear-gradient(135deg, var(--jc-primary) 0%, #6366f1 50%, var(--jc-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.jc-home-hero__lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--jc-text-soft);
  max-width: 560px;
  margin: 0 auto 40px;
}
.jc-home-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Primary / secondary CTAs reused across sections */
.jc-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--jc-radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--jc-ease),
              border-color .2s var(--jc-ease),
              color .2s var(--jc-ease),
              transform .05s var(--jc-ease),
              box-shadow .2s var(--jc-ease);
  text-decoration: none !important;
  border: 1px solid transparent;
}
.jc-home-btn--primary {
  color: #fff !important;
  background: var(--jc-primary);
}
.jc-home-btn--primary:hover {
  background: var(--jc-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--jc-shadow);
  color: #fff !important;
}
.jc-home-btn--secondary {
  color: var(--jc-text) !important;
  background: #fff;
  border-color: var(--jc-border);
}
.jc-home-btn--secondary:hover {
  border-color: var(--jc-primary);
  background: var(--jc-primary-soft);
  color: var(--jc-primary) !important;
}
/* Inline SVGs in homepage — cap aggressively. theme.min.css sets
   svg { width: 100% } in some contexts, so we use !important to win
   without touching the parent stylesheet. */
.jc-home-hero svg,
.jc-home-pricing svg,
.jc-home-ib svg,
.jc-home-features svg,
.jc-home-testimonials svg,
.jc-home-stats svg,
.jc-home-cta svg {
  width: 1em !important;
  height: 1em !important;
  max-width: 1em !important;
  max-height: 1em !important;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.jc-home-btn__icon,
.jc-home-btn svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}
.jc-home-pricing__specs svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}
.jc-home-feature__icon svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

/* GPU Pricing */
.jc-home-pricing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.jc-home-pricing__title {
  font-family: var(--jc-font-sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--jc-text);
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: -.02em;
}
.jc-home-pricing__sub {
  text-align: center;
  color: var(--jc-text-soft);
  font-size: 16px;
  margin: 0 0 40px;
}
.jc-home-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.jc-home-pricing__card {
  border: 1px solid var(--jc-border);
  border-radius: 16px;
  padding: 32px 28px;
  background: #fff;
  transition: border-color .2s var(--jc-ease),
              box-shadow .2s var(--jc-ease),
              transform .2s var(--jc-ease);
}
.jc-home-pricing__card:hover {
  border-color: var(--jc-border-strong);
  box-shadow: var(--jc-shadow);
}
.jc-home-pricing__card--featured {
  border-color: var(--jc-primary);
  box-shadow: 0 0 0 1px var(--jc-primary);
  position: relative;
}
.jc-home-pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--jc-primary);
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.jc-home-pricing__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--jc-text);
  margin-bottom: 4px;
}
.jc-home-pricing__price {
  font-size: 36px;
  font-weight: 700;
  color: var(--jc-text);
  margin: 16px 0 4px;
}
.jc-home-pricing__price span {
  font-size: 16px;
  font-weight: 400;
  color: var(--jc-text-soft);
}
.jc-home-pricing__specs {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
}
.jc-home-pricing__specs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--jc-text-soft);
  border-top: 1px solid var(--jc-bg-soft);
}
.jc-home-pricing__specs li:first-child { border-top: none; }
.jc-home-pricing__specs li svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  color: var(--jc-success);
  flex-shrink: 0;
  display: inline-block;
}
.jc-home-pricing__specs strong {
  color: var(--jc-text);
  margin-right: 4px;
}
.jc-home-pricing__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  border-radius: var(--jc-radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s var(--jc-ease),
              border-color .2s var(--jc-ease),
              color .2s var(--jc-ease);
  border: 1px solid transparent;
}
.jc-home-pricing__cta--primary {
  background: var(--jc-primary);
  color: #fff !important;
}
.jc-home-pricing__cta--primary:hover { background: var(--jc-primary-hover); }
.jc-home-pricing__cta--secondary {
  background: #fff;
  color: var(--jc-text) !important;
  border-color: var(--jc-border);
}
.jc-home-pricing__cta--secondary:hover {
  border-color: var(--jc-primary);
  color: var(--jc-primary) !important;
}

/* InfiniBand */
.jc-home-ib {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.jc-home-ib__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.jc-home-ib__title {
  font-family: var(--jc-font-sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--jc-text);
  margin: 0 0 16px;
  letter-spacing: -.02em;
}
.jc-home-ib__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--jc-text-soft);
  margin: 0 0 24px;
}
.jc-home-ib__compare {
  border: 1px solid var(--jc-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.jc-home-ib__compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0;
}
.jc-home-ib__compare th {
  background: var(--jc-bg-alt);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--jc-text);
  border-bottom: 1px solid var(--jc-border);
}
.jc-home-ib__compare td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--jc-bg-soft);
  color: var(--jc-text-soft);
}
.jc-home-ib__compare tr:last-child td { border-bottom: none; }
.jc-home-ib__hl {
  color: var(--jc-primary) !important;
  font-weight: 600;
}

/* Features grid */
.jc-home-features {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.jc-home-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--jc-border);
  border: 1px solid var(--jc-border);
  border-radius: 16px;
  overflow: hidden;
}
.jc-home-feature {
  background: #fff;
  padding: 40px 32px;
  transition: background .2s var(--jc-ease);
}
.jc-home-feature:hover { background: var(--jc-bg-alt); }
.jc-home-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--jc-primary-soft);
  color: var(--jc-primary);
}
.jc-home-feature__title {
  font-family: var(--jc-font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--jc-text);
  margin: 0 0 8px;
}
.jc-home-feature__lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--jc-text-soft);
  margin: 0;
}

/* Testimonials */
.jc-home-testimonials {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.jc-home-testimonials__title {
  font-family: var(--jc-font-sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--jc-text);
  text-align: center;
  margin: 0 0 40px;
  letter-spacing: -.02em;
}
.jc-home-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.jc-home-testimonial {
  border: 1px solid var(--jc-border);
  border-radius: 16px;
  padding: 28px;
  background: #fff;
}
.jc-home-testimonial blockquote {
  font-size: 15px;
  line-height: 1.7;
  color: var(--jc-text-soft);
  margin: 0 0 16px;
  font-style: italic;
  border: none;
  padding: 0;
}
.jc-home-testimonial cite {
  font-size: 13px;
  color: var(--jc-text-soft);   /* WCAG AA: 4.5+ on white */
  font-style: normal;
  font-weight: 500;
}

/* Stats */
.jc-home-stats {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.jc-home-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.jc-home-stat__number {
  font-family: var(--jc-font-sans);
  font-size: 40px;
  font-weight: 700;
  color: var(--jc-text);
  letter-spacing: -.02em;
}
.jc-home-stat__label {
  font-size: 14px;
  color: var(--jc-text-soft);
  margin-top: 4px;
}

/* CTA */
.jc-home-cta {
  text-align: center;
  padding: 80px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.jc-home-cta__title {
  font-family: var(--jc-font-sans);
  font-size: 36px;
  font-weight: 700;
  color: var(--jc-text);
  letter-spacing: -.03em;
  margin: 0 0 16px;
}
.jc-home-cta__lead {
  font-size: 16px;
  color: var(--jc-text-soft);
  margin: 0 0 32px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .jc-home-hero               { padding: 60px 20px 50px; }
  .jc-home-hero__title        { font-size: 36px; }
  .jc-home-pricing__grid,
  .jc-home-features__grid     { grid-template-columns: 1fr; }
  .jc-home-stats__grid        { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .jc-home-ib__grid           { grid-template-columns: 1fr; }
  .jc-home-testimonials__grid { grid-template-columns: 1fr; }
}


/* ============================================================
 * 21. Legal pages — Terms of Service, Privacy Policy.
 *     Long-form readable typography on a white card.
 * ============================================================ */

.jc-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 64px;
  background: #fff;
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-sm);
  color: var(--jc-text);
  font-size: 15px;
  line-height: 1.75;
}
.jc-legal__header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--jc-border);
}
.jc-legal__title {
  font-family: var(--jc-font-sans);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
  color: var(--jc-text);
}
.jc-legal__updated {
  color: var(--jc-text-soft);
  font-size: .875rem;
  margin: 0;
}
.jc-legal__lead {
  font-size: 1.0625rem;
  color: var(--jc-text-soft);
  margin-bottom: 2rem;
}
.jc-legal__section {
  margin-top: 2rem;
}
.jc-legal__section:first-of-type { margin-top: 0; }
.jc-legal__section h2 {
  font-family: var(--jc-font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--jc-text);
  margin: 0 0 .75rem;
  scroll-margin-top: 80px;     /* in case of in-page anchor links */
}
.jc-legal__section p {
  margin: 0 0 .85rem;
}
.jc-legal__section ul,
.jc-legal__section ol {
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}
.jc-legal__section li {
  margin-bottom: .35rem;
}
.jc-legal__section a {
  color: var(--jc-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s var(--jc-ease);
}
.jc-legal__section a:hover {
  border-bottom-color: var(--jc-primary);
}
.jc-legal__section strong {
  color: var(--jc-text);
  font-weight: 600;
}
.jc-legal__address {
  font-style: normal;
  line-height: 1.7;
}
@media (max-width: 640px) {
  .jc-legal       { padding: 28px 20px 40px; border-radius: var(--jc-radius); }
  .jc-legal__title { font-size: 1.625rem; }
}