/* =========================================================================
   NOVAFLUX — hand-authored stylesheet.
   All application markup uses the custom classes below (no utility classes).
   Mobile-first, fully usable from 320px upward.
   Breakpoints: 480px, 640px, 768px, 1024px, 1280px
   ========================================================================= */

:root {
  --radius: 4px;

  --background: oklch(0.155 0.008 250);
  --foreground: oklch(0.955 0.004 250);
  --surface: oklch(0.185 0.008 250);
  --surface-2: oklch(0.215 0.009 250);
  --elevated: oklch(0.245 0.01 250);

  --card: oklch(0.196 0.008 250);
  --card-foreground: oklch(0.955 0.004 250);
  --popover: oklch(0.205 0.009 250);
  --popover-foreground: oklch(0.955 0.004 250);

  --primary: oklch(0.79 0.148 74);
  --primary-foreground: oklch(0.18 0.03 60);
  --primary-soft: oklch(0.86 0.09 78);

  --secondary: oklch(0.255 0.01 250);
  --secondary-foreground: oklch(0.95 0.004 250);

  --muted: oklch(0.235 0.009 250);
  --muted-foreground: oklch(0.68 0.012 250);

  --accent: oklch(0.79 0.148 74);
  --accent-foreground: oklch(0.18 0.03 60);

  --destructive: oklch(0.62 0.2 25);
  --destructive-foreground: oklch(0.97 0.01 25);
  --success: oklch(0.72 0.14 155);

  --border: oklch(1 0 0 / 8%);
  --border-strong: oklch(1 0 0 / 16%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.79 0.148 74 / 55%);
}
:root,:host {
        --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-black: #000;
        --spacing: .25rem;
        --container-sm: 24rem;
        --container-lg: 32rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --tracking-tight: -.025em;
        --tracking-widest: .1em;
        --leading-relaxed: 1.625;
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
        --aspect-video: 16 / 9;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
        --default-mono-font-family: var(--font-mono);
        --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
        --color-background: var(--background);
        --color-foreground: var(--foreground);
        --color-surface: var(--surface);
        --color-primary: var(--primary);
        --color-primary-foreground: var(--primary-foreground);
        --color-border: var(--border)
    }
    
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-feature-settings: "cv02", "cv03", "cv04";
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
  }

  ::selection {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
  }
}

@utility eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

@utility hairline-top {
  border-top: 1px solid var(--color-border);
}

@utility surface-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

@utility gold-rule {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    color-mix(in oklab, var(--color-primary) 20%, transparent) 100%
  );
}

@utility focus-ring {
  &:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@utility no-scrollbar {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}


/* ---------- base ---------- */

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

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.nf-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background);
  min-width: 320px;
}

.nf-main {
  flex: 1;
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .nf-main {
    padding-top: 4.5rem;
    padding-bottom: 0;
  }
}

.nf-shell {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .nf-shell {
    padding-inline: 1.5rem;
  }
}

.nf-section {
  border-bottom: 1px solid var(--border);
}

.nf-section--surface {
  background-color: var(--surface);
}

/* zig-zag tinted dark sections (never flat black) */
.nf-section--ink {
  background-image: linear-gradient(
    150deg,
    oklch(0.205 0.022 258) 0%,
    oklch(0.178 0.016 262) 55%,
    oklch(0.165 0.012 255) 100%
  );
}

.nf-section--ember {
  background-image: linear-gradient(
    210deg,
    oklch(0.213 0.024 62) 0%,
    oklch(0.183 0.016 55) 58%,
    oklch(0.166 0.01 50) 100%
  );
}

.nf-section--moss {
  background-image: linear-gradient(
    150deg,
    oklch(0.2 0.021 178) 0%,
    oklch(0.176 0.014 182) 60%,
    oklch(0.163 0.009 190) 100%
  );
}

.nf-section--plum {
  background-image: linear-gradient(
    210deg,
    oklch(0.207 0.026 320) 0%,
    oklch(0.18 0.017 318) 58%,
    oklch(0.164 0.011 310) 100%
  );
}

.nf-section--surface2 {
  background-color: var(--surface-2);
}


.nf-section__inner {
  padding-block: 2.5rem;
}

@media (min-width: 640px) {
  .nf-section__inner {
    padding-block: 3.25rem;
  }
}

@media (min-width: 1024px) {
  .nf-section__inner {
    padding-block: 4.5rem;
  }
}

.nf-anchor {
  scroll-margin-top: 5.5rem;
}

/* ---------- typography ---------- */

.nf-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.nf-h1 {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--foreground);
  overflow-wrap: break-word;
}

@media (min-width: 480px) {
  .nf-h1 {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .nf-h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .nf-h1 {
    font-size: 3rem;
  }
}

.nf-h2 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--foreground);
  overflow-wrap: break-word;
}

@media (min-width: 640px) {
  .nf-h2 {
    font-size: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .nf-h2 {
    font-size: 2.125rem;
  }
}

.nf-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--foreground);
  overflow-wrap: break-word;
}

.nf-text {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .nf-text--lead {
    font-size: 1rem;
  }
}

.nf-text--small {
  font-size: 0.75rem;
  line-height: 1.6;
}

.nf-note {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.nf-fine {
  margin: 0.75rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
}

.nf-link-inline {
  color: var(--primary);
  font-weight: 600;
}

.nf-link-inline:hover {
  text-decoration: underline;
}

/* ---------- focus ---------- */

.nf-focus:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- buttons ---------- */

.nf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  z-index: 0;
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.nf-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nf-btn:hover::before {
  transform: scaleX(1);
}

@media (min-width: 480px) {
  .nf-btn {
    padding-inline: 1.75rem;
    font-size: 0.75rem;
  }
}

.nf-btn--primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.nf-btn--primary::before {
  background-color: var(--primary-soft);
}

.nf-btn--primary:hover {
  color: var(--primary-foreground);
}

.nf-btn--ghost {
  border: 1px solid var(--border-strong);
  color: var(--foreground);
  background-color: color-mix(in oklab, var(--background) 40%, transparent);
}

.nf-btn--ghost::before {
  background-color: var(--primary);
}

.nf-btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.nf-btn--block {
  display: flex;
  width: 100%;
}

.nf-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.nf-btn[disabled]::before {
  display: none;
}

.nf-btn__icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.nf-btn-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 480px) {
  .nf-btn-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---------- header ---------- */

.nf-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background-color: color-mix(in oklab, var(--background) 70%, transparent);
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}

.nf-header--scrolled {
  border-bottom-color: var(--border);
  background-color: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter: blur(12px);
}

.nf-header__bar {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
  gap: 0.5rem;
  height: 3.5rem;
  transition: height 0.2s ease;
}

@media (min-width: 640px) {
  .nf-header__bar {
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .nf-header__bar {
    height: 4.5rem;
  }

  .nf-header--scrolled .nf-header__bar {
    height: 3.5rem;
  }
}

.nf-nav {
  display: none;
}

@media (min-width: 1024px) {
  .nf-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-self: start;
    padding-left: 1.5rem;
  }
}

.nf-nav__link {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}

.nf-nav__link:hover {
  color: var(--foreground);
}

.nf-header__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .nf-header__actions {
    gap: 0.5rem;
  }
}

.nf-icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}

.nf-icon-btn:hover {
  color: var(--foreground);
}

.nf-icon-btn--only-sm {
  display: none;
}

@media (min-width: 640px) {
  .nf-icon-btn--only-sm {
    display: grid;
  }
}

.nf-icon-btn--menu {
  color: var(--foreground);
}

@media (min-width: 1024px) {
  .nf-icon-btn--menu {
    display: none;
  }
}

.nf-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.nf-header__login {
  display: block;
  padding: 0.5rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--foreground);
  transition: color 0.2s ease;
}

.nf-header__login:hover {
  color: var(--primary);
}

@media (min-width: 640px) {
  .nf-header__login {
    padding-inline: 0.875rem;
    font-size: 0.8125rem;
  }
}

.nf-header__cta {
  flex-shrink: 0;
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: 0.625rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.nf-header__cta:hover {
  background-color: var(--primary-soft);
}

@media (min-width: 480px) {
  .nf-header__cta {
    padding-inline: 0.875rem;
    font-size: 0.6875rem;
  }
}

@media (min-width: 640px) {
  .nf-header__cta {
    padding-inline: 1.25rem;
    font-size: 0.75rem;
  }
}

/* ---------- logo ---------- */

.nf-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.nf-logo__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border: 1px solid color-mix(in oklab, var(--primary) 50%, transparent);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}

@media (min-width: 480px) {
  .nf-logo__mark {
    width: 2rem;
    height: 2rem;
  }
}

.nf-logo__diamond {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--primary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.nf-logo:hover .nf-logo__diamond {
  transform: rotate(135deg);
}

.nf-logo__word {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--foreground);
  white-space: nowrap;
}

@media (min-width: 480px) {
  .nf-logo__word {
    font-size: 1.0625rem;
    letter-spacing: 0.14em;
  }
}

.nf-logo__word em {
  font-style: normal;
  color: var(--primary);
}

/* ---------- mobile drawer ---------- */

.nf-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}

@media (min-width: 1024px) {
  .nf-drawer {
    display: none;
  }
}

.nf-drawer__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  background-color: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(6px);
}

.nf-drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 24rem;
  border-left: 1px solid var(--border);
  background-color: var(--surface);
}

.nf-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 3.5rem;
  padding-inline: 1rem;
  border-bottom: 1px solid var(--border);
}

.nf-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1rem 1rem;
}

.nf-drawer__link {
  display: block;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--foreground);
}

.nf-drawer__link--muted {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted-foreground);
}

.nf-drawer__foot {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
}

/* ---------- search overlay ---------- */

.nf-search {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.nf-search__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  background-color: color-mix(in oklab, var(--background) 90%, transparent);
  backdrop-filter: blur(6px);
}

.nf-search__panel {
  position: relative;
  width: 92%;
  max-width: 42rem;
  margin: 4.5rem auto 0;
  border: 1px solid var(--border);
  background-color: var(--surface);
  box-shadow: 0 24px 60px rgb(0 0 0 / 55%);
}

@media (min-width: 640px) {
  .nf-search__panel {
    margin-top: 6rem;
  }
}

.nf-search__field {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-inline: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.nf-search__input {
  flex: 1;
  min-width: 0;
  height: 3.25rem;
  background: transparent;
  border: none;
  outline: none;
  color: var(--foreground);
  font-size: 0.875rem;
}

.nf-search__input::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.nf-search__results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.5rem;
}

.nf-search__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  transition: background-color 0.2s ease;
}

.nf-search__result:hover {
  background-color: var(--surface-2);
}

.nf-search__result-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  min-width: 0;
}

.nf-search__result-kind {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.nf-search__empty {
  padding: 2rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ---------- bottom nav ---------- */

.nf-bottomnav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  border-top: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--surface) 95%, transparent);
  backdrop-filter: blur(12px);
}

@media (min-width: 1024px) {
  .nf-bottomnav {
    display: none;
  }
}

.nf-bottomnav__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.nf-bottomnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.625rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: center;
}

@media (min-width: 480px) {
  .nf-bottomnav__link {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }
}

.nf-bottomnav__link:hover {
  color: var(--foreground);
}

.nf-bottomnav__link--accent {
  color: var(--primary);
}

.nf-bottomnav__icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* ---------- offer bar ---------- */

.nf-offerbar {
  border-bottom: 1px solid var(--border);
  background-color: var(--surface-2);
}

.nf-offerbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.625rem;
}

.nf-offerbar__text {
  margin: 0;
  min-width: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .nf-offerbar__text {
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.nf-offerbar__tag {
  margin-right: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.nf-offerbar__value {
  font-weight: 700;
  color: var(--foreground);
}

.nf-offerbar__link {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.nf-offerbar__link:hover {
  text-decoration: underline;
}

/* ---------- hero ---------- */

.nf-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.nf-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

.nf-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--background) 0%,
    color-mix(in oklab, var(--background) 92%, transparent) 45%,
    color-mix(in oklab, var(--background) 45%, transparent) 100%
  );
}

@media (min-width: 1024px) {
  .nf-hero__veil {
    background: linear-gradient(
      to right,
      var(--background) 0%,
      color-mix(in oklab, var(--background) 92%, transparent) 45%,
      transparent 100%
    );
  }
}

.nf-hero__inner {
  position: relative;
  padding-block: 3rem;
}

@media (min-width: 1024px) {
  .nf-hero__inner {
    padding-block: 7rem;
  }
}

.nf-hero__content {
  max-width: 36rem;
}

.nf-hero__lead {
  margin-top: 1.25rem;
  max-width: 32rem;
}

.nf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2.5rem 0 0;
  max-width: 32rem;
  border: 1px solid var(--border);
  background-color: var(--border);
}

.nf-stats__cell {
  padding: 0.75rem 0.625rem;
  background-color: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(6px);
  min-width: 0;
}

@media (min-width: 480px) {
  .nf-stats__cell {
    padding: 1rem;
  }
}

.nf-stats__key {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

@media (min-width: 480px) {
  .nf-stats__key {
    font-size: 0.625rem;
  }
}

.nf-stats__val {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary);
}

@media (min-width: 480px) {
  .nf-stats__val {
    font-size: 1.25rem;
  }
}

/* ---------- section heading ---------- */

.nf-heading {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .nf-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 2.5rem;
  }
}

.nf-heading__copy {
  max-width: 42rem;
  min-width: 0;
}

.nf-heading__action {
  display: none;
}

@media (min-width: 768px) {
  .nf-heading__action {
    display: inline-flex;
    flex-shrink: 0;
  }
}

/* ---------- grids ---------- */

.nf-grid {
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  background-color: var(--border);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .nf-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nf-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nf-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nf-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .nf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nf-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .nf-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nf-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.nf-cell {
  background-color: var(--card);
  padding: 1.25rem;
  min-width: 0;
}

@media (min-width: 480px) {
  .nf-cell {
    padding: 1.5rem;
  }
}

.nf-cell--hover:hover {
  background-color: var(--surface-2);
}

.nf-cell__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary);
}

.nf-cell__step {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: color-mix(in oklab, var(--primary) 30%, transparent);
}

.nf-cell__num {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--primary);
}

.nf-cell__title {
  margin-top: 0.75rem;
}

.nf-cell__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.nf-cell__link svg {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.2s ease;
}

.nf-cell__link:hover svg {
  transform: translateX(2px);
}

/* ---------- rails (horizontal scroll on small screens) ---------- */

.nf-rail {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  margin-inline: -1rem;
  padding-inline: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.nf-rail::-webkit-scrollbar {
  display: none;
}

.nf-rail__item {
  flex: 0 0 auto;
  width: 86%;
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .nf-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .nf-rail__item {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .nf-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.nf-tierrail {
  display: flex;
  gap: 1px;
  margin-inline: -1rem;
  padding-inline: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background-color: var(--border);
  border-block: 1px solid var(--border);
}

.nf-tierrail::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .nf-tierrail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    border: 1px solid var(--border);
  }
}

@media (min-width: 1024px) {
  .nf-tierrail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.nf-tier {
  position: relative;
  flex: 0 0 auto;
  width: 78%;
  min-width: 0;
  scroll-snap-align: start;
  background-color: var(--card);
  padding: 1.25rem;
}

@media (min-width: 480px) {
  .nf-tier {
    padding: 1.5rem;
  }
}

@media (min-width: 640px) {
  .nf-tier {
    width: auto;
  }
}

.nf-tier__flag {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    color-mix(in oklab, var(--primary) 20%, transparent) 100%
  );
}

.nf-tier__level {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.nf-tier__name {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--foreground);
}

.nf-tier__rate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding-block: 0.75rem;
  border-block: 1px solid var(--border);
}

.nf-tier__rate-value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--primary);
}

.nf-tier__rate-label {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.nf-tier__benefits {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.nf-tier__benefit {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.nf-tier__benefit svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
  color: var(--primary);
}

/* ---------- promotion card ---------- */

.nf-promo {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  background-color: var(--card);
  transition: border-color 0.2s ease;
}

.nf-promo:hover {
  border-color: var(--border-strong);
}

@media (min-width: 1024px) {
  .nf-promo--featured {
    flex-direction: row;
  }
}

.nf-promo__media {
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .nf-promo--featured .nf-promo__media {
    width: 46%;
    flex-shrink: 0;
  }
}

.nf-promo__img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
  transition: transform 0.5s ease;
}

@media (min-width: 480px) {
  .nf-promo__img {
    height: 11.5rem;
  }
}

.nf-promo:hover .nf-promo__img {
  transform: scale(1.04);
}

@media (min-width: 640px) {
  .nf-promo--featured .nf-promo__img {
    height: 14rem;
  }
}

@media (min-width: 1024px) {
  .nf-promo--featured .nf-promo__img {
    height: 100%;
  }
}

.nf-promo__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background-color: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(4px);
}

.nf-promo__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .nf-promo__body {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .nf-promo--featured .nf-promo__body {
    padding: 2.25rem;
  }
}

.nf-promo__category {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.nf-promo__title {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--foreground);
  overflow-wrap: break-word;
}

.nf-promo--featured .nf-promo__title {
  font-size: 1.375rem;
}

@media (min-width: 640px) {
  .nf-promo--featured .nf-promo__title {
    font-size: 1.75rem;
  }
}

.nf-promo__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-block: 0.75rem;
  border-block: 1px solid var(--border);
}

.nf-promo__value-label {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.nf-promo__value-amount {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--primary);
}

.nf-promo--featured .nf-promo__value-amount {
  font-size: 1.75rem;
}

.nf-promo__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.nf-promo__meta svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: color-mix(in oklab, var(--primary) 80%, transparent);
}

.nf-promo__foot {
  margin-top: auto;
  padding-top: 1.5rem;
}

.nf-promo__cta {
  width: 100%;
}

@media (min-width: 640px) {
  .nf-promo__cta {
    width: auto;
    display: inline-flex;
  }
}

/* ---------- promo code ---------- */

.nf-code {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-code {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    padding-block: 4rem;
  }
}

.nf-code__panel {
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
  min-width: 0;
}

@media (min-width: 480px) {
  .nf-code__panel {
    padding: 1.5rem;
  }
}

.nf-code__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed color-mix(in oklab, var(--primary) 50%, transparent);
  background-color: color-mix(in oklab, var(--primary) 5%, transparent);
}

.nf-code__value {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--primary);
  overflow-wrap: anywhere;
}

@media (min-width: 480px) {
  .nf-code__value {
    font-size: 1.125rem;
    letter-spacing: 0.16em;
  }
}

.nf-code__copy {
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}

.nf-code__copy:hover {
  color: var(--primary);
}

.nf-code__copy svg {
  width: 1.125rem;
  height: 1.125rem;
}

.nf-code__cta {
  margin-top: 1rem;
}

/* ---------- faq ---------- */

.nf-faq-layout {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-faq-layout {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 4rem;
    padding-block: 4.5rem;
  }
}

.nf-faq {
  border-top: 1px solid var(--border);
  min-width: 0;
}

.nf-faq__item {
  border-bottom: 1px solid var(--border);
}

.nf-faq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding-block: 1.125rem;
  text-align: left;
}

.nf-faq__question {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  min-width: 0;
}

@media (min-width: 640px) {
  .nf-faq__question {
    font-size: 1rem;
  }
}

.nf-faq__toggle {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  color: var(--primary);
}

.nf-faq__toggle svg {
  width: 0.875rem;
  height: 0.875rem;
}

.nf-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.nf-faq__panel--open {
  grid-template-rows: 1fr;
  padding-bottom: 1.125rem;
}

.nf-faq__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.nf-faq__answer {
  margin: 0;
  max-width: 48rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* ---------- closing band ---------- */

.nf-closing {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-closing {
    grid-template-columns: minmax(0, 1.5fr) auto;
    padding-block: 4rem;
  }
}

.nf-closing__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 480px) {
  .nf-closing__actions {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .nf-closing__actions {
    justify-self: end;
  }
}

/* ---------- footer ---------- */

.nf-footer {
  border-top: 1px solid var(--border);
  background-color: var(--surface);
}

.nf-footer__inner {
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-footer__inner {
    padding-block: 4rem;
  }
}

.nf-footer__top {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.4fr);
  }
}

.nf-footer__brand {
  max-width: 24rem;
}

.nf-footer__cta {
  margin-top: 1.5rem;
}

.nf-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .nf-footer__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

.nf-footer__col-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foreground);
}

.nf-footer__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

.nf-footer__list a {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}

.nf-footer__list a:hover {
  color: var(--primary);
}

.nf-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 640px) {
  .nf-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.nf-footer__age {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.nf-footer__badge {
  border: 1px solid var(--border-strong);
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--foreground);
}

.nf-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.nf-footer__legal a:hover {
  color: var(--primary);
}

/* ---------- legal pages ---------- */

.nf-legal-hero {
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-legal-hero {
    padding-block: 4rem;
  }
}

.nf-legal-hero__title {
  max-width: 48rem;
}

.nf-legal-hero__intro {
  max-width: 42rem;
  margin-top: 1rem;
}

.nf-legal-hero__updated {
  margin: 1.5rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.nf-legal-layout {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-legal-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 4rem;
    padding-block: 4rem;
  }
}

.nf-legal-toc {
  display: none;
}

@media (min-width: 1024px) {
  .nf-legal-toc {
    display: block;
  }
}

.nf-legal-toc__sticky {
  position: sticky;
  top: 7rem;
}

.nf-legal-toc__title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foreground);
}

.nf-legal-toc__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  border-left: 1px solid var(--border);
}

.nf-legal-toc__list a {
  display: block;
  margin-left: -1px;
  padding-left: 1rem;
  border-left: 1px solid transparent;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  transition: all 0.2s ease;
}

.nf-legal-toc__list a:hover {
  border-left-color: var(--primary);
  color: var(--primary);
}

.nf-legal-body {
  min-width: 0;
  max-width: 48rem;
}

.nf-legal-section {
  scroll-margin-top: 7rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
}

.nf-legal-section + .nf-legal-section {
  padding-top: 2rem;
}

.nf-legal-section:last-child {
  border-bottom: none;
}

.nf-legal-section__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.nf-legal-section__num {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--primary);
}

.nf-legal-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--foreground);
  overflow-wrap: break-word;
}

@media (min-width: 640px) {
  .nf-legal-section__title {
    font-size: 1.25rem;
  }
}

.nf-legal-section__body {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.nf-legal-section__body > * + * {
  margin-top: 1rem;
}

.nf-legal-section__body p {
  margin: 0;
}

.nf-legal-section__body ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.nf-legal-section__body li + li {
  margin-top: 0.5rem;
}

.nf-legal-section__body strong {
  color: var(--foreground);
}

/* ---------- responsible gaming specifics ---------- */

.nf-split {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    padding-block: 4rem;
  }
}

.nf-panel {
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .nf-panel {
    padding: 2rem;
  }
}

.nf-panel--center {
  text-align: center;
  padding-block: 2rem;
}

.nf-panel__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary);
  flex-shrink: 0;
}

.nf-panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nf-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--foreground);
  min-width: 0;
  overflow-wrap: break-word;
}

@media (min-width: 480px) {
  .nf-panel__title {
    font-size: 1.25rem;
  }
}

.nf-panel__title--stacked {
  margin-top: 1rem;
}

.nf-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.nf-signlist {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.nf-signlist li {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.nf-signlist li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.nf-signlist li::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  margin-top: 0.55rem;
  background-color: var(--primary);
}

.nf-timeline {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
  display: grid;
  gap: 1.25rem;
}

.nf-timeline__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--foreground);
}

.nf-timeline__text {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.nf-cta-panel {
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .nf-cta-panel {
    padding-block: 4rem;
  }
}

.nf-cta-panel__text {
  max-width: 36rem;
  margin-inline: auto;
}

.nf-cta-panel__btn {
  margin-top: 1.75rem;
}

.nf-inline-cta {
  margin-top: 1.5rem;
}

.nf-mobile-cta {
  display: flex;
  width: 100%;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .nf-mobile-cta {
    display: none;
  }
}

/* ---------- auth ---------- */

.nf-auth {
  display: grid;
  min-height: 100vh;
  background-color: var(--background);
  min-width: 320px;
}

@media (min-width: 1024px) {
  .nf-auth {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

.nf-auth__aside {
  display: none;
}

@media (min-width: 1024px) {
  .nf-auth__aside {
    display: block;
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--border);
  }
}

.nf-auth__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.nf-auth__veil {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklab, var(--background) 70%, transparent);
}

.nf-auth__aside-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 2.5rem;
}

@media (min-width: 1280px) {
  .nf-auth__aside-inner {
    padding: 3.5rem;
  }
}

.nf-auth__pitch {
  max-width: 24rem;
}

.nf-auth__pitch-title {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--foreground);
}

@media (min-width: 1280px) {
  .nf-auth__pitch-title {
    font-size: 2.25rem;
  }
}

.nf-auth__benefits {
  margin: 2rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  list-style: none;
  display: grid;
  gap: 1rem;
}

.nf-auth__benefits li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.nf-auth__benefits svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--primary);
}

.nf-auth__disclaimer {
  margin: 0;
  font-size: 0.6875rem;
  color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.nf-auth__main {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .nf-auth__main {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .nf-auth__main {
    padding: 3rem;
  }
}

.nf-auth__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.nf-auth__topbar-logo {
  min-width: 0;
}

@media (min-width: 1024px) {
  .nf-auth__topbar-logo {
    display: none;
  }
}

.nf-auth__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}

.nf-auth__back:hover {
  color: var(--foreground);
}

.nf-auth__back svg {
  width: 0.875rem;
  height: 0.875rem;
}

.nf-auth__panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding-block: 2rem;
}

.nf-auth__title {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--foreground);
}

@media (min-width: 480px) {
  .nf-auth__title {
    font-size: 1.875rem;
  }
}

.nf-auth__form-wrap {
  margin-top: 2rem;
}

.nf-auth__footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.nf-auth__footer p {
  margin: 0;
}

/* ---------- forms ---------- */

.nf-form {
  display: grid;
  gap: 1.25rem;
}

.nf-form__row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .nf-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nf-field__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.nf-field__control {
  margin-top: 0.5rem;
}

.nf-field__error {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  color: var(--destructive);
}

.nf-input {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--input);
  background-color: var(--surface);
  padding: 0.75rem 0.875rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s ease;
}

.nf-input::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.nf-input:focus {
  border-color: var(--primary);
}

.nf-form__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.nf-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.nf-check--start {
  align-items: flex-start;
  gap: 0.75rem;
}

.nf-check input {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.nf-check--start input {
  margin-top: 0.15rem;
}

.nf-linkbtn {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
}

.nf-linkbtn:hover {
  text-decoration: underline;
}

.nf-consents {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.nf-spin {
  width: 1rem;
  height: 1rem;
  animation: nf-spin 1s linear infinite;
}

@keyframes nf-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- status pages ---------- */

.nf-status {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--background);
}

.nf-status__inner {
  max-width: 28rem;
  text-align: center;
}

.nf-status__code {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--foreground);
}

@media (min-width: 480px) {
  .nf-status__code {
    font-size: 4.5rem;
  }
}

.nf-status__title {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
}

.nf-status__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}