/* Final theme layer. Kept separate so the visual system always wins the cascade. */
.site-header {
  border-bottom-color: #dfe6e2;
  box-shadow: 0 6px 24px rgba(23, 36, 31, .035);
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
  background: #eaf5f2;
  color: #075f4e;
}

.button {
  box-shadow: 0 10px 20px rgba(14, 116, 144, .16);
}

.button:hover {
  box-shadow: 0 12px 24px rgba(14, 116, 144, .2);
}

.quiet-band,
.home-benefits-band {
  background: #f3f7f4;
}

.feature-block.strong,
.contact-assistant {
  background: #17352f;
}

.feature-block.strong {
  border-color: #17352f;
}

.site-footer {
  border-top-color: #24473f;
  background: #17241f;
  color: #f5f8f6;
}

.site-footer .footer-brand,
.site-footer .footer-column h2 {
  color: #f5f8f6;
}

.site-footer .footer-brand-panel p,
.site-footer .footer-column a,
.site-footer .footer-cookie-settings,
.site-footer .footer-bottom {
  color: #bdcbc4;
}

.site-footer .footer-column a:hover,
.site-footer .footer-cookie-settings:hover {
  color: #fff;
}

.site-footer .footer-meta span {
  border-color: #345249;
  background: #20362f;
  color: #d7e2dc;
}

.site-footer .footer-bottom {
  border-top-color: #304a42;
}

.conversion-panel {
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.report-filter-grid.report-filter-grid-refined {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.breakdown-chart-card {
  min-height: 285px;
  padding: 18px;
}

.horizontal-bar-row,
.visual-funnel-stage {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: default;
}

.chart-card {
  min-height: 342px;
  border-color: #dfe6e2;
  box-shadow: 0 12px 28px rgba(23, 36, 31, .055);
}

.chart-canvas,
.report-chart-svg {
  min-height: 270px;
  height: 270px;
}

.chart-grid-line {
  stroke: #e4ebe7;
}

.chart-line-secondary {
  stroke: #9a8a67;
}

.server-distribution-card {
  border-top-color: var(--teal);
  box-shadow: 0 10px 24px rgba(23, 36, 31, .045);
}

.server-capacity-track span {
  background: var(--teal);
}

.report-list-toggle {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.report-list-toggle .button-secondary {
  min-width: 160px;
}

@media (max-width: 720px) {
  .report-filter-grid.report-filter-grid-refined {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .report-filter-grid.report-filter-grid-refined {
    grid-template-columns: 1fr;
  }

  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 20px;
  }

  .footer-column a,
  .footer-cookie-settings {
    min-height: 36px;
    font-size: 12px;
  }
}

/* Color and interaction language ------------------------------------------------
   Reusable surfaces share one motion model while each group rotates through a
   restrained palette. The color remains useful on touch devices; lift is only
   enabled for precise pointers. */
:root {
  --tone-sky: #edf8fb;
  --tone-sky-line: #b9dce5;
  --tone-sky-accent: #0e7490;
  --tone-sky-shadow: rgba(14, 116, 144, .18);
  --tone-mint: #eef9f5;
  --tone-mint-line: #b9ddcf;
  --tone-mint-accent: #0b7a63;
  --tone-mint-shadow: rgba(11, 122, 99, .18);
  --tone-sun: #fff8e7;
  --tone-sun-line: #e7d39c;
  --tone-sun-accent: #97650c;
  --tone-sun-shadow: rgba(151, 101, 12, .17);
  --tone-coral: #fff1ed;
  --tone-coral-line: #efc0b5;
  --tone-coral-accent: #b93e2c;
  --tone-coral-shadow: rgba(195, 72, 49, .17);
  --tone-plum: #f5f1fa;
  --tone-plum-line: #d9cee8;
  --tone-plum-accent: #6d559a;
  --tone-plum-shadow: rgba(109, 85, 154, .16);
}

:where(
  .feature-grid,
  .travel-steps,
  .plan-grid,
  .help-grid,
  .solution-home-grid,
  .app-card-grid,
  .app-metrics-row,
  .quick-action-list,
  .metric-grid,
  .report-kpi-grid,
  .report-signal-grid,
  .report-period-grid,
  .report-plan-grid,
  .usage-policy-grid,
  .server-distribution-grid
) > * {
  --card-tint: var(--tone-sky);
  --card-line: var(--tone-sky-line);
  --card-accent: var(--tone-sky-accent);
  --card-shadow: var(--tone-sky-shadow);
}

:where(
  .feature-grid,
  .travel-steps,
  .plan-grid,
  .help-grid,
  .solution-home-grid,
  .app-card-grid,
  .app-metrics-row,
  .quick-action-list,
  .metric-grid,
  .report-kpi-grid,
  .report-signal-grid,
  .report-period-grid,
  .report-plan-grid,
  .usage-policy-grid,
  .server-distribution-grid
) > :nth-child(5n + 2) {
  --card-tint: var(--tone-mint);
  --card-line: var(--tone-mint-line);
  --card-accent: var(--tone-mint-accent);
  --card-shadow: var(--tone-mint-shadow);
}

:where(
  .feature-grid,
  .travel-steps,
  .plan-grid,
  .help-grid,
  .solution-home-grid,
  .app-card-grid,
  .app-metrics-row,
  .quick-action-list,
  .metric-grid,
  .report-kpi-grid,
  .report-signal-grid,
  .report-period-grid,
  .report-plan-grid,
  .usage-policy-grid,
  .server-distribution-grid
) > :nth-child(5n + 3) {
  --card-tint: var(--tone-sun);
  --card-line: var(--tone-sun-line);
  --card-accent: var(--tone-sun-accent);
  --card-shadow: var(--tone-sun-shadow);
}

:where(
  .feature-grid,
  .travel-steps,
  .plan-grid,
  .help-grid,
  .solution-home-grid,
  .app-card-grid,
  .app-metrics-row,
  .quick-action-list,
  .metric-grid,
  .report-kpi-grid,
  .report-signal-grid,
  .report-period-grid,
  .report-plan-grid,
  .usage-policy-grid,
  .server-distribution-grid
) > :nth-child(5n + 4) {
  --card-tint: var(--tone-coral);
  --card-line: var(--tone-coral-line);
  --card-accent: var(--tone-coral-accent);
  --card-shadow: var(--tone-coral-shadow);
}

:where(
  .feature-grid,
  .travel-steps,
  .plan-grid,
  .help-grid,
  .solution-home-grid,
  .app-card-grid,
  .app-metrics-row,
  .quick-action-list,
  .metric-grid,
  .report-kpi-grid,
  .report-signal-grid,
  .report-period-grid,
  .report-plan-grid,
  .usage-policy-grid,
  .server-distribution-grid
) > :nth-child(5n) {
  --card-tint: var(--tone-plum);
  --card-line: var(--tone-plum-line);
  --card-accent: var(--tone-plum-accent);
  --card-shadow: var(--tone-plum-shadow);
}

.pricing-title-band {
  background: #fff8e7;
}

.solutions-title,
.apps-title-band {
  background: #edf8fb;
}

.guides-title-band,
.status-title-band {
  background: #eef9f5;
}

.compact-title {
  background: #f5f1fa;
}

.home-travel-band {
  background: #fffaf0;
}

.solution-home-band {
  background: #f4fafb;
}

.pricing-specialized-section {
  background: #fffaf0;
}

.feature-block,
.travel-steps article,
.plan-card,
.help-card,
.solution-home-link,
.solution-card,
.app-card,
.app-metrics-row article,
.quick-action-list a,
.metric-tile,
.report-kpi,
.report-signal,
.report-period-card,
.report-plan-grid > article,
.usage-policy-grid article,
.server-distribution-card,
.chart-card,
.guide-result-row,
.status-service-row,
.service-notice,
.specialized-links a,
.check-list div,
.form-panel {
  transition:
    transform .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

.feature-block:not(.strong),
.plan-card,
.help-card,
.app-card,
.app-metrics-row article,
.quick-action-list a,
.metric-tile,
.report-kpi,
.report-signal,
.report-period-card,
.report-plan-grid > article,
.usage-policy-grid article,
.server-distribution-card {
  border-color: var(--card-line, var(--line));
  background: var(--card-tint, #fff);
}

.feature-block:not(.strong),
.plan-card,
.app-card,
.report-kpi,
.server-distribution-card {
  border-top-color: var(--card-accent, var(--brand));
}

.feature-block:not(.strong) .feature-icon {
  border: 1px solid var(--card-line);
  background: #fff;
  color: var(--card-accent);
  box-shadow: 0 7px 16px var(--card-shadow);
}

.feature-block.strong {
  box-shadow: 0 18px 34px rgba(23, 53, 47, .2);
}

.travel-steps article {
  min-height: 150px;
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--card-accent);
  border-radius: 8px;
  background: var(--card-tint);
  padding: 20px;
  box-shadow: 0 10px 24px rgba(23, 36, 31, .045);
}

.travel-steps > article > span {
  border-color: var(--card-line);
  background: #fff;
  color: var(--card-accent);
  box-shadow: 0 6px 14px var(--card-shadow);
}

.plan-card-best {
  --card-tint: var(--tone-coral);
  --card-line: var(--tone-coral-line);
  --card-accent: var(--tone-coral-accent);
  --card-shadow: var(--tone-coral-shadow);
}

.plan-card .price strong,
.report-kpi strong,
.report-period-card strong,
.metric-tile strong,
.usage-policy-grid article > strong {
  color: var(--card-accent, var(--ink));
}

.plan-card .button {
  background: var(--card-accent);
  border-color: var(--card-accent);
  box-shadow: 0 10px 20px var(--card-shadow);
}

.plan-card .button:hover {
  filter: brightness(.91);
}

.solution-home-link {
  border-color: color-mix(in srgb, var(--solution-color, var(--brand)) 30%, #d9e1dd);
  background: var(--solution-soft, var(--surface-alt));
  box-shadow: 0 8px 18px rgba(23, 36, 31, .04);
}

.solution-card-personal,
.solution-tone-personal {
  --solution-color: #0b6c9e;
}

.solution-card-gaming,
.solution-tone-gaming {
  --solution-color: #b53a2f;
}

.solution-card-development,
.solution-tone-development {
  --solution-color: #08745f;
}

.solution-card {
  background: color-mix(in srgb, var(--solution-soft, #eef8fd) 72%, #fff);
}

.solution-home-link .solution-icon-wrap,
.solution-card .solution-icon-wrap {
  border: 1px solid color-mix(in srgb, var(--solution-color, var(--brand)) 24%, #d9e1dd);
  background: #fff;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--solution-color, var(--brand)) 16%, transparent);
}

.help-card {
  border-left: 4px solid var(--card-accent);
  box-shadow: 0 10px 24px rgba(23, 36, 31, .045);
}

.help-card li::marker {
  color: var(--card-accent);
  font-weight: 900;
}

.app-card {
  box-shadow: 0 12px 26px rgba(23, 36, 31, .055);
}

.app-card .app-logo {
  border: 2px solid #fff;
  box-shadow: 0 9px 20px var(--card-shadow);
}

.app-card .button {
  background: var(--card-accent);
  border-color: var(--card-accent);
  box-shadow: 0 8px 18px var(--card-shadow);
}

.app-card .button-secondary {
  border-color: var(--card-line);
  background: rgba(255, 255, 255, .78);
  color: var(--card-accent);
}

.app-hero-card.ready {
  border-color: var(--tone-mint-line);
  background: var(--tone-mint);
  box-shadow: 0 18px 38px var(--tone-mint-shadow);
}

.app-hero-card.pending {
  border-color: var(--tone-sky-line);
  background: var(--tone-sky);
  box-shadow: 0 18px 38px var(--tone-sky-shadow);
}

.app-metrics-row article {
  border-top: 4px solid var(--card-accent);
  box-shadow: 0 8px 20px rgba(23, 36, 31, .04);
}

.app-metrics-row strong,
.quick-action-list strong {
  color: var(--card-accent, var(--ink));
}

.quick-action-list a {
  border-left: 4px solid var(--card-accent);
  padding: 18px;
}

[dir="rtl"] .quick-action-list a {
  border-right: 4px solid var(--card-accent);
  border-left-width: 1px;
}

.check-list div {
  border-color: var(--soft-line);
  background: #fff;
  box-shadow: 0 7px 18px rgba(23, 36, 31, .035);
}

.check-list div:nth-child(2) span {
  background: var(--brand);
}

.check-list div:nth-child(3) span {
  background: var(--sun);
}

.check-list div:nth-child(4) span {
  background: var(--accent);
}

.guide-search-band {
  border-bottom-color: var(--tone-sky-line);
  background: #f4fafb;
}

.guide-category-filter button {
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.guide-category-filter button.active {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 8px 18px var(--tone-sky-shadow);
}

.guide-results {
  gap: 10px;
  border-top: 0;
}

.guide-result-row {
  --card-tint: var(--tone-sky);
  --card-line: var(--tone-sky-line);
  --card-accent: var(--tone-sky-accent);
  --card-shadow: var(--tone-sky-shadow);
  border: 1px solid var(--card-line);
  border-left: 4px solid var(--card-accent);
  border-radius: 8px;
  background: var(--card-tint);
  padding: 19px 16px;
}

.guide-result-row:nth-child(5n + 2) {
  --card-tint: var(--tone-mint);
  --card-line: var(--tone-mint-line);
  --card-accent: var(--tone-mint-accent);
  --card-shadow: var(--tone-mint-shadow);
}

.guide-result-row:nth-child(5n + 3) {
  --card-tint: var(--tone-sun);
  --card-line: var(--tone-sun-line);
  --card-accent: var(--tone-sun-accent);
  --card-shadow: var(--tone-sun-shadow);
}

.guide-result-row:nth-child(5n + 4) {
  --card-tint: var(--tone-coral);
  --card-line: var(--tone-coral-line);
  --card-accent: var(--tone-coral-accent);
  --card-shadow: var(--tone-coral-shadow);
}

.guide-result-row:nth-child(5n) {
  --card-tint: var(--tone-plum);
  --card-line: var(--tone-plum-line);
  --card-accent: var(--tone-plum-accent);
  --card-shadow: var(--tone-plum-shadow);
}

.guide-result-row .guide-result-index,
.guide-result-row .guide-result-copy small,
.guide-result-row .guide-result-action {
  color: var(--card-accent);
}

.status-service-list,
.resolved-notice-list {
  display: grid;
  gap: 10px;
  border-top: 0;
}

.status-service-row {
  border: 1px solid var(--tone-mint-line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: var(--tone-mint);
  padding: 17px;
}

.status-tone-warning,
.status-tone-neutral {
  border-color: var(--tone-sun-line);
  border-left-color: var(--tone-sun-accent);
  background: var(--tone-sun);
}

.status-tone-danger {
  border-color: #efc1cb;
  border-left-color: var(--rose);
  background: #fff2f4;
}

.resolved-notice-list article {
  border: 1px solid var(--tone-mint-line);
  border-radius: 8px;
  background: var(--tone-mint);
  padding: 16px;
}

.specialized-strip {
  border-color: var(--tone-sun-line);
  background: var(--tone-sun);
  box-shadow: 0 12px 28px var(--tone-sun-shadow);
}

.specialized-links a {
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .76);
}

.specialized-links a:nth-child(2) .solution-icon {
  color: var(--teal);
}

.specialized-links a:nth-child(3) .solution-icon {
  color: var(--accent);
}

.specialized-links a:nth-child(4) .solution-icon {
  color: var(--plum);
}

.pricing-disclosure,
.third-party-notice {
  border: 1px solid var(--tone-sky-line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: var(--tone-sky);
  box-shadow: 0 9px 22px rgba(14, 116, 144, .06);
}

.form-panel:focus-within {
  border-color: var(--tone-sky-line);
  box-shadow: 0 16px 34px var(--tone-sky-shadow);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #9bc7d3;
}

.button,
.button-secondary,
.button-quiet,
.nav-links a,
.nav-actions a,
.mobile-dashboard-link {
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.button:focus-visible,
.button-secondary:focus-visible,
.button-quiet:focus-visible,
.nav-links a:focus-visible,
.nav-actions a:focus-visible,
.mobile-dashboard-link:focus-visible,
.guide-category-filter button:focus-visible,
.guide-result-row:focus-visible,
.quick-action-list a:focus-visible {
  outline: 3px solid rgba(14, 116, 144, .24);
  outline-offset: 3px;
}

/* Reporting keeps dense information readable while making categories scannable. */
.report-view-tab {
  --tab-tint: var(--tone-sky);
  --tab-line: var(--tone-sky-line);
  --tab-accent: var(--tone-sky-accent);
}

.report-view-tab:nth-child(2) {
  --tab-tint: var(--tone-mint);
  --tab-line: var(--tone-mint-line);
  --tab-accent: var(--tone-mint-accent);
}

.report-view-tab:nth-child(3) {
  --tab-tint: var(--tone-sun);
  --tab-line: var(--tone-sun-line);
  --tab-accent: var(--tone-sun-accent);
}

.report-view-tab:nth-child(4) {
  --tab-tint: var(--tone-coral);
  --tab-line: var(--tone-coral-line);
  --tab-accent: var(--tone-coral-accent);
}

.report-view-tab:hover,
.report-view-tab[aria-selected="true"] {
  background: var(--tab-tint);
  color: var(--tab-accent);
  box-shadow: inset 0 0 0 1px var(--tab-line);
}

.report-kpi,
.report-period-card,
.metric-tile,
.report-plan-grid > article,
.usage-policy-grid article {
  box-shadow: 0 9px 22px rgba(23, 36, 31, .045);
}

.report-period-card {
  border-bottom-color: var(--card-accent);
}

.report-signal {
  border-color: var(--card-line);
}

.report-signal > i {
  background: var(--card-accent);
}

.report-signal-positive {
  --card-tint: var(--tone-mint);
  --card-line: var(--tone-mint-line);
  --card-accent: var(--tone-mint-accent);
  --card-shadow: var(--tone-mint-shadow);
}

.report-signal-attention,
.report-signal-warm {
  --card-tint: var(--tone-sun);
  --card-line: var(--tone-sun-line);
  --card-accent: var(--tone-sun-accent);
  --card-shadow: var(--tone-sun-shadow);
}

.report-signal-critical {
  --card-tint: #fff2f4;
  --card-line: #efc1cb;
  --card-accent: var(--rose);
  --card-shadow: rgba(189, 51, 82, .16);
}

.chart-grid > .chart-card:nth-child(4n + 1) {
  border-top: 4px solid var(--brand);
}

.chart-grid > .chart-card:nth-child(4n + 2) {
  border-top: 4px solid var(--teal);
}

.chart-grid > .chart-card:nth-child(4n + 3) {
  border-top: 4px solid var(--sun);
}

.chart-grid > .chart-card:nth-child(4n) {
  border-top: 4px solid var(--accent);
}

.report-transaction-row {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.report-transaction-row:hover {
  border-color: var(--tone-sky-line);
  background: var(--tone-sky);
  box-shadow: 0 8px 18px rgba(14, 116, 144, .07);
}

@media (hover: hover) and (pointer: fine) {
  .feature-block:hover,
  .travel-steps article:hover,
  .plan-card:hover,
  .help-card:hover,
  .solution-home-link:hover,
  .solution-card:hover,
  .app-card:hover,
  .app-metrics-row article:hover,
  .quick-action-list a:hover,
  .metric-tile:hover,
  .report-kpi:hover,
  .report-signal:hover,
  .report-period-card:hover,
  .report-plan-grid > article:hover,
  .usage-policy-grid article:hover,
  .server-distribution-card:hover,
  .chart-card:hover,
  .guide-result-row:hover,
  .status-service-row:hover,
  .service-notice:hover,
  .specialized-links a:hover,
  .check-list div:hover {
    transform: translateY(-4px);
    border-color: var(--card-accent, var(--brand));
    box-shadow: 0 17px 34px var(--card-shadow, rgba(14, 116, 144, .15));
  }

  .button:hover,
  .button-secondary:hover,
  .button-quiet:hover,
  .mobile-dashboard-link:hover,
  .guide-category-filter button:hover {
    transform: translateY(-2px);
  }

  .button:active,
  .button-secondary:active,
  .button-quiet:active,
  .mobile-dashboard-link:active,
  .guide-category-filter button:active {
    transform: translateY(0);
  }

  .nav-links a:hover,
  .nav-actions a:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 720px) {
  .travel-steps article {
    min-height: 0;
    padding: 17px;
  }

  .guide-result-row {
    padding: 16px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-block,
  .travel-steps article,
  .plan-card,
  .help-card,
  .solution-home-link,
  .solution-card,
  .app-card,
  .app-metrics-row article,
  .quick-action-list a,
  .metric-tile,
  .report-kpi,
  .report-signal,
  .report-period-card,
  .report-plan-grid > article,
  .usage-policy-grid article,
  .server-distribution-card,
  .chart-card,
  .guide-result-row,
  .status-service-row,
  .service-notice,
  .specialized-links a,
  .check-list div {
    transform: none !important;
  }
}