/* Generated by rtl.build.js from the file without ".rtl"; do not edit by hand. */
/* Self-hosted Nunito (latin, variable 300-700) for the #mcp section. It replaces the Google Fonts
   @import in tailwind.min.css, which blocked the first paint on a third-party connection. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/nunito-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.wrap {
  font-size: 27px;
}

@media (max-width: 640px) {
  .wrap {
    font-size: 20px;
  }
}

.noHover {
  pointer-events: none;
}

@media (max-width: 768px) {
  .d-md-none {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-ping {
    animation: none;
  }
}

.ltnt-testimonials {
  position: relative;
  overflow: hidden;
}

.ltnt-testimonial-track {
  display: flex;
  transition: transform 0.6s ease;
}

.ltnt-testimonial-item {
  min-width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}

.ltnt-testimonial-nav {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.ltnt-testimonial-nav button {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.6);
  background: transparent;
  cursor: pointer;
}

.ltnt-testimonial-nav button.ltnt-active {
  background: rgba(99, 102, 241, 1);
}

.ltnt-logo-grid img {
  max-height: 48px;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.ltnt-logo-grid img:hover {
  opacity: 1;
}

.text-xxs {
  font-size: 10px;
  line-height: 1.2;
}

.ltnt-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ltnt-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.ltnt-arrow-chip {
  background: #5047e594;
}

.ltnt-net-chip {
  background: linear-gradient(90deg, #2225612e 15%, #4f46e5d9 100%);
}

.typewrite-new,
.typewrite-new .wrap {
  border-left: none !important;
}

.typewrite-new .wrap {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px) translateZ(0);
  clip-path: inset(0 100% 0 0);
  filter: blur(5px);
  transition:
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path, opacity, transform, filter;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.typewrite-new .wrap.is-visible {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  transform: translateY(0) translateZ(0);
  filter: blur(0px);
}

@media (prefers-reduced-motion: reduce) {
  .typewrite-new .wrap {
    transition: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.title {
  font:
    800 38px ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    "Helvetica Neue",
    Arial;
  fill: #e5e7eb;
}

.label {
  font-size: 14px;
  fill: #878787;
}

@media (max-width: 660px) {
  .label {
    font-size: 24px;
    fill: #878787;
  }
}

.small {
  font-size: 12px;
  fill: #878787;
}

@media (max-width: 660px) {
  .small {
    font-size: 20px;
    fill: #878787;
  }
}

.panel {
  fill: #0f172a;
  stroke: #334155;
  stroke-width: 2;
  rx: 18;
}

.box {
  fill: #0b1220;
  stroke: #475569;
  stroke-width: 2;
  rx: 12;
}

.app {
  fill: #0f172a;
  stroke: #a78bfa;
  stroke-width: 2;
  rx: 14;
}

.cube {
  fill: #0f172a;
  stroke: #4f46e5;
  stroke-width: 2;
  rx: 12;
}

.flowP {
  stroke: url(#grad-purple);
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
}

.flowC {
  stroke: url(#grad-cyan);
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
}

.dash {
  stroke-dasharray: 12 12;
}

.flowAnim {
  stroke-dasharray: 18 12;
  animation: flow 3.6s linear infinite;
}

@keyframes flow {
  to {
    stroke-dashoffset: -240;
  }
}

@@keyframes slgn-gap {
  from {
    gap: 0;
  }

  to {
    gap: 0;
  }
}

@keyframes slgn-reveal {
  from {
    max-width: 0;
    opacity: 0;
  }

  to {
    max-width: 20rem;
    opacity: 1;
  }
}

@keyframes slgn-hide {
  from {
    opacity: 1;
    max-width: 4rem;
  }

  to {
    opacity: 0;
    max-width: 0;
  }
}

#localtonet-slgn {
  animation: slgn-gap 4.5s cubic-bezier(0.16, 1, 0.3, 1) 1.4s both;
}

#localtonet-slgn .slgn-mid {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  animation: slgn-reveal 4s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

#localtonet-slgn .slgn-to {
  overflow: hidden;
  white-space: nowrap;
  animation: slgn-hide 0.6s cubic-bezier(0.25, 0, 0.5, 1) 0.4s both;
}

/* Homepage insights */
.home-insights {
  --insights-indigo: #4f46e5;
  --insights-violet: #7c3aed;
  position: relative;
  margin-top: 50px;
  padding: 6rem 0;
  overflow: hidden;
  background: linear-gradient(-180deg, #f8fafc 0%, #ffffff 100%);
}

.home-insights::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.48;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(99, 102, 241, 0.16) 1px,
    transparent 0
  );
  background-size: 28px 28px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 20%,
    #000 75%,
    transparent
  );
}

.home-insights-container {
  position: relative;
  z-index: 1;
}

.home-insights-glow {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.14;
  pointer-events: none;
}

.home-insights-glow-top {
  top: -12rem;
  left: -8rem;
  background: #6366f1;
}

.home-insights-glow-bottom {
  bottom: -14rem;
  right: -8rem;
  background: #c026d3;
}

.home-insights-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.home-insights-heading {
  max-width: 47rem;
}

.home-insights-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.07);
  color: #4338ca;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-insights-heading h2 {
  margin: 1rem 0 0.8rem;
  color: #0f172a;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.home-insights-heading h2 span {
  color: var(--insights-indigo);
}

.home-insights-heading p {
  max-width: 40rem;
  margin: 0;
  color: #64748b;
  font-size: 1rem;
  line-height: 1.75;
}

.home-insights-all {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.8rem;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 700;
}

.home-insights-all > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: #fff;
  color: var(--insights-indigo);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.home-insights-all:hover > span {
  transform: translateX(-3px);
  border-color: var(--insights-indigo);
  background: var(--insights-indigo);
  color: #fff;
}

.home-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 1.5rem;
}

.home-insights-featured,
.home-insights-card {
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.home-insights-featured {
  overflow: hidden;
  border-radius: 1.5rem;
}

.home-insights-featured:hover,
.home-insights-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.42);
  box-shadow: 0 22px 46px rgba(79, 70, 229, 0.12);
}

.home-insights-featured > a {
  display: grid;
  grid-template-columns: minmax(14rem, 0.84fr) minmax(0, 1.16fr);
  min-height: 26rem;
  color: inherit;
}

.home-insights-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
}

.home-insights-visual-mobile {
  background: linear-gradient(-145deg, #312e81 0%, #4f46e5 48%, #7c3aed 100%);
}

.home-insights-visual-mobile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(-120deg, rgba(255, 255, 255, 0.1), transparent 45%),
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.15),
      transparent 50%
    );
}

.home-insights-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.home-insights-orbit-one {
  width: 18rem;
  height: 18rem;
}

.home-insights-orbit-two {
  width: 12rem;
  height: 12rem;
  border-style: dashed;
  transform: rotate(-25deg);
}

.home-insights-phone {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 9.5rem;
  height: 17rem;
  padding: 2.6rem 1rem 1rem;
  border: 5px solid rgba(255, 255, 255, 0.84);
  border-radius: 1.8rem;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  box-shadow:
    0 28px 50px rgba(15, 23, 42, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: rotate(4deg);
}

.home-insights-phone-speaker {
  position: absolute;
  top: 0.75rem;
  width: 2.8rem;
  height: 0.3rem;
  border-radius: 9999px;
  background: #64748b;
}

.home-insights-phone > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.3rem;
  background: linear-gradient(-145deg, #6366f1, #a855f7);
  font-size: 1.65rem;
  box-shadow: 0 12px 25px rgba(99, 102, 241, 0.34);
}

.home-insights-phone-status {
  margin-top: 1.4rem;
  color: #c7d2fe;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-insights-phone-ip {
  margin-top: 0.55rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 0.72rem;
}

.home-insights-visual-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  color: #312e81;
  font-size: 0.68rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(8px);
}

.home-insights-chip-secure {
  top: 19%;
  right: 7%;
}

.home-insights-chip-ready {
  left: 6%;
  bottom: 19%;
  color: #047857;
}

.home-insights-featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.25rem;
}

.home-insights-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
}

.home-insights-category {
  color: var(--insights-indigo);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.home-insights-category i {
  margin-left: 0.35rem;
}

.home-insights-featured h3,
.home-insights-card h3 {
  color: #0f172a;
  font-weight: 700;
  letter-spacing: -0.025em;
  transition: color 0.25s ease;
}

.home-insights-featured h3 {
  margin: 1.25rem 0 0;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.25;
}

.home-insights-featured h3 span {
  color: #64748b;
}

.home-insights-featured p,
.home-insights-card p {
  color: #64748b;
  line-height: 1.65;
}

.home-insights-featured p {
  margin: 1rem 0 0;
  font-size: 0.9rem;
}

.home-insights-read {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--insights-indigo);
  font-size: 0.82rem;
  font-weight: 700;
}

.home-insights-read i {
  font-size: 0.68rem;
  transition: transform 0.25s ease;
}

.home-insights-featured:hover .home-insights-read i,
.home-insights-card:hover .home-insights-read i {
  transform: translateX(-4px);
}

.home-insights-list {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.home-insights-card {
  overflow: hidden;
  border-radius: 1.25rem;
}

.home-insights-card > a {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  min-height: 100%;
  color: inherit;
}

.home-insights-card-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 1.6rem;
}

.home-insights-card-icon::before,
.home-insights-card-icon::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
}

.home-insights-card-icon::before {
  width: 5rem;
  height: 5rem;
  border: 1px solid currentColor;
  opacity: 0.16;
}

.home-insights-card-icon::after {
  width: 3.5rem;
  height: 3.5rem;
  background: currentColor;
  opacity: 0.1;
}

.home-insights-card-icon i {
  position: relative;
  z-index: 1;
}

.home-insights-card-pricing .home-insights-card-icon {
  background: linear-gradient(-145deg, #fffbeb, #fff7ed);
  color: #d97706;
}

.home-insights-card-start .home-insights-card-icon {
  background: linear-gradient(-145deg, #ecfdf5, #ecfeff);
  color: #059669;
}

.home-insights-card-content {
  display: flex;
  flex-direction: column;
  padding: 1.55rem 1.7rem;
}

.home-insights-card h3 {
  margin: 0.75rem 0 0;
  font-size: 1.15rem;
  line-height: 1.35;
}

.home-insights-card p {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
}

.home-insights-card .home-insights-read {
  padding-top: 0.8rem;
}

.home-insights-featured > a:focus-visible,
.home-insights-card > a:focus-visible,
.home-insights-all:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.55);
  outline-offset: 3px;
}

.home-insights-mobile-all {
  display: none;
}

.dark .home-insights {
  background: linear-gradient(-180deg, #1e293b 0%, #172033 100%);
}

.dark .home-insights::before {
  opacity: 0.2;
}

.dark .home-insights-heading h2,
.dark .home-insights-featured h3,
.dark .home-insights-card h3 {
  color: #f8fafc;
}

.dark .home-insights-heading p,
.dark .home-insights-featured p,
.dark .home-insights-card p {
  color: #94a3b8;
}

.dark .home-insights-eyebrow {
  border-color: rgba(129, 140, 248, 0.26);
  background: rgba(99, 102, 241, 0.12);
  color: #c7d2fe;
}

.dark .home-insights-all {
  color: #e2e8f0;
}

.dark .home-insights-all > span {
  border-color: #475569;
  background: #1e293b;
  color: #a5b4fc;
}

.dark .home-insights-featured,
.dark .home-insights-card {
  border-color: #334155;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.22);
}

.dark .home-insights-featured:hover,
.dark .home-insights-card:hover {
  border-color: rgba(129, 140, 248, 0.55);
  box-shadow: 0 22px 46px rgba(2, 6, 23, 0.36);
}

.dark .home-insights-featured h3 span {
  color: #94a3b8;
}

.dark .home-insights-card-pricing .home-insights-card-icon {
  background: linear-gradient(
    -145deg,
    rgba(120, 53, 15, 0.42),
    rgba(67, 36, 18, 0.52)
  );
  color: #fbbf24;
}

.dark .home-insights-card-start .home-insights-card-icon {
  background: linear-gradient(
    -145deg,
    rgba(6, 78, 59, 0.4),
    rgba(8, 51, 68, 0.5)
  );
  color: #34d399;
}

@media (max-width: 1023px) {
  .home-insights-grid {
    grid-template-columns: 1fr;
  }

  .home-insights-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .home-insights-card > a {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .home-insights {
    margin-top: 30px;
    padding: 4rem 0;
  }

  .home-insights-header {
    margin-bottom: 1.75rem;
  }

  .home-insights-header > .home-insights-all {
    display: none;
  }

  .home-insights-featured > a {
    grid-template-columns: 1fr;
  }

  .home-insights-visual {
    min-height: 17rem;
  }

  .home-insights-phone {
    width: 7.3rem;
    height: 13rem;
    padding-top: 2.1rem;
    border-width: 4px;
    border-radius: 1.4rem;
  }

  .home-insights-phone > i {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
  }

  .home-insights-featured-content {
    padding: 1.6rem;
  }

  .home-insights-list {
    grid-template-columns: 1fr;
  }

  .home-insights-mobile-all {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }
}

@media (max-width: 479px) {
  .home-insights-card > a {
    grid-template-columns: 1fr;
  }

  .home-insights-card-icon {
    min-height: 7rem;
  }

  .home-insights-card-content {
    padding: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-insights-featured,
  .home-insights-card,
  .home-insights-read i,
  .home-insights-all > span {
    transition: none;
  }
}

.home-faq, .home-support {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.home-faq {
  --faq-text: #0f172a;
  --faq-muted: #64748b;
  --faq-accent: #4f46e5;
  --faq-border: #e2e8f0;
  --faq-surface: #fff;
  --faq-highlight: #eef2ff;
  padding-block: 88px;
  background: linear-gradient(-180deg, #f8fafc, #fff);
  color: var(--faq-text);
}
.home-faq-container {
  width: min(100%, 1168px);
  margin-inline: auto;
  padding-inline: 24px;
}
.home-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
  align-items: start;
  gap: 64px;
}
.home-faq-eyebrow, .home-support-eyebrow {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.home-faq-eyebrow { color: var(--faq-accent); }
.home-faq-intro h2 {
  margin: 0;
  max-width: 380px;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.home-faq-intro h2 span { color: var(--faq-accent); }
.home-faq-intro p {
  margin: 20px 0 0;
  max-width: 340px;
  color: var(--faq-muted);
  font-size: 15px;
  line-height: 1.8;
}
.home-faq-guide, .home-faq-answer a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--faq-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.home-faq-guide { margin-top: 24px; }
.home-faq-guide:hover, .home-faq-answer a:hover { text-decoration: underline; }
.home-faq-list { display: grid; gap: 12px; }
.home-faq-item {
  min-width: 0;
  border: 1px solid var(--faq-border);
  border-radius: 12px;
  background: var(--faq-surface);
}
.home-faq-item[open] { border-color: var(--faq-accent); }
.home-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 11px;
  color: var(--faq-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary:hover { color: var(--faq-accent); }
.home-faq-toggle {
  position: relative;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--faq-highlight);
  color: var(--faq-accent);
}
.home-faq-toggle::before, .home-faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(50%, -50%);
}
.home-faq-toggle::after { transform: translate(50%, -50%) rotate(-90deg); }
.home-faq-item[open] .home-faq-toggle::after { display: none; }
.home-faq-answer { padding: 0 24px 24px; }
.home-faq-answer p {
  margin: 0;
  color: var(--faq-muted);
  font-size: 14px;
  line-height: 1.8;
}
.home-faq-answer a { margin-top: 14px; }
.home-faq a:focus-visible, .home-faq-item summary:focus-visible {
  outline: 3px solid var(--faq-accent);
  outline-offset: 4px;
  border-radius: 8px;
}
.dark .home-faq {
  --faq-text: #f1f5f9;
  --faq-muted: #a3b1c6;
  --faq-accent: #a5b4fc;
  --faq-border: #334155;
  --faq-surface: #162238;
  --faq-highlight: #263252;
  background: linear-gradient(-180deg, #0f172a, #101a2d);
}
.home-support {
  padding-block: 48px;
  background: #101a2d radial-gradient(ellipse at 0 0, #1d2946 0, transparent 65%);
  color: #f1f5f9;
}
.home-support-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.home-support-eyebrow { margin-bottom: 10px; color: #a5b4fc; }
.home-support-copy h2 {
  margin: 0;
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.home-support-copy p {
  margin: 12px 0 0;
  max-width: 480px;
  color: #b4c0d3;
  font-size: 14px;
  line-height: 1.8;
}
.home-support-actions { display: flex; flex-wrap: wrap; gap: 12px; max-width: 100%; }
.home-support-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.home-support-primary { background: #4f46e5; color: #fff; }
.home-support-primary:hover { background: #4338ca; }
.home-support-actions .home-support-secondary { border-color: #46517d; color: #e0e7ff; }
.home-support-secondary:hover { background: #263252; border-color: #818cf8; }
.home-support-actions a:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 4px; }
@media (max-width: 900px) {
  .home-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-faq-intro h2, .home-faq-intro p { max-width: 540px; }
  .home-support-content { align-items: flex-start; flex-direction: column; gap: 24px; }
}
@media (max-width: 680px) {
  .home-faq { padding-block: 56px; }
  .home-faq-container { padding-right: 22px; padding-left: 44px; }
  .home-faq-item summary { gap: 14px; padding: 18px; font-size: 15px; }
  .home-faq-answer { padding: 0 18px 20px; }
  .home-support { padding-block: 32px; }
  .home-support-actions { width: 100%; }
  .home-support-actions a { flex: 1 1 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-support-actions a { transition: none; }
}

/* tailwind.min.css is a fixed template build without these dark: text colors,
   so the homepage markup that uses them fell back to low-contrast light-theme colors. */
.dark .dark\:text-indigo-200 { color: #c7d2fe !important; }
.dark .dark\:text-indigo-300 { color: #a5b4fc !important; }
.dark .dark\:text-indigo-400 { color: #818cf8 !important; }
.dark .dark\:text-slate-100 { color: #f1f5f9 !important; }
.dark .dark\:text-emerald-400 { color: #34d399 !important; }
.dark .dark\:text-amber-400 { color: #fbbf24 !important; }
.dark .dark\:text-sky-400 { color: #38bdf8 !important; }
.dark .dark\:text-violet-400 { color: #a78bfa !important; }
.dark .dark\:text-indigo-400.hover\:text-white:hover { color: #fff !important; }

/* Inline SVG icons for the first viewport (hero, tunnel types): an icon-font glyph there made the
   browser fetch the ~110 KB Font Awesome font before the first paint. */
.home-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* Below-the-fold sections: the browser skips their style, layout and paint (and the font and image
   requests they trigger) until they get near the viewport. The intrinsic sizes are the measured
   section heights, used only until a section has rendered once ("auto" then keeps its real height). */
.home-deferred { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.home-how.home-deferred { contain-intrinsic-size: auto 386px; }
#features.home-deferred { contain-intrinsic-size: auto 4163px; }
#pricing.home-deferred { contain-intrinsic-size: auto 1719px; }
#server-map.home-deferred { contain-intrinsic-size: auto 556px; }
#platforms.home-deferred { contain-intrinsic-size: auto 1168px; }
#mcp.home-deferred { contain-intrinsic-size: auto 1217px; }
#use-cases.home-deferred { contain-intrinsic-size: auto 2337px; }
#works-with.home-deferred { contain-intrinsic-size: auto 214px; }
#mobile-edge.home-deferred { contain-intrinsic-size: auto 908px; }
#analytics.home-deferred { contain-intrinsic-size: auto 1246px; }
.home-insights.home-deferred { contain-intrinsic-size: auto 1619px; }
.home-faq.home-deferred { contain-intrinsic-size: auto 834px; }
.home-support.home-deferred { contain-intrinsic-size: auto 251px; }
/* #features is near enough to the fold to render at load, but it is ~4300 px tall on phones:
   defer its cards one by one as well. */
#features .feature-card { content-visibility: auto; contain-intrinsic-size: auto 375px; }
@media (min-width: 768px) {
  .home-how.home-deferred { contain-intrinsic-size: auto 450px; }
  #features.home-deferred { contain-intrinsic-size: auto 1571px; }
  #pricing.home-deferred { contain-intrinsic-size: auto 726px; }
  #server-map.home-deferred { contain-intrinsic-size: auto 527px; }
  #platforms.home-deferred { contain-intrinsic-size: auto 474px; }
  #mcp.home-deferred { contain-intrinsic-size: auto 758px; }
  #use-cases.home-deferred { contain-intrinsic-size: auto 1143px; }
  #works-with.home-deferred { contain-intrinsic-size: auto 218px; }
  #mobile-edge.home-deferred { contain-intrinsic-size: auto 340px; }
  #analytics.home-deferred { contain-intrinsic-size: auto 649px; }
  .home-insights.home-deferred { contain-intrinsic-size: auto 708px; }
  .home-faq.home-deferred { contain-intrinsic-size: auto 454px; }
  .home-support.home-deferred { contain-intrinsic-size: auto 98px; }
  #features .feature-card { contain-intrinsic-size: auto 550px; }
}

/* Section styles below were inline \3c style> blocks in Views/Home/Index.cshtml; kept last so they
   still override the rules above, as they did from the page body. */

/* ---- How It Works ---- */
.how-it-works-diagram {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}

    .how-it-works-diagram svg {
        width: 100%;
        height: auto;
    }

.hiw-card {
    fill: #ffffff;
}

.hiw-card-dark {
    fill: #1e293b;
}

.hiw-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    fill: #1e293b;
}

.hiw-text-light {
    fill: #64748b;
}

.hiw-text-white {
    fill: #ffffff;
}

@media (prefers-color-scheme: dark) {
    .hiw-card {
        fill: #1e293b;
    }

    .hiw-text {
        fill: #f1f5f9;
    }

    .hiw-text-light {
        fill: #94a3b8;
    }
}

.dark .hiw-card {
    fill: #1e293b;
}

.dark .hiw-text {
    fill: #f1f5f9;
}

.dark .hiw-text-light {
    fill: #94a3b8;
}

.hiw-pulse {
    animation: hiw-pulse 2s ease-in-out infinite;
}

.hiw-pulse-delay {
    animation: hiw-pulse 2s ease-in-out infinite 0.5s;
}

.hiw-flow-dot {
    animation: hiw-flow 3s linear infinite;
}

.hiw-flow-dot-reverse {
    animation: hiw-flow-reverse 3s linear infinite;
}

@keyframes hiw-pulse {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes hiw-flow {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

@keyframes hiw-flow-reverse {
    0% {
        offset-distance: 100%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        offset-distance: 0%;
        opacity: 0;
    }
}

/* ---- Features ---- */
.feature-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(-135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
    border: 1px solid rgba(99, 102, 241, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.dark .feature-card {
    background: linear-gradient(-135deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.9) 100%);
    border-color: rgba(99, 102, 241, 0.2);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(-90deg, #6366f1, #8b5cf6, #ec4899);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.3);
}

.feature-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 1.25rem;
    background: linear-gradient(-135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon-wrapper {
    background: linear-gradient(-135deg, #6366f1 0%, #8b5cf6 100%);
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.5);
}

.feature-icon-wrapper i,
.feature-icon-wrapper svg {
    font-size: 2rem;
    color: #6366f1;
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon-wrapper i,
.feature-card:hover .feature-icon-wrapper svg {
    color: #ffffff;
    transform: scale(1.1);
}

    .feature-card:hover .feature-icon-wrapper svg path,
    .feature-card:hover .feature-icon-wrapper svg circle,
    .feature-card:hover .feature-icon-wrapper svg rect {
        stroke: #ffffff;
    }

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.feature-badge-protocol {
    background: rgba(34, 211, 238, 0.1);
    color: #06b6d4;
}

.feature-badge-platform {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.feature-badge-security {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.feature-badge-domain {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.feature-badge-auth {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.feature-badge-file {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.feature-badge-debug {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.feature-badge-ssl {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.feature-card-link {
    color: inherit;
}

    /* Stretched link: the whole card is clickable through the title link */
    .feature-card-link::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
    }

    .feature-card-link:focus-visible {
        outline: none;
    }

        .feature-card-link:focus-visible::after {
            outline: 2px solid #6366f1;
            outline-offset: -2px;
        }

.feature-list {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(99, 102, 241, 0.2);
}

.feature-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.dark .feature-list-item {
    color: #94a3b8;
}

.feature-list-item i {
    color: #10b981;
    font-size: 0.75rem;
}

/* ---- Server map ---- */
#server-map .section-header {
    text-align: center;
    margin-bottom: 2rem
}

    #server-map .section-header h3 {
        font-size: 1.875rem;
        font-weight: 700;
        margin-bottom: .5rem;
        color: #0f172a
    }

    #server-map .section-header p {
        font-size: 1rem;
        color: #475569
    }

@media (prefers-color-scheme: dark) {
    #server-map .section-header h3 {
        color: #fff
    }

    #server-map .section-header p {
        color: #cbd5e1
    }
}

#server-map .map-wrap {
    position: relative;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    aspect-ratio: 16/8;
    overflow: hidden;
    border-radius: 12px;
}

@media (max-width:768px) {
    #server-map .map-wrap {
        max-width: 100%;
        aspect-ratio: 16/18
    }
}

#server-map .map {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.05) saturate(1.05)
}

/* The pins sit at fixed map coordinates (left: x%) and are centred with translate(-50%,…): never mirrored. */
#server-map .flag-pin {
    position: absolute;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    transform: translate(-50%,-50%);
    cursor: pointer;
    background: #fff;
    overflow: visible
}

    #server-map .flag-pin:hover, #server-map .flag-pin.active {
        z-index: 20
    }

    #server-map .flag-pin img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block
    }

    #server-map .flag-pin .tip {
        position: absolute;
        z-index: 30;
        left: 50%;
        top: -8px;
        transform: translate(-50%,-100%);
        white-space: nowrap;
        background: #0f172a;
        color: #fff;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 8px;
        padding: 6px 8px;
        font-size: 11px;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s,transform .15s;
        display: flex;
        gap: 5px;
        align-items: center;
        backdrop-filter: saturate(1.2) blur(4px)
    }

    #server-map .flag-pin:hover .tip, #server-map .flag-pin.active .tip {
        opacity: 1;
        transform: translate(-50%,-110%)
    }

#server-map .name {
    font-weight: 600
}

@media (max-width:768px) {
    #server-map .flag-pin {
        width: 15px;
        height: 15px;
        border-width: 1.5px
    }

        #server-map .flag-pin .tip {
            font-size: 10px;
            padding: 5px 7px
        }
}

.lt-tr-ist {
    left: 52.85%;
    top: 44.218%;
}

@media (max-width:768px) {
    .lt-tr-ist {
        left: 52.85%;
        top: 44.218%;
    }
}

.lt-us-ckg {
    left: 31.658%;
    top: 36.734%;
}

@media (max-width:768px) {
    .lt-us-ckg {
        left: 17.658%;
        top: 39.734%;
    }
}

.lt-es-md {
    left: 47.471%;
    top: 43.746%;
}

@media (max-width:768px) {
    .lt-es-md {
        left: 47.471%;
        top: 43.746%;
    }
}

.lt-it-ar {
    left: 49.621%;
    top: 43.107%;
}

@media (max-width:768px) {
    .lt-it-ar {
        left: 49.621%;
        top: 43.107%;
    }
}

.lt-cz-pr {
    left: 50.211%;
    top: 39.872%;
}

@media (max-width:768px) {
    .lt-cz-pr {
        left: 50.211%;
        top: 39.872%;
    }
}

.lt-hk-hk {
    left: 69.559%;
    top: 52.214%;
}

@media (max-width:768px) {
    .lt-hk-hk {
        left: 81.559%;
        top: 50.214%;
    }
}

.lt-id-jk {
    left: 68.340%;
    top: 64.136%;
}

@media (max-width:768px) {
    .lt-id-jk {
        left: 79.340%;
        top: 61.136%;
    }
}

.lt-us-dr {
    left: 33.084%;
    top: 43.203%;
}

@media (max-width:768px) {
    .lt-us-dr {
        left: 23.084%;
        top: 43.203%;
    }
}

.lt-br-so {
    left: 38.045%;
    top: 72.087%;
}

@media (max-width:768px) {
    .lt-br-so {
        left: 29.045%;
        top: 66.087%;
    }
}

.lt-jp-tk {
    left: 73.792%;
    top: 45.18%;
}

@media (max-width:768px) {
    .lt-jp-tk {
        left: 90.792%;
        top: 45.18%;
    }
}

.lt-fr-pr {
    left: 47.653%;
    top: 40.657%;
}

@media (max-width:768px) {
    .lt-fr-pr {
        left: 47.653%;
        top: 40.657%;
    }
}

.lt-au-sy {
    left: 76.003%;
    top: 72.816%;
}

@media (max-width:768px) {
    .lt-au-sy {
        left: 93.003%;
        top: 66.816%;
    }
}

.lt-ar-ad {
    left: 58.105%;
    top: 52.414%;
}

@media (max-width:768px) {
    .lt-ar-ad {
        left: 62.105%;
        top: 51.414%;
    }
}

.lt-at-vi {
    left: 50.548%;
    top: 41.218%;
}

@media (max-width:768px) {
    .lt-at-vi {
        left: 50.548%;
        top: 41.218%;
    }
}

.lt-sg-sg {
    left: 67.839%;
    top: 61.249%;
}

@media (max-width:768px) {
    .lt-sg-sg {
        left: 78.839%;
        top: 58.249%;
    }
}

.lt-in-hy {
    left: 62.502%;
    top: 54.342%;
}

@media (max-width:768px) {
    .lt-in-hy {
        left: 71.502%;
        top: 52.342%;
    }
}

.lt-mx-qe {
    left: 31.114%;
    top: 53.562%;
}

@media (max-width:768px) {
    .lt-mx-qe {
        left: 18.114%;
        top: 52.562%;
    }
}

.lt-gb-ln {
    left: 46.965%;
    top: 36.385%;
}

@media (max-width:768px) {
    .lt-gb-ln {
        left: 46.965%;
        top: 36.385%;
    }
}

.lt-us-cl {
    left: 26.828%;
    top: 48.568%;
}

@media (max-width:768px) {
    .lt-us-cl {
        left: 11.828%;
        top: 47.568%;
    }
}

.lt-de-ds {
    left: 48.882%;
    top: 39.04%;
}

@media (max-width:768px) {
    .lt-de-ds {
        left: 48.882%;
        top: 39.04%;
    }
}

.lt-ru-mo {
    left: 54.5%;
    top: 36.6%;
}

@media (max-width:768px) {
    .lt-ru-mo {
        left: 54.5%;
        top: 36.6%;
    }
}

/* Kyiv (30.5°E, 50.5°N): north of the Istanbul pin, nudged a little west so it clears the Moscow pin. */
.lt-ua-kv {
    left: 52.85%;
    top: 39.5%;
}

@media (max-width:768px) {
    .lt-ua-kv {
        left: 52.85%;
        top: 39.5%;
    }
}

/* ---- MCP ---- */
#mcp {
    font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#mcp > .container {
    width: 100%;
    max-width: 1536px;
    padding-right: 24px;
    padding-left: 24px;
}

#mcp .mcp-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: stretch;
}

#mcp .mcp-content-grid > * {
    min-width: 0;
}

#mcp .mcp-badges {
    gap: 10px;
}

/* Read by screen readers and crawlers so "Learn More" is a descriptive link; not shown */
#mcp .mcp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#mcp .mcp-badge {
    gap: 7px;
    min-height: 30px;
    padding: 5px 12px;
    line-height: 1.25;
}

#mcp .mcp-badge i {
    width: 13px;
    margin-left: 0;
    text-align: center;
}

#mcp .mcp-feature-card {
    padding: 32px;
    border-color: rgba(148, 163, 184, .3);
    box-shadow: 0 12px 32px -24px rgba(15, 23, 42, .55), 0 2px 8px rgba(15, 23, 42, .04);
}

#mcp .mcp-feature-grid {
    column-gap: 34px;
    row-gap: 30px;
}

#mcp .mcp-feature {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-width: 0;
}

#mcp .mcp-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 18px;
}

#mcp .mcp-feature-copy {
    min-width: 0;
    padding-top: 1px;
}

#mcp .mcp-feature-copy h3 {
    margin-bottom: 5px;
    color: #172033;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

#mcp .mcp-feature-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

#mcp .mcp-actions {
    gap: 12px;
    padding-top: 28px;
}

#mcp .mcp-action {
    gap: 9px;
    min-height: 42px;
    padding: 9px 16px;
}

#mcp .mcp-action i {
    margin: 0;
}

.dark #mcp .mcp-feature-card {
    border-color: rgb(51 65 85);
    box-shadow: 0 12px 32px -24px rgba(0, 0, 0, .8);
}

.dark #mcp .mcp-feature-copy h3 {
    color: #f1f5f9;
}

#mcp .mcp-code-block {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #1e1e1e;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,.35);
    border: 1px solid #333;
}

#mcp .mcp-code-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(-180deg, #3c3c3c 0%, #2d2d2d 100%);
    border-bottom: 1px solid #1a1a1a;
    flex-shrink: 0;
}

#mcp .mcp-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

    #mcp .mcp-dots span {
        width: 10px;
        height: 10px;
        border-radius: 9999px;
        display: block;
    }

    #mcp .mcp-dots span:nth-child(1) { background: #ff5f56; }
    #mcp .mcp-dots span:nth-child(2) { background: #ffbd2e; }
    #mcp .mcp-dots span:nth-child(3) { background: #27c93f; }

#mcp .mcp-code-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    color: #b0b0b0;
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#mcp .mcp-code-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    background: linear-gradient(-135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
}

#mcp .mcp-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #c8c8c8;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    #mcp .mcp-copy-btn:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
    }

    #mcp .mcp-copy-btn:focus-visible {
        outline: 2px solid #818cf8;
        outline-offset: 2px;
    }

    #mcp .mcp-copy-btn.is-copied {
        background: rgba(74,222,128,.15);
        border-color: rgba(74,222,128,.4);
        color: #4ade80;
    }

#mcp .mcp-code-body {
    margin: 0;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    flex: 1 1 auto;
}

    #mcp .mcp-code-body code {
        display: block;
        white-space: pre-wrap;
        word-break: break-word;
        color: #e4e4e4;
        font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
        font-size: 0.8rem;
        line-height: 1.75;
    }

    #mcp .mcp-code-body .jk { color: #9cdcfe; }
    #mcp .mcp-code-body .js { color: #ce9178; }
    #mcp .mcp-code-body .jp { color: #808080; }

@media (max-width: 1023px) {
    #mcp > .container {
        max-width: 768px;
    }

    #mcp .mcp-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #mcp .mcp-code-block {
        min-height: 360px;
    }
}

@media (max-width: 1279px) and (min-width: 1024px) {
    #mcp .mcp-feature-card {
        padding: 26px;
    }

    #mcp .mcp-feature-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    #mcp > .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    #mcp .mcp-content-grid {
        gap: 24px;
    }

    #mcp .mcp-feature-card {
        padding: 24px 20px;
    }

    #mcp .mcp-feature-grid {
        row-gap: 24px;
    }

    #mcp .mcp-feature {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
    }

    #mcp .mcp-feature-icon {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    #mcp .mcp-actions {
        padding-top: 24px;
    }

    #mcp .mcp-code-block {
        min-height: 0;
    }

    #mcp .mcp-code-body {
        padding: 1rem;
    }

    #mcp .mcp-code-body code {
        font-size: 0.72rem;
        line-height: 1.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mcp .mcp-ping { animation: none; }
}

/* ---- Use cases ---- */
#use-cases {
    --uc-surface: rgba(255, 255, 255, .92);
    --uc-border: rgba(148, 163, 184, .28);
    --uc-title: #0f172a;
    --uc-copy: #64748b;
    --uc-tag-bg: #f1f5f9;
    --uc-tag-text: #475569;
}

#use-cases::before,
#use-cases::after {
    content: '';
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: .16;
    pointer-events: none;
}

#use-cases::before {
    top: -10rem;
    right: -8rem;
    background: #6366f1;
}

#use-cases::after {
    left: -9rem;
    bottom: -12rem;
    background: #06b6d4;
}

#use-cases .use-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

#use-cases .use-case-card {
    --uc-accent: #6366f1;
    --uc-accent-rgb: 99, 102, 241;
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    min-height: 15.5rem;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--uc-border);
    border-radius: 1.25rem;
    background: var(--uc-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -24px rgba(15, 23, 42, .28);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .28s ease, box-shadow .28s ease;
}

#use-cases .use-case-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(-90deg, transparent, var(--uc-accent), transparent);
    opacity: .65;
    transform: scaleX(.35);
    transition: opacity .28s ease, transform .28s ease;
}

#use-cases .use-case-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -4.5rem;
    right: -4.5rem;
    width: 11rem;
    height: 11rem;
    border-radius: 9999px;
    background: rgba(var(--uc-accent-rgb), .1);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .28s ease, transform .35s ease;
}

#use-cases .use-case-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--uc-accent-rgb), .38);
    box-shadow: 0 20px 40px -28px rgba(var(--uc-accent-rgb), .65), 0 12px 24px -20px rgba(15, 23, 42, .32);
}

#use-cases .use-case-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

#use-cases .use-case-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

#use-cases .use-case-layout {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    align-items: start;
}

#use-cases .use-case-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(var(--uc-accent-rgb), .16);
    border-radius: 1rem;
    color: var(--uc-accent);
    background: rgba(var(--uc-accent-rgb), .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

#use-cases .use-case-icon i {
    display: block;
    width: 1.25rem;
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
    transform: none;
    transition: none;
}

#use-cases .use-case-card:hover .use-case-icon {
    color: #fff;
    background: var(--uc-accent);
    border-color: var(--uc-accent);
    box-shadow: 0 10px 22px -12px rgba(var(--uc-accent-rgb), .8);
    transform: translateY(-2px);
}

#use-cases .use-case-content {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
}

#use-cases .use-case-title {
    margin: .1rem 0 .55rem;
    color: var(--uc-title);
    font-size: 1.075rem;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -.01em;
}

#use-cases .use-case-description {
    margin: 0 0 1rem;
    color: var(--uc-copy);
    font-size: .875rem;
    line-height: 1.65;
}

#use-cases .use-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: auto;
    padding-top: .25rem;
}

#use-cases .use-case-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: .25rem .6rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    color: var(--uc-tag-text);
    background: var(--uc-tag-bg);
    font-size: .7rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

#use-cases .use-case-card:hover .use-case-tag {
    color: var(--uc-accent);
    border-color: rgba(var(--uc-accent-rgb), .16);
    background: rgba(var(--uc-accent-rgb), .075);
}

.dark #use-cases {
    --uc-surface: rgba(15, 23, 42, .82);
    --uc-border: rgba(100, 116, 139, .38);
    --uc-title: #f8fafc;
    --uc-copy: #94a3b8;
    --uc-tag-bg: rgba(30, 41, 59, .9);
    --uc-tag-text: #cbd5e1;
}

.dark #use-cases .use-case-icon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (max-width: 1023px) {
    #use-cases .use-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    #use-cases .use-case-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    #use-cases .use-case-card {
        min-height: 0;
        padding: 1.25rem;
    }

    #use-cases .use-case-layout {
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: .875rem;
    }

    #use-cases .use-case-icon {
        width: 3rem;
        height: 3rem;
        border-radius: .875rem;
    }
}

@media (hover: none) {
    #use-cases .use-case-card:hover,
    #use-cases .use-case-card:hover .use-case-icon {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #use-cases .use-case-card,
    #use-cases .use-case-card::before,
    #use-cases .use-case-card::after,
    #use-cases .use-case-icon,
    #use-cases .use-case-tag {
        transition: none !important;
    }
}

/* ---- Analytics ---- */
#analytics .analytics-grid {
    background-image: linear-gradient(rgba(99, 102, 241, .055) 1px, transparent 1px), linear-gradient(-90deg, rgba(99, 102, 241, .055) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

#analytics .api-console {
    --console-bg: #0b1220;
    --console-surface: #111b2e;
    --console-surface-hover: #18243a;
    --console-border: #27364d;
    --console-text: #dbe7f5;
    --console-muted: #94a3b8;
    background: var(--console-bg);
    border: 1px solid var(--console-border);
    color: var(--console-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

#analytics .api-console code {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: .8rem;
    line-height: 1.7;
}

#analytics .console-header,
#analytics .console-footer {
    background: var(--console-surface);
    border-color: var(--console-border);
}

#analytics .console-title,
#analytics .endpoint-path {
    color: var(--console-text);
}

#analytics .endpoint-description,
#analytics .console-meta {
    color: var(--console-muted);
}

#analytics .endpoint-row {
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

#analytics .endpoint-row:hover {
    background: var(--console-surface-hover);
    border-color: var(--console-border);
    transform: translateX(-3px);
}

#analytics .endpoint-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--console-border) transparent;
    -webkit-overflow-scrolling: touch;
}

#analytics .endpoint-scroll::-webkit-scrollbar {
    height: 7px;
}

#analytics .endpoint-scroll::-webkit-scrollbar-thumb {
    background: var(--console-border);
    border-radius: 999px;
}

#analytics .endpoint-list {
    width: 100%;
    min-width: 0;
}

#analytics .endpoint-path {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#analytics .analytics-button {
    column-gap: .7rem;
}

#analytics .analytics-button i {
    margin-right: .35rem;
}

#analytics .api-docs-cta-wrap {
    margin-top: 1.25rem;
}

#analytics .api-docs-panel {
    margin-inline: 4.5rem;
}

#analytics .api-docs-panel .api-docs-cta-wrap {
    margin-top: 0;
}

#analytics .api-feature-card {
    column-gap: 1rem;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(203, 213, 225, .9);
}

#analytics .api-feature-icon {
    margin-left: .15rem;
}

#analytics .api-feature-title {
    color: #0f172a;
}

#analytics .api-feature-description {
    color: #64748b;
}

.dark #analytics .api-feature-card {
    background: #111b2e;
    border-color: #334155;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.dark #analytics .api-feature-title {
    color: #f8fafc;
}

.dark #analytics .api-feature-description {
    color: #cbd5e1;
}

#analytics .analytics-icon-text {
    column-gap: .7rem;
}

#analytics .analytics-icon-text > i {
    margin-left: .2rem;
}

#analytics .analytics-tech-icons {
    column-gap: 1rem;
}

#analytics .analytics-tech-icons > i + i {
    margin-right: .35rem;
}

/* The API console is dark in both themes, so these use the light-on-dark shades */
#analytics .method-delete {
    color: #f87171;
}

#analytics .console-version {
    color: #818cf8;
}

@media (max-width: 639px) {
    #analytics .endpoint-list {
        width: max-content;
        min-width: 720px;
    }

    #analytics .endpoint-path {
        overflow: visible;
        text-overflow: clip;
    }

    #analytics .api-docs-panel {
        margin-inline: .75rem;
    }

    #analytics .api-docs-cta-wrap,
    #analytics .api-docs-cta-wrap .analytics-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #analytics .endpoint-row { transition: none; }
    #analytics .endpoint-row:hover { transform: none; }
}

/* ---- Hero ---- */
/* Spacing that used to be inline styles on the hero markup; the values are unchanged. */
.home-hero__body { margin-top: 40px; }
.home-hero__cta { margin-top: 30px; }
.home-hero__note { margin-top: 10px; }
.home-hero__platforms { margin-top: 35px; }
.home-hero__nowrap { white-space: nowrap; }
.home-hero__scroll { display: none; }
#tunnel-types { scroll-margin-top: 76px; }
/* The Apple logo PNG is light grey and nearly vanishes on the light theme's white background. */
html:not(.dark) .home-hero__platforms img[alt="macOS"] { filter: brightness(.3); }

/* Phones: the hero fills the first screen, so Tunnel Types starts below the fold. The content starts
   a fixed share of the screen height below the header rather than being centred, which keeps the
   slogan high on every phone. Many utility classes on the hero markup (ring-*, gap-x-*, min-h-[...],
   max-w-3xl) are not in the purged tailwind.site.min.css, so the phone layout is spelled out here.
   Tailwind utilities are !important in this build, hence the !important on the overrides.
   svh rather than dvh: dvh resizes the hero whenever the browser bars hide or show, which moves
   everything below it while the user scrolls. */
@media (max-width: 767px) {
    /* The gaps between the hero's groups grow with the screen height too, so on tall phones the
       content spreads down the screen instead of leaving a large empty band above the scroll hint. */
    .home-hero {
        --hero-vh: 1vh;
        min-height: 100vh;
        min-height: 100svh;
        padding-top: calc(68px + clamp(40px, 9.5 * var(--hero-vh), 96px)) !important;    /* 68px fixed header */
        padding-bottom: 76px !important;  /* room for the scroll hint */
    }

    @supports (height: 1svh) {
        .home-hero { --hero-vh: 1svh; }
    }

    .home-hero #localtonet-slgn { margin-bottom: 0 !important; font-size: 17px; }

    .home-hero__body { margin-top: clamp(32px, 6 * var(--hero-vh), 64px); }

    /* 9.2vw keeps "Expose localhost" on one line down to 320px wide. */
    .home-hero__title {
        font-size: clamp(1.75rem, 9.2vw, 2.5rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em;
        text-wrap: balance;
        margin-bottom: clamp(12px, 2 * var(--hero-vh), 20px) !important;
    }

    /* The rotating line reserves two lines and centres each phrase in them, so a phrase that wraps
       on a narrow phone neither shifts the buttons below it nor leaves an uneven gap. */
    .home-hero__sub .typewrite-new {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 52px;   /* two lines of 20px at line-height 1.3 */
    }

    .home-hero__sub .typewrite-new .wrap {
        font-size: 20px;
        line-height: 1.3;
    }

    /* The buttons stay side by side at the desktop width, just a little taller (40px) than btn-sm. */
    .home-hero__cta { margin-top: clamp(28px, 6 * var(--hero-vh), 64px); }

    .home-hero__cta .btn {
        padding-top: 9px;
        padding-bottom: 9px;
        border-radius: 8px !important;
    }

    .home-hero__note { margin-top: 14px; text-wrap: balance; }

    /* Platforms: plain icon + label links, as on desktop, lined up in three columns that are only as
       wide as their content and centred as a group. */
    .home-hero__platforms { margin-top: clamp(30px, 6.5 * var(--hero-vh), 68px); }

    .home-hero__platforms > div {
        display: grid !important;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        gap: 12px 16px;
    }

    .home-hero__platforms a {
        justify-content: flex-start;
        gap: 6px;
        padding: 4px 6px !important;
        color: #334155;
        font-size: 16px;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .dark .home-hero__platforms a { color: #cbd5e1; }

    .home-hero__platforms a img,
    .home-hero__platforms a svg {
        flex: none;
        margin-left: 0 !important;
    }

    .home-hero__scroll {
        position: absolute;
        bottom: 18px;
        right: 50%;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-right: -22px;
        border-radius: 9999px;
        color: #64748b;
        font-size: 22px;
        -webkit-tap-highlight-color: transparent;
        animation: home-hero-bob 2.4s ease-in-out infinite;
    }

    .dark .home-hero__scroll { color: #94a3b8; }
}

/* Short phones (SE class): less room under the content, so the scroll hint sits lower. */
@media (max-width: 767px) and (max-height: 680px) {
    .home-hero { padding-bottom: 64px !important; }
    .home-hero__scroll { bottom: 10px; }
}

/* Very narrow phones: keep three platforms per row. */
@media (max-width: 359px) {
    .home-hero__platforms > div { column-gap: 8px; }
    .home-hero__platforms a { gap: 4px; font-size: 14px; }
    .home-hero__platforms a img,
    .home-hero__platforms a svg { width: 20px !important; height: 20px !important; }
}

@keyframes home-hero-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__scroll { animation: none; }
}

/* ---- Tunnel types (#tunnel-types) ---- */
/* The auto-scrolling row of centred cards (homepage.js moves #tInner and clones the cards once).
   Colours live here because the dark: and hover utilities the cards used are not in the purged
   Tailwind build. */
#tunnel-types {
    --tt-card: #fff;
    --tt-line: #e2e8f0;
    --tt-ink: #0f172a;
    --tt-muted: #475569;
    --tt-accent: #4f46e5;
    --tt-icon-bg: #eef2ff;
    --tt-tag-bg: #f1f5f9;
    --tt-tag-ink: #334155;
    --tt-nav-bg: #fff;
    --tt-shadow: 0 22px 40px -24px rgba(79, 70, 229, .65);
}

.dark #tunnel-types {
    --tt-card: #131c31;
    --tt-line: rgba(148, 163, 184, .16);
    --tt-ink: #f1f5f9;
    --tt-muted: #94a3b8;
    --tt-accent: #a5b4fc;
    --tt-icon-bg: rgba(99, 102, 241, .16);
    --tt-tag-bg: rgba(148, 163, 184, .12);
    --tt-tag-ink: #cbd5e1;
    --tt-nav-bg: #1e293b;
    --tt-shadow: 0 22px 40px -24px rgba(0, 0, 0, .9);
}

.tt-head { max-width: 600px; margin: 0 auto 28px; text-align: center; }
.tt-head__lead { margin: 0; color: var(--tt-muted); font-size: 15px; line-height: 1.6; text-wrap: balance; }

/* Soft fade at both ends, so cards slide in and out instead of being cut off at the edge. */
#tTrack {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

#tTrack:focus-visible { outline: 3px solid #6366f1; outline-offset: 4px; border-radius: 16px; }

/* homepage.js loops after half of scrollWidth. Padding only on the right, equal to the gap, makes that half
   exactly one set of cards plus gaps, so the loop has no jump. Room above and below for the hover lift. */
.tt-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 20px;
    width: max-content;
    padding: 14px 0 30px 20px;
}

.tt-card {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    width: 260px;
    padding: 26px 22px 22px;
    overflow: hidden;
    border: 1px solid var(--tt-line);
    border-radius: 18px;
    color: var(--tt-ink);
    background: var(--tt-card);
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Thin accent line along the top edge (kept from the original cards). */
.tt-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(-90deg, transparent, rgba(99, 102, 241, .55), transparent);
}

.tt-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 14px;
    color: var(--tt-accent);
    background: var(--tt-icon-bg);
    font-size: 24px;
    transition: color .3s ease, background-color .3s ease;
}

.tt-card__title { margin: 0 0 8px; color: inherit; font-size: 19px; font-weight: 700; line-height: 1.3; }
.tt-card__desc { margin: 0 0 16px; color: var(--tt-muted); font-size: 14px; line-height: 1.6; transition: color .3s ease; }

.tt-card__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.tt-card__tags li { padding: 3px 9px; border-radius: 9999px; color: var(--tt-tag-ink); background: var(--tt-tag-bg); font-size: 12px; line-height: 1.5; white-space: nowrap; transition: color .3s ease, background-color .3s ease; }

.tt-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--tt-accent); font-size: 13px; font-weight: 700; transition: color .3s ease; }
.tt-card__more .home-icon { transition: transform .3s ease; }

/* Hover: the card fills with indigo as before, everything inside turns light. */
.tt-card:hover,
.tt-card:focus-visible {
    border-color: #4f46e5;
    color: #fff;
    background: #4f46e5;
    box-shadow: var(--tt-shadow);
    transform: translateY(-6px);
}

.tt-card:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.tt-card:hover::before, .tt-card:focus-visible::before { background: linear-gradient(-90deg, transparent, rgba(255, 255, 255, .6), transparent); }
.tt-card:hover .tt-card__icon, .tt-card:focus-visible .tt-card__icon { color: #fff; background: rgba(255, 255, 255, .16); }
.tt-card:hover .tt-card__desc, .tt-card:focus-visible .tt-card__desc { color: #e0e7ff; }
.tt-card:hover .tt-card__tags li, .tt-card:focus-visible .tt-card__tags li { color: #fff; background: rgba(255, 255, 255, .16); }
.tt-card:hover .tt-card__more, .tt-card:focus-visible .tt-card__more { color: #fff; }
.tt-card:hover .tt-card__more .home-icon { transform: translateX(-3px); }

/* Arrows: desktop and tablet only, half outside the row like before. */
.tt-nav {
    position: absolute;
    top: calc(50% - 8px);   /* centre on the cards, not on the row's extra bottom padding */
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--tt-line);
    border-radius: 9999px;
    color: var(--tt-ink);
    background: var(--tt-nav-bg);
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .35);
    font-size: 18px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.tt-nav--prev { right: 0; transform: translate(50%, -50%); }
.tt-nav--next { left: 0; transform: translate(-50%, -50%); }
.tt-nav:hover { border-color: #4f46e5; color: #fff; background: #4f46e5; }
.tt-nav:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

@media (min-width: 768px) {
    .tt-head { margin-bottom: 32px; }
    .tt-card { width: 300px; padding: 28px 26px 24px; }
    .tt-nav { display: flex; }
}

/* Phones: cards cannot be hovered, so no lift, and a shorter fade for the narrow screen. */
@media (max-width: 767.98px) {
    #tTrack {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    }

    .tt-head__lead { font-size: 14px; }
    .tt-row { padding-top: 8px; padding-bottom: 12px; }
}

@media (hover: none) {
    .tt-card:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-card, .tt-card__icon, .tt-card__desc, .tt-card__tags li, .tt-card__more, .tt-card__more .home-icon { transition: none; }
    .tt-card:hover, .tt-card:focus-visible { transform: none; }
    .tt-card:hover .tt-card__more .home-icon { transform: none; }
}

[dir=rtl] .rtl-flip{transform:scaleX(-1)}
[dir=rtl] code:not([dir]),[dir=rtl] pre:not([dir]),[dir=rtl] kbd:not([dir]),[dir=rtl] samp:not([dir]),[dir=rtl] .ltr,[dir=rtl] textarea.mono{direction:ltr;unicode-bidi:isolate}
[dir=rtl] pre:not([dir]),[dir=rtl] textarea.mono{text-align:left}