/* ==========================================================================
   EmailHelp — Services page styles (css/pages/services.css)
   Only services-specific rules live here: sticky sub-nav polish, the service
   group bands, feature-row spacing under the sub-nav, and the CSS-only "viz"
   compositions inside each row's dark visual panel. Everything else comes
   from css/style.css (.subnav, .feature-row, .checklist are shared).
   ========================================================================== */

.page--services { --subnav-h: 57px; } /* .subnav__list: 10px padding ×2 + 36px chips + 1px border */

/* --------------------------------------------------------------------------
   Page hero
   -------------------------------------------------------------------------- */
.page--services .page-hero .lead { max-width: 680px; }
.page--services .page-hero .hero__actions { margin-bottom: 24px; }
.page--services .page-hero .hero__trust { margin: 0; padding: 0; list-style: none; }
.page--services .page-hero .hero__trust li { color: var(--text-muted-dark); }

/* --------------------------------------------------------------------------
   Sticky sub-nav (base styles are shared; here: icons in chips and an
   edge-to-edge scroll area on narrow screens)
   -------------------------------------------------------------------------- */
.subnav__list {
  margin: 0 calc(var(--gutter) * -1);
  padding: 10px var(--gutter);
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--gutter);
}
.subnav__list li { scroll-snap-align: center; flex: 0 0 auto; }
.subnav__list a { gap: 7px; }
.subnav__list a .icon { width: 16px; height: 16px; opacity: .75; }
@media (max-width: 1100px) { .subnav__list a .icon { display: none; } } /* eight chips stay on one line down to ~900px */
.subnav__list a[aria-current="true"] .icon { opacity: 1; }
.subnav__list a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Service groups (four bands) and the feature rows inside them
   -------------------------------------------------------------------------- */
.services-group__head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.services-group__head .eyebrow { margin: 0; white-space: nowrap; }
.services-group__head::after {
  content: "";
  flex: 1 0 32px; /* never shrinks below 32px, so the note wraps instead of overflowing */
  height: 1px;
  background: linear-gradient(90deg, rgba(99, 102, 241, .35), rgba(15, 23, 42, .06));
}
.services-group__note {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Anchor landing: main.js scrolls a target to (header + sticky sub-nav + 16px); the native
   scroll-margin matches so a direct #hash load lands in the same place. */
.page--services .feature-row { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px); }

.feature-row__body { max-width: 560px; }
.feature-row__body .icon-tile--lg { margin-bottom: 4px; }
.feature-row__body h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); letter-spacing: -.02em; }
.feature-row__body .checklist li { font-size: .95rem; }
.feature-row__body .checklist li strong { color: var(--text); font-weight: 600; }
.feature-row__body .checklist__title:first-of-type { margin-top: 4px; }
.feature-row__meta {
  margin: 14px 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.feature-row__meta .icon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; color: var(--success); }
.feature-row__meta a { color: var(--primary-600); font-weight: 500; }
.feature-row__meta--tm { margin-top: 8px; font-size: .76rem; max-width: 520px; }

/* --------------------------------------------------------------------------
   Visual panel: dark canvas with glow, faint grid, and a centred composition
   -------------------------------------------------------------------------- */
.page--services .feature-row__visual {
  --accent: rgba(99, 102, 241, .38);
  --accent-2: rgba(34, 211, 238, .22);
  min-height: 460px;
  min-width: 0;
  padding: clamp(28px, 3.5vw, 48px);
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
  align-self: center;
}
.page--services .feature-row__visual.tone-cyan   { --accent: rgba(34, 211, 238, .30); --accent-2: rgba(99, 102, 241, .28); }
.page--services .feature-row__visual.tone-violet { --accent: rgba(139, 92, 246, .38); --accent-2: rgba(34, 211, 238, .18); }
.page--services .feature-row__visual.tone-green  { --accent: rgba(16, 185, 129, .30); --accent-2: rgba(99, 102, 241, .26); }
.page--services .feature-row__visual.tone-amber  { --accent: rgba(245, 158, 11, .26); --accent-2: rgba(139, 92, 246, .28); }

.viz__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 18% 12%, var(--accent), transparent 72%),
    radial-gradient(50% 45% at 88% 92%, var(--accent-2), transparent 72%),
    radial-gradient(35% 35% at 75% 18%, rgba(139, 92, 246, .16), transparent 70%);
}
.viz__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(75% 75% at 50% 50%, #000 20%, transparent 100%);
}
.viz {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 400px;
  color: var(--text-on-dark);
}

/* --------------------------------------------------------------------------
   Viz building blocks: cards, heads, rows, pills, fields, alerts, bars
   -------------------------------------------------------------------------- */
.viz__card {
  position: relative;
  padding: 18px;
  border-radius: 18px;
  background: rgba(13, 20, 37, .82);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 30px 60px -30px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .02);
}
.viz__card + .viz__card { margin-top: 12px; }
.viz__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.viz__head .icon-tile { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
.viz__head .icon-tile .icon { width: 21px; height: 21px; }
.viz__who { flex: 1; min-width: 0; }
.viz__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viz__sub {
  margin-top: 2px;
  font-size: .76rem;
  color: var(--text-muted-dark);
  white-space: nowrap; /* mock UI subtitle: clip rather than orphan a word */
  overflow: hidden;
  text-overflow: ellipsis;
}

.viz__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
  color: #C7D2FE;
  background: rgba(99, 102, 241, .18);
  border: 1px solid rgba(129, 140, 248, .3);
}
.viz__pill .icon { width: .95em; height: .95em; }
.viz__pill--ok   { color: #A7F3D0; background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .34); }
.viz__pill--warn { color: #FDE68A; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .34); }
.viz__pill--bad  { color: #FECACA; background: rgba(239, 68, 68, .14);  border-color: rgba(239, 68, 68, .34); }

.viz__rows { display: flex; flex-direction: column; gap: 8px; }
.viz__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: .84rem;
  line-height: 1.35;
  color: #E2E8F0;
}
.viz__row > .icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--cyan); }
.viz__row--ok   > .icon { color: #34D399; }
.viz__row--warn > .icon { color: #FBBF24; }
.viz__row--bad  > .icon { color: #F87171; }
.viz__row--muted { opacity: .6; }
.viz__text { flex: 1; min-width: 0; }
.viz__text small { display: block; font-size: .72rem; color: var(--text-muted-dark); margin-top: 1px; }
.viz__text--clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz__mono { font-family: var(--font-mono); font-size: .76rem; letter-spacing: -.01em; color: #DDE3F0; }

.viz__field { margin-bottom: 10px; }
.viz__field:last-child { margin-bottom: 0; }
.viz__label { display: block; margin-bottom: 5px; font-size: .72rem; font-weight: 500; color: var(--text-muted-dark); }
.viz__input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  color: #E2E8F0;
}
.viz__input .icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-muted-dark); }
.viz__input--bad { border-color: rgba(239, 68, 68, .6); box-shadow: 0 0 0 3px rgba(239, 68, 68, .14); }
.viz__input--ok  { border-color: rgba(16, 185, 129, .6); box-shadow: 0 0 0 3px rgba(16, 185, 129, .14); }
.viz__input .viz__pill { margin-left: auto; }

.viz__alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: .78rem;
  line-height: 1.45;
}
.viz__alert .icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.viz__alert--bad  { color: #FECACA; background: rgba(239, 68, 68, .12);  border: 1px solid rgba(239, 68, 68, .26); }
.viz__alert--ok   { color: #A7F3D0; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); }
.viz__alert--warn { color: #FDE68A; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .3); }
.viz__alert strong { color: #fff; font-weight: 600; }

.viz__barlabel {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  font-size: .74rem;
  color: var(--text-muted-dark);
}
.viz__barlabel strong { color: #fff; font-weight: 600; }
.viz__bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.viz__bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 50%);
  border-radius: inherit;
  background: var(--grad);
}
.viz__bar--warn > i { background: linear-gradient(90deg, #F59E0B, #F87171); }
.viz__bar--ok   > i { background: linear-gradient(90deg, #10B981, #22D3EE); }
.viz__bar + .viz__barlabel { margin-top: 12px; }

.viz__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  margin-top: 12px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: var(--shadow-glow);
}
.viz__btn .icon { width: 16px; height: 16px; }
.viz__divider { height: 1px; margin: 14px 0; background: rgba(255, 255, 255, .08); }

/* Tinted icon tiles (dark context) */
.viz .icon-tile--ok  { background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .4); color: #6EE7B7; box-shadow: none; }
.viz .icon-tile--bad { background: rgba(239, 68, 68, .16);  border-color: rgba(239, 68, 68, .4);  color: #FCA5A5; box-shadow: none; }

/* --------------------------------------------------------------------------
   Viz: floating chips, timeline steps, before/after states, devices, chips, ring
   -------------------------------------------------------------------------- */
.viz__float {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  background: rgba(13, 20, 37, .94);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03);
  animation: viz-float 8s ease-in-out infinite;
}
.viz__float .icon { width: 16px; height: 16px; color: #34D399; }
.viz__float--info .icon { color: var(--cyan); }
.viz__float--tr { top: -16px; right: -12px; }
.viz__float--tl { top: -16px; left: -12px; }
.viz__float--br { bottom: -16px; right: -12px; animation-delay: -3s; }
.viz__float--bl { bottom: -16px; left: -12px; animation-delay: -3s; }
@keyframes viz-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}

/* Mini vertical timeline */
.viz__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.viz__step { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.viz__step:last-child { padding-bottom: 0; }
.viz__step::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: -2px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
}
.viz__step:last-child::before { display: none; }
.viz__step--done::before { background: linear-gradient(180deg, #10B981, rgba(16, 185, 129, .25)); }
.viz__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted-dark);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
}
.viz__dot .icon { width: 14px; height: 14px; }
.viz__step--done .viz__dot { color: #6EE7B7; background: rgba(16, 185, 129, .18); border-color: rgba(16, 185, 129, .45); }
.viz__step--active .viz__dot { color: #fff; background: var(--grad); border-color: transparent; box-shadow: var(--shadow-glow); }
.viz__step-body { flex: 1; min-width: 0; padding-top: 4px; font-size: .84rem; line-height: 1.35; color: #E2E8F0; }
.viz__step-body small { display: block; margin-top: 2px; font-size: .72rem; color: var(--text-muted-dark); }
.viz__step--pending .viz__step-body { color: var(--text-muted-dark); }
.viz__step-body .viz__bar { margin-top: 8px; }

/* Before → after */
.viz__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.viz__compare > .icon { width: 20px; height: 20px; color: var(--text-muted-dark); }
.viz__state {
  padding: 14px 10px;
  border-radius: 14px;
  text-align: center;
  font-size: .8rem;
  line-height: 1.35;
}
.viz__state .icon-tile { margin: 0 auto 8px; }
.viz__state strong { display: block; color: #fff; font-weight: 600; }
.viz__state small { display: block; margin-top: 2px; font-size: .72rem; color: var(--text-muted-dark); }
.viz__state--bad { background: rgba(239, 68, 68, .1);  border: 1px solid rgba(239, 68, 68, .26); }
.viz__state--ok  { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); }

/* Devices in sync */
.viz__hub { position: relative; display: flex; justify-content: center; margin: 4px 0 18px; }
.viz__hub::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  border-top: 2px dashed rgba(255, 255, 255, .16);
}
.viz__hub .icon-tile { position: relative; box-shadow: 0 0 0 8px rgba(13, 20, 37, .82), var(--shadow-glow); }
.viz__devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.viz__device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: 14px;
  text-align: center;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
}
.viz__device .icon-tile { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
.viz__device strong { font-size: .8rem; font-weight: 600; color: #fff; }
.viz__sync { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; color: #6EE7B7; }
.viz__sync i { width: 6px; height: 6px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }

/* Label chips */
.viz__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.viz__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: .74rem;
  font-weight: 500;
  color: #E2E8F0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
.viz__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #818CF8); }

/* Score ring */
.viz__ring {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  background: conic-gradient(#10B981 var(--p, 100%), rgba(255, 255, 255, .1) 0);
}
.viz__ring::before { content: ""; grid-area: 1 / 1; width: 44px; height: 44px; border-radius: 50%; background: #0F1729; }
.viz__ring .icon { grid-area: 1 / 1; width: 20px; height: 20px; color: #34D399; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .page--services .feature-row { grid-template-columns: minmax(0, 1fr); }
  .page--services .feature-row__visual { order: -1; min-height: 0; padding: 30px 22px; }
  .viz { max-width: 440px; }
  .feature-row__body { max-width: none; }
  .page--services .feature-row + .feature-row { margin-top: clamp(24px, 6vw, 56px); }
}
@media (max-width: 720px) {
  .services-group__head { flex-wrap: wrap; gap: 8px 14px; }
  .services-group__head::after { order: 1; flex-basis: 100%; height: 1px; display: none; }
  .services-group__note { white-space: normal; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .page--services .feature-row__visual { padding: 26px 16px; }
  .viz__float { font-size: .72rem; padding: 8px 11px; }
  .viz__float--tr, .viz__float--br { right: -6px; }
  .viz__float--tl, .viz__float--bl { left: -6px; }
  .viz__card { padding: 14px; }
  .viz__head { gap: 10px; }
  .viz__pill { font-size: .66rem; padding: 3px 8px; }
  .viz__title { white-space: normal; } /* wrap beside the status pill instead of "Security check…" */
  .viz__devices { gap: 8px; }
}

/* --------------------------------------------------------------------------
   Reduced motion / screenshot mode
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .viz__float { animation: none; }
}
html.is-shot .viz__float { animation: none; }