/* NEXRouter product page */
.router-page { --router-dark: #0d1517; --router-muted: #a4b5b8; --router-accent: #6de0c8; }
.router-page .container { max-width: 1240px; }
.router-hero { position: relative; overflow: hidden; background: var(--router-dark); color: #fff; }
.router-hero-grid { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 85% 35%, #12675628, transparent 55%), linear-gradient(90deg, #8ad4ca05 1px, transparent 1px), linear-gradient(#8ad4ca05 1px, transparent 1px); background-size: auto, 56px 56px, 56px 56px; }
.router-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 44px; padding-top: 100px; padding-bottom: 90px; min-height: 660px; }
.router-hero .eyebrow { color: var(--router-accent); font-size: 11px; letter-spacing: 2.5px; }
.router-wordmark { position: relative; display: inline-block; font-size: clamp(46px, 5.2vw, 73px); line-height: 1.1; letter-spacing: -4px; font-weight: 800; margin: 28px 0 23px; }
.router-wordmark > span { font-weight: 500; }
.router-wordmark i { position: absolute; right: -13px; top: 0; width: 9px; height: 9px; background: var(--router-accent); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.router-hero h1 { font-size: clamp(27px, 2.8vw, 40px); letter-spacing: -1px; line-height: 1.5; }
.router-lead { color: var(--router-muted); font-size: 15px; margin-top: 24px; max-width: 520px; line-height: 1.9; }
.router-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 31px; }
.router-primary { color: #122321; background: #c0f3e4; box-shadow: none; gap: 25px; }
.router-primary:hover { background: #91e7d0; }
.router-outline { background: transparent; color: #e4edeb; border: 1px solid #536763; padding: 15px 22px; gap: 20px; }
.router-outline:hover { background: #ffffff0b; border-color: #8bd0be; }
.router-badges { display: flex; flex-wrap: wrap; gap: 11px 19px; color: #9aafa9; font-size: 10px; margin-top: 29px; }
.routing-figure { position: relative; width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 42px 26px; padding: 28px 10px 32px; }
.routing-request { position: relative; z-index: 2; grid-column: 1/-1; width: 78%; background: #141e21; border: 1px solid #3c5354; box-shadow: 0 20px 80px #0003; }
.routing-window-bar { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #ffffff0c; }
.routing-window-bar > span { display: flex; gap: 5px; align-items: center; }
.routing-window-bar i { width: 5px; height: 5px; background: #405652; border-radius: 50%; }
.routing-window-bar i:first-child { background: #70bba4; }
.routing-window-bar small { font: 9px monospace; color: #8ecab8; }
.routing-request > p { font-size: 9px; color: #93b0a8; letter-spacing: 1px; padding: 18px 19px 5px; }
.routing-request > code { display: block; padding: 0 19px; font-size: 13px; color: #e4f2ee; white-space: nowrap; }
.request-lines { padding: 18px 19px 21px; display: grid; grid-template-columns: 90px 1fr; gap: 9px; font: 10px monospace; }
.request-lines > span { color: #7cb4cc; }
.request-lines b { font-weight: 400; color: #93a5a9; }
.routing-center { position: relative; z-index: 2; border: 1px solid #71d8bd; padding: 24px 15px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; background: linear-gradient(160deg, #173a32, #142522); box-shadow: 0 0 70px #00c3920b; }
.router-monogram { display: grid; place-items: center; position: relative; width: 42px; height: 42px; background: #b0eedc; color: #103127; font-weight: 900; font-size: 28px; margin-bottom: 15px; }
.router-monogram > span { position: absolute; top: -8px; right: -9px; font-size: 15px; color: #81d9be; }
.routing-center strong { font-size: 19px; letter-spacing: -.7px; }
.routing-center small { color: #83b4a5; font-size: 8px; margin: 10px 0; letter-spacing: 1px; }
.routing-center p { color: #a6ccc0; font-size: 9px; }
.routing-targets { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 13px; padding: 12px 0; }
.routing-targets > div { display: flex; align-items: center; gap: 12px; background: #142124; border: 1px solid #344b4b; padding: 17px 13px; font-size: 11px; position: relative; }
.routing-targets > div:before { content: ''; height: 1px; width: 27px; position: absolute; right: 100%; background: #548d7f; }
.target-number { font: 9px monospace; color: #6c9892; }
.routing-targets i { margin-left: auto; width: 4px; height: 4px; border-radius: 50%; background: #7bc2a9; flex-shrink: 0; }
.routing-connector { position: absolute; left: 26%; top: 185px; width: 48%; height: 145px; border: 1px solid #548d7f; border-top: 0; border-bottom: 0; }
.routing-connector span { display: block; position: absolute; width: 5px; height: 5px; background: #a4e9d2; box-shadow: 0 0 12px #70d8b9; }
.routing-connector span:first-child { top: 25%; left: -3px; }
.routing-connector span:nth-child(2) { bottom: 0; right: -3px; }
.routing-connector span:last-child { top: 0; right: -3px; }
.routing-figure figcaption { grid-column: 1/-1; color: #718f88; font-size: 9px; text-align: right; letter-spacing: 1px; margin-top: -22px; }
.router-section-nav { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #ffffff20; }
.router-section-nav a { display: flex; align-items: center; gap: 14px; padding: 24px 20px; color: #c2d4d0; font-size: 12px; border-right: 1px solid #ffffff12; }
.router-section-nav a:first-child { border-left: 1px solid #ffffff12; }
.router-section-nav a:hover { background: #ffffff08; color: #fff; }
.router-section-nav a > span { font: 10px monospace; color: #648a7f; }
.router-section-nav svg { margin-left: auto; width: 16px; color: #6f9f90; }
.router-split-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 90px; margin-bottom: 42px; }
.router-split-heading h2 { margin-top: 16px; max-width: 520px; font-size: 34px; }
.router-split-heading > p { font-size: 14px; color: var(--muted); }
.router-code-panel { color: #c4d6d3; background: #101e22; border: 1px solid #2c4244; }
.router-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; border-bottom: 1px solid #ffffff12; font-size: 12px; }
.router-code-bar > span { display: flex; align-items: center; gap: 9px; }
.router-code-bar i { width: 5px; height: 5px; background: #71d5b7; }
.router-code-bar button { display: flex; gap: 14px; padding: 8px 12px; color: #b2c8c1; background: #ffffff08; font-size: 11px; border: 1px solid #ffffff15; }
.router-code-bar button:hover { background: #ffffff15; }
.router-code-inner { display: grid; grid-template-columns: minmax(0, 1fr) 235px; }
.router-code-inner pre { margin: 0; padding: 35px 30px; overflow-x: auto; font: 13px/1.95 ui-monospace, SFMono-Regular, Consolas, monospace; color: #a7d7c9; tab-size: 2; }
.router-code-inner aside { padding: 35px 26px; border-left: 1px solid #ffffff12; }
.code-tag { font-size: 8px; letter-spacing: 1px; border: 1px solid #457766; color: #8fceb8; padding: 6px 9px; display: inline-block; }
.router-code-inner dl { margin: 28px 0 0; }
.router-code-inner dt { color: #698981; font: 8px monospace; letter-spacing: 1px; margin-top: 20px; }
.router-code-inner dd { font-size: 12px; color: #bdcfc9; margin: 7px 0 0; }
.router-code-note { font-size: 11px; padding: 17px 25px; color: #98b1a8; border-top: 1px solid #ffffff12; }
.router-copy-status { color: #a8e3d0; font-size: 12px; padding: 0 25px 17px; }
.router-copy-status:empty { display: none; }
.router-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 42px; }
.router-feature-grid article { padding-right: 12px; }
.router-feature-grid .icon { color: var(--teal); margin-bottom: 21px; width: 27px; height: 27px; }
.router-feature-grid h3 { font-size: 17px; margin-bottom: 11px; }
.router-feature-grid p { font-size: 13px; color: var(--muted); }
.router-steps-section { background: #f2f7f5; border-block: 1px solid #e4ece8; }
.router-section-heading { max-width: 750px; margin-bottom: 42px; }
.router-section-heading h2 { margin: 15px 0; font-size: 34px; }
.router-section-heading > p:last-child:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.router-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.router-steps li { border-top: 1px solid #b8d1c8; padding-top: 23px; position: relative; }
.router-step-number { color: var(--teal); font: 14px monospace; display: inline-block; margin-bottom: 25px; }
.router-steps li:not(:last-child):after { content: '→'; position: absolute; right: 0; top: 20px; color: #9bb9ae; }
.router-steps h3 { font-size: 18px; margin-bottom: 13px; }
.router-steps p { font-size: 13px; color: var(--muted); }
.router-audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.router-audience-grid article { border: 1px solid var(--line); padding: 33px; }
.router-audience-icon { height: 48px; width: 48px; display: grid; place-items: center; background: #edf7f3; color: #438670; margin-bottom: 30px; }
.router-audience-grid article:nth-child(2) .router-audience-icon { background: #edf3f6; color: #547b92; }
.router-audience-grid article:nth-child(3) .router-audience-icon { background: #f4f2e9; color: #8b8151; }
.router-audience-grid h3 { margin: 12px 0 15px; font-size: 21px; }
.router-audience-grid article > p:last-child { color: var(--muted); font-size: 13px; }
.router-finance { background: #f3f7f6; border-block: 1px solid var(--line); }
.router-finance-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.router-finance h2 { margin: 15px 0 20px; font-size: 34px; }
.router-finance-description { color: var(--muted); font-size: 14px; }
.router-finance .text-link { margin-top: 14px; color: var(--teal); }
.router-ledger { margin-top: 33px; padding: 23px; border: 1px solid #ceded7; max-width: 380px; background: #fff9; }
.router-ledger > span { font-size: 10px; color: #78978a; letter-spacing: 1px; }
.router-ledger > div { display: flex; gap: 15px; align-items: center; padding: 13px 0; border-bottom: 1px solid #e4ece8; font-size: 12px; }
.router-ledger > div:last-child { border: 0; padding-bottom: 0; }
.router-ledger b { font: 10px monospace; color: #7ba28e; }
.router-ledger i { font-style: normal; margin-left: auto; color: #558c71; }
.router-finance-list article { display: flex; gap: 20px; padding: 26px 0; border-bottom: 1px solid #d7e4dd; }
.router-finance-list article:first-child { padding-top: 0; }
.router-finance-list article:last-child { border-bottom: 0; }
.router-finance-list article > span { font: 11px monospace; color: #6b9c86; padding-top: 7px; }
.router-finance-list h3 { font-size: 20px; margin-bottom: 10px; }
.router-finance-list p { color: var(--muted); font-size: 14px; }
.router-faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.router-faq h2 { font-size: 34px; margin: 15px 0 25px; }
.router-faq-list details { border-bottom: 1px solid var(--line); }
.router-faq-list details:first-child { border-top: 1px solid var(--line); }
.router-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; padding: 24px 0; font-size: 16px; font-weight: 600; line-height: 1.6; }
.router-faq-list summary::-webkit-details-marker { display: none; }
.router-faq-list summary > span { font-size: 24px; font-weight: 400; color: #699b88; transition: transform .2s; }
.router-faq-list details[open] summary > span { transform: rotate(45deg); }
.router-faq-list p { color: var(--muted); font-size: 13px; padding: 0 28px 24px 0; }
.router-cta { background: #142925; color: #fff; padding: 67px 0; border-bottom: 1px solid #ffffff14; }
.router-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.router-cta .eyebrow { color: #7dd2b6; }
.router-cta h2 { font-size: 32px; margin: 15px 0; }
.router-cta p:not(.eyebrow) { color: #a5bdb3; font-size: 14px; }
.router-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; flex-shrink: 0; }
.router-cta-actions > a { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #a0bbae; }
.router-page :focus-visible { outline-color: #57bea3; }
@media (max-width: 1100px) {
  .router-hero-inner { gap: 25px; padding-top: 70px; padding-bottom: 65px; }
  .router-actions { gap: 10px; }
  .router-actions .button { padding: 14px 17px; gap: 14px; font-size: 12px; }
  .routing-figure { padding-inline: 0; gap: 35px 18px; }
  .routing-targets > div { padding: 14px 10px; gap: 8px; font-size: 10px; }
  .routing-targets > div:before { width: 19px; }
  .router-split-heading, .router-finance-layout { gap: 55px; }
  .router-feature-grid { gap: 22px; }
  .router-faq-layout { gap: 45px; }
  .router-audience-grid article { padding: 26px; }
}
@media (max-width: 900px) {
  .router-hero-inner { grid-template-columns: 1fr; padding-top: 55px; gap: 30px; }
  .router-hero-copy { max-width: 600px; }
  .router-wordmark { font-size: 66px; }
  .router-hero h1 { font-size: 38px; }
  .router-lead { max-width: 600px; }
  .routing-figure { width: min(100%, 470px); justify-self: center; margin-top: 10px; }
  .router-split-heading { grid-template-columns: 1fr; gap: 22px; }
  .router-feature-grid, .router-steps { grid-template-columns: repeat(2, 1fr); gap: 35px; }
  .router-code-inner { grid-template-columns: minmax(0, 1fr) 180px; }
  .router-code-inner aside { padding: 30px 18px; }
  .router-code-inner pre { font-size: 11px; padding: 30px 22px; }
  .router-finance-layout { gap: 40px; }
  .router-audience-grid { gap: 14px; }
  .router-audience-grid article { padding: 23px; }
  .router-audience-grid h3 { font-size: 18px; }
  .router-faq-layout { grid-template-columns: 1fr; gap: 25px; }
  .router-cta .container { gap: 32px; }
  .router-cta h2 { font-size: 28px; }
}
@media (max-width: 600px) {
  .router-hero-inner { padding-top: 42px; padding-bottom: 30px; gap: 30px; }
  .router-wordmark { font-size: 55px; letter-spacing: -3px; margin: 25px 0 20px; }
  .router-hero h1 { font-size: 29px; letter-spacing: -.8px; }
  .router-lead { font-size: 13px; margin-top: 20px; }
  .router-actions { margin-top: 25px; gap: 12px; }
  .router-actions .button { font-size: 12px; gap: 12px; }
  .router-badges { font-size: 9px; gap: 10px; margin-top: 22px; }
  .routing-figure { max-width: 370px; gap: 32px 20px; padding-top: 5px; }
  .routing-request { width: 86%; }
  .routing-request > code { font-size: 12px; }
  .routing-request > p { font-size: 9px; }
  .request-lines { font-size: 9px; grid-template-columns: 70px 1fr; }
  .routing-center { padding: 20px 9px 17px; }
  .routing-center strong { font-size: 17px; }
  .routing-center small { font-size: 7px; }
  .routing-center p { font-size: 8px; }
  .routing-targets { padding: 8px 0; }
  .routing-targets > div { padding: 14px 8px; font-size: 10px; gap: 7px; }
  .routing-targets > div:before { width: 21px; }
  .routing-connector { top: 160px; height: 140px; }
  .routing-figure figcaption { margin-top: -15px; font-size: 8px; }
  .router-section-nav { grid-template-columns: repeat(2, 1fr); }
  .router-section-nav a { padding: 18px 12px; gap: 10px; font-size: 11px; border-bottom: 1px solid #ffffff12; }
  .router-split-heading { gap: 18px; margin-bottom: 28px; }
  .router-split-heading h2, .router-section-heading h2, .router-finance h2, .router-faq h2 { font-size: 28px; }
  .router-split-heading > p { font-size: 13px; }
  .router-code-bar { padding: 12px 14px; font-size: 11px; gap: 15px; }
  .router-code-bar button { padding: 7px 8px; font-size: 10px; gap: 8px; white-space: nowrap; }
  .router-code-inner { grid-template-columns: minmax(0, 1fr); }
  .router-code-inner pre { padding: 24px 16px; font-size: 10px; }
  .router-code-inner aside { border-left: 0; border-top: 1px solid #ffffff12; padding: 18px 16px; }
  .router-code-inner dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .router-code-inner dt, .router-code-inner dd { margin: 0; font-size: 9px; }
  .router-code-note { padding: 15px 16px; font-size: 10px; }
  .router-feature-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-top: 32px; }
  .router-feature-grid article { padding-right: 0; }
  .router-feature-grid h3 { font-size: 16px; }
  .router-feature-grid p { font-size: 12px; }
  .router-feature-grid .icon { margin-bottom: 16px; }
  .router-section-heading { margin-bottom: 30px; }
  .router-section-heading > p:last-child:not(.eyebrow) { font-size: 13px; }
  .router-steps { gap: 28px 20px; }
  .router-steps h3 { font-size: 16px; }
  .router-steps p { font-size: 12px; }
  .router-step-number { margin-bottom: 19px; font-size: 12px; }
  .router-audience-grid { grid-template-columns: 1fr; }
  .router-audience-grid article { padding: 26px; }
  .router-audience-icon { margin-bottom: 22px; }
  .router-audience-grid h3 { font-size: 21px; }
  .router-finance-layout { grid-template-columns: 1fr; gap: 35px; }
  .router-finance-description { font-size: 13px; }
  .router-ledger { max-width: none; }
  .router-finance-list article { padding: 22px 0; }
  .router-finance-list h3 { font-size: 18px; }
  .router-finance-list p { font-size: 13px; }
  .router-faq-list summary { font-size: 15px; padding: 22px 0; }
  .router-faq-list p { font-size: 12px; }
  .router-cta { padding: 48px 0; }
  .router-cta .container { flex-direction: column; align-items: flex-start; gap: 28px; }
  .router-cta h2 { font-size: 29px; }
  .router-cta p:not(.eyebrow) { font-size: 13px; }
  html[lang=en] .router-feature-grid, html[lang=en] .router-steps { grid-template-columns: 1fr; }
}