/* ==========================================================
   NOYTRIX API V38 — PRODUCTION UI
   ========================================================== */

.api-screen-v38 {
  overflow: hidden !important;
}


.api-page-v38 {
  width: 100%;
  height: 100%;

  max-width: 1580px;

  margin: auto;

  display: grid;

  grid-template-rows:
    minmax(210px,1.05fr)
    54px
    minmax(190px,.95fr)
    minmax(205px,1fr)
    68px;

  gap: 9px;

  padding: 1px;

  color: #eef5ff;
}


.api-page-v38 *,
.api-doc-overlay-v38 * {
  box-sizing: border-box;
}


.api-page-v38 svg,
.api-doc-overlay-v38 svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================
   HERO
   ========================================================== */

.api-hero-grid-v38 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap: 12px;
}


.api-hero-v38,
.api-live-v38,
.api-returns-v38,
.api-flow-v38,
.api-plans-section-v38,
.api-footer-features-v38 {
  border:
    1px solid #253d5b;

  background:
    linear-gradient(
      145deg,
      rgba(8,22,43,.95),
      rgba(4,14,29,.95)
    );

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.22),

    inset 0 1px 0
    rgba(255,255,255,.02);
}


.api-hero-v38 {
  display: flex;

  flex-direction: column;
  justify-content: center;

  padding:
    20px 24px;

  border-radius: 17px;

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(255,186,29,.07),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(9,24,46,.98),
      rgba(5,15,31,.95)
    );
}


.api-eyebrow-v38 {
  color: #ffbc24;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .14em;
}


.api-hero-v38 h1 {
  max-width: 690px;

  margin:
    7px 0 0;

  color: #f6f8ff;

  font-size:
    clamp(31px,2.75vw,47px);

  line-height: .99;

  letter-spacing: -.045em;

  text-shadow:
    0 12px 30px
    rgba(0,0,0,.35);
}


.api-hero-v38 > p {
  max-width: 720px;

  margin:
    12px 0 0;

  color: #a7b8d0;

  font-size: 12px;

  font-weight: 700;

  line-height: 1.48;
}


.api-actions-v38 {
  display: flex;

  gap: 9px;

  margin-top: 15px;
}


.api-actions-v38 button {
  min-height: 42px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 16px;

  border-radius: 9px;

  font-size: 10px;

  font-weight: 900;

  cursor: pointer;

  transition:
    transform .17s ease,
    box-shadow .17s ease;
}


.api-actions-v38 button:hover {
  transform:
    translateY(-1px);
}


.api-btn-primary-v38 {
  border:
    1px solid #ffd367;

  color: #07101e;

  background:
    linear-gradient(
      135deg,
      #ffd84b,
      #ffad17
    );

  box-shadow:
    0 12px 34px
    rgba(255,174,23,.17);
}


.api-btn-secondary-v38 {
  border:
    1px solid #4a6382;

  color: #edf5ff;

  background:
    rgba(9,23,44,.78);
}


.api-actions-v38 i {
  display: flex;
}


.api-actions-v38 svg {
  width: 17px;
  height: 17px;
}


.api-trust-v38 {
  display: flex;

  gap: 14px;

  margin-top: 13px;
}


.api-trust-v38 span {
  display: flex;

  align-items: center;

  gap: 6px;

  color: #7588a4;

  font-size: 8px;

  font-weight: 800;
}


.api-trust-v38 b {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #39da8b;

  box-shadow:
    0 0 10px
    rgba(57,218,139,.42);
}


/* ==========================================================
   LIVE EXAMPLE
   ========================================================== */

.api-live-v38 {
  overflow: hidden;

  border-radius: 17px;
}


.api-live-header-v38 {
  height: 39px;

  display: flex;

  align-items: center;

  padding:
    0 14px;

  border-bottom:
    1px solid #223751;
}


.api-live-header-v38 > div {
  display: flex;

  gap: 7px;

  font-family:
    ui-monospace,
    Menlo,
    Consolas,
    monospace;
}


.api-live-header-v38 span {
  color: #46eb96;

  font-size: 9px;

  font-weight: 900;
}


.api-live-header-v38 strong {
  color: #6cf2a9;

  font-size: 9px;
}


.api-live-header-v38 button {
  margin-left: auto;

  min-height: 27px;

  padding:
    0 9px;

  border:
    1px solid #344a65;

  border-radius: 7px;

  background:
    rgba(255,255,255,.015);

  color: #b4c2d4;

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;
}


.api-live-body-v38 {
  height:
    calc(100% - 39px);

  display: grid;

  grid-template-columns:
    .74fr 1.26fr;
}


.api-request-v38,
.api-response-v38 {
  min-height: 0;

  padding:
    12px 14px;
}


.api-request-v38 {
  border-right:
    1px solid #21364f;
}


.api-request-v38 label {
  color: #7187a6;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: .12em;
}


.api-live-v38 pre {
  margin:
    10px 0 0;

  color: #e1ebf8;

  font-family:
    ui-monospace,
    Menlo,
    Consolas,
    monospace;

  font-size: 8.5px;

  line-height: 1.6;
}


.api-live-v38 pre span {
  color: #6db7ff;
}


.api-live-v38 pre b {
  color: #ffd24c;
}


.api-live-v38 pre em {
  color: #63e1b2;

  font-style: normal;
}


.api-live-v38 pre strong {
  color: #ff6670;
}


.api-response-status-v38 {
  display: flex;

  justify-content: space-between;

  color: #39e58c;

  font-size: 8px;

  font-weight: 900;
}


.api-response-status-v38 small {
  color: #617996;

  font-size: 7px;
}


/* ==========================================================
   SUPPORTED
   ========================================================== */

.api-supported-v38 {
  display: grid;

  grid-template-columns:
    145px repeat(5,1fr);

  align-items: center;

  overflow: hidden;

  border:
    1px solid #29425f;

  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      #0a1c34,
      #07172b
    );
}


.api-supported-v38 label {
  padding-left: 15px;

  color: #6e839f;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: .10em;
}


.api-supported-v38 > div {
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border-left:
    1px solid #263c55;

  color: #dbe6f5;

  font-size: 9px;

  font-weight: 850;
}


.api-supported-v38 i {
  width: 29px;
  height: 29px;

  display: grid;

  place-items: center;

  border-radius: 8px;
}


.api-supported-v38 svg {
  width: 17px;
  height: 17px;
}


.api-supported-v38 .blue i {
  color: #59aaff;
  background: rgba(51,143,255,.12);
}


.api-supported-v38 .cyan i {
  color: #4bd9e8;
  background: rgba(52,210,225,.12);
}


.api-supported-v38 .purple i {
  color: #a77bff;
  background: rgba(146,90,255,.12);
}


.api-supported-v38 .orange i {
  color: #ffae2f;
  background: rgba(255,163,32,.12);
}


.api-supported-v38 .green i {
  color: #43df91;
  background: rgba(52,215,135,.12);
}


/* ==========================================================
   CORE
   ========================================================== */

.api-core-grid-v38 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 9px;
}


.api-returns-v38,
.api-flow-v38 {
  min-height: 0;

  padding: 11px;

  border-radius: 14px;
}


.api-section-heading-v38 h2 {
  margin: 0;

  color: #f1f6ff;

  font-size: 12px;

  font-weight: 900;
}


.api-section-heading-v38 p {
  margin:
    3px 0 0;

  color: #7187a4;

  font-size: 7.5px;

  font-weight: 700;
}


.api-return-grid-v38 {
  height:
    calc(100% - 33px);

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 7px;

  margin-top: 8px;
}


.api-return-grid-v38 article {
  position: relative;

  min-width: 0;

  display: grid;

  grid-template-columns:
    38px 1fr auto;

  align-items: center;

  gap: 8px;

  padding:
    8px 9px;

  border:
    1px solid #29405d;

  border-radius: 10px;

  background:
    rgba(12,31,55,.73);
}


.api-return-grid-v38 article > i {
  width: 35px;
  height: 35px;

  display: grid;

  place-items: center;

  border-radius: 9px;
}


.api-return-grid-v38 svg {
  width: 20px;
  height: 20px;
}


.api-return-grid-v38 article strong {
  display: block;

  color: #eef5ff;

  font-size: 8.5px;
}


.api-return-grid-v38 article p {
  margin:
    2px 0 0;

  color: #8da0b9;

  font-size: 7px;

  font-weight: 650;

  line-height: 1.25;
}


.api-return-grid-v38 article > b {
  padding:
    5px 7px;

  border-radius: 6px;

  font-size: 7px;

  white-space: nowrap;
}


.api-return-grid-v38 .risk i {
  color: #5caeff;
  background: rgba(50,140,255,.13);
}


.api-return-grid-v38 .risk > b {
  color: #64b4ff;
  background: rgba(50,140,255,.10);
}


.api-return-grid-v38 .danger i {
  color: #ff5b67;
  background: rgba(255,63,76,.12);
}


.api-return-grid-v38 .danger > b {
  color: #ff6973;
  background: rgba(255,63,76,.10);
}


.api-return-grid-v38 .evidence i {
  color: #ad80ff;
  background: rgba(158,94,255,.12);
}


.api-return-grid-v38 .evidence > b {
  color: #b990ff;
  background: rgba(158,94,255,.10);
}


.api-return-grid-v38 .safe-action i {
  color: #46df91;
  background: rgba(55,214,137,.12);
}


.api-return-grid-v38 .safe-action > b {
  color: #54e79b;
  background: rgba(55,214,137,.10);
}


/* ==========================================================
   FLOW
   ========================================================== */

.api-flow-steps-v38 {
  height:
    calc(100% - 24px);

  display: grid;

  grid-template-columns:
    1fr 24px 1fr 24px 1fr;

  align-items: center;

  margin-top: 5px;
}


.api-flow-steps-v38 article {
  position: relative;

  min-height: 116px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    10px;

  border:
    1px solid #29425e;

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(15,37,64,.79),
      rgba(8,22,40,.72)
    );
}


.api-flow-steps-v38 article > span {
  position: absolute;

  top: 7px;
  left: 7px;

  width: 22px;
  height: 22px;

  display: grid;

  place-items: center;

  border:
    1px solid #e8b700;

  border-radius: 5px;

  color: #ffd021;

  font-size: 10px;

  font-weight: 900;
}


.api-flow-steps-v38 article > i {
  width: 37px;
  height: 37px;

  display: grid;

  place-items: center;

  margin:
    0 auto 7px;

  border-radius: 10px;
}


.api-flow-steps-v38 i.blue {
  color: #5bb0ff;
  background: rgba(55,145,255,.11);
}


.api-flow-steps-v38 i.yellow {
  color: #ffc227;
  background: rgba(255,188,32,.11);
}


.api-flow-steps-v38 i.green {
  color: #45df90;
  background: rgba(52,213,133,.11);
}


.api-flow-steps-v38 strong {
  color: #f0f5ff;

  font-size: 8px;
}


.api-flow-steps-v38 p {
  margin:
    4px 0 0;

  color: #8fa2ba;

  font-size: 6.8px;

  font-weight: 650;

  line-height: 1.3;
}


.api-flow-arrow-v38 {
  display: grid;

  place-items: center;

  color: #758aa6;

  font-size: 17px;
}


/* ==========================================================
   PLANS
   ========================================================== */

.api-plans-section-v38 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    225px 1fr;

  gap: 11px;

  padding: 10px;

  border-radius: 14px;
}


.api-plans-title-v38 {
  display: flex;

  flex-direction: column;
  justify-content: center;

  padding:
    4px 10px;
}


.api-plans-title-v38 h2 {
  margin: 0;

  color: #f4f7ff;

  font-size: 14px;

  line-height: 1.05;
}


.api-plans-title-v38 p {
  margin:
    7px 0 0;

  color: #7d91ad;

  font-size: 7.5px;

  font-weight: 700;

  line-height: 1.4;
}


.api-plans-v38 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 8px;
}


.api-plan-v38 {
  position: relative;

  min-width: 0;

  display: grid;

  grid-template-rows:
    auto auto auto 1fr auto;

  padding:
    10px;

  overflow: hidden;

  border:
    1px solid #2c4562;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(14,34,58,.95),
      rgba(7,20,38,.95)
    );
}


.api-plan-v38.growth {
  border-color:
    rgba(255,189,34,.72);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,183,27,.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #102743,
      #091a30
    );

  box-shadow:
    0 0 38px
    rgba(255,180,22,.045);
}


.api-plan-badge-v38 {
  position: absolute;

  top: 0;
  right: 0;

  padding:
    4px 8px;

  border-radius:
    0 10px 0 8px;

  color: #08101c;

  background: #ffbd28;

  font-size: 5.5px;

  font-weight: 950;

  letter-spacing: .08em;
}


.api-plan-head-v38 {
  display: flex;

  justify-content: space-between;
}


.api-plan-head-v38 span {
  color: #7e92ad;

  font-size: 6.5px;

  font-weight: 800;
}


.api-plan-head-v38 h3 {
  margin:
    1px 0 0;

  color: #f4f7ff;

  font-size: 11px;
}


.api-plan-head-v38 > i {
  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  color: #ffc42b;

  background:
    rgba(255,190,31,.11);
}


.api-plan-head-v38 svg {
  width: 18px;
  height: 18px;
}


.api-plan-price-v38 {
  margin-top: 7px;

  color: #fff;

  font-size: 23px;

  font-weight: 950;

  line-height: 1;
}


.api-plan-price-v38 small {
  color: #7f93ad;

  font-size: 7px;

  font-weight: 800;
}


.api-plan-price-v38.custom {
  font-size: 14px;
}


.api-plan-volume-v38 {
  margin-top: 5px;

  color: #8fa5c0;

  font-size: 7px;
}


.api-plan-v38 ul {
  margin:
    7px 0;

  padding: 0;

  list-style: none;
}


.api-plan-v38 li {
  display: flex;

  align-items: center;

  gap: 5px;

  margin: 3px 0;

  color: #a7b7ca;

  font-size: 6.7px;

  font-weight: 700;
}


.api-plan-v38 li svg {
  flex: 0 0 11px;

  width: 11px;
  height: 11px;

  color: #48dd91;
}


.api-plan-v38 button {
  min-height: 29px;

  border:
    1px solid #47607e;

  border-radius: 7px;

  background:
    rgba(9,23,43,.80);

  color: #ecf4ff;

  font-size: 7px;

  font-weight: 900;

  cursor: pointer;
}


.api-plan-v38.growth button {
  border-color: #ffbf2b;

  color: #07101d;

  background:
    linear-gradient(
      135deg,
      #ffd34b,
      #ffac17
    );
}


/* ==========================================================
   FOOTER FEATURES
   ========================================================== */

.api-footer-features-v38 {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  align-items: center;

  overflow: hidden;

  border-radius: 12px;
}


.api-footer-features-v38 article {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    0 13px;

  border-right:
    1px solid #263d57;
}


.api-footer-features-v38 article:last-child {
  border: 0;
}


.api-footer-features-v38 i {
  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 8px;
}


.api-footer-features-v38 i.blue {
  color: #61b0ff;
  background: rgba(56,144,255,.12);
}


.api-footer-features-v38 i.purple {
  color: #aa7dff;
  background: rgba(154,91,255,.12);
}


.api-footer-features-v38 i.yellow {
  color: #ffc42c;
  background: rgba(255,190,31,.12);
}


.api-footer-features-v38 i.green {
  color: #49df92;
  background: rgba(52,214,135,.12);
}


.api-footer-features-v38 svg {
  width: 18px;
  height: 18px;
}


.api-footer-features-v38 strong {
  display: block;

  color: #eef4ff;

  font-size: 8px;
}


.api-footer-features-v38 span {
  display: block;

  margin-top: 2px;

  color: #7086a3;

  font-size: 6.5px;

  font-weight: 700;
}


/* ==========================================================
   DOCUMENTATION MODAL
   ========================================================== */

.api-doc-overlay-v38 {
  position: fixed;

  z-index: 99999;

  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 40px;

  background:
    rgba(0,6,16,.78);

  backdrop-filter:
    blur(12px);
}


.api-doc-overlay-v38.open {
  display: flex;
}


.api-doc-modal-v38 {
  width:
    min(980px,90vw);

  height:
    min(650px,82vh);

  overflow: hidden;

  border:
    1px solid #355171;

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #091b32,
      #051224
    );

  box-shadow:
    0 45px 140px
    rgba(0,0,0,.60);
}


.api-doc-modal-v38 > header {
  height: 72px;

  display: flex;

  align-items: center;

  padding:
    0 22px;

  border-bottom:
    1px solid #263e59;
}


.api-doc-modal-v38 header span {
  color: #ffbc25;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .12em;
}


.api-doc-modal-v38 header h2 {
  margin:
    3px 0 0;

  color: #f2f7ff;

  font-size: 20px;
}


.api-doc-modal-v38 header button {
  margin-left: auto;

  width: 36px;
  height: 36px;

  border:
    1px solid #3a536f;

  border-radius: 9px;

  background: #0b1e36;

  color: #dfe9f6;

  font-size: 19px;

  cursor: pointer;
}


.api-doc-body-v38 {
  height:
    calc(100% - 72px);

  display: grid;

  grid-template-columns:
    210px 1fr;
}


.api-doc-body-v38 nav {
  padding: 14px;

  border-right:
    1px solid #263d57;
}


.api-doc-body-v38 nav button {
  width: 100%;

  min-height: 38px;

  margin-bottom: 5px;

  padding:
    0 11px;

  border: 0;

  border-radius: 8px;

  background: transparent;

  color: #8196b0;

  text-align: left;

  font-size: 10px;

  font-weight: 800;

  cursor: pointer;
}


.api-doc-body-v38 nav button.active {
  color: #ffbe2c;

  background:
    rgba(255,185,35,.09);
}


.api-doc-body-v38 main {
  overflow-y: auto;

  padding:
    24px 26px;
}


.api-doc-body-v38 h3 {
  margin:
    0 0 18px;

  color: #f2f7ff;

  font-size: 18px;
}


.api-doc-body-v38 p {
  color: #8297b1;

  font-size: 10px;

  font-weight: 750;
}


.api-doc-body-v38 pre {
  padding: 14px;

  overflow-x: auto;

  border:
    1px solid #273f5b;

  border-radius: 9px;

  background: #04101f;

  color: #92c9ff;

  font-size: 10px;

  line-height: 1.55;
}


.api-doc-status-v38 {
  display: flex;

  align-items: center;

  gap: 12px;

  min-height: 43px;

  margin-bottom: 7px;

  padding:
    0 12px;

  border:
    1px solid #28405c;

  border-radius: 8px;
}


.api-doc-status-v38 b {
  color: #48df91;
}


.api-doc-status-v38 span {
  color: #a1b2c6;
}


/* ==========================================================
   TOAST
   ========================================================== */

.api-toast-v38 {
  position: fixed;

  z-index: 100000;

  left: 50%;
  bottom: 28px;

  transform:
    translate(-50%,20px);

  padding:
    10px 15px;

  opacity: 0;

  pointer-events: none;

  border:
    1px solid #4c6685;

  border-radius: 9px;

  background:
    rgba(7,21,40,.95);

  color: #eff5ff;

  font-size: 9px;

  font-weight: 800;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.35);

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.api-toast-v38.show {
  opacity: 1;

  transform:
    translate(-50%,0);
}


/* ==========================================================
   SHORT DESKTOP
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 850px
) {

  .api-page-v38 {
    grid-template-rows:
      minmax(188px,1.03fr)
      47px
      minmax(165px,.91fr)
      minmax(184px,.95fr)
      59px;

    gap: 7px;
  }


  .api-hero-v38 {
    padding:
      14px 20px;
  }


  .api-hero-v38 h1 {
    font-size:
      clamp(28px,2.45vw,40px);
  }


  .api-hero-v38 > p {
    font-size: 10px;
  }


  .api-actions-v38 {
    margin-top: 10px;
  }


  .api-actions-v38 button {
    min-height: 36px;
  }


  .api-trust-v38 {
    margin-top: 9px;
  }


  .api-return-grid-v38 article {
    padding:
      6px 8px;
  }


  .api-flow-steps-v38 article {
    min-height: 100px;
  }


  .api-plans-section-v38 {
    grid-template-columns:
      195px 1fr;

    padding: 7px;
  }


  .api-plan-v38 {
    padding: 7px 8px;
  }


  .api-plan-price-v38 {
    font-size: 19px;
  }


  .api-plan-v38 ul {
    margin:
      4px 0;
  }


  .api-plan-v38 li {
    margin: 2px 0;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .api-screen-v38 {
    overflow:
      visible !important;
  }


  .api-page-v38 {
    height: auto;

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 10px;
  }


  .api-hero-grid-v38,
  .api-core-grid-v38 {
    display: flex;

    flex-direction: column;
  }


  .api-supported-v38 {
    grid-template-columns:
      1fr 1fr;

    padding: 8px;
  }


  .api-supported-v38 label {
    grid-column:
      1 / -1;

    padding: 8px;
  }


  .api-supported-v38 > div {
    border: 0;
  }


  .api-live-body-v38 {
    grid-template-columns:
      1fr;
  }


  .api-request-v38 {
    border-right: 0;

    border-bottom:
      1px solid #223751;
  }


  .api-return-grid-v38 {
    grid-template-columns:
      1fr;

    height: auto;
  }


  .api-flow-steps-v38 {
    display: flex;

    flex-direction: column;

    gap: 7px;

    height: auto;
  }


  .api-flow-arrow-v38 {
    transform:
      rotate(90deg);
  }


  .api-plans-section-v38 {
    display: flex;

    flex-direction: column;
  }


  .api-plans-v38 {
    grid-template-columns:
      1fr;
  }


  .api-footer-features-v38 {
    grid-template-columns:
      1fr;
  }


  .api-footer-features-v38 article {
    min-height: 64px;

    border-right: 0;

    border-bottom:
      1px solid #263d57;
  }


  .api-doc-overlay-v38 {
    padding: 12px;
  }


  .api-doc-modal-v38 {
    width: 100%;
    height: 90vh;
  }


  .api-doc-body-v38 {
    grid-template-columns:
      1fr;
  }


  .api-doc-body-v38 nav {
    display: flex;

    overflow-x: auto;

    border-right: 0;

    border-bottom:
      1px solid #263d57;
  }


  .api-doc-body-v38 nav button {
    width: auto;

    min-width: max-content;
  }

}



/* ==========================================================
   NOYTRIX API V39
   FIX HERO / SUPPORTED STRIP OVERLAP
   ========================================================== */


/*
   Верхнему блоку даём нормальную собственную высоту.
   Остальные блоки слегка ужимаем, чтобы вся страница
   по-прежнему помещалась в один экран.
*/

.api-page-v38 {
  grid-template-rows:
    minmax(245px, 1.12fr)
    54px
    minmax(185px, .92fr)
    minmax(188px, .92fr)
    62px !important;

  gap:
    10px !important;
}


/* hero ничего больше не должен выпускать наружу */

.api-hero-grid-v38 {
  min-height:
    245px !important;

  overflow:
    hidden !important;
}


/* немного аккуратнее распределяем содержимое слева */

.api-hero-v38 {
  padding:
    17px 22px !important;

  justify-content:
    center !important;

  overflow:
    hidden !important;
}


/* кнопки чуть ближе к тексту */

.api-actions-v38 {
  margin-top:
    12px !important;
}


/* нижняя служебная строка больше не упирается в следующий блок */

.api-trust-v38 {
  margin-top:
    10px !important;

  padding-bottom:
    2px !important;
}


/* правый API preview строго остаётся внутри своей карточки */

.api-live-v38 {
  min-height:
    245px !important;

  height:
    100% !important;

  overflow:
    hidden !important;
}


/* полоса объектов теперь точно начинается после hero */

.api-supported-v38 {
  position:
    relative !important;

  z-index:
    2 !important;

  margin:
    0 !important;
}


/* ==========================================================
   CURRENT DESKTOP / NOTEBOOK
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 900px
) {

  .api-page-v38 {
    grid-template-rows:
      240px
      50px
      minmax(178px, .9fr)
      minmax(180px, .9fr)
      58px !important;

    gap:
      8px !important;
  }


  .api-hero-grid-v38,
  .api-live-v38 {
    min-height:
      240px !important;
  }


  .api-hero-v38 {
    padding:
      14px 20px !important;
  }


  .api-hero-v38 h1 {
    margin-top:
      5px !important;

    font-size:
      clamp(29px, 2.45vw, 41px) !important;

    line-height:
      1 !important;
  }


  .api-hero-v38 > p {
    margin-top:
      9px !important;
  }


  .api-actions-v38 {
    margin-top:
      10px !important;
  }


  .api-trust-v38 {
    margin-top:
      8px !important;
  }

}



/* ==========================================================
   NOYTRIX API V40
   NO PRICING HERE
   BIGGER / CLEARER / MORE PRODUCT-FOCUSED
   ========================================================== */


/* ==========================================================
   MAIN PAGE
   ========================================================== */

#screen-api .api-page-v38 {
  grid-template-rows:
    270px
    62px
    minmax(315px, 1fr)
    94px !important;

  gap:
    11px !important;
}


/* старый pricing блок больше не должен занимать место
   даже если где-то останется старый DOM */
#screen-api .api-plans-section-v38,
#screen-api .api-plans-v38,
#screen-api .api-plans-title-v38 {
  display:
    none !important;
}


/* ==========================================================
   HERO — MORE AIR / MORE READABLE
   ========================================================== */

#screen-api .api-hero-grid-v38 {
  min-height:
    270px !important;
}


#screen-api .api-hero-v38 {
  padding:
    23px 27px !important;
}


#screen-api .api-eyebrow-v38 {
  font-size:
    12px !important;

  letter-spacing:
    .13em !important;
}


#screen-api .api-hero-v38 h1 {
  max-width:
    730px !important;

  font-size:
    clamp(35px, 3vw, 51px) !important;

  line-height:
    1.01 !important;
}


#screen-api .api-hero-v38 > p {
  max-width:
    700px !important;

  margin-top:
    14px !important;

  font-size:
    14px !important;

  line-height:
    1.52 !important;

  color:
    #afc0d8 !important;
}


#screen-api .api-actions-v38 {
  margin-top:
    17px !important;
}


#screen-api .api-actions-v38 button {
  min-height:
    46px !important;

  padding:
    0 20px !important;

  font-size:
    12px !important;

  border-radius:
    10px !important;
}


#screen-api .api-actions-v38 svg {
  width:
    19px !important;

  height:
    19px !important;
}


/* three trust points */

#screen-api .api-trust-v38 {
  margin-top:
    14px !important;

  gap:
    18px !important;
}


#screen-api .api-trust-v38 span {
  font-size:
    10px !important;

  color:
    #8fa2bd !important;
}


/* ==========================================================
   LIVE API EXAMPLE
   ========================================================== */

#screen-api .api-live-v38 {
  min-height:
    270px !important;
}


#screen-api .api-live-header-v38 {
  height:
    45px !important;

  padding:
    0 17px !important;
}


#screen-api .api-live-header-v38 span,
#screen-api .api-live-header-v38 strong {
  font-size:
    11px !important;
}


#screen-api .api-live-header-v38 button {
  min-height:
    31px !important;

  font-size:
    9px !important;
}


#screen-api .api-live-body-v38 {
  height:
    calc(100% - 45px) !important;
}


#screen-api .api-request-v38,
#screen-api .api-response-v38 {
  padding:
    15px 17px !important;
}


#screen-api .api-request-v38 label {
  font-size:
    9px !important;
}


#screen-api .api-live-v38 pre {
  margin-top:
    13px !important;

  font-size:
    10.5px !important;

  line-height:
    1.68 !important;
}


#screen-api .api-response-status-v38 {
  font-size:
    10px !important;
}


#screen-api .api-response-status-v38 small {
  font-size:
    9px !important;
}


/* ==========================================================
   WHAT YOU CAN CHECK
   ========================================================== */

#screen-api .api-supported-v38 {
  grid-template-columns:
    175px repeat(5,1fr) !important;

  min-height:
    62px !important;

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.22) !important;
}


#screen-api .api-supported-v38 label {
  padding-left:
    18px !important;

  font-size:
    9px !important;

  color:
    #8ca0bc !important;
}


#screen-api .api-supported-v38 > div {
  height:
    46px !important;

  gap:
    10px !important;

  font-size:
    11px !important;
}


#screen-api .api-supported-v38 i {
  width:
    34px !important;

  height:
    34px !important;

  border-radius:
    10px !important;
}


#screen-api .api-supported-v38 svg {
  width:
    19px !important;

  height:
    19px !important;
}


/* stronger color differentiation */

#screen-api .api-supported-v38 .blue i {
  box-shadow:
    0 0 22px rgba(65,156,255,.12) !important;
}

#screen-api .api-supported-v38 .cyan i {
  box-shadow:
    0 0 22px rgba(62,216,230,.12) !important;
}

#screen-api .api-supported-v38 .purple i {
  box-shadow:
    0 0 22px rgba(157,99,255,.13) !important;
}

#screen-api .api-supported-v38 .orange i {
  box-shadow:
    0 0 22px rgba(255,171,37,.13) !important;
}

#screen-api .api-supported-v38 .green i {
  box-shadow:
    0 0 22px rgba(64,222,143,.13) !important;
}


/* ==========================================================
   CORE AREA — NOW THE MAIN PART OF THE PAGE
   ========================================================== */

#screen-api .api-core-grid-v38 {
  min-height:
    315px !important;

  grid-template-columns:
    1.04fr .96fr !important;

  gap:
    11px !important;
}


#screen-api .api-returns-v38,
#screen-api .api-flow-v38 {
  padding:
    16px !important;

  border-radius:
    16px !important;

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.22) !important;
}


/* ==========================================================
   SECTION TITLES
   ========================================================== */

#screen-api .api-section-heading-v38 h2 {
  font-size:
    17px !important;

  letter-spacing:
    -.02em !important;
}


#screen-api .api-section-heading-v38 p {
  margin-top:
    5px !important;

  max-width:
    660px !important;

  font-size:
    10px !important;

  line-height:
    1.42 !important;

  color:
    #899db8 !important;
}


/* ==========================================================
   WHAT PRODUCT RECEIVES
   ========================================================== */

#screen-api .api-return-grid-v38 {
  height:
    calc(100% - 46px) !important;

  margin-top:
    12px !important;

  gap:
    10px !important;
}


#screen-api .api-return-grid-v38 article {
  grid-template-columns:
    51px 1fr auto !important;

  gap:
    12px !important;

  padding:
    13px !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      rgba(17,40,69,.84),
      rgba(8,23,44,.74)
    ) !important;

  transition:
    transform .18s ease,
    border-color .18s ease !important;
}


#screen-api .api-return-grid-v38 article:hover {
  transform:
    translateY(-1px) !important;

  border-color:
    #3c5d82 !important;
}


#screen-api .api-return-grid-v38 article > i {
  width:
    47px !important;

  height:
    47px !important;

  border-radius:
    12px !important;
}


#screen-api .api-return-grid-v38 svg {
  width:
    25px !important;

  height:
    25px !important;
}


#screen-api .api-return-grid-v38 article strong {
  font-size:
    12px !important;
}


#screen-api .api-return-grid-v38 article p {
  margin-top:
    4px !important;

  font-size:
    9px !important;

  line-height:
    1.38 !important;

  color:
    #9dafc7 !important;
}


#screen-api .api-return-grid-v38 article > b {
  padding:
    7px 9px !important;

  font-size:
    9px !important;

  border-radius:
    7px !important;
}


/* ==========================================================
   HOW INTEGRATION WORKS
   ========================================================== */

#screen-api .api-flow-steps-v38 {
  height:
    calc(100% - 32px) !important;

  margin-top:
    10px !important;
}


#screen-api .api-flow-steps-v38 article {
  min-height:
    190px !important;

  padding:
    15px !important;

  border-radius:
    12px !important;
}


#screen-api .api-flow-steps-v38 article > span {
  top:
    10px !important;

  left:
    10px !important;

  width:
    27px !important;

  height:
    27px !important;

  font-size:
    12px !important;
}


#screen-api .api-flow-steps-v38 article > i {
  width:
    52px !important;

  height:
    52px !important;

  margin:
    0 auto 14px !important;

  border-radius:
    13px !important;
}


#screen-api .api-flow-steps-v38 article > i svg {
  width:
    28px !important;

  height:
    28px !important;
}


#screen-api .api-flow-steps-v38 strong {
  font-size:
    11px !important;
}


#screen-api .api-flow-steps-v38 p {
  margin-top:
    6px !important;

  font-size:
    8.5px !important;

  line-height:
    1.42 !important;

  color:
    #9cafc7 !important;
}


#screen-api .api-flow-arrow-v38 {
  font-size:
    21px !important;

  color:
    #8fa4be !important;
}


/* ==========================================================
   FOOTER FEATURES
   ========================================================== */

#screen-api .api-footer-features-v38 {
  min-height:
    94px !important;

  border-radius:
    14px !important;
}


#screen-api .api-footer-features-v38 article {
  gap:
    12px !important;

  padding:
    0 18px !important;
}


#screen-api .api-footer-features-v38 i {
  flex:
    0 0 44px !important;

  width:
    44px !important;

  height:
    44px !important;

  border-radius:
    11px !important;
}


#screen-api .api-footer-features-v38 svg {
  width:
    23px !important;

  height:
    23px !important;
}


#screen-api .api-footer-features-v38 strong {
  font-size:
    11px !important;
}


#screen-api .api-footer-features-v38 span {
  margin-top:
    4px !important;

  font-size:
    8.5px !important;

  line-height:
    1.3 !important;
}


/* ==========================================================
   SHORT DESKTOP
   still one screen, but readable
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 850px
) {

  #screen-api .api-page-v38 {
    grid-template-rows:
      235px
      55px
      minmax(270px,1fr)
      78px !important;

    gap:
      8px !important;
  }


  #screen-api .api-hero-grid-v38,
  #screen-api .api-live-v38 {
    min-height:
      235px !important;
  }


  #screen-api .api-hero-v38 {
    padding:
      16px 21px !important;
  }


  #screen-api .api-hero-v38 h1 {
    font-size:
      clamp(30px,2.55vw,42px) !important;
  }


  #screen-api .api-hero-v38 > p {
    font-size:
      11px !important;
  }


  #screen-api .api-actions-v38 {
    margin-top:
      11px !important;
  }


  #screen-api .api-actions-v38 button {
    min-height:
      38px !important;

    font-size:
      10px !important;
  }


  #screen-api .api-trust-v38 {
    margin-top:
      8px !important;
  }


  #screen-api .api-trust-v38 span {
    font-size:
      8px !important;
  }


  #screen-api .api-core-grid-v38 {
    min-height:
      270px !important;
  }


  #screen-api .api-returns-v38,
  #screen-api .api-flow-v38 {
    padding:
      11px !important;
  }


  #screen-api .api-section-heading-v38 h2 {
    font-size:
      14px !important;
  }


  #screen-api .api-return-grid-v38 article {
    grid-template-columns:
      43px 1fr auto !important;

    padding:
      9px !important;
  }


  #screen-api .api-return-grid-v38 article > i {
    width:
      39px !important;

    height:
      39px !important;
  }


  #screen-api .api-flow-steps-v38 article {
    min-height:
      152px !important;

    padding:
      10px !important;
  }


  #screen-api .api-flow-steps-v38 article > i {
    width:
      43px !important;

    height:
      43px !important;
  }


  #screen-api .api-footer-features-v38 {
    min-height:
      78px !important;
  }


  #screen-api .api-footer-features-v38 i {
    flex-basis:
      37px !important;

    width:
      37px !important;

    height:
      37px !important;
  }

}