@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

/*
 * Lamis Network brand layer (design audit, stage B).
 * Loaded after each page's own <style>, so these rules win without editing
 * the page CSS. Delete the <link> to /brand.css to roll back visually.
 */
:root {
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-sans: var(--sans);
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  --radius: var(--r-md);
}

/* 1. Background: no grid, no drifting glow orbs */
body::before { display: none !important; }
.orb { display: none !important; }

/* 2. No coloured glow shadows; keep structure with borders */
.nav-links a.btn, .nav-links .btn-primary,
.nav-links a.btn:hover, .nav-links .btn-primary:hover {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--r-md);
}
.btn-primary, .btn-primary:hover, .btn-violet:hover,
.tab-btn.active, .pillar-card:hover, .plan-card:hover,
.plan-card.hot, .plan-card.hot-violet, .plan-card.featured, .feature-box:hover,
details:hover, details[open], .term, .term:hover, .code-card, .code-card:hover,
.modal-card, .integration-card:hover, .integration-card:hover .card-logo-wrap {
  box-shadow: none;
}
.btn-primary:hover { filter: brightness(1.08); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 3. No gradient text or gradient washes */
h1 em, .hero h1 em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}
.band::before, footer::before { display: none; }
footer { background: var(--bg, #0a0a0a); border-top-color: var(--line, #1e1e1e); }

/* 4. Hero: plain paragraph instead of bracket frame; no fake live dot */
.hero-desc-block {
  height: auto;
  min-height: 0;
  overflow: visible;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.hero-desc-block::before, .hero-desc-block::after { display: none; }
.hero-desc-block p.sub { color: var(--text); font-size: 17px; }
.badge .dot { display: none; }

/* 5. Code window without macOS traffic lights */
.term-dots { display: none; }

/* 6. Steps already say "1." in the heading: drop the big 01/02/03 */
.step::before { content: none; }

/* 7. Three radii: 4 / 8 / pill */
.btn, .metric-card, .pillar-icon, details, .modal-card, .band, .term, .code-card,
.plan-card, .pillar-card, .step, .feature-box, .disclaimer-box, .form-row input,
.form-row select, .form-row textarea, .modal-close { border-radius: var(--r-md); }
.logo-tag, .term-tab, .copy-btn, .ip-tester-bar input, .ip-tester-bar button,
.tag-pill, .spec-pill, .diagram-badge { border-radius: var(--r-sm); }

/* 8. Phones: one-line header on every page, badges may wrap */
@media (max-width: 640px) {
  .nav-in { gap: 12px; }
  .nav-links a:not(.btn) { display: none; }
  .nav-links a.btn { white-space: nowrap; padding: 7px 12px; }
  .logo-tag { display: none; }
  .badge { max-width: 100%; white-space: normal; flex-wrap: wrap; border-radius: var(--r-md); }
}

/* 9. Product pages: single column must not be widened by code blocks */
@media (max-width: 900px) {
  .hero-subpage-grid, .grid-3, .pricing-row { grid-template-columns: minmax(0, 1fr); }
  .hero-subpage-grid > * { min-width: 0; }
  .code-card, .code-card pre { max-width: 100%; overflow-x: auto; }
}

/* 10. Code window and CTA band: flat, no halo, no 3D tilt/float */
.term, .term:hover, .code-card, .code-card:hover, .band {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}
.term { background: #0e0e0e !important; border-color: var(--line, #1e1e1e) !important; }
.term:hover { border-color: rgba(212, 101, 42, 0.45) !important; }

/* ===== 11. Stage C: structure (home page, .hx-*) and site-wide de-templating ===== */

/* Eyebrow labels above headings carry no information: remove everywhere */
.sec-kicker { display: none; }
.sec-head p { max-width: 62ch; }

/* Lists: plain bullets instead of orange checkmarks */
.plan-card li::before, .pillar-features li::before { content: ""; width: 5px; height: 5px; top: 0.6em; border-radius: 50%; background: var(--muted); }
.plan-card li { color: var(--text); }

/* Badges on cards removed on the home page; product pages keep text only */
.pillar-badge, .tag, .tag-violet { display: none; }
.plan-card.featured, .plan-card.hot, .plan-card.hot-violet { border-color: rgba(212, 101, 42, 0.55); background: var(--bg2, #111); }
.btn-violet { background: var(--accent); border-color: var(--accent); }
.btn-violet:hover { box-shadow: none; filter: brightness(1.08); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Section rhythm: left-aligned headings, less vertical padding */
.hx-sec { padding: 72px 0; border-top: 1px solid var(--line); }
.hx-sec h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 20px; text-wrap: balance; }

/* Hero: headline and copy side by side, then the full-width console */
.h2-hero { padding: 64px 0 56px; }
.hx-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: 24px 56px; align-items: end; margin-bottom: 36px; }
.hx-head h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.hx-side .hero-desc-block { margin-bottom: 20px; max-width: none; }
.hx-side .hero-desc-block p.sub { font-size: 16px; color: var(--muted); }
.hx-term { margin: 0; }
.hx-term .ip-tester-bar { padding: 14px 18px; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.hx-term .ip-tester-bar label { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.hx-term .ip-tester-bar input { font-size: 15px; padding: 9px 12px; min-width: 0; flex: 1 1 220px; max-width: 320px; }
.hx-term .ip-tester-bar button { font-size: 14px; padding: 9px 16px; }
.hx-term .term-body { font-size: 13.5px; min-height: 0; }
.hx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.hx-facts > div { padding: 14px 18px; border-left: 1px solid var(--line); }
.hx-facts > div:first-child { border-left: 0; }
.hx-facts dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.hx-facts dd { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }

/* Products table */
.hx-table-wrap { overflow-x: auto; }
.hx-products { width: 100%; border-collapse: collapse; font-size: 15px; }
.hx-products thead th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 0 16px 10px 0; border-bottom: 1px solid var(--line); }
.hx-products tbody th, .hx-products td { text-align: left; vertical-align: top; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); }
.hx-products tbody th { font-weight: 600; width: 22%; }
.hx-products tbody th a { color: var(--text); text-decoration: none; }
.hx-products tbody th a:hover { color: var(--accent2); }
.hx-products td { color: var(--muted); line-height: 1.55; }
.hx-products tbody tr:first-child th a { color: var(--accent2); }
.hx-price { white-space: nowrap; font-family: var(--mono); color: var(--text) !important; font-size: 15px; }
.hx-price span { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.hx-more { color: var(--accent2); text-decoration: none; white-space: nowrap; font-size: 14px; }
.hx-more:hover { text-decoration: underline; }
.hx-aside { margin-top: 20px; color: var(--muted); font-size: 14.5px; }
.hx-aside a, .hx-dl a, .hx-contact a:not(.btn) { color: var(--accent2); }

/* Pricing head */
.hx-pricing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-bottom: 20px; }
.hx-pricing-head h2 { margin: 0; }
.hx-pricing-head p { margin: 0; color: var(--muted); }
.hx-sec .tab-controls { justify-content: flex-start; }

/* Getting access + company facts */
.hx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; }
.hx-steps { margin: 0 0 28px; padding-left: 1.3em; display: grid; gap: 14px; color: var(--muted); }
.hx-steps li::marker { font-family: var(--mono); color: var(--accent2); }
.hx-steps b { color: var(--text); font-weight: 600; }
.hx-dl { margin: 0 0 20px; display: grid; }
.hx-dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.hx-dl dt { font-size: 13px; color: var(--muted); }
.hx-dl dd { margin: 0; font-size: 14.5px; }

/* FAQ left-aligned */
.hx-sec .wrap.faq { max-width: 1180px; margin: 0 auto; }
.hx-sec .faq details { max-width: 820px; }

/* Contact row */
.hx-contact { padding: 40px 0; border-top: 1px solid var(--line); }
.hx-contact .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.hx-contact p { margin: 0; max-width: 70ch; color: var(--muted); }
.hx-contact b { color: var(--text); }
footer { margin-top: 0; }

@media (max-width: 900px) {
  .hx-head, .hx-split { grid-template-columns: minmax(0, 1fr); }
  .hx-facts { grid-template-columns: minmax(0, 1fr); }
  .hx-facts > div { border-left: 0; border-top: 1px solid var(--line); }
  .hx-facts > div:first-child { border-top: 0; }
  .hx-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 640px) {
  .hx-products thead { display: none; }
  .hx-products, .hx-products tbody, .hx-products tr, .hx-products th, .hx-products td { display: block; width: auto; }
  .hx-products tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .hx-products tbody th, .hx-products td { border: 0; padding: 2px 0; width: auto; }
  .hx-products tbody th { font-size: 17px; margin-bottom: 4px; }
.hx-sec { padding: 52px 0; }
}

/* MakeThis Glitch Wordmark (makethis.si) */

.crafted-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--muted, #6f6b64);
  vertical-align: middle;
}
.wm {
  position: relative;
  display: inline-block;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.025em;
  padding: 2px 3px;
  color: var(--ink, var(--text-primary, #ffffff));
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.wm:hover {
  text-decoration: none;
  opacity: 1;
}
.wm:focus-visible {
  outline: 2px solid #1f4fd8;
  outline-offset: 2px;
  border-radius: 2px;
}
.wm-t {
  position: relative;
  z-index: 1;
  display: inline-block;
  will-change: transform, clip-path;
  color: inherit;
}
.wm-a, .wm-b {
  position: absolute;
  left: 3px;
  top: 2px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, clip-path;
}
.wm-a { color: #f5501a; }
.wm-b { color: #1f4fd8; }
.wm-on .wm-a, .wm-on .wm-b { opacity: 0.95; }