#landing {
  --landing-nav-height: calc(70px + env(safe-area-inset-top, 0px));
  --drawer-surface: #231b17;
  --drawer-frost: rgba(35, 27, 23, .94);
  --drawer-text: #f4eae4;
  --drawer-muted: #d2bdb1;
  --drawer-border: #705a4f;
  --drawer-control-border: #987c6b;
  --drawer-hover: rgba(244, 234, 228, .10);
  --drawer-pressed: rgba(244, 234, 228, .17);
  --drawer-primary: #d09a7c;
  --drawer-primary-hover: #e1ad91;
  --drawer-on-primary: #231b17;
}

#landing :is(section[id], main) { scroll-margin-block-start: calc(var(--landing-nav-height) + 6px); }

.l-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
}

.l-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  border-block-end: 1px solid var(--border);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .l-nav::before {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

#landing .l-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.1vw, 16px);
  max-width: 1320px;
  min-height: var(--landing-nav-height);
  padding-block-start: env(safe-area-inset-top, 0px);
  padding-left: max(clamp(12px, 2vw, 24px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(12px, 2vw, 24px), env(safe-area-inset-right, 0px));
}

.l-nav-brand { flex: none; color: inherit; text-decoration: none; }
.l-nav-brand .brand-name { white-space: nowrap; }

.l-nav-panel,
.l-links,
.l-nav-actions,
.l-nav-controls {
  display: flex;
  align-items: center;
  gap: clamp(4px, .65vw, 10px);
}

.l-nav-panel { min-inline-size: 0; justify-content: space-between; flex: 1; }
.l-links { margin-inline: auto; }
.l-nav-controls { flex: none; }
.l-nav-eyebrow { display: none; }

.l-links a,
.l-nav-action {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: clamp(5px, .85vw, 13px);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1.35;
  transition: background-color .18s, border-color .18s, color .18s;
}

.l-links a:hover, .l-nav-login:hover { background: var(--panel2); }
.l-links a:active, .l-nav-login:active { background: var(--border); }
.l-nav-action { justify-content: center; text-align: center; }
.l-nav-login { border-color: var(--border-strong); }
.l-nav-trial { background: var(--accent); color: var(--on-accent); }
.l-nav-trial:hover, .l-nav-trial:active { background: var(--accent2); }

.l-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}

.l-icon:hover { background: var(--border); }
.l-burger, .l-burger-close { display: none; }
.l-burger[aria-expanded="true"] .l-burger-open { display: none; }
.l-burger[aria-expanded="true"] .l-burger-close { display: block; }

.l-nav :is(a, button):focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .l-nav-brand .l-logo { width: 36px; height: 36px; }
  .l-nav-brand .brand-name { font-size: 1.125rem; }
  .l-nav-brand .brand-sub { display: none; }
}

@media not all and (min-width: 768px) {
  .l-nav:not([data-drawer-ready]) { position: static; }
  .l-nav:not([data-drawer-ready]) .l-nav-row { flex-wrap: wrap; }
  .l-nav:not([data-drawer-ready]) .l-nav-panel { order: 1; flex: 1 1 100%; flex-wrap: wrap; }
  .l-nav:not([data-drawer-ready]) .l-links { flex-wrap: wrap; margin-inline: 0; }
  .l-nav[data-drawer-ready] .l-burger { display: grid; }

  html.orenda-nav-open { overflow: hidden; }
  html.orenda-nav-open body {
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--landing-scroll-offset);
    overflow: hidden;
  }
  html.orenda-nav-open #landing { padding-block-start: var(--landing-nav-height); }
  html.orenda-nav-open .l-nav {
    position: fixed;
    inset-inline: 0;
    min-block-size: var(--landing-nav-height);
  }

  .l-nav[data-drawer-ready] .l-nav-panel {
    position: fixed;
    inset: var(--landing-nav-height) 0 0;
    block-size: calc(100dvh - var(--landing-nav-height));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    background: var(--drawer-surface);
    color: var(--drawer-text);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  .l-nav[data-drawer-ready].open .l-nav-panel {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    clip-path: inset(0);
    transition: clip-path .24s cubic-bezier(.2, .75, .25, 1), opacity .24s ease-out;
  }

  @supports (backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px)) {
    .l-nav[data-drawer-ready] .l-nav-panel {
      background: var(--drawer-frost);
      -webkit-backdrop-filter: blur(24px);
      backdrop-filter: blur(24px);
    }
  }

  .l-nav[data-drawer-ready] .l-links,
  .l-nav[data-drawer-ready] .l-nav-actions {
    inline-size: min(100%, 38rem);
    margin-inline: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .l-nav[data-drawer-ready] .l-links {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(.75rem, 4vh, 2rem) 4px 1rem;
  }

  .l-nav-eyebrow {
    display: block;
    margin: 0 .75rem .375rem;
    color: var(--drawer-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
  }
  #landing[dir="rtl"] .l-nav-eyebrow { letter-spacing: normal; }

  .l-nav[data-drawer-ready] .l-links a {
    justify-content: space-between;
    flex: none;
    gap: .75rem;
    min-block-size: 52px;
    padding: .5rem .75rem;
    color: var(--drawer-text);
    font-size: clamp(1.0625rem, 4vw, 1.25rem);
  }

  .l-nav[data-drawer-ready] .l-links a::after {
    content: '';
    flex: none;
    inline-size: 7px;
    block-size: 7px;
    border: solid var(--drawer-muted);
    border-width: 0 1px 1px 0;
    transform: rotate(-45deg);
  }
  #landing[dir="rtl"] .l-nav[data-drawer-ready] .l-links a::after { transform: rotate(135deg); }
  .l-nav[data-drawer-ready] .l-links a:hover,
  .l-nav[data-drawer-ready] .l-nav-login:hover { background: var(--drawer-hover); }
  .l-nav[data-drawer-ready] .l-links a:active,
  .l-nav[data-drawer-ready] .l-nav-login:active { background: var(--drawer-pressed); }

  .l-nav[data-drawer-ready] .l-nav-actions {
    flex: none;
    gap: .5rem;
    padding: clamp(.5rem, 2vh, 1rem) 4px 0;
    border-block-start: 1px solid var(--drawer-border);
  }
  .l-nav[data-drawer-ready] .l-nav-action { min-block-size: 48px; padding: .375rem .75rem; font-size: .9375rem; }
  .l-nav[data-drawer-ready] .l-nav-login { color: var(--drawer-text); border-color: var(--drawer-control-border); }
  .l-nav[data-drawer-ready] .l-nav-trial { background: var(--drawer-primary); color: var(--drawer-on-primary); }
  .l-nav[data-drawer-ready] .l-nav-trial:hover,
  .l-nav[data-drawer-ready] .l-nav-trial:active { background: var(--drawer-primary-hover); }
  .l-nav[data-drawer-ready] .l-nav-panel a:focus-visible { outline-color: var(--drawer-primary-hover); }

  @media (max-height: 285px) {
    .l-nav[data-drawer-ready] .l-nav-panel { overflow-y: auto; overscroll-behavior: contain; }
    .l-nav[data-drawer-ready] .l-links { flex: none; overflow: visible; }
    .l-nav[data-drawer-ready] .l-nav-actions { margin-block-start: auto; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-nav[data-drawer-ready].open .l-nav-panel,
  .l-nav :is(a, button) { transition: none; }
}