/* ==========================================================================
   Fortinet section — Dynascale
   Built on the existing design tokens from the site stylesheet.
   ========================================================================== */

.fn-wrap {
  --fn-gutter: 2.4rem;
}

/* ---------- Scoped reset ----------
   Webflow's global stylesheet leaks into HtmlEmbeds (baseline heading/paragraph
   margins, link decoration, and .w-embed img/svg { position:absolute;
   width:100%; height:100% }). Everything here is wrapped in :where() so it has
   ZERO specificity — it clears the inherited defaults without outranking the
   component rules further down this file. */
.fn-page,
.fn-page *,
.fn-page *::before,
.fn-page *::after { box-sizing: border-box; }

.fn-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote,
                 figure, table, details, summary, form, fieldset) {
  margin: 0;
  padding: 0;
  border: 0;
}

.fn-page :where(ul, ol) { list-style: none; }
.fn-page :where(a) { color: inherit; text-decoration: none; }

.fn-page :where(img, svg, video, embed, object) {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

.fn-page :where(input, select, textarea, button) { font: inherit; color: inherit; }
.fn-page :where(table) { border-collapse: collapse; width: 100%; }
.fn-page :where(details > summary) { list-style: none; cursor: pointer; }
.fn-page :where(details > summary)::-webkit-details-marker { display: none; }

/* ---------- Hero ---------- */
.fn-hero {
  background-color: var(--black);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.fn-hero::after {
  content: "";
  position: absolute;
  left: -12rem;
  top: -12rem;
  width: 52rem;
  height: 52rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.18) 0%, rgba(0, 102, 255, 0) 70%);
  pointer-events: none;
}

.fn-hero__inner {
  width: 140.8rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 20rem 2.4rem 9.6rem;
  position: relative;
  z-index: 1;
}

.fn-crumb {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "Geistmono", monospace;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white65);
  margin-bottom: 2.4rem;
}

.fn-crumb a { color: var(--white65); }
.fn-crumb a:hover { color: var(--white); }
.fn-crumb__sep { opacity: 0.5; }

.fn-hero__title {
  font-size: 7.6rem;
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0;
  max-width: none;
}

.fn-hero__lead {
  font-size: 2.1rem;
  line-height: 1.4;
  color: var(--white65);
  margin: 0 0 3.2rem;
  max-width: 60rem;
}

.fn-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 4rem;
  margin-top: 4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--white15);
}

.fn-hero__stat__num {
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.fn-hero__stat__lbl {
  font-size: 1.3rem;
  color: var(--white65);
  margin-top: 0.8rem;
}

/* ---------- Buttons ---------- */
.fn-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.8rem 2.4rem;
  border-radius: 6rem;
  font-size: 1.6rem;
  line-height: 1;
  border: 1px solid var(--white15);
  color: var(--white);
  background: transparent;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.fn-btn:hover { background-color: var(--white); color: var(--black); border-color: var(--white); }

.fn-btn--solid { background-color: var(--white); color: var(--black); border-color: var(--white); }
.fn-btn--solid:hover { background-color: transparent; color: var(--white); }

.fn-btn--dark { border-color: var(--black10); color: var(--black); }
.fn-btn--dark:hover { background-color: var(--black); color: var(--white); border-color: var(--black); }
.fn-btn--black { background-color: var(--black); color: var(--white); border-color: var(--black); }
.fn-btn--black:hover { background-color: var(--blue); border-color: var(--blue); color: var(--white); }

.fn-btn__ico { width: 1.4rem; flex: none; }

/* ---------- Sections ---------- */
.fn-section { padding: 12rem 0; }
.fn-section--tight { padding: 7.2rem 0; }
.fn-section--dark { background-color: var(--black); color: var(--white); }
.fn-section--lgray { background-color: var(--lgray); }

.fn-inner { width: 140.8rem; max-width: 100%; margin: 0 auto; padding: 0 2.4rem; }

.fn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem; margin-bottom: 6.4rem; }
.fn-head__title { font-size: 5.6rem; line-height: 1; letter-spacing: -0.03em; font-weight: 400; margin: 0; max-width: 84rem; }
.fn-head__txt { font-size: 1.8rem; color: var(--black65, rgba(0,0,0,0.55)); max-width: 46rem; margin: 1.6rem 0 0; }
.fn-section--dark .fn-head__txt { color: var(--white65); }
.fn-eyebrow { font-family: "Geistmono", monospace; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0 0 1.6rem; }

/* ---------- Category / family cards ---------- */
.fn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.fn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fn-card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 3.2rem;
  border: 1px solid var(--black10);
  border-radius: 1.6rem;
  background: var(--white);
  min-height: 20rem;
  transition: border-color 0.25s, transform 0.25s;
}

.fn-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.fn-card__title { font-size: 2.4rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.fn-card__txt { font-size: 1.6rem; color: rgba(0, 0, 0, 0.6); margin: 0; }
.fn-card__foot { margin-top: auto; font-family: "Geistmono", monospace; font-size: 1.2rem; color: var(--blue); letter-spacing: 0.04em; }

.fn-section--dark .fn-card { background: transparent; border-color: var(--white15); color: var(--white); }
.fn-section--dark .fn-card:hover { border-color: var(--white); }
.fn-section--dark .fn-card__txt { color: var(--white65); }

/* ---------- Link rows (product lists) ---------- */
.fn-rows { border-top: 1px solid var(--black10); }
.fn-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3.2rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--black10);
  transition: padding-left 0.25s, color 0.25s;
}
.fn-row:hover { padding-left: 1.2rem; color: var(--blue); }
.fn-row__name { font-size: 2rem; letter-spacing: -0.01em; }
.fn-row__sku { font-family: "Geistmono", monospace; font-size: 1.3rem; color: rgba(0, 0, 0, 0.5); }
.fn-row__right { font-family: "Geistmono", monospace; font-size: 1.3rem; color: rgba(0, 0, 0, 0.5); text-align: right; flex: none; }
.fn-section--dark .fn-rows { border-top-color: var(--white15); }
.fn-section--dark .fn-row { border-bottom-color: var(--white15); }
.fn-section--dark .fn-row__sku, .fn-section--dark .fn-row__right { color: var(--white65); }

/* Grouped product lists (category hubs group by family) */
.fn-groups { border-top: 1px solid var(--black10); }
.fn-group { padding: 3.2rem 0 0.4rem; }
.fn-group:first-child { padding-top: 4rem; }
.fn-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2.4rem; }
.fn-group__title {
  font-family: "Geistmono", monospace; font-size: 1.3rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0;
}
.fn-group__meta { font-size: 1.4rem; color: rgba(0, 0, 0, 0.5); margin: 0.8rem 0 1.6rem; }
.fn-group__link { font-size: 1.4rem; color: var(--black); flex: none; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.fn-group__link:hover { color: var(--blue); }
.fn-group .fn-rows { border-top: 0; }
.fn-section--dark .fn-groups { border-top-color: var(--white15); }
.fn-section--dark .fn-group__meta { color: var(--white65); }
.fn-section--dark .fn-group__link { color: var(--white); }

/* Anchor target for the "Quote" / "Request a quote" links; clears the sticky nav. */
#quote { scroll-margin-top: 12rem; }

/* ---------- Quote form (light section, HubSpot submission) ---------- */
.fn-quote__wrap { max-width: 100%; }
.fn-quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 6.4rem 9.6rem;
  align-items: start;
}
.fn-quote__side .fn-prose { columns: 1; }
.fn-quote__side .fn-prose h2 { font-size: 3.2rem; margin-top: 0; }
/* Scoped under .fn-quote__form: the generic .fn-field / .fn-input rules used by the
   sizing and compare tools set max-width: 42rem and margin-bottom, and they are
   declared later, so unscoped they would clamp the quote form fields. */
.fn-quote__form .fn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; margin-top: 0.8rem; }
.fn-quote__form .fn-field { display: flex; flex-direction: column; gap: 1.2rem; max-width: none; margin: 0; }
.fn-quote__form .fn-field--full { grid-column: 1 / -1; }
.fn-quote__form .fn-field > label {
  font-family: "Geistmono", monospace; font-size: 1.2rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(0, 0, 0, 0.55);
}
.fn-quote__form .fn-input {
  width: 100%; padding: 1.4rem 1.6rem; border: 1px solid var(--black10);
  border-radius: 0.8rem; font-size: 1.6rem; font-family: inherit;
  color: var(--black); background: var(--white);
}
.fn-quote__form .fn-input::placeholder { color: rgba(0, 0, 0, 0.4); }
.fn-quote__form .fn-input:focus { outline: none; border-color: var(--blue); }
.fn-quote__form textarea.fn-input { resize: vertical; min-height: 16rem; }
.fn-quote__form .fn-checks { display: flex; flex-wrap: wrap; gap: 1.2rem 3.2rem; margin-top: 0.6rem; }
.fn-quote__form .fn-check {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: inherit; font-size: 1.5rem; letter-spacing: 0; text-transform: none;
  color: var(--black); cursor: pointer;
}
.fn-quote__form .fn-check input[type="checkbox"] { accent-color: var(--blue); width: 1.6rem; height: 1.6rem; margin: 0; }
.fn-quote__form .fn-form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 0.8rem; }
.fn-quote__form .fn-quote__note { font-size: 1.4rem; color: rgba(0, 0, 0, 0.5); }
.fn-quote__form .fn-form__msg { grid-column: 1 / -1; margin: 0; padding: 1.6rem 2rem; border-radius: 0.8rem; font-size: 1.5rem; }
.fn-quote__form .fn-form__msg--ok { background: rgba(0, 122, 90, 0.08); color: #0a6b4f; }
.fn-quote__form .fn-form__msg--err { background: rgba(200, 0, 0, 0.07); color: #a11; }
@media screen and (max-width: 991px) { .fn-quote__grid { grid-template-columns: 1fr; gap: 4.8rem; } }
@media screen and (max-width: 767px) { .fn-quote__form .fn-form { grid-template-columns: 1fr; } }

/* ---------- Spec table ---------- */
.fn-specs { border-top: 1px solid var(--black10); }
.fn-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; padding: 1.8rem 0; border-bottom: 1px solid var(--black10); }
.fn-spec__label { font-size: 1.6rem; color: rgba(0, 0, 0, 0.62); }
.fn-spec__value { font-size: 1.6rem; text-align: right; }
.fn-specs__group { font-family: "Geistmono", monospace; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 4.8rem 0 0; }
.fn-specs__note { font-size: 1.4rem; color: rgba(0, 0, 0, 0.5); margin: 2.4rem 0 0; max-width: 64rem; }

/* ---------- Prose (content pages) ---------- */
.fn-prose { max-width: none; columns: 2; column-gap: 9.6rem; }
.fn-prose h2 { font-size: 4rem; line-height: 1.05; letter-spacing: -0.02em; font-weight: 400; margin: 6.4rem 0 1.6rem; break-after: avoid; }
.fn-prose h2:first-child { margin-top: 0; }
.fn-prose p { font-size: 2rem; line-height: 1.5; color: rgba(0, 0, 0, 0.72); margin: 0 0 1.8rem; }
.fn-prose ul { margin: 0 0 2.4rem; padding-left: 2rem; }
.fn-prose li { font-size: 2rem; line-height: 1.5; color: rgba(0, 0, 0, 0.72); margin-bottom: 0.9rem; }
.fn-prose p, .fn-prose ul, .fn-prose li { break-inside: avoid; }
.fn-prose a { color: var(--blue); }
.fn-prose strong { color: var(--black); }

/* ---------- FAQ ---------- */
.fn-faq { border-top: 1px solid var(--black10); }
.fn-faq__item { border-bottom: 1px solid var(--black10); }
.fn-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 2.4rem 0;
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: inherit;
  cursor: pointer;
}
.fn-faq__q span { transition: transform 0.3s; }
.fn-faq__item[open] .fn-faq__q span { transform: rotate(45deg); }
.fn-faq__a { padding: 0 6rem 2.4rem 0; font-size: 1.7rem; line-height: 1.5; color: rgba(0, 0, 0, 0.7); }

/* ---------- Tools ---------- */
.fn-tool { border: 1px solid var(--black10); border-radius: 1.6rem; padding: 3.2rem; background: var(--white); }
.fn-field { display: block; margin-bottom: 2.4rem; max-width: 42rem; }
.fn-field__lbl { display: block; font-size: 1.4rem; color: rgba(0, 0, 0, 0.6); margin-bottom: 0.8rem; }
.fn-input, .fn-select {
  width: 100%;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--black10);
  border-radius: 0.8rem;
  font-size: 1.6rem;
  background: var(--white);
  color: var(--black);
}
.fn-result { margin-top: 3.2rem; font-size: 1.7rem; line-height: 1.5; }
.fn-table { width: 100%; border-collapse: collapse; }
.fn-table th, .fn-table td { text-align: left; padding: 1.6rem 1.2rem; border-bottom: 1px solid var(--black10); font-size: 1.6rem; }
.fn-table th { font-family: "Geistmono", monospace; font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); }
.fn-table td.num, .fn-table th.num { text-align: right; }
.fn-table tr:hover td { background: var(--lgray); }

/* Tool layouts: sizing and renewals read better as inputs-left / result-right
   instead of one 720px slab pinned to the left edge. */
.fn-tool--sizing, .fn-tool--renewals {
  display: grid;
  grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
  gap: 3.2rem 6.4rem;
  align-items: start;
}
.fn-tool--sizing > .fn-field, .fn-tool--renewals > .fn-field {
  display: flex; flex-direction: column; gap: 0.8rem; max-width: none; margin-bottom: 0;
}
.fn-tool--sizing > .fn-result, .fn-tool--renewals > .fn-result { margin-top: 0; }
.fn-tool--sizing > .fn-field:nth-child(1) { grid-column: 1; grid-row: 1; }
.fn-tool--sizing > .fn-field:nth-child(2) { grid-column: 1; grid-row: 2; }
.fn-tool--sizing > .fn-field:nth-child(3) { grid-column: 1; grid-row: 3; }
.fn-tool--sizing > .fn-result { grid-column: 2; grid-row: 1 / span 3; }
.fn-tool--compare > .fn-field { max-width: 48rem; }
@media screen and (max-width: 991px) {
  .fn-tool--sizing, .fn-tool--renewals { grid-template-columns: 1fr; gap: 3.2rem; }
  .fn-tool--sizing > .fn-field, .fn-tool--sizing > .fn-result { grid-column: auto; grid-row: auto; }
}

/* ---------- CTA band ---------- */
.fn-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 6.4rem; }
.fn-cta__title { font-size: 4.8rem; line-height: 1; letter-spacing: -0.03em; font-weight: 400; margin: 0; max-width: 56rem; }
.fn-cta__txt { font-size: 1.8rem; color: var(--white65); margin: 2.4rem 0 0; max-width: 52rem; }

/* ---------- Footnotes ---------- */
.fn-note { font-size: 1.4rem; color: rgba(0, 0, 0, 0.5); margin-top: 4.8rem; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 991px) {
  .fn-hero__inner { padding: 16rem 2.4rem 7.2rem; }
  .fn-hero__title { font-size: 4.8rem; }
  .fn-section { padding: 8rem 0; }
  .fn-head { flex-flow: column; align-items: flex-start; gap: 2.4rem; margin-bottom: 4rem; }
  .fn-head__title { font-size: 3.6rem; }
  .fn-cta { flex-flow: column; align-items: flex-start; gap: 3.2rem; }
  .fn-cta__title { font-size: 3.6rem; }
  .fn-grid, .fn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .fn-hero__inner { padding: 14rem 1.6rem 6.4rem; }
  .fn-hero__title { font-size: 3.6rem; }
  .fn-inner { padding: 0 1.6rem; }
  .fn-grid, .fn-grid--4, .fn-grid--2 { grid-template-columns: 1fr; }
  .fn-spec { grid-template-columns: 1fr; gap: 0.4rem; }
  .fn-spec__value { text-align: left; }
  .fn-row { flex-flow: column; align-items: flex-start; gap: 0.8rem; }
  .fn-row__right { text-align: left; }
}

/* ---------- Custom-page wrapper ----------
   Fortinet pages are Webflow pages whose authored markup lives inside a single
   <div class="fn-page"> embed. The scaffold sections left over from the earlier
   clone attempt are hidden wherever our wrapper is present. */
.fn-page { display: block; }

.o-page:has(.fn-page) > header.c-dt-head,
.o-page:has(.fn-page) > section.c-dt-clct,
.o-page:has(.fn-page) > section.c-bp-strt,
.o-page:has(.fn-page) > section.c-cost,
.o-page:has(.fn-page) > section.c-faq {
  display: none !important;
}

/* The legacy client-side renderer wrote into the scaffold; with the scaffold hidden
   it has nothing visible to target. Also suppress the duplicated scaffold hero CTA.
   NOTE: an authored embed that contains a <script> (e.g. the hero guard) is also
   given .w-script by Webflow, so only hide renderer embeds that do NOT contain our
   .fn-page wrapper. */
.o-page:has(.fn-page) > .c-price,
.o-page:has(.fn-page) > .w-embed.w-script:not(:has(.fn-page)) {
  display: none !important;
}

/* ==========================================================================
   Fortinet navigation
   Mirrors security.dynascale.com's Fortinet-specific nav, in the Dynascale
   design language. Replaces the global .c-nav on Fortinet pages.
   ========================================================================== */

/* hide the global dynascale nav wherever the Fortinet nav is present */
.o-page:has(.fn-nav) > .c-nav { display: none !important; }

.fn-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  background: var(--black);
  color: var(--white);
}

.fn-nav__cb { display: none; }

.fn-nav__util {
  border-bottom: 1px solid var(--white15);
  font-family: "Geistmono", monospace;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fn-nav__util__inner {
  width: 140.8rem; max-width: 100%; margin: 0 auto;
  padding: 0 2.4rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2.4rem;
}

.fn-nav__util__tag { color: var(--white65); }
.fn-nav__util__contact { display: flex; align-items: center; gap: 1.2rem; color: var(--white65); }
.fn-nav__util__contact a { color: var(--white65); }
.fn-nav__util__contact a:hover { color: var(--white); }
.fn-nav__util__contact a + a { margin-left: 1.2rem; }

.fn-nav__bar__inner {
  width: 140.8rem; max-width: 100%; margin: 0 auto;
  padding: 0 2.4rem; height: 6.4rem;
  display: flex; align-items: center; gap: 2.4rem;
}

/* Logo: the real dynascale.com wordmark SVG (mark + lettering), sized on the same
   143:23 aspect ratio the main site uses, then the section label beside it. */
.fn-nav__logo { display: flex; align-items: center; gap: 1.2rem; flex: none; }
.fn-nav__logo__ico { display: flex; align-items: center; flex: none; }
/* !important on size/position: Webflow's global `.w-embed svg { width:100%;
   height:100%; position:absolute }` reset otherwise wins on the embedded nav. */
.fn-nav__logo__ico .fn-logo {
  width: 16.2rem !important;
  height: auto !important;
  position: static !important;
  aspect-ratio: 143 / 23;
  display: block; color: var(--white);
}
.fn-nav__logo__sub {
  font-family: "Geistmono", monospace; font-size: 1.1rem;
  letter-spacing: 0.18em; color: var(--blue);
  padding-left: 1.2rem; border-left: 1px solid var(--white15);
  line-height: 1.6rem;
}

.fn-nav__menu { display: flex; align-items: center; gap: 0.2rem; margin-left: 2rem; }

/* Full-height hover target for items with a mega panel: without this the pointer
   crosses a dead strip between the link and .fn-mega (fixed at top:10rem) and the
   panel closes before it can be reached. */
.fn-nav__item--has-mega { display: flex; align-items: center; height: 6.4rem; }

.fn-nav__link,
.fn-nav__item--has-mega > .fn-nav__link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1.2rem 1.4rem; border-radius: 6rem;
  font-size: 1.5rem; line-height: 1; color: var(--white);
  transition: background-color 0.2s, color 0.2s;
}
.fn-nav__link:hover { background: var(--white15); }
.fn-nav__item--has-mega:hover > .fn-nav__link { background: var(--white15); }

.fn-nav__caret {
  width: 0.6rem; height: 0.6rem; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.7;
}

.fn-nav__actions { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; flex: none; }
.fn-nav__actions .fn-btn { padding: 1.3rem 2rem; font-size: 1.5rem; }
.fn-btn--ghost { background: transparent; color: var(--white); border-color: var(--white15); }

.fn-nav__burger {
  display: none; flex: none; width: 4.4rem; height: 4.4rem;
  border: 1px solid var(--white15); border-radius: 6rem;
  align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem;
  cursor: pointer; margin-left: auto;
}
.fn-nav__burger span { width: 1.8rem; height: 1px; background: var(--white); display: block; }
.fn-nav__burger span + span { margin-top: 0.5rem; }

/* ---------- mega menu panels ---------- */
.fn-mega {
  position: fixed; left: 0; right: 0;
  top: 10rem; /* util 3.6 + bar 6.4 */
  background: var(--white); color: var(--black);
  border-top: 1px solid var(--black10);
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.12);
  padding: 4.8rem 0 4rem;
  display: none;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
}
.fn-nav__item--has-mega:hover > .fn-mega,
.fn-nav__item--has-mega:focus-within > .fn-mega { display: block; }

.fn-mega__eyebrow {
  font-family: "Geistmono", monospace; font-size: 1.1rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 2.4rem;
}
.fn-mega__grid { display: grid; gap: 2.4rem 3.2rem; }
.fn-mega__grid--fw { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fn-mega__grid--fabric { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.fn-mega__cat {
  font-family: "Geistmono", monospace; font-size: 1.1rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 1.6rem;
}

.fn-mega__link { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 0; color: var(--black); }
.fn-mega__link__name { font-size: 1.7rem; letter-spacing: -0.01em; }
.fn-mega__link__meta { font-size: 1.3rem; color: rgba(0, 0, 0, 0.5); }
.fn-mega__link:hover .fn-mega__link__name { color: var(--blue); }
.fn-mega__link--sm { font-size: 1.6rem; padding: 0.7rem 0; }
.fn-mega__link--sm:hover { color: var(--blue); }

.fn-mega__foot {
  display: flex; align-items: center; gap: 1.6rem;
  margin-top: 4rem; padding-top: 3.2rem; border-top: 1px solid var(--black10);
}

/* ---------- responsive ---------- */
@media screen and (max-width: 991px) {
  .fn-nav__util { display: none; }
  .fn-nav__menu { display: none; }
  .fn-nav__actions { display: none; }
  .fn-nav__burger { display: flex; }

  .fn-mega { position: static; display: none !important; box-shadow: none; }

  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__menu,
  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__actions {
    display: flex;
    position: fixed; left: 0; right: 0; top: 6.4rem; bottom: 0;
    background: var(--black);
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; overflow-y: auto;
  }
  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__menu { padding: 1.6rem 2.4rem 14rem; }
  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__actions {
    top: auto; bottom: 0; z-index: 2;
    padding: 2rem 2.4rem 3.2rem; gap: 1.2rem;
    border-top: 1px solid var(--white15); overflow: visible;
  }
  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__link { font-size: 2.4rem; padding: 1.8rem 0; border-bottom: 1px solid var(--white15); border-radius: 0; }
  .fn-nav:has(.fn-nav__cb:checked) .fn-mega { display: none !important; }
  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__caret { display: none; }
  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__actions .fn-btn { width: 100%; justify-content: center; }

  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__burger span:first-child { transform: translateY(0.6rem) rotate(45deg); }
  .fn-nav:has(.fn-nav__cb:checked) .fn-nav__burger span:last-child { transform: translateY(-0.6rem) rotate(-45deg); }

  .fn-hero__inner { padding-top: 14rem; }
}
@media screen and (max-width: 767px) {
  .fn-nav__bar__inner { padding: 0 1.6rem; }
  .fn-nav__util__inner { padding: 0 1.6rem; }
  .fn-nav__logo__ico .fn-logo { width: 11.6rem !important; }
}

/* ---------- Hero: two-column hub layout + throughput range panel ---------- */
.fn-hero__grid { display: grid; grid-template-columns: 1.05fr 0.85fr; gap: 6.4rem 9.6rem; align-items: end; }
.fn-hero__main { min-width: 0; }
.fn-hero__aside { min-width: 0; }
.fn-hero__side { min-width: 0; padding-bottom: 0.8rem; }

.fn-range {
  border: 1px solid var(--white15);
  border-radius: 1.6rem;
  padding: 3.2rem;
  background: rgba(255, 255, 255, 0.03);
}
.fn-range__head {
  display: flex; justify-content: space-between; gap: 2rem;
  font-family: "Geistmono", monospace; font-size: 1.1rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--white65); margin-bottom: 2.4rem;
}
.fn-range__row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1.6rem;
  padding: 1.4rem 0; border-top: 1px solid var(--white15); color: var(--white);
}
.fn-range__name { font-size: 1.6rem; }
.fn-range__val { font-family: "Geistmono", monospace; font-size: 1.2rem; color: var(--white65); text-align: right; }
.fn-range__row:hover .fn-range__name { color: var(--blue); }
.fn-range__bar { grid-column: 1 / -1; height: 3px; background: var(--white15); border-radius: 2px; overflow: hidden; }
.fn-range__bar > span { display: block; height: 100%; background: var(--blue); }
.fn-range__btn {
  display: block; margin-top: 2.4rem; text-align: center; padding: 1.6rem;
  border: 1px solid var(--white15); border-radius: 6rem; font-size: 1.5rem; color: var(--white);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.fn-range__btn:hover { background: var(--white); color: var(--black); border-color: var(--white); }

@media screen and (max-width: 991px) {
  .fn-hero__grid { grid-template-columns: 1fr; gap: 4.8rem; }
  .fn-hero__title { font-size: 5.6rem; }
  .fn-prose { columns: 1; }
}