/* =========================================================
   netforge.ro — base layout + shared component styles
   Source: ~/public_html/html/assets/styles.css (legacy mockup)
   Token names migrated to --nf-* prefix (see styles/tokens.css)
   :root + dark-mode tokens stripped (live in tokens.css)
   ========================================================= */

/* =========================================================
   NetForge — Shared Stylesheet
   Port target: WordPress + Divi 5
   ========================================================= */

/* Dark mode (used on hosting/VPS/dedicated/etc pages, or toggled globally) */
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--nf-font-body);
  color: var(--nf-ink);
  background: var(--nf-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-size: 16px;
  transition: background .25s, color .25s;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--nf-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 .5em;
  color: var(--nf-ink);
}
h1 { font-size: clamp(2.25rem, 4.5vw, 4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.625rem); }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 1em; color: var(--nf-slate); }
.eyebrow {
  font-family: var(--nf-font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nf-brand-orange);
  font-weight: 500;
  margin-bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--nf-brand-orange);
}
code, .mono { font-family: var(--nf-font-mono); }

/* Layout */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-tight {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: clamp(52px, 6.5vw, 97px) 0; position: relative; }
section.tight { padding: clamp(39px, 4.9vw, 65px) 0; }

/* Section dividers — subtle top hairline on every section that follows another,
   so consecutive same-bg sections still read as distinct. Skipped for hero +
   tight sections (they flow naturally with the page). */
section + section:not(.tight):not(.hero):not(.page-hero)::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 48px));
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--nf-line) 18%,
    var(--nf-line) 82%,
    transparent 100%);
  opacity: .85;
  pointer-events: none;
}
/* Remove the divider when adjacent sections have DIFFERENT bg — the color
   change already creates the break. bg-alt sections are marked via inline
   style `background:var(--nf-bg-alt)`. */
section[style*="bg-alt"] + section:not([style*="bg-alt"])::before,
section:not([style*="bg-alt"]) + section[style*="bg-alt"]::before {
  display: none;
}

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--nf-bg) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--nf-line);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-logo img { height: 32px; width: auto; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .9375rem;
  color: var(--nf-ink);
  font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-menu a:hover { background: var(--nf-bg-alt); }
.nav-menu a.active { color: var(--nf-brand-orange); }
.nav-menu .has-dropdown { position: relative; }
.nav-menu .has-dropdown > a::after {
  content: "▾";
  margin-left: 6px;
  font-size: .75em;
  opacity: .5;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: var(--nf-bg);
  border: 1px solid var(--nf-line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--nf-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all .18s ease;
}
.nav-menu .has-dropdown:hover .nav-dropdown,
.nav-menu .has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
}
.nav-dropdown a small {
  display: block;
  color: var(--nf-slate-2);
  font-weight: 400;
  margin-top: 2px;
  font-size: .8125rem;
}
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-toggle { display: none; }

/* Language + theme pills.
   The header lang switcher renders <a class="lang-pill"> (real navigations
   to the translated URL). Style buttons AND anchors the same way so the
   group looks identical regardless of which markup is in the DOM. The
   gap between siblings ensures RO/EN are visually separate and gives
   each pill a clean hit target — without it the anchors collapse
   together and clicks near the boundary land on the wrong pill. */
.pill-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--nf-bg-alt);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--nf-line);
}
.pill-group button,
.pill-group .lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  font-size: .75rem;
  font-family: var(--nf-font-mono);
  font-weight: 500;
  border-radius: 999px;
  color: var(--nf-slate);
  letter-spacing: .04em;
  text-decoration: none;
  line-height: 1;
  transition: background .15s, color .15s;
}
.pill-group .lang-pill:hover {
  background: color-mix(in srgb, var(--nf-ink) 8%, transparent);
  color: var(--nf-ink);
}
.pill-group button.active,
.pill-group .lang-pill.active {
  background: var(--nf-ink);
  color: var(--nf-bg);
}
.pill-group .lang-pill.active:hover {
  background: var(--nf-ink);
  color: var(--nf-bg);
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--nf-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nf-bg-alt);
  transition: background .15s;
}
.theme-toggle:hover { background: var(--nf-line); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .9375rem;
  transition: transform .12s, background .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--nf-brand-orange);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(239,126,74,.6);
}
.btn-primary:hover { background: var(--nf-brand-orange-600); }
.btn-ghost {
  background: transparent;
  color: var(--nf-ink);
  border: 1px solid var(--nf-line);
}
.btn-ghost:hover { background: var(--nf-bg-alt); }
.btn-navy {
  background: var(--nf-brand-navy);
  color: #fff;
}
.btn-navy:hover { background: var(--nf-brand-navy-700); }
.btn-sm { padding: 8px 14px; font-size: .875rem; }
.btn-lg { padding: 14px 24px; font-size: 1rem; }

/* ===== Hero ===== */
.hero {
  position: relative;
  /* Symmetric vertical padding so the breathing space above the
     hero content matches the space below it. Previous asymmetric
     values (top up to 113px, bottom only 65px) made the hero feel
     top-heavy vs the rest of the page. */
  padding: clamp(48px, 7vw, 88px) 0;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.hero h1 .grad {
  background: linear-gradient(92deg, var(--nf-brand-navy) 0%, var(--nf-brand-purple) 55%, var(--nf-brand-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead {
  font-size: 1.125rem;
  color: var(--nf-slate);
  max-width: 540px;
  margin-bottom: 32px;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-trust {
  margin-top: 40px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--nf-slate-2);
  font-size: .8125rem;
  font-family: var(--nf-font-mono);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--nf-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-success) 25%, transparent);
}

/* Terminal visual */
.terminal {
  background: var(--nf-ink);
  color: #E6E9F2;
  border-radius: 16px;
  border: 1px solid var(--nf-ink-2);
  overflow: hidden;
  font-family: var(--nf-font-mono);
  font-size: .8125rem;
  box-shadow: var(--nf-shadow-lg);
}
html[data-theme="dark"] .terminal {
  background: #07091A;
  border-color: #1F2947;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #11162B;
  border-bottom: 1px solid #1F2947;
}
.terminal-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #303858; }
.terminal-bar .dot.r { background: #E26D6D; }
.terminal-bar .dot.y { background: #E2B457; }
.terminal-bar .dot.g { background: #5FC98A; }
.terminal-bar .title { margin-left: 10px; font-size: .75rem; color: #8A92AB; }
.terminal-body { padding: 20px 22px; line-height: 1.7; }
.terminal-body .prompt { color: var(--nf-brand-orange); }
.terminal-body .cmd { color: #E6E9F2; }
.terminal-body .out { color: #8A92AB; }
.terminal-body .ok { color: #5FC98A; }
.terminal-body .dim { color: #5A6385; }
.blink { display: inline-block; width: 7px; height: 14px; background: var(--nf-brand-orange); vertical-align: text-bottom; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ===== Arch motif ===== */
.arch-motif {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 0 auto 28px;
  opacity: .9;
}
.arch-motif svg { height: 42px; width: auto; }

/* ===== Cards ===== */
.card {
  background: var(--nf-white);
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  padding: 28px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover {
  border-color: color-mix(in srgb, var(--nf-brand-orange) 35%, var(--nf-line));
  box-shadow: var(--nf-shadow);
  transform: translateY(-2px);
}
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--nf-brand-orange-100);
  color: var(--nf-brand-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
html[data-theme="dark"] .card-icon {
  background: color-mix(in srgb, var(--nf-brand-orange) 20%, transparent);
}

/* ===== Service grid ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card h3 { margin-bottom: 10px; }
.service-card p { font-size: .9375rem; margin-bottom: 20px; }
.service-card a.arrow {
  color: var(--nf-brand-orange);
  font-weight: 600;
  font-size: .875rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.service-card a.arrow::after { content: "→"; transition: transform .15s; }
.service-card:hover a.arrow::after { transform: translateX(3px); }

/* ===== Pricing tables ===== */
.pricing-toggle {
  display: inline-flex;
  background: var(--nf-bg-alt);
  border: 1px solid var(--nf-line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 48px;
}
.pricing-toggle button {
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .875rem;
  color: var(--nf-slate);
  transition: background .15s, color .15s;
}
.pricing-toggle button.active {
  background: var(--nf-ink);
  color: var(--nf-bg);
}
.pricing-toggle .save-badge {
  display: inline-block;
  font-family: var(--nf-font-mono);
  font-size: .6875rem;
  color: var(--nf-brand-orange);
  margin-left: 6px;
  background: var(--nf-brand-orange-100);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .04em;
}
html[data-theme="dark"] .pricing-toggle .save-badge {
  background: color-mix(in srgb, var(--nf-brand-orange) 18%, transparent);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.price-card {
  background: var(--nf-white);
  border: 1px solid var(--nf-line);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  border-color: var(--nf-brand-orange);
  box-shadow: 0 20px 60px -20px rgba(239,126,74,.4);
  transform: translateY(-8px);
}
.price-card.featured::before {
  content: "Most popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nf-brand-orange);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--nf-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-card h3 {
  font-size: 1.125rem;
  margin-bottom: 4px;
}
.price-card .tagline {
  font-size: .8125rem;
  color: var(--nf-slate-2);
  margin-bottom: 20px;
}
.price-card .price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.price-card .price .amount {
  font-family: var(--nf-font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--nf-ink);
  letter-spacing: -.02em;
}
.price-card .price .currency {
  font-weight: 600;
  color: var(--nf-ink);
  font-size: 1rem;
}
.price-card .price .period {
  font-size: .8125rem;
  color: var(--nf-slate-2);
  margin-left: 4px;
}
.price-card .old-price {
  font-size: .8125rem;
  color: var(--nf-slate-2);
  text-decoration: line-through;
  margin-bottom: 20px;
  min-height: 1.2em;
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .875rem;
  flex: 1;
}
.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--nf-ink-2);
}
.price-card li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nf-success);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.5 7.2L6 9.7l4.5-5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  flex-shrink: 0;
  margin-top: 3px;
}
.price-card li strong { color: var(--nf-ink); font-weight: 600; }
.price-card li.muted { color: var(--nf-slate-2); }
.price-card li.muted::before {
  background: var(--nf-line);
  background-image: none;
}
.price-card .btn { justify-content: center; }

/* ===== Comparison table ===== */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.compare-table th, .compare-table td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--nf-line);
  vertical-align: middle;
}
.compare-table th {
  font-family: var(--nf-font-display);
  font-weight: 600;
  color: var(--nf-ink);
  font-size: 1rem;
  background: var(--nf-bg-alt);
}
.compare-table th:first-child { border-top-left-radius: 12px; }
.compare-table th:last-child { border-top-right-radius: 12px; }
.compare-table th.highlight { background: color-mix(in srgb, var(--nf-brand-orange) 12%, var(--nf-bg-alt)); color: var(--nf-brand-orange); }
.compare-table td.center, .compare-table th.center { text-align: center; }
.compare-table td.check::before {
  content: "✓";
  color: var(--nf-success);
  font-weight: 700;
}
.compare-table td.no::before {
  content: "—";
  color: var(--nf-slate-2);
}
.compare-table tr:last-child td { border-bottom: 0; }

/* ===== FAQ ===== */
.faq details {
  background: var(--nf-white);
  border: 1px solid var(--nf-line);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: border-color .15s, background .15s;
}
html[data-theme="dark"] .faq details {
  background: var(--nf-bg-alt);
  border-color: color-mix(in srgb, #fff 8%, transparent);
}
.faq details[open] { border-color: var(--nf-brand-orange); }
.faq summary {
  font-family: var(--nf-font-display);
  font-weight: 600;
  color: var(--nf-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--nf-font-mono);
  color: var(--nf-brand-orange);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .18s;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin: 14px 0 0;
  color: var(--nf-slate);
  font-size: .9375rem;
}

/* ===== Status ticker ===== */
.status-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--nf-bg-alt);
  border: 1px solid var(--nf-line);
  border-radius: 999px;
  font-family: var(--nf-font-mono);
  font-size: .8125rem;
  color: var(--nf-slate);
  width: fit-content;
}
.status-bar .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nf-success);
  animation: pulse 2s infinite;
}
.status-bar strong { color: var(--nf-ink); font-weight: 600; }
.status-bar .sep { color: var(--nf-line); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nf-success) 60%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--nf-success) 0%, transparent); }
}

/* ===== Section headers ===== */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-head p {
  font-size: 1.0625rem;
  color: var(--nf-slate);
}

/* ===== Logo strip ===== */
.logo-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  padding: 24px 0;
  opacity: .7;
  filter: grayscale(1);
}
.logo-strip .lbl {
  font-family: var(--nf-font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--nf-slate-2);
  text-transform: uppercase;
}
.logo-strip .partner {
  font-family: var(--nf-font-display);
  font-weight: 600;
  color: var(--nf-slate);
  font-size: 1.125rem;
  letter-spacing: -.01em;
}

/* ===== CTA band ===== */
.cta-band {
  background: linear-gradient(120deg, #2D3F91 0%, #1F2D6A 60%, #7B5AB0 100%);
  color: #fff;
  border-radius: 24px;
  padding: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(239,126,74,.35), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(123,90,176,.35), transparent 55%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.78); margin-bottom: 0; }
.cta-band .btn-primary { background: #fff; color: #0B1020; }
.cta-band .btn-primary:hover { background: #F5F7FB; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.1); }
.cta-band .buttons { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* ===== Footer ===== */
.footer {
  background: var(--nf-ink);
  color: #C8CCE0;
  padding: 72px 0 32px;
}
html[data-theme="dark"] .footer {
  background: #07091A;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand img { height: 36px; margin-bottom: 20px; }
.footer-brand p {
  font-size: .9375rem;
  color: #8A92AB;
  max-width: 300px;
  margin-bottom: 18px;
}
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.footer-socials a:hover { background: rgba(255,255,255,.08); border-color: var(--nf-brand-orange); }
.footer-col h5 {
  color: #fff;
  font-family: var(--nf-font-display);
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  color: #8A92AB;
  font-size: .9375rem;
  transition: color .15s;
}
.footer-col a:hover { color: var(--nf-brand-orange); }
.footer-cta {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.footer-cta a {
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-family: var(--nf-font-mono);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}
.footer-cta a:hover { color: #fff; }
.footer-cta a::after {
  content: "→";
  font-size: 12px;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.footer-cta a:hover::after { transform: translateX(3px); opacity: 1; }
.footer-cta a.cta-primary {
  color: var(--nf-brand-orange);
  font-weight: 600;
}
.footer-cta a.cta-primary:hover { color: #ff8a5c; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  color: #6D7694;
  font-size: .8125rem;
  font-family: var(--nf-font-mono);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom .compliance { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom-left { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .footer-bottom-left { gap: 14px; }
}

/* ===== Live chat widget ===== */
.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
}
.chat-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--nf-brand-orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px -8px rgba(239,126,74,.7);
  position: relative;
  transition: transform .15s;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.03); }
.chat-fab svg { width: 20px; height: 20px; }
.chat-fab .pulse {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nf-success);
  border: 2px solid var(--nf-bg);
  animation: pulse 2s infinite;
}
.chat-panel {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: var(--nf-bg);
  border: 1px solid var(--nf-line);
  border-radius: 18px;
  box-shadow: var(--nf-shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.98);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.chat-widget.open .chat-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.chat-head {
  background: linear-gradient(120deg, var(--nf-brand-navy) 0%, var(--nf-brand-purple) 100%);
  color: #fff;
  padding: 20px;
}
.chat-head h4 { color: #fff; margin-bottom: 4px; font-size: 1rem; }
.chat-head p { color: rgba(255,255,255,.78); font-size: .8125rem; margin: 0; }
.chat-head .agents {
  display: flex;
  margin-top: 12px;
}
.chat-head .agent {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--nf-brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .75rem;
  font-family: var(--nf-font-mono);
  margin-left: -8px;
  border: 2px solid var(--nf-brand-navy);
}
.chat-head .agent:first-child { margin-left: 0; }
.chat-body {
  padding: 20px;
  height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: .875rem;
}
.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.45;
}
.chat-msg.them { background: var(--nf-bg-alt); color: var(--nf-ink-2); border-top-left-radius: 4px; align-self: flex-start; }
.chat-msg.me { background: var(--nf-brand-orange); color: #fff; border-top-right-radius: 4px; align-self: flex-end; }
.chat-msg .time { display: block; font-size: .6875rem; opacity: .7; margin-top: 3px; font-family: var(--nf-font-mono); }
.chat-input {
  display: flex;
  border-top: 1px solid var(--nf-line);
  padding: 12px;
  gap: 8px;
}
.chat-input input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--nf-line);
  background: var(--nf-bg);
  color: var(--nf-ink);
  font: inherit;
  font-size: .875rem;
}
.chat-input input:focus { outline: 2px solid var(--nf-brand-orange); outline-offset: -1px; }
.chat-input button {
  background: var(--nf-brand-orange);
  color: #fff;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .875rem;
}

/* ===== Page hero (non-home) ===== */
.page-hero {
  background: #0B1020;
  color: #fff;
  /* Symmetric vertical padding — see comment on .hero above. */
  padding: clamp(52px, 7vw, 96px) 0;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 10%, rgba(239,126,74,.22), transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(45,63,145,.4), transparent 55%);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 720px; }
.page-hero p { color: rgba(255,255,255,.72); max-width: 640px; font-size: 1.0625rem; }
.page-hero .breadcrumb {
  font-family: var(--nf-font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.5);
  margin-bottom: 18px;
}
.page-hero .breadcrumb a { color: var(--nf-brand-orange); }

/* ===== Badges / chips ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font-family: var(--nf-font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nf-brand-orange-600);
  font-weight: 600;
  background: transparent;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.badge.navy { color: var(--nf-brand-navy); }
.badge.success { color: var(--nf-success); }
.badge.purple { color: var(--nf-brand-purple); }
[data-theme="dark"] .badge.navy { color: #8AA0FF; }

/* ===== CloudLinux explainer ===== */
.cl-explainer {
  background: linear-gradient(135deg, var(--nf-brand-navy-900), var(--nf-brand-navy));
  color: #fff;
  border-radius: 24px;
  padding: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.cl-explainer h2 { color: #fff; }
.cl-explainer p { color: rgba(255,255,255,.75); }
.cl-explainer .cl-stack {
  display: grid;
  gap: 10px;
}
.cl-explainer .cl-layer {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--nf-font-mono);
  font-size: .875rem;
  color: #D7DCF0;
}
.cl-explainer .cl-layer .ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--nf-brand-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  color: #fff;
}
.cl-explainer .cl-layer:nth-child(2) .ico { background: var(--nf-brand-purple); }
.cl-explainer .cl-layer:nth-child(3) .ico { background: var(--nf-brand-navy); border: 1px solid rgba(255,255,255,.2); }
.cl-explainer .cl-layer .meta { margin-left: auto; font-size: .75rem; color: rgba(255,255,255,.5); }

/* Responsive */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card.featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .buttons { justify-content: flex-start; }
  .cl-explainer { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-menu { display: none; }
  .nav-toggle {
    display: inline-flex;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--nf-line);
    background: var(--nf-bg-alt);
    align-items: center; justify-content: center;
  }
  .nav-menu.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: auto;
    width: 260px;
    max-width: calc(100vw - 32px);
    background: var(--nf-bg);
    border: 1px solid var(--nf-line);
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--nf-shadow-lg);
    gap: 0;
    text-align: left;
  }
  .nav-menu.open li { list-style: none; }
  .nav-menu.open li > a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    text-align: left;
    width: 100%;
    color: var(--nf-ink);
    font-weight: 500;
    line-height: 1.3;
  }
  .nav-menu.open li > a:hover { background: var(--nf-bg-alt); }
  .nav-menu.open .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 2px 0 4px;
    min-width: 0;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .nav-menu.open .nav-dropdown a {
    display: block;
    padding: 8px 12px 8px 24px;
    border-radius: 8px;
    text-align: left;
    font-size: .9375rem;
    color: var(--nf-ink);
    font-weight: 500;
    line-height: 1.3;
  }
  .nav-menu.open .nav-dropdown a:hover { background: var(--nf-bg-alt); }
  .nav-menu.open .nav-dropdown a small {
    display: block;
    color: var(--nf-slate-2);
    font-weight: 400;
    margin-top: 1px;
    font-size: .75rem;
    text-align: left;
    line-height: 1.3;
  }
  .services-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ===== Mobile polish (≤ 720px) ===== */
@media (max-width: 720px) {
  /* Boost contrast of subtle borders on small screens */
  :root {
    --nf-line: #D6DAE4;
  }
  html[data-theme="dark"] {
    --nf-line: #2A3358;
  }
  /* Catch-all: collapse ANY inline multi-column grid to single column on mobile.
     Covers repeat(2-5, 1fr), 1.3fr 1fr, 1fr 1.2fr, 1fr 1.1fr, etc.
     Single-column (1fr) patterns are unaffected because rewriting 1fr → 1fr is a no-op. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Also reduce massive gaps on stacked grids */
  section .container > div[style*="grid-template-columns"],
  section .container div[style*="grid-template-columns"] {
    gap: 20px !important;
  }
  /* Networking process: hide horizontal gradient connector when stacked vertically */
  section .container > div[style*="grid-template-columns:repeat(5"] > div[style*="position:absolute"],
  section .container > div[style*="grid-template-columns: repeat(5"] > div[style*="position:absolute"] {
    display: none !important;
  }

  /* Pricing grids stay with a healthy gap because cards are taller */
  .price-grid[style*="grid-template-columns"] {
    gap: 16px !important;
  }

  /* Comparison tables on hosting.html / domains.html — let them scroll horizontally
     instead of being clipped by overflow:hidden on the wrapper. */
  section .container > div[style*="overflow:hidden"]:has(> .compare-table),
  section .container > div[style*="overflow: hidden"]:has(> .compare-table) {
    overflow: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table {
    min-width: 560px;
    font-size: .8125rem !important;
  }
  .compare-table th, .compare-table td {
    padding: 12px 14px !important;
  }

  /* Prevent stray horizontal overflow on any page */
  html, body { overflow-x: hidden; }

  /* Contact page: belt-and-suspenders for any remaining wide elements */
  section .container > div[style*="grid-template-columns"] {
    min-width: 0;
  }
  section .container > div[style*="grid-template-columns"] > div {
    min-width: 0;
  }

  /* YAML / code terminal in networking section — drop fixed aspect ratio on mobile, shrink text */
  section .container div[style*="aspect-ratio:4/3"],
  section .container div[style*="aspect-ratio: 4/3"] {
    aspect-ratio: auto !important;
    padding: 20px !important;
    font-size: .7rem !important;
    overflow-x: auto !important;
  }
  section .container div[style*="aspect-ratio:4/3"] pre,
  section .container div[style*="aspect-ratio: 4/3"] pre {
    font-size: .7rem !important;
    line-height: 1.6 !important;
  }

  /* Status ticker — wrap instead of overflowing */
  .status-bar {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    width: auto;
    max-width: 100%;
    padding: 10px 14px;
    font-size: .75rem;
    border-radius: 18px;
  }
  .status-bar .sep { display: none; }
  .status-bar > span,
  .status-bar > a { white-space: nowrap; }

  /* Hero trust row */
  .hero-trust { flex-wrap: wrap; gap: 12px 18px; }

  /* Section titles more compact */
  h1 { font-size: 2rem; line-height: 1.15; }
  h2 { font-size: 1.4rem; line-height: 1.2; }
  h3 { font-size: 1.125rem; }
  .section-head h2 { font-size: 1.5rem; }
  .section-head p { font-size: .875rem; }
  .hero-lead { font-size: 1rem; }
  .page-hero p { font-size: .9375rem; }

  /* Tighten pricing toggle spacing on mobile (~10% less) */
  .section-head { margin: 0 auto 32px; }
  div[style*="margin-bottom:48px"]:has(> .pricing-toggle) { margin-bottom: 0 !important; }

  /* Card / body text — ~10-12% smaller */
  .card h3 { font-size: 1.0625rem; }
  .card p, .service-card p { font-size: .875rem; }
  .price-card h3 { font-size: 1rem; }
  .price-card .price .amount { font-size: 2.15rem; }
  .price-card ul { font-size: .8125rem; }

  /* Icons scaled down ~15% so they don't feel oversized next to smaller text */
  .card-icon { width: 38px; height: 38px; margin-bottom: 16px; }
  .card-icon svg { width: 18px !important; height: 18px !important; }
  .card { padding: 18px !important; }
  /* Cards with inline padding:36px on networking.html also shrink */
  section .container div[style*="grid-template-columns"] .card[style*="padding:36px"],
  section .container div[style*="grid-template-columns"] .card[style*="padding: 36px"] {
    padding: 18px !important;
  }

  /* Monitoring-style list rows (dot + label) — realign dot with the smaller text */
  section .container ul > li[style*="align-items:flex-start"] > span[style*="border-radius:50%"],
  section .container ul > li[style*="align-items: flex-start"] > span[style*="border-radius:50%"] {
    margin-top: 7px !important;
  }
  /* Tighten the list margins on the monitoring section so the spacing rhythm matches the smaller type */
  section .container ul[style*="margin:24px 0 32px"],
  section .container ul[style*="margin: 24px 0 32px"] {
    margin: 16px 0 22px !important;
    gap: 10px !important;
    font-size: .9375rem;
  }

  /* Contact page's circular icon chips — match the smaller type */
  section .container div[style*="width:42px"][style*="height:42px"],
  section .container div[style*="width: 42px"][style*="height: 42px"] {
    width: 36px !important;
    height: 36px !important;
  }
  section .container div[style*="width:42px"][style*="height:42px"] svg,
  section .container div[style*="width: 42px"][style*="height: 42px"] svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* NOC live-feed card (networking monitoring section) — shrink padding and font */
  section .container div[style*="background:var(--nf-ink)"][style*="padding:28px"] {
    padding: 20px !important;
  }

  /* Domain search form (domains.html page-hero) — stack on mobile as one unified card */
  .page-hero form[style*="display:flex"][style*="max-width:680px"] {
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 10px !important;
    background: rgba(255,255,255,.06) !important;
  }
  .page-hero form[style*="display:flex"][style*="max-width:680px"] input {
    flex: 1 1 100% !important;
    min-width: 0;
    padding: 12px 14px !important;
    font-size: .9375rem !important;
    background: transparent !important;
  }
  .page-hero form[style*="display:flex"][style*="max-width:680px"] select {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    font-size: .875rem !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }
  .page-hero form[style*="display:flex"][style*="max-width:680px"] button {
    flex: 1 1 auto !important;
    padding: 12px 18px !important;
    font-size: .9375rem !important;
    white-space: nowrap;
  }

  /* Networking process steps — add breathing room between stacked steps */
  section .container div[style*="grid-template-columns:repeat(5"],
  section .container div[style*="grid-template-columns: repeat(5"] {
    gap: 24px !important;
  }

  /* Section padding shrinks — symmetric top/bottom so the breathing
     space above and below each section is equal. */
  section { padding: 50px 0; }
  section.tight { padding: 26px 0; }
  /* Restore top breathing room when section has inline padding-top:0 (home status bar) */
  section.tight[style*="padding-top:0"] { padding-top: 26px !important; }

  /* Hero code terminal keeps shape but smaller font */
  .hero-terminal { font-size: .7rem; }

  /* CTA band stack */
  .cta-band {
    padding: 32px 24px !important;
    border-radius: 20px;
  }
  .cta-band h2 { font-size: 1.3rem; }
  .cta-band .buttons { width: 100%; }
  .cta-band .buttons .btn { flex: 1; text-align: center; justify-content: center; }

  /* Cards — stronger definition on mobile */
  .card {
    padding: 20px;
    box-shadow: 0 1px 2px rgba(13, 20, 50, 0.04), 0 4px 12px rgba(13, 20, 50, 0.03);
    border-color: color-mix(in srgb, var(--nf-ink) 10%, transparent);
  }
  html[data-theme="dark"] .card {
    background: var(--nf-bg-alt);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 4px 16px rgba(0, 0, 0, 0.35);
  }
  .price-card {
    box-shadow: 0 2px 4px rgba(13, 20, 50, 0.04), 0 8px 24px rgba(13, 20, 50, 0.05);
    border-color: color-mix(in srgb, var(--nf-ink) 12%, transparent);
  }
  html[data-theme="dark"] .price-card {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  /* Subtle separator between sections on mobile so stacked content reads clearly */
  body > section + section:not([style*="background"]) {
    border-top: 1px solid var(--nf-line);
  }

  /* Eyebrows more readable */
  .eyebrow { font-size: .7rem; }

  /* Status bar on mobile — add shadow so it pops */
  .status-bar {
    box-shadow: 0 1px 2px rgba(13, 20, 50, 0.04), 0 4px 12px rgba(13, 20, 50, 0.03);
  }

  /* Footer — brand column full width, then 2-col for link groups */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
  .footer-cta { gap: 16px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* Nav: compact right cluster */
  .nav-inner { gap: 12px; padding: 14px 16px; }
  .nav-logo img { height: 26px; }
  .nav-right { gap: 8px; }
  .pill-group { padding: 3px; }
  .lang-pill { padding: 6px 10px; font-size: .7rem; }

  /* Chat widget — on mobile, anchor widget + open panel full-width with margin */
  .chat-widget {
    right: 16px !important;
    bottom: 16px !important;
  }
  .chat-widget .chat-panel {
    right: 0 !important;
    bottom: 64px !important;
    width: calc(100vw - 32px) !important;
    max-width: 360px;
  }
}

/* Very small phones (≤ 420px) — single column everything */
@media (max-width: 420px) {
  section .container > div[style*="grid-template-columns:repeat(4"],
  section .container > div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.25rem; }
  .container, .container-tight { padding-left: 28px; padding-right: 28px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; text-align: center; justify-content: center; }
}


/* Stats strip (about page) */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--nf-line);
  border-bottom: 1px solid var(--nf-line);
  padding: 32px 0;
}
.stat-item {
  padding: 0 28px;
  border-left: 1px solid var(--nf-line);
}
.stat-item:first-child { border-left: 0; padding-left: 0; }
.stat-num {
  font-family: var(--nf-font-display);
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-label {
  font-family: var(--nf-font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--nf-slate-2);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .stat-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px;
    padding: 0;
    border: 1px solid var(--nf-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--nf-line);
  }
  .stat-item {
    border: 0 !important;
    padding: 22px 20px 20px !important;
    background: var(--nf-bg);
    position: relative;
  }
  .stat-item::before {
    content: "";
    position: absolute;
    top: 22px; left: 20px;
    width: 22px; height: 2px;
    background: var(--nf-brand-orange);
    border-radius: 2px;
  }
  .stat-item:nth-child(2)::before { background: var(--nf-brand-purple); }
  .stat-item:nth-child(3)::before { background: var(--nf-success); }
  .stat-item:nth-child(4)::before { background: var(--nf-brand-navy); }
  html[data-theme="dark"] .stat-item:nth-child(4)::before { background: #9CA8D4; }
  .stat-num {
    font-size: 1.75rem;
    margin-top: 14px;
    margin-bottom: 6px;
  }
  .stat-label {
    font-size: .6875rem;
  }
}


/* Process timeline — vertical stacked steps (v2) */
.process-steps { display: grid; gap: 14px; margin-top: 24px; }
.process-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 28px 32px;
  background: var(--nf-white);
  border: 1px solid var(--nf-line);
  border-radius: 16px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.process-step:hover { transform: translateX(4px); box-shadow: 0 12px 32px -16px rgba(13,20,50,.15); }
.process-step::after {
  content: "";
  position: absolute;
  left: 60px;
  top: 100%;
  width: 2px;
  height: 14px;
  background: var(--nf-line);
}
.process-step:last-child::after { display: none; }
.process-step-num {
  font-family: var(--nf-font-mono);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  opacity: .9;
}
.process-step-body h3 { font-size: 1.25rem; margin: 4px 0 8px; }
.process-step-body p { font-size: .9375rem; margin: 0 0 14px; color: var(--nf-ink-2); }
.process-step-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--nf-font-mono);
  font-size: .75rem;
  color: var(--nf-slate-2);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-top: 14px;
  border-top: 1px dashed var(--nf-line);
}
.process-step-meta span { display: inline-flex; align-items: center; gap: 6px; }
.process-step-meta span::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--nf-brand-orange);
  border-radius: 50%;
}
@media (max-width: 720px) {
  .process-step { grid-template-columns: 52px 1fr; padding: 22px 20px; gap: 10px; }
  .process-step-num { font-size: 2rem; }
  .process-step-body h3 { font-size: 1.0625rem; }
  .process-step-body p { font-size: .875rem; }
  .process-step-meta { gap: 12px; font-size: .6875rem; }
  .process-step::after { left: 44px; }
}

/* WordPress core accessibility helper. Hides content visually while
   keeping it available to assistive tech. Required by WP themes —
   we use it on the chat-input <label>, and any future visually-hidden
   text we ship. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}