﻿/* HostGuru &mdash; n8n AI Hosting Page Styles
 * All inline styles moved here from page-n8n-ai-hosting.php.
 * Palette: #f57200 (orange), #0f172a (navy), #f9fafb (surface).
 * No purple, no off-orange (#f57200 replaced with #f57200).
 */

/* â”€â”€ ALERT BAR â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-alert-bar {
  background: #f57200;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .03em;
  position: relative;
  z-index: 20;
}
.n8n-alert-bar a { color: #fff; text-decoration: underline; margin-left: 8px; }

/* â”€â”€ HERO â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-hero-wrap {
  background: linear-gradient(180deg, #0a0a12 0%, #0f172a 60%, #0a0a12 100%);
  position: relative;
  overflow: hidden;
  padding: 0;
}
/* Subtle dot-grid overlay (no colour outside palette) */
.n8n-hero-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245,114,0,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
.n8n-hero-inner {
  position: relative;
  z-index: 5;
  padding: 72px 16px 80px;
}
/* Product pill */
.n8n-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.n8n-hero-icon {
  width: 52px;
  height: 52px;
  background: #f57200;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.n8n-hero-label-top {
  font-size: 11px;
  font-weight: 700;
  color: #f57200;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.n8n-hero-label-bottom {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}
/* Hero heading */
.n8n-hero-h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin: 0 0 18px !important;
}
.n8n-hero-h1 span { color: #f57200; }
/* Desc */
.n8n-hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.82);
  max-width: 520px;
  margin: 0 0 24px;
  line-height: 1.65;
}
/* Trust checks row */
.n8n-hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.n8n-hero-checks span {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
/* CTAs */
.n8n-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.n8n-btn-primary {
  display: inline-block;
  background: #f57200;
  color: #fff;
  padding: 15px 36px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.n8n-btn-primary:hover {
  background: #d96500;
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}
.n8n-btn-ghost {
  display: inline-block;
  border: 2px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s;
}
.n8n-btn-ghost:hover { border-color: #f57200; color: #fff; text-decoration: none; }
.n8n-hero-note {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.35);
}

/* â”€â”€ TRUST STRIP â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-trust-strip {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 0;
}
.n8n-trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.n8n-trust-strong { font-size: 13px; font-weight: 700; color: #374151 !important; }
.n8n-trust-rating { font-size: 18px; color: #f57200 !important; letter-spacing: 2px; }
.n8n-trust-review { font-size: 13px; color: #6b7280 !important; }
.n8n-trust-data   { font-size: 13px; font-weight: 600; color: #16a34a !important; }
.n8n-trust-deploy { font-size: 13px; font-weight: 600; color: #f57200 !important; }

/* â”€â”€ PLANS SECTION â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-plans-section {
  background: #0f172a;
  padding: 72px 0;
}
.n8n-section-head {
  text-align: center;
  margin-bottom: 40px;
}
.n8n-section-h2 {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
}
.n8n-section-sub {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  max-width: 580px;
  margin: 0 auto;
}
/* Plans grid */
.n8n-plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media(max-width:1024px) { .n8n-plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px)  { .n8n-plans-grid { grid-template-columns: 1fr; } }

/* Plan card */
.n8n-plan-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 28px 20px;
  position: relative;
  transition: border-color .2s;
}
.n8n-plan-card:hover { border-color: #f57200; }
.n8n-plan-card.popular {
  background: #1a0f00;
  border: 2px solid #f57200;
}
.n8n-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #f57200;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: .04em;
}
.n8n-plan-tag {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.n8n-plan-name {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.2;
}
.n8n-plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 20px;
}
.n8n-plan-price-cur {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  align-self: flex-start;
  margin-top: 5px;
}
.n8n-plan-price-num {
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.n8n-plan-price-per { font-size: 13px; color: #6b7280; }
/* CTA button */
.n8n-plan-btn {
  display: block;
  background: transparent;
  color: #fff;
  border: 2px solid #334155;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 20px;
  transition: background .15s, border-color .15s;
}
.n8n-plan-btn:hover,
.n8n-plan-card.popular .n8n-plan-btn {
  background: #f57200;
  border-color: #f57200;
  color: #fff;
  text-decoration: none;
}
.n8n-plan-desc {
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 16px;
  line-height: 1.5;
}
.n8n-plan-specs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.n8n-plan-specs li {
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  padding: 5px 0;
  border-bottom: 1px solid #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.n8n-plan-specs li::before {
  content: '\2713';
  color: #f57200;
  font-weight: 700;
  flex-shrink: 0;
}
.n8n-plans-note {
  text-align: center;
  margin-top: 20px;
  font-size: 12.5px;
  color: rgba(255,255,255,.35);
}

/* â”€â”€ WHAT IS N8N SECTION â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-what-section {
  background: #fff;
  padding: 80px 0;
}
.n8n-what-visual {
  background: #0f172a;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.n8n-what-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245,114,0,.08) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
.n8n-what-emoji {
  position: relative;
  font-size: 72px;
  margin-bottom: 20px;
}
.n8n-integ-pills {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.n8n-integ-pill {
  background: rgba(245,114,0,.15);
  border: 1px solid rgba(245,114,0,.3);
  color: #f57200;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
}
.n8n-what-note {
  position: relative;
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,.45);
}
.n8n-what-text p {
  font-size: 15px;
  color: #374151;
  line-height: 1.75;
  margin-bottom: 18px;
}
.n8n-btn-secondary {
  display: inline-block;
  background: #f57200;
  color: #fff;
  padding: 13px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s;
}
.n8n-btn-secondary:hover { background: #d96500; color: #fff; text-decoration: none; }
.n8n-btn-docs {
  display: inline-block;
  border: 2px solid #e5e7eb;
  color: #374151;
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: border-color .15s;
}
.n8n-btn-docs:hover { border-color: #f57200; color: #f57200; text-decoration: none; }

/* â”€â”€ USE CASES GRID â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-cases-section {
  background: #f9fafb;
  padding: 72px 0;
}
.n8n-cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media(max-width:900px) { .n8n-cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px) { .n8n-cases-grid { grid-template-columns: 1fr; } }

.n8n-case-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px 20px;
  transition: border-color .2s, box-shadow .2s;
}
.n8n-case-card:hover {
  border-color: #f57200;
  box-shadow: 0 4px 20px rgba(245,114,0,.08);
}
.n8n-case-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.n8n-case-title {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
}
.n8n-case-desc {
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.6;
}

/* â”€â”€ WHY SELF-HOST â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-why-section {
  background: #0f172a;
  padding: 72px 0;
}
.n8n-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media(max-width:768px) { .n8n-why-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:480px) { .n8n-why-grid { grid-template-columns: 1fr; } }

.n8n-why-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 24px 20px;
  transition: border-color .2s;
}
.n8n-why-card:hover { border-color: #f57200; }
.n8n-why-icon { font-size: 28px; margin-bottom: 12px; }
.n8n-why-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.n8n-why-desc { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.6; }

/* â”€â”€ COMPARISON TABLE â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-vs-section {
  background: #fff;
  padding: 72px 0;
}
.n8n-vs-table {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.n8n-vs-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}
.n8n-vs-row + .n8n-vs-row { border-top: 1px solid #e5e7eb; }
.n8n-vs-head { background: #0f172a; }
.n8n-vs-head .n8n-vs-cell { color: #fff; font-weight: 800; padding: 16px; font-size: 13.5px; }
.n8n-vs-cell { padding: 12px 16px; font-size: 13px; color: #374151; }
.n8n-vs-row:nth-child(even) .n8n-vs-cell { background: rgba(255,255,255,.06); }
.n8n-vs-yes { color: #16a34a; font-weight: 700; }
.n8n-vs-no  { color: #6b7280; }

/* â”€â”€ INTEGRATIONS â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-integ-section {
  background: #f9fafb;
  padding: 72px 0;
}
.n8n-integ-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}
.n8n-tab-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.n8n-tab-btn.active,
.n8n-tab-btn:hover {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.n8n-integ-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media(max-width:768px) { .n8n-integ-grid { grid-template-columns: repeat(2, 1fr); } }
.n8n-integ-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  transition: border-color .15s;
}
.n8n-integ-item:hover { border-color: #f57200; }

/* â”€â”€ CTA BAND â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.n8n-cta-section {
  background: #f57200;
  padding: 72px 0;
  text-align: center;
}
.n8n-cta-section h2 { color: #fff !important; font-size: 2rem !important; margin-bottom: 12px !important; }
.n8n-cta-section p { color: rgba(255,255,255,.88); font-size: 15px; margin-bottom: 28px; }
.n8n-cta-btn-white {
  display: inline-block;
  background: #fff;
  color: #f57200;
  padding: 14px 36px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14.5px;
  text-decoration: none;
  transition: background .15s;
}
.n8n-cta-btn-white:hover { background: #fff7ed; color: #f57200; text-decoration: none; }

/* â”€â”€ GENERIC GRID â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.hg-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media(max-width:768px) { .hg-grid-2col { grid-template-columns: 1fr; gap: 32px; } }


/* ─── Integration item sub-elements (added for rewritten tab system) ─── */
.n8n-integ-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.n8n-integ-name {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

/* Tab panels — shown/hidden by JS */
.n8n-tab-panel {
  display: block; /* first panel shown by default */
}

/* VS table: feature column readable on dark section */
.n8n-vs-row .n8n-vs-cell:first-child {
  color: rgba(255,255,255,.72);
}
.n8n-vs-head .n8n-vs-cell:first-child {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   HGL PRICING CARDS — Clean, lightweight, consistent
   Applies to: hosting, VPS, dedicated, OpenClaw, DeepSeek,
               Cloud VDS, n8n, ecommerce, reseller pages
   ═══════════════════════════════════════════════════════════ */

/* Grid */
.hgl-grid                 { display:grid; gap:18px; }
.hgl-grid-4col            { grid-template-columns:repeat(4,1fr); }
.hgl-grid-5col            { grid-template-columns:repeat(5,1fr); }
.hgl-grid-3col            { grid-template-columns:repeat(3,1fr); }
@media(max-width:1200px)  { .hgl-grid-4col,.hgl-grid-5col { grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px)   { .hgl-grid-3col { grid-template-columns:1fr; } }
@media(max-width:640px)   { .hgl-grid-4col,.hgl-grid-5col,.hgl-grid-3col { grid-template-columns:1fr; } }

/* Card base */
.hgl-card {
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:16px;
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .18s;
}
.hgl-card:hover {
  border-color:#d1d5db;
  box-shadow:0 8px 24px rgba(0,0,0,.07);
  transform:translateY(-2px);
}
.hgl-card.hgl-featured {
  border-color:#f57200;
  box-shadow:0 0 0 3px rgba(245,114,0,.08);
}
.hgl-card.hgl-featured:hover {
  box-shadow:0 8px 28px rgba(245,114,0,.14);
}

/* Badge — small pill top-right */
.hgl-badge {
  position:absolute; top:14px; right:14px;
  font-size:9.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  padding:4px 11px; border-radius:100px; color:#fff;
  line-height:1.4;
}
.hgl-badge.orange  { background:#f57200; }
.hgl-badge.green   { background:#16a34a; }
.hgl-badge.blue    { background:#2563eb; }
.hgl-badge.purple  { background:#7c3aed; }
.hgl-badge.teal    { background:#0d9488; }
.hgl-badge.cyan    { background:#0891b2; }
.hgl-badge.indigo  { background:#4f46e5; }

/* Plan name & tagline */
.hgl-name {
  font-size:.97rem; font-weight:800; color:#111827;
  margin:0 0 4px; padding-right:70px; line-height:1.3;
}
.hgl-tagline {
  font-size:12px; color:#6b7280;
  margin:0 0 14px; line-height:1.5;
}

/* Price block */
.hgl-price-block  { margin-bottom:14px; }
.hgl-price        { font-size:1.95rem; font-weight:900; color:#111827; line-height:1; letter-spacing:-.02em; }
.hgl-price sub    { font-size:12px; font-weight:500; color:#9ca3af; vertical-align:baseline; letter-spacing:0; }
.hgl-billing-note { font-size:11px; color:#9ca3af; margin-top:4px; }
.hgl-price-data   { display:none; }

/* Divider */
.hgl-divider { border:none; border-top:1px solid #f3f4f6; margin:0 0 12px; }

/* Resource rows — clean key/value */
.hgl-resources   { display:flex; flex-direction:column; margin-bottom:12px; }
.hgl-res-row     { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #f9fafb; font-size:12.5px; }
.hgl-res-row:last-child { border-bottom:none; }
.hgl-res-label   { color:#6b7280; font-weight:500; }
.hgl-res-value   { color:#111827; font-weight:700; }
.hgl-unlimited   { color:#16a34a !important; font-weight:700; }

/* Feature checklist — uniform, no colour overrides */
.hgl-stack       { display:flex; flex-direction:column; gap:5px; margin-bottom:18px; flex:1; }
.hgl-stack-row   { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.45; }
.hgl-stack-row svg  { flex-shrink:0; margin-top:1px; color:#16a34a; }
.hgl-stack-row span { flex:1; color:#374151 !important; font-weight:500 !important; font-style:normal !important; }

/* CTA button */
.hgl-cta {
  display:block; text-align:center;
  padding:11px 16px; border-radius:9px;
  font-size:13.5px; font-weight:700;
  text-decoration:none;
  transition:background .18s, transform .15s, box-shadow .15s;
  margin-top:auto;
}
.hgl-cta.primary             { background:#f57200; color:#fff !important; border:1.5px solid #f57200; }
.hgl-cta.primary:hover       { background:#d96000; border-color:#d96000; transform:translateY(-1px); box-shadow:0 4px 12px rgba(245,114,0,.25); }
.hgl-cta.outline             { background:#fff; color:#374151 !important; border:1.5px solid #e5e7eb; }
.hgl-cta.outline:hover       { border-color:#f57200; color:#f57200 !important; }

/* Period toggle (monthly/annual) */
.hgl-toggle-wrap   { display:inline-flex; background:#f3f4f6; border-radius:100px; padding:3px; gap:3px; margin-bottom:24px; }
.hgl-period-btn    { background:transparent; border:none; border-radius:100px; padding:7px 20px; font-size:13px; font-weight:600; color:#6b7280; cursor:pointer; transition:background .15s,color .15s; }
.hgl-period-btn.active { background:#fff; color:#111827; box-shadow:0 1px 4px rgba(0,0,0,.10); }
.hgl-save-badge    { background:#dcfce7; color:#166534; font-size:10px; font-weight:700; padding:2px 7px; border-radius:100px; margin-left:6px; }

/* Support label — hide (removed from PHP, kept for safety) */
.hgl-support { display:none; }

/* Specs expand toggle */
.hgl-toggle-specs {
  background:transparent; border:1.5px solid #e5e7eb; border-radius:8px;
  padding:8px 20px; font-size:13px; font-weight:600; color:#6b7280;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  margin-top:16px; transition:border-color .15s, color .15s;
}
.hgl-toggle-specs:hover { border-color:#f57200; color:#f57200; }

/* Specs table */
.hgl-specs-table { display:none; margin-top:20px; overflow-x:auto; }
.hgl-specs-table.visible { display:block; }
.hgl-table { width:100%; border-collapse:collapse; font-size:13px; }
.hgl-table th,.hgl-table td { padding:9px 12px; border:1px solid #f1f5f9; text-align:left; }
.hgl-table th { background:#f8fafc; font-weight:700; color:#374151; }
.hgl-table .hgl-yes { color:#16a34a; font-weight:700; text-align:center; }
.hgl-table .hgl-no  { color:#9ca3af; text-align:center; }
.hgl-unlimited      { color:#16a34a; font-weight:700; }

/* Plans footer note */
.hgl-plans-note { text-align:center; margin-top:18px; font-size:12px; color:#9ca3af; line-height:1.7; }

/* Responsive */
@media(max-width:480px) {
  .hgl-card   { padding:20px 16px; border-radius:14px; }
  .hgl-price  { font-size:1.75rem; }
  .hgl-name   { font-size:.93rem; padding-right:60px; }
  .hgl-badge  { font-size:9px; padding:3px 9px; }
}
/* ===============================================================
   MOBILE FIXES — Audited June 2026
   =============================================================== */
/* P8/C8: n8n vs comparison row — zero breakpoint existed */
@media (max-width: 640px) { .n8n-vs-row { grid-template-columns: 1fr !important; } }
/* P9/C10: n8n vs table — scroll instead of clip */
.n8n-vs-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
/* M22: n8n hero padding reduction on mobile */
@media (max-width: 767px) { .n8n-hero-inner { padding: 48px 16px 56px; } }
/* M23: n8n CTA buttons full-width on very small phones */
@media (max-width: 480px) {
  .n8n-btn-primary, .n8n-btn-ghost { width: 100%; text-align: center; justify-content: center; }
}
/* L9: integrations grid 1-col at 400px */
@media (max-width: 400px) { .n8n-integ-grid { grid-template-columns: 1fr; } }
/* L10/L13: CTA and visual-block padding on mobile */
@media (max-width: 767px) { .n8n-cta-section { padding: 52px 0; } .n8n-what-visual { padding: 24px; } }
