/* SecureLynx Concierge (/concierge.php).
   Page-scoped system, deliberately unlike the five service pages: no panels,
   no cards, no even splits. Same tokens throughout, only the composition differs. */

.cnc { position: relative; z-index: 2; }
.cnc-hero { padding: 150px 0 90px; }
.cnc-kicker { margin-bottom: 30px; }

.cnc-lede { max-width: 60ch; margin-top: 38px; color: var(--text-secondary); font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.8; }
.cnc-actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 46px; }

.cnc-band { padding: 96px 0; }
.cnc-band.is-tight { padding: 68px 0; }
.cnc-rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, var(--cyan), var(--green), transparent 78%); opacity: .5; }

.cnc-say { max-width: 22ch; font-size: clamp(2.1rem, 4.6vw, 4.2rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; color: var(--text-primary); }
.cnc-say em { font-style: normal; color: var(--cyan); }
.cnc-say-sub { max-width: 62ch; margin-top: 30px; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.85; }

.cnc-eyebrow { display: block; margin-bottom: 18px; color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.cnc-h2 { font-size: clamp(1.8rem, 2.7vw, 2.8rem); font-weight: 650; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; }

/* Asymmetric band: heading rail left, content right, pair spans the container. */
.cnc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.cnc-split-head { position: sticky; top: 128px; }

.cnc-body { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.85; max-width: 68ch; }
.cnc-body + .cnc-body { margin-top: 20px; }
.cnc-body.is-lede { margin-top: 24px; }
.cnc-faq { margin-top: 34px; }

.cnc-seams { margin: 0; padding: 0; list-style: none; }
.cnc-seams.is-spaced { margin-top: 34px; }
.cnc-seams li { position: relative; padding: 22px 0 22px 52px; border-top: 1px solid rgba(255,255,255,.09); color: var(--text-secondary); font-size: 1.02rem; line-height: 1.75; }
.cnc-seams li:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.cnc-seams li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 26px;
  height: 22px;

  /* Five bars, cyan stepping to green. Each item golds its own bar below,
     so the mark shows which layer of the stack the item is about. */
  --b1: color-mix(in srgb, var(--cyan) 40%, transparent);
  --b2: color-mix(in srgb, color-mix(in srgb, var(--cyan) 75%, var(--green)) 40%, transparent);
  --b3: color-mix(in srgb, color-mix(in srgb, var(--cyan) 50%, var(--green)) 40%, transparent);
  --b4: color-mix(in srgb, color-mix(in srgb, var(--cyan) 25%, var(--green)) 40%, transparent);
  --b5: color-mix(in srgb, var(--green) 40%, transparent);

  background: linear-gradient(
    var(--b1) 0 2px, transparent 2px 5px,
    var(--b2) 5px 7px, transparent 7px 10px,
    var(--b3) 10px 12px, transparent 12px 15px,
    var(--b4) 15px 17px, transparent 17px 20px,
    var(--b5) 20px 22px
  );
}

.cnc-seams li:nth-child(1)::before { --b1: var(--yellow); }
.cnc-seams li:nth-child(2)::before { --b2: var(--yellow); }
.cnc-seams li:nth-child(3)::before { --b3: var(--yellow); }
.cnc-seams li:nth-child(4)::before { --b4: var(--yellow); }
.cnc-seams li:nth-child(5)::before { --b5: var(--yellow); }
.cnc-seams strong { color: var(--text-primary); font-weight: 650; }

/* Figures: one strip, equal thirds, full container width, dividers, aligned baselines. */
.cnc-figures { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 52px; border-top: 1px solid rgba(0,230,255,.18); border-bottom: 1px solid rgba(0,230,255,.18); }
.cnc-fig { padding: 34px 32px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.cnc-fig:last-child { border-right: 0; }
.cnc-fig b { display: block; font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; color: var(--cyan); }
.cnc-fig span { display: block; margin: 16px auto 0; color: var(--text-secondary); font-size: .95rem; line-height: 1.55; max-width: 30ch; }

.cnc-rail { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; margin-top: 44px; border-top: 1px solid rgba(0,230,255,.18); border-bottom: 1px solid rgba(0,230,255,.18); }
.cnc-rail a { display: block; padding: 30px 22px 30px 0; border-right: 1px solid rgba(255,255,255,.08); color: var(--text-primary); font-size: 1rem; line-height: 1.45; transition: color .2s ease; }
.cnc-rail a:last-child { border-right: 0; }
.cnc-rail a small { display: block; margin-bottom: 12px; color: var(--green); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.cnc-rail a:hover { color: var(--cyan); }

.cnc a.cnc-link { color: var(--cyan); border-bottom: 1px solid rgba(0,230,255,.35); }
.cnc a.cnc-link:hover { border-bottom-color: var(--cyan); }

.cnc-close { max-width: 64ch; }
.cnc-sig { margin-top: 34px; color: var(--text-secondary); font-size: .92rem; letter-spacing: .04em; }
.cnc-sig strong { color: var(--text-primary); font-weight: 650; }

@media (max-width: 1000px) {
  .cnc-split { grid-template-columns: 1fr; gap: 28px; }
  .cnc-split-head { position: static; }
  .cnc-figures { grid-template-columns: 1fr; }
  .cnc-fig { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding: 30px 0; }
  .cnc-fig:last-child { border-bottom: 0; }
  .cnc-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cnc-rail a { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-right: 0; }
}
@media (max-width: 700px) {
  .cnc-hero { padding: 116px 0 64px; }
  .cnc-band { padding: 64px 0; }
  .cnc-rail { grid-template-columns: 1fr; }
  .cnc-seams li { padding-left: 42px; }
}