/* Shared styles for the tech professionals and business owners pages.
   Uses the same design tokens as the page-level <style> blocks. */

.x-trust { padding: 0; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.x-trust ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.x-trust li { padding: 22px 20px; font-size: 0.86rem; font-weight: 600; color: var(--navy-900); text-align: center; border-left: 1px solid var(--line); }
.x-trust li:first-child { border-left: 0; }
.x-trust li span { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cyan-600); margin-bottom: 4px; }
@media (max-width: 800px) {
  .x-trust ul { grid-template-columns: 1fr 1fr; }
  .x-trust li { border-left: 0; border-top: 1px solid var(--line); }
  .x-trust li:nth-child(-n+2) { border-top: 0; }
}

.x-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.x-grid2.x-wide-left { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 860px) { .x-grid2, .x-grid2.x-wide-left { grid-template-columns: 1fr; gap: 32px; } }

.x-card { padding: 28px 28px 30px; border: 1px solid var(--line); border-top: 3px solid var(--navy-950); border-radius: 4px; background: #FFFFFF; transition: border-top-color 0.26s ease, transform 0.26s ease; }
.x-card:hover { border-top-color: var(--cyan-600); transform: translateY(-3px); }
.x-card .mono { color: var(--cyan-600); display: block; margin-bottom: 12px; }
.x-card h3 { font-size: 1.5rem; margin-bottom: 16px; }
.x-card p { color: var(--slate-600); font-size: 0.98rem; }
.x-card .x-link { display: inline-block; margin-top: 22px; }

.x-bullets { list-style: none; margin: 14px 0 0; padding: 0; }
.x-bullets li { position: relative; padding: 8px 0 8px 26px; color: var(--navy-800); font-size: 0.97rem; border-bottom: 1px solid var(--line); }
.x-bullets li:last-child { border-bottom: 0; }
.x-bullets li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 10px; height: 6px; border-left: 2px solid var(--cyan-600); border-bottom: 2px solid var(--cyan-600); transform: rotate(-45deg); }

.x-q-col h3 { font-size: 1.3rem; margin-bottom: 8px; }
.x-q-col .qa-item { grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; }
.x-q-col .qa-item p { font-size: 1rem; }

.x-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 800px) { .x-steps { grid-template-columns: 1fr; } }
.x-step { padding-top: 24px; border-top: 2px solid var(--navy-950); }
.x-step .mono { color: var(--cyan-600); }
.x-step h3 { margin-top: 12px; font-size: 1.25rem; }
.x-step p { margin-top: 10px; color: var(--slate-600); font-size: 0.96rem; }

.x-center-note { margin-top: 28px; font-size: 1.02rem; color: var(--navy-800); font-weight: 600; }
.x-link-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }

/* long-form landing pages */
.x-prose { max-width: 780px; }
.x-prose h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 16px; }
.x-prose h3 { font-size: 1.3rem; margin: 28px 0 8px; }
.x-prose p { color: var(--slate-600); font-size: 1.04rem; margin-top: 14px; line-height: 1.7; }
.x-prose p strong { color: var(--navy-950); }
.x-prose ul { list-style: none; margin: 14px 0 0; padding: 0; }
.x-prose ul li { position: relative; padding: 6px 0 6px 24px; color: var(--navy-800); font-size: 1rem; }
.x-prose ul li::before { content: ''; position: absolute; left: 3px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-600); }
.x-prose a:not(.btn) { color: var(--cyan-600); font-weight: 600; border-bottom: 1px solid currentColor; }
.x-term { margin-top: 18px; padding: 16px 20px; border-left: 3px solid var(--cyan-500); background: #FFFFFF; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--navy-900); font-size: 1rem; }
.x-term strong { color: var(--navy-950); }
.x-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.x-toc a { font-size: 0.82rem; font-weight: 600; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy-800); transition: border-color 0.2s, color 0.2s; }
.x-toc a:hover { border-color: var(--cyan-600); color: var(--cyan-600); }
.x-compare { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.94rem; }
.x-compare th, .x-compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--navy-800); }
.x-compare th { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-400); font-weight: 500; }
.x-compare td:first-child { font-weight: 600; color: var(--navy-950); white-space: nowrap; }
@media (max-width: 640px) { .x-compare th, .x-compare td { padding: 10px 8px; font-size: 0.86rem; } .x-compare td:first-child { white-space: normal; } }
.x-disclaimer { margin-top: 36px; font-size: 0.82rem; color: var(--slate-400); line-height: 1.7; max-width: 780px; }

/* who-we-serve audience blocks */
.x-audience { padding: 90px 0; }
.x-audience + .x-audience { border-top: 1px solid var(--line); }
.x-audience h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.x-audience .x-lead { margin-top: 16px; font-size: 1.08rem; color: var(--slate-600); max-width: 680px; }
.x-audience h3 { font-size: 1.25rem; margin: 0 0 6px; }
.x-sub { margin-top: 40px; }
.x-example { margin-top: 44px; padding: 26px 28px; border: 1px solid var(--line); border-left: 4px solid var(--cyan-500); border-radius: 4px; background: #FFFFFF; max-width: 820px; }
.x-example .mono { color: var(--cyan-600); display: block; margin-bottom: 10px; }
.x-example p { color: var(--slate-600); font-size: 0.98rem; margin-top: 10px; }
.x-example p:first-of-type { margin-top: 0; }

.x-fit-wrap .fit-list { max-width: 760px; }
.x-also { margin-top: 20px; color: var(--slate-600); font-size: 0.98rem; max-width: 760px; }

/* pricing reframe */
.x-reframe { max-width: 820px; margin: 0 auto 8px; text-align: center; }
.x-reframe p { font-size: 1.12rem; color: var(--navy-800); line-height: 1.7; }

/* dark (section-warm) variants */
.section-warm .x-prose p, .section-warm .x-prose li { color: rgba(255,255,255,0.86) !important; }
.section-warm .x-prose li::before { background: var(--cyan-500); }
.section-warm .x-prose strong { color: #FFFFFF; }
.section-warm .x-prose a:not(.btn) { color: var(--cyan-500); }
.section-warm .x-term { background: transparent !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.28); border-left-color: var(--cyan-500); }
.section-warm .x-term strong { color: #FFFFFF !important; }
.section-warm .x-step { border-top-color: rgba(255,255,255,0.35); }
.section-warm .x-center-note a { color: var(--cyan-500) !important; }
.section-warm .x-compare th, .section-warm .x-compare td { color: #fff; border-bottom-color: rgba(255,255,255,0.2); }