/* GENERATED by thethingsnetwork-v2 platform/scripts/export-site-nav.mjs — do not edit here. */

.ttn-chrome {
  /* ===== TTI BRAND BLUE (primary scale, 2024 palette) ===== */
  --tti-025: #F8FCFF;
  --tti-050: #F0F7FF;
  --tti-075: #E8F1FF;
  --tti-100: #D8E7FF;
  --tti-200: #99BEFF;
  --tti-300: #6699FF;
  --tti-400: #3F7AFF;
  --tti-500: #0047FF;  /* primary */
  --tti-600: #0036DB;
  --tti-700: #0028B7;
  --tti-800: #001C93;
  --tti-900: #00147A;
  --tti-1000: #00095C;
  --tti-1025: #00064B;
  --tti-1050: #000338;
  --tti-1075: #000321;

  /* ===== NEUTRALS (grey scale) ===== */
  --grey-025: #FBFCFD;
  --grey-050: #F3F5F8;
  --grey-075: #EBEEF3;
  --grey-100: #DEE3EA;
  --grey-200: #D2D7E0;
  --grey-300: #C3C9D4;
  --grey-400: #B2BAC8;
  --grey-500: #98A4B6;
  --grey-600: #7887A1;
  --grey-700: #536482;
  --grey-800: #354661;
  --grey-900: #1C293F;
  --grey-1000: #0C1525;
  --grey-1025: #09101B;
  --grey-1050: #080D15;
  --grey-1075: #06090D;

  /* ===== SEMANTIC — success / info / warning / error ===== */
  --success-025: #F7FFF7;
  --success-050: #EAFFEA;
  --success-100: #CFFFC2;
  --success-500: #27CD41;
  --success-600: #1CB041;
  --success-700: #13933F;
  --success-900: #00572E;

  --info-025: #F7FCFF;
  --info-050: #EFFAFF;
  --info-100: #CCEEFF;
  --info-500: #007AFF;
  --info-600: #005EDB;
  --info-700: #0046B7;

  --warning-025: #FFFCF3;
  --warning-050: #FFF9E6;
  --warning-100: #FFEEBC;
  --warning-500: #FF9500;
  --warning-600: #DB7600;
  --warning-700: #B75B00;

  --error-025: #FFFAFA;
  --error-050: #FFF5F5;
  --error-100: #FFE2DE;
  --error-500: #FF3B30;
  --error-600: #DB2328;
  --error-700: #B7182A;

  /* ===== SIBLING BRANDS ===== */
  --ttn-primary:   #26A0FF;   /* The Things Network */
  --ttn-primary-600: #008DF9;
  --ttn-primary-dark: #001859;
  --tts-primary:   #1E5DFF;   /* The Things Stack */
  --tts-primary-600: #194FDA;
  --ttc-primary:   #0001FF;   /* The Things Conference */
  --gn-primary:    #6514FF;   /* Generic Node */

  --bone: #F7F6F1; /* 'secret' off-white from the brand palette */

  /* ===== SEMANTIC TOKENS (TTI brand defaults) ===== */
  /* Text */
  --c-text-heavy:     var(--grey-900);  /* default body text */
  --c-text-semilight: var(--grey-700);
  --c-text-light:     var(--grey-600);  /* lower hierarchy */
  --c-text-extralight: var(--grey-400);
  --c-text-invert:    #ffffff;
  --c-text-brand:     var(--tti-500);
  --c-text-brand-hover: var(--tti-600);
  --c-text-brand-active: var(--tti-700);
  --c-text-success:   var(--success-700);
  --c-text-warning:   var(--warning-700);
  --c-text-error:     var(--error-600);
  --c-text-info:      var(--info-600);

  /* Backgrounds */
  --c-bg-page:         #ffffff;
  --c-bg-subtle:       var(--grey-025);
  --c-bg-neutral-light: var(--grey-050);
  --c-bg-neutral-semilight: var(--grey-075);
  --c-bg-brand-extralight: var(--tti-025);
  --c-bg-brand-light:  var(--tti-050);
  --c-bg-brand-semilight: var(--tti-075);
  --c-bg-brand:        var(--tti-500);
  --c-bg-brand-hover:  var(--tti-600);
  --c-bg-brand-dark:   var(--tti-1050);
  --c-bg-inverse:      var(--grey-1000);

  /* Borders */
  --c-border-extralight: var(--grey-050);
  --c-border-light:      var(--grey-100);
  --c-border-normal:     var(--grey-200);
  --c-border-semibold:   var(--grey-500);
  --c-border-bold:       var(--grey-700);
  --c-border-brand:      var(--tti-500);

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Poppins', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  /* Font scale (rem-based, base 15px) */
  --fs-xxs: 0.5rem;    /* 7.5 */
  --fs-xs:  0.75rem;   /* 11.25 */
  --fs-s:   0.875rem;  /* 13.125 */
  --fs-m:   1rem;      /* 15 */
  --fs-l:   1.25rem;   /* 18.75 */
  --fs-xl:  1.563rem;  /* 23.4 */
  --fs-xxl: 1.875rem;  /* 28 */
  --fs-xl3: 2.5rem;    /* 37.5 */
  --fs-xl4: 3rem;      /* 45 */
  --fs-xl5: 4rem;      /* 60 */
  --fs-xl6: 5rem;      /* 75 */

  /* Responsive page-hero display sizes (clamp-based) — keep tool heroes the
     same size so the title doesn't jump when navigating between tools. */
  --fs-display:    clamp(2.4rem, 5.5vw, 4rem);    /* standard tool-landing hero H1 */
  --fs-display-lg: clamp(3rem, 8vw, 6rem);        /* flagship hero (Community front door) */
  --fs-lede:       clamp(1.05rem, 1.6vw, 1.3rem); /* hero sub-headline */

  /* Line-heights */
  --lh-xxs: 1.1;
  --lh-xs:  1.2;
  --lh-s:   1.5;
  --lh-m:   1.687;
  --lh-l:   1.875;
  --lh-xl:  2;

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-bolder: 700;

  /* Letter spacing */
  --lsp-s: -0.03em;
  --lsp-m: -0.02em;
  --lsp-l: 0em;

  /* ===== SPACING (component + layout) ===== */
  --cs-xxs: 0.25rem;
  --cs-xs:  0.5rem;
  --cs-s:   0.75rem;
  --cs-m:   1rem;
  --cs-l:   1.25rem;
  --cs-xl:  1.5rem;
  --cs-xxl: 2rem;
  --cs-xl3: 3rem;

  --ls-xxs: 1rem;
  --ls-xs:  1.25rem;
  --ls-s:   2rem;
  --ls-m:   3rem;
  --ls-l:   5rem;
  --ls-xl:  6.25rem;
  --ls-xxl: 10rem;
  --ls-xl3: 12.5rem;

  /* ===== RADII ===== */
  --br-s: 0.3rem;      /* 4.5px  — inputs, small chips */
  --br-m: 0.6rem;      /* 9px    — buttons, cards (default) */
  --br-l: 0.9rem;      /* 13.5px — larger cards */
  --br-xl: 1.25rem;    /* 18.75px — hero cards */
  --br-xxl: 3rem;      /* 45px   — CTA pill */
  --br-full: 999rem;   /* circle / pill */

  /* ===== SHADOWS ===== */
  --bs-s: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.05);
  --bs-m: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
  --bs-l: 0 0 2.5rem 0 rgba(0, 0, 0, 0.1);
  --bs-xl: 0 0 5rem 0 rgba(0, 0, 0, 0.1);

  /* ===== MOTION ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
  --tn-blue: var(--ttn-primary);
  --tn-blue-600: var(--ttn-primary-600);
  --tn-blue-700: #0071c7;
  --tn-navy: var(--ttn-primary-dark);
  --tn-navy-900: #00103f;
  --tn-ink: #000e36;
  --tn-tint: #e6f4ff;
  --tn-muted-invert: #aebbd3;
  --z-chrome: 40;
  font-family: var(--font-body);
}

.ttn-chrome *, .ttn-chrome *::before, .ttn-chrome *::after { box-sizing: border-box; }

.ttn-chrome a, .ttn-chrome a:hover, .ttn-chrome a:focus { text-decoration: none; }

.tn-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

.tn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tn-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }

/* ---------- Buttons ---------- */
.tn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--br-xxl);
  background: var(--tn-blue);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

.tn-btn:hover {
  background: var(--tn-blue-600);
  color: #fff;
}

.tn-btn--sm {
  padding: 9px 18px;
  font-size: 14px;
}

.tn-btn--lg {
  padding: 14px 26px;
}

.tn-btn--navy {
  background: var(--tn-navy);
}

.tn-btn--navy:hover {
  background: var(--tn-navy-900);
}

.tn-btn--white {
  background: #fff;
  color: var(--ttc-primary);
}

.tn-btn--white:hover {
  background: var(--bone);
  color: var(--ttc-primary);
}

.tn-btn--ghost-invert {
  background: transparent;
  border-color: rgb(255 255 255 / 30%);
  color: #fff;
}

.tn-btn--ghost-invert:hover {
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

.tn-btn:focus-visible,
.tn-header__link:focus-visible,
.tn-header__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #cce8ff;
}

/* ---------- Header ---------- */
.tn-header {
  position: sticky;
  top: 0;
  z-index: var(--z-chrome);
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grey-100);
  font-family: var(--font-body);
}

.tn-header__bar {
  max-width: 1200px;
  height: 72px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.tn-header__logo img {
  display: block;
  height: 34px;
  width: auto;
}

.tn-header__panel {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.tn-header__nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.tn-header__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--br-m);
  background: none;
  color: var(--grey-800);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.tn-header__link:hover,
.tn-drop[data-open] > .tn-header__link {
  background: var(--grey-050);
  color: var(--grey-900);
}

.tn-header__link[aria-current="page"] {
  color: var(--tn-navy);
  font-weight: 600;
}

.tn-header__auth {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tn-header__login {
  padding: 8px 14px;
  color: var(--grey-800);
  font-size: 14px;
  font-weight: 500;
}

.tn-header__login:hover {
  color: var(--grey-900);
}

.tn-header__account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--grey-100);
  border-radius: var(--br-full);
  background: #fff;
  color: var(--grey-900);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.tn-header__account img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grey-050);
}

.tn-header__bell {
  position: relative;
  display: inline-flex;
  padding: 8px;
  border: 0;
  border-radius: var(--br-full);
  background: none;
  color: var(--grey-800);
  font-size: 20px;
  line-height: 0;
  cursor: pointer;
}

.tn-header__bell:hover {
  background: var(--grey-050);
}

.tn-header__badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--br-full);
  background: var(--error-500);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.tn-notifs {
  width: min(360px, calc(100vw - 32px));
  max-height: 420px;
  overflow-y: auto;
}

.tn-notifs__head {
  padding: 8px 12px;
  color: var(--grey-900);
  font-size: 13px;
  font-weight: 600;
}

.tn-notifs__empty {
  padding: 16px 12px;
  color: var(--grey-600);
  font-size: 14px;
}

.tn-notifs__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--br-m);
  color: var(--grey-900);
}

a.tn-notifs__item:hover {
  background: var(--grey-050);
  color: var(--grey-900);
}

.tn-notifs__item[data-unread] {
  background: var(--tti-050);
}

.tn-notifs__title {
  font-size: 14px;
  font-weight: 600;
}

.tn-notifs__body {
  color: var(--grey-700);
  font-size: 13px;
}

.tn-notifs__time {
  color: var(--grey-600);
  font-size: 12px;
}

.tn-header__toggle {
  display: none;
  margin-left: auto;
  padding: 8px;
  border: 0;
  border-radius: var(--br-m);
  background: none;
  color: var(--grey-900);
  font-size: 24px;
  line-height: 0;
  cursor: pointer;
}

.tn-drop {
  position: relative;
}

.tn-drop__chev {
  font-size: 14px;
  transition: transform 0.1s;
}

.tn-drop[data-open] .tn-drop__chev {
  transform: rotate(180deg);
}

.tn-drop__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--grey-100);
  border-radius: var(--br-l);
  background: #fff;
  box-shadow: var(--bs-m);
}

.tn-drop--end .tn-drop__menu {
  left: auto;
  right: 0;
}

.tn-drop[data-open] .tn-drop__menu {
  display: block;
}

.tn-drop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--br-m);
  background: none;
  color: var(--grey-900);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.tn-drop__item:hover {
  background: var(--grey-050);
  color: var(--grey-900);
}

@media (max-width: 960px) {
  .tn-header__bar {
    gap: 16px;
  }

  .tn-header__toggle {
    display: inline-flex;
  }

  .tn-header__panel {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px 20px;
    border-bottom: 1px solid var(--grey-100);
    background: #fff;
    box-shadow: var(--bs-s);
  }

  .tn-header[data-open] .tn-header__panel {
    display: flex;
  }

  .tn-header__nav {
    flex-direction: column;
    align-items: stretch;
  }

  .tn-header__link {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }

  .tn-drop__menu {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 12px;
  }

  .tn-header__auth {
    padding-top: 12px;
    border-top: 1px solid var(--grey-100);
  }

  .tn-header__auth .tn-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ---------- Footer ---------- */
.tn-footer {
  background: var(--tn-ink);
  color: var(--tn-muted-invert);
  font-family: var(--font-body);
}

.tn-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-block: 72px 40px;
}

.tn-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 40px;
}

.tn-footer__brand {
  grid-column: span 2;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tn-footer__brand img {
  height: 34px;
  width: auto;
  align-self: flex-start;
}

.tn-footer__brand p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tn-muted-invert);
}

.tn-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tn-footer__title {
  margin-bottom: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.tn-footer a {
  color: var(--tn-muted-invert);
  font-size: 14px;
}

.tn-footer a:hover {
  color: #fff;
}

.tn-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 13px;
}

.tn-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

/* "Cookie settings": hidden until /consent.js runs and injects the rule that reveals every
   [data-ttn-consent-settings] — so it never shows as a dead button when analytics is off or blocked. */
.tn-footer__consent {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tn-muted-invert);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tn-footer__consent:hover {
  color: #fff;
}

.tn-footer__consent:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tn-footer__social {
  display: flex;
  gap: 20px;
}

.tn-footer__social a {
  font-size: 20px;
  line-height: 0;
}

@media (max-width: 700px) {
  .tn-footer__brand {
    grid-column: 1 / -1;
  }
}


.tn-drop > summary { list-style: none; }
.tn-drop > summary::-webkit-details-marker { display: none; }
.tn-drop[open] > .tn-drop__menu { display: block; }
.tn-drop[open] > .tn-header__link { background: var(--grey-050); color: var(--grey-900); }
.tn-drop[open] .tn-drop__chev { transform: rotate(180deg); }