/* Niche pages (/websites-for/). Extends service.css: dark, editorial, sharp corners, one blue accent.
   Everything here uses the tokens from shared.css and service.css. No new colours, no new motion except
   a hover arrow, gated to devices that can hover. */

/* ---------- what the customer checks: six numbered cells ---------- */
.nx-glance { list-style: none; margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--sx-line); counter-reset: g; }
.nx-glance li { counter-increment: g; padding: 30px 28px 36px 0; margin-right: 28px; border-right: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); }
.nx-glance li:nth-child(3n) { border-right: 0; margin-right: 0; }
.nx-glance li::before { content: counter(g, decimal-leading-zero); display: block; font-family: var(--font-kicker); font-size: 12px; letter-spacing: 0.14em; color: var(--sx-blue-soft); margin-bottom: 18px; }
.nx-glance h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 10px; color: #fff; }
.nx-glance p { color: rgba(255, 255, 255, 0.7); font-size: 15px; line-height: 1.7; max-width: 34ch; }

/* ---------- two panels side by side ---------- */
.nx-split { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--sx-line); }
.nx-panel { padding: 44px 44px 48px; }
.nx-panel + .nx-panel { border-left: 1px solid var(--sx-line); }
.nx-tag { font-family: var(--font-kicker); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sx-blue-soft); margin-bottom: 14px; }
.nx-panel h3 { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin-bottom: 26px; }
.nx-points { list-style: none; border-top: 1px solid var(--sx-line); }
.nx-points li { padding: 16px 0 16px 22px; border-bottom: 1px solid var(--sx-line); position: relative; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.nx-points li::before { content: ''; position: absolute; left: 0; top: 25px; width: 8px; height: 8px; background: var(--sx-blue); }

/* ---------- hub: big rows that link to each niche ---------- */
.nx-hub { margin-top: 56px; border-top: 1px solid var(--sx-line); }
.nx-hub a { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding: 48px 0; border-bottom: 1px solid var(--sx-line); color: #fff; text-decoration: none; }
.nx-hub-k { display: block; font-family: var(--font-kicker); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sx-blue-soft); margin-bottom: 16px; }
.nx-hub h3 { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; color: #fff; margin-bottom: 18px; }
.nx-hub p { color: rgba(255, 255, 255, 0.7); font-size: 16.5px; line-height: 1.7; max-width: 52ch; }
.nx-hub .arr { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--sx-blue-soft); padding-bottom: 6px; transition: transform 200ms var(--ease), color 160ms ease; }
@media (hover: hover) { .nx-hub a:hover .arr { transform: translateX(10px); color: #fff; } }
.nx-hub a:focus-visible { outline: 2px solid var(--sx-blue); outline-offset: 6px; }

/* hub hero has no terms row under it, so it needs its own bottom space */
.sx-hero.nx-short { padding-bottom: 88px; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .nx-glance { grid-template-columns: 1fr; margin-top: 36px; }
  .nx-glance li, .nx-glance li:nth-child(3n) { border-right: 0; margin-right: 0; padding: 26px 0 28px; }
  .nx-split { grid-template-columns: 1fr; margin-top: 36px; }
  .nx-panel { padding: 30px 22px 34px; }
  .nx-panel + .nx-panel { border-left: 0; border-top: 1px solid var(--sx-line); }
  .nx-hub a { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
  .nx-hub .arr { display: none; }
  .sx-hero.nx-short { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .nx-hub .arr { transition: none; } }