/* Product demo refinement: the interface is the hero visual, without decorative arrows. */
.site-shell.home-site {
  position:relative;
  background:#fbfdff;
}

.site-shell.home-site::before {
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  width:100%;
  height:908px;
  background:
    radial-gradient(ellipse 45% 62% at 86% 34%,rgba(71,201,240,.14),transparent 72%),
    radial-gradient(ellipse 33% 44% at 66% 82%,rgba(69,215,187,.09),transparent 74%),
    radial-gradient(ellipse 27% 40% at 8% 88%,rgba(71,124,243,.055),transparent 76%),
    linear-gradient(145deg,#f9fcff 0%,#fbfdff 45%,#f5fbff 72%,#f3fbf9 100%);
  pointer-events:none;
}

.site-shell.home-site .header {
  background:rgba(249,252,255,.18);
  box-shadow:none;
}

.site-shell.home-site .hero {
  background:transparent;
}

.site-shell.home-site .hero::after { display:none; }

.site-shell .hero h1>.typewriter-title {
  min-height:1.34em;
  margin-top:.04em;
  padding:.16em .08em .1em 0;
  box-sizing:content-box;
  overflow:visible;
  line-height:1.2;
  letter-spacing:-.025em;
  word-spacing:.035em;
  max-width:100%;
  white-space:normal;
  overflow-wrap:normal;
  text-wrap:balance;
}

.site-shell .hero h1 {
  font-family:"Manrope","Noto Sans Thai",system-ui,sans-serif;
  line-height:1.17;
  letter-spacing:-.04em;
  margin-bottom:14px;
}

.site-shell .hero h1>span { letter-spacing:-.035em; }

.site-shell .hero h1>.typewriter-title::after {
  content:"";
  display:inline-block;
  width:.075em;
  height:.82em;
  margin-left:.09em;
  border-radius:999px;
  background:#11a7b3;
  vertical-align:-.04em;
  animation:typewriter-caret .78s steps(1,end) infinite;
}

@keyframes typewriter-caret { 50% { opacity:0; } }

.site-shell .order-stage {
  min-height:590px;
  isolation:isolate;
  top:-34px;
  transform:none;
  transition:top .72s cubic-bezier(.2,.8,.2,1);
}

.site-shell .demo-aura {
  position:absolute;
  z-index:-3;
  inset:5% -8% 0 -10%;
  border-radius:48% 52% 45% 55%;
  background:
    radial-gradient(circle at 74% 32%,rgba(42,197,218,.2),transparent 34%),
    radial-gradient(circle at 38% 72%,rgba(41,126,239,.15),transparent 42%),
    linear-gradient(145deg,rgba(224,243,255,.62),rgba(222,250,245,.34));
  filter:blur(2px);
  transform:rotate(-3deg);
}

.site-shell .hero-panel-layer {
  width:92%;
  height:80%;
  top:9%;
  right:-1%;
  border:1px solid rgba(91,167,219,.12);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(231,246,255,.78),rgba(211,237,255,.54) 55%,rgba(216,249,243,.48));
  box-shadow:0 32px 85px rgba(46,117,169,.08),inset 0 1px 0 rgba(255,255,255,.78);
  transform:rotate(-3deg) translate(18px,22px);
}

.site-shell .hero-panel-layer.layer-two {
  width:88%;
  height:77%;
  top:12%;
  right:-5%;
  opacity:.72;
  transform:rotate(2.5deg) translate(28px,36px);
}

.site-shell .order-window {
  width:min(100%,700px);
  border:1px solid rgba(112,163,198,.22);
  border-radius:28px;
  background:rgba(255,255,255,.9);
  box-shadow:0 42px 100px rgba(31,84,126,.15),0 14px 36px rgba(32,86,127,.07),inset 0 1px 0 #fff;
  transform:none;
  transform-origin:center;
  backface-visibility:hidden;
  transition:border-color .72s ease,box-shadow .72s cubic-bezier(.2,.8,.2,1),background-color .72s ease;
}

.site-shell .order-window-bar {
  min-height:72px;
  padding:0 31px;
  background:rgba(255,255,255,.86);
}

.site-shell .order-window-body {
  padding:38px 40px 36px;
  background:
    radial-gradient(circle at 94% 3%,rgba(57,187,220,.07),transparent 32%),
    linear-gradient(145deg,rgba(250,253,255,.98),rgba(243,249,252,.96));
}

.site-shell .order-window-title h3 {
  font-size:29px;
  letter-spacing:-.05em;
}

.site-shell .order-service-list {
  gap:17px;
  margin-top:30px;
}

.site-shell .order-service-list article {
  min-height:108px;
  padding:19px;
  border-radius:19px;
  background:rgba(255,255,255,.9);
}

.site-shell .order-service-list article.active {
  background:linear-gradient(135deg,rgba(246,251,255,.98),rgba(239,248,255,.92));
  box-shadow:0 16px 38px rgba(20,115,207,.1),inset 0 0 0 1px rgba(32,134,231,.04);
}

.site-shell .order-service-list article>span {
  width:52px;
  height:52px;
  padding:8px;
}

.site-shell .order-service-list strong {
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  line-height:1.25;
}

.site-shell .order-stage .platform-logo {
  shape-rendering:geometricPrecision;
}

.site-shell .order-link>div {
  height:54px;
  border-radius:15px;
  background:rgba(255,255,255,.78);
}

.site-shell .order-window-body footer {
  margin-top:24px;
  padding:0;
  background:transparent;
}

.site-shell .floating-platform {
  width:70px;
  height:70px;
  padding:10px;
  border-radius:21px;
  background:#fff;
  box-shadow:0 24px 55px rgba(27,93,143,.14),inset 0 1px 0 #fff;
  backdrop-filter:none;
}

.site-shell .floating-facebook { left:-28px; top:170px; transform:none; }
.site-shell .floating-tiktok { left:-44px; top:305px; width:66px; height:66px; transform:none; }
.site-shell .signal-line.one { width:660px; height:470px; top:30px; right:-85px; opacity:.38; transform:rotate(-6deg); }
.site-shell .signal-line.two { width:500px; height:350px; top:88px; right:-5px; opacity:.46; transform:rotate(-6deg); }

@media (min-width:1001px) and (max-width:1320px) {
  .site-shell .hero-grid {
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
    gap:30px;
  }

  .site-shell .order-stage {
    min-width:0;
    justify-items:end;
  }

  .site-shell .order-window {
    width:min(100%,620px);
  }
}

/* Facebook livestream product visual. */
.site-shell .live-service-visual {
  position:relative;
  display:grid;
  min-height:540px;
  place-items:center;
  overflow:visible;
}

.site-shell .live-service-visual::before {
  content:"";
  position:absolute;
  inset:13% 4% 12% 9%;
  border-radius:34px;
  background:
    linear-gradient(112deg,transparent 8%,rgba(38,133,242,.05) 24%,rgba(74,183,255,.2) 42%,rgba(255,255,255,.78) 51%,rgba(42,207,189,.16) 62%,transparent 84%);
  filter:blur(26px);
  transform:skewX(-10deg) translateX(-2%);
}

.site-shell .live-service-visual::after {
  content:"";
  position:absolute;
  z-index:1;
  right:9%;
  bottom:11%;
  width:62%;
  height:22%;
  border-radius:32px;
  background:linear-gradient(104deg,transparent,rgba(30,124,219,.1) 34%,rgba(33,196,183,.13) 58%,transparent 86%);
  filter:blur(29px);
  transform:skewX(-16deg);
}

.site-shell .facebook-live-art {
  position:relative;
  z-index:2;
  top:0;
  width:min(87%,600px);
  transform:none;
  transition:top .72s cubic-bezier(.2,.8,.2,1);
}

.site-shell .facebook-live-art::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:16% 2% 12% 8%;
  border:0;
  border-radius:26px;
  background:linear-gradient(116deg,transparent 6%,rgba(38,151,221,.08) 30%,rgba(255,255,255,.68) 49%,rgba(39,183,190,.11) 66%,transparent 88%);
  filter:blur(19px);
  transform:skewX(-9deg) translateX(-3%);
  box-shadow:none;
  transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .72s ease;
}

.site-shell .facebook-live-art img {
  display:block;
  width:100%;
  height:auto;
  image-rendering:auto;
}

/* TikTok views product visual. The source image remains untouched at 1217 × 1293. */
.site-shell .tiktok-service-visual {
  position:relative;
  display:grid;
  min-height:540px;
  place-items:center;
  overflow:visible;
}

.site-shell .tiktok-service-visual::before {
  content:"";
  position:absolute;
  inset:12% 7% 13% 4%;
  border-radius:34px;
  background:
    linear-gradient(68deg,transparent 7%,rgba(37,244,238,.05) 24%,rgba(37,244,238,.2) 43%,rgba(255,255,255,.76) 52%,rgba(254,44,85,.13) 66%,transparent 86%);
  filter:blur(27px);
  transform:skewX(10deg) translateX(2%);
}

.site-shell .tiktok-service-visual::after {
  content:"";
  position:absolute;
  z-index:1;
  left:9%;
  bottom:10%;
  width:62%;
  height:23%;
  border-radius:32px;
  background:linear-gradient(76deg,transparent,rgba(37,244,238,.1) 35%,rgba(254,44,85,.1) 60%,transparent 87%);
  filter:blur(29px);
  transform:skewX(16deg);
}

.site-shell .tiktok-views-art {
  position:relative;
  z-index:2;
  top:0;
  width:min(87%,600px);
  transform:none;
  transition:top .72s cubic-bezier(.2,.8,.2,1);
}

.site-shell .tiktok-views-art::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:15% 7% 11% 1%;
  border:0;
  border-radius:26px;
  background:linear-gradient(66deg,transparent 6%,rgba(37,244,238,.1) 32%,rgba(255,255,255,.65) 50%,rgba(254,44,85,.1) 67%,transparent 90%);
  filter:blur(20px);
  transform:skewX(9deg) translateX(3%);
  box-shadow:none;
  transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .72s ease;
}

.site-shell .tiktok-views-art img {
  display:block;
  width:100%;
  height:auto;
  image-rendering:auto;
}

/* Product backgrounds — distinct at a glance while staying within the brand system. */
.site-shell .service-card.blue {
  border:1px solid rgba(33,121,225,.13);
  background:
    radial-gradient(ellipse 48% 66% at 80% 48%,rgba(54,148,255,.18),transparent 72%),
    linear-gradient(135deg,#f8fbff 0%,#eaf4ff 56%,#eefaf9 100%);
  box-shadow:0 28px 72px rgba(34,100,158,.09),inset 0 1px 0 rgba(255,255,255,.9);
}

.site-shell .service-card.ink {
  border:1px solid rgba(88,104,133,.11);
  background:
    radial-gradient(ellipse 44% 58% at 19% 34%,rgba(37,211,218,.13),transparent 72%),
    radial-gradient(ellipse 42% 54% at 34% 76%,rgba(254,44,85,.105),transparent 74%),
    linear-gradient(135deg,#fcfdff 0%,#f7f7fb 56%,#fff7fa 100%);
  box-shadow:0 28px 72px rgba(54,66,92,.08),inset 0 1px 0 rgba(255,255,255,.92);
}

.site-shell .facebook-live-demo {
  position:relative;
  z-index:2;
  width:min(100%,465px);
  overflow:visible;
  border:1px solid rgba(104,158,197,.2);
  border-radius:30px;
  background:rgba(255,255,255,.9);
  box-shadow:0 38px 90px rgba(31,91,139,.16),0 12px 34px rgba(31,91,139,.08),inset 0 1px 0 #fff;
  transform:rotate(2.2deg);
}

.site-shell .live-demo-head {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:82px;
  padding:0 20px;
}

.site-shell .live-demo-head>span {
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:15px;
  background:#eef6ff;
}

.site-shell .live-demo-head>span svg { width:29px; height:29px; }
.site-shell .live-demo-head strong { display:block; color:#0d1a34; font-size:13px; letter-spacing:-.02em; }
.site-shell .live-demo-head small { display:block; margin-top:5px; color:#71869a; font-size:9px; font-weight:700; }
.site-shell .live-demo-head>b {
  display:inline-flex;
  min-height:29px;
  align-items:center;
  padding:0 10px;
  border-radius:9px;
  background:#edf5ff;
  box-shadow:none;
  color:#1877f2;
  font-size:8px;
  letter-spacing:.08em;
}

.site-shell .live-demo-stage {
  position:relative;
  aspect-ratio:3/2;
  margin:0 14px;
  overflow:hidden;
  border-radius:23px;
  background:#eef6fb;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 35px rgba(24,73,111,.09);
}

.site-shell .live-demo-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.96) contrast(1.025);
}

.site-shell .live-demo-shade {
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,rgba(5,24,55,.16),transparent 34%,rgba(5,24,55,.08));
  pointer-events:none;
}

.site-shell .live-viewer-count,
.site-shell .live-hd {
  position:absolute;
  z-index:4;
  top:16px;
  display:inline-flex;
  min-height:33px;
  align-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(5,24,55,.64);
  box-shadow:0 10px 25px rgba(4,24,55,.18);
  color:#fff;
  font-size:9px;
  font-weight:800;
  backdrop-filter:blur(12px);
}

.site-shell .live-viewer-count { left:16px; gap:7px; padding:0 11px; border-radius:10px; }
.site-shell .live-viewer-count svg { width:14px; height:14px; }
.site-shell .live-hd { right:16px; padding:0 10px; border-radius:9px; background:rgba(242,53,85,.9); letter-spacing:.08em; }

.site-shell .live-comments {
  display:grid;
  position:relative;
  z-index:3;
  margin:14px 20px 0;
  display:grid;
  gap:9px;
}

.site-shell .live-comments>span {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:45px;
  padding:7px 10px;
  border:1px solid #e8eef4;
  border-radius:14px;
  background:#f8fbfd;
  color:#385168;
  font-size:9px;
  line-height:1.35;
}

.site-shell .live-comments>span>i {
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 auto;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#60a5fa,#19b6a5);
  color:#fff;
  font-size:7px;
  font-style:normal;
  font-weight:800;
}

.site-shell .live-comments>span>span { display:flex; min-width:0; flex-wrap:wrap; gap:2px 5px; }
.site-shell .live-comments b { color:#102642; font-size:9px; white-space:nowrap; }
.site-shell .live-comments time { color:#8aa0b2; font-size:8px; white-space:nowrap; }

.site-shell .live-reactions {
  position:absolute;
  z-index:5;
  right:14px;
  bottom:14px;
  display:grid;
  gap:8px;
}

.site-shell .live-reactions i {
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 24px rgba(4,37,78,.17);
  font-size:15px;
  font-style:normal;
}

.site-shell .live-demo-foot {
  display:flex;
  min-height:64px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 21px;
}

.site-shell .viewer-stack { display:flex; align-items:center; }
.site-shell .viewer-stack i {
  width:27px;
  height:27px;
  margin-left:-7px;
  border:2px solid #fff;
  border-radius:50%;
  background:linear-gradient(145deg,#76b8ff,#1778ee);
}
.site-shell .viewer-stack i:first-child { margin-left:0; background:linear-gradient(145deg,#ffc97e,#f47191); }
.site-shell .viewer-stack i:nth-child(2) { background:linear-gradient(145deg,#9ee9d8,#13a990); }
.site-shell .viewer-stack i:nth-child(3) { background:linear-gradient(145deg,#cbb8ff,#7965ed); }
.site-shell .viewer-stack b { margin-left:8px; color:#47637b; font-size:9px; }
.site-shell .live-demo-foot>span { display:flex; align-items:center; gap:7px; color:#5f788c; font-size:9px; font-weight:700; }
.site-shell .live-demo-foot>span i { width:8px; height:8px; border-radius:50%; background:#18b99f; box-shadow:0 0 0 5px rgba(24,185,159,.1); }

@media (prefers-reduced-motion:no-preference) {
  .site-shell .order-window {
    animation:hero-window-drift 7.2s cubic-bezier(.45,.05,.55,.95) infinite;
  }

  .site-shell .hero-panel-layer.layer-one {
    animation:demo-layer-one 9s ease-in-out infinite;
  }

  .site-shell .hero-panel-layer.layer-two {
    animation:demo-layer-two 11s ease-in-out infinite;
  }

  .site-shell .floating-platform { animation:hero-platform-float 5.4s ease-in-out infinite; }
  .site-shell .floating-tiktok { animation-delay:-2.7s; }
  .site-shell .floating-platform svg { animation:none; transform:none; }
  .site-shell .order-service-list article.active { animation:hero-service-pulse 4.8s ease-in-out infinite; }
  .site-shell .signal-line.one { animation:demo-signal 6s ease-in-out infinite; }
  .site-shell .signal-line.two { animation:demo-signal 6s 1.5s ease-in-out infinite; }
  .site-shell .facebook-live-demo { animation:live-demo-float 7.5s ease-in-out infinite; }
  .site-shell .live-service-visual::before { animation:live-art-glow 6s ease-in-out infinite; }
  .site-shell .tiktok-service-visual::before { animation:tiktok-art-glow 6.8s ease-in-out infinite; }
  .site-shell .live-reactions i { animation:live-reaction 4s ease-in-out infinite; }
  .site-shell .live-reactions i:nth-child(2) { animation-delay:-1s; }
  .site-shell .live-reactions i:nth-child(3) { animation-delay:-2s; }
  .site-shell .live-reactions i:nth-child(4) { animation-delay:-3s; }

  .site-shell .order-stage:hover {
    top:-42px;
    transform:none;
    filter:none;
  }

  .site-shell .order-stage:hover .order-window {
    animation-play-state:paused;
    translate:0 -5px;
    border-color:rgba(65,154,218,.34);
    box-shadow:0 52px 118px rgba(31,84,126,.17),0 17px 42px rgba(32,86,127,.08);
  }

  .site-shell .live-service-visual:hover .facebook-live-art {
    top:-11px;
    transform:none;
  }

  .site-shell .live-service-visual:hover .facebook-live-art img {
    animation:none;
    filter:none;
  }

  .site-shell .live-service-visual:hover .facebook-live-art::before {
    opacity:1;
    transform:skewX(-7deg) translateX(2%);
  }

  .site-shell .tiktok-service-visual:hover .tiktok-views-art {
    top:-12px;
  }

  .site-shell .tiktok-service-visual:hover .tiktok-views-art::before {
    opacity:1;
    transform:skewX(7deg) translateX(-2%);
  }
}

@keyframes hero-window-drift { 0%,100% { translate:0 0; } 50% { translate:0 -11px; } }
@keyframes hero-platform-float { 0%,100% { translate:0 0; rotate:0deg; } 50% { translate:0 -12px; rotate:-3deg; } }
@keyframes hero-service-pulse { 0%,100% { border-color:rgba(40,132,221,.24); box-shadow:0 16px 38px rgba(20,115,207,.1),inset 0 0 0 1px rgba(32,134,231,.04); } 50% { border-color:rgba(23,158,222,.5); box-shadow:0 20px 46px rgba(20,139,207,.16),inset 0 0 0 1px rgba(32,174,231,.08); } }

@media (min-width:1001px) {
  .site-shell .service-card.blue {
    grid-template-columns:.75fr 1.25fr;
  }

  .site-shell .service-card.ink {
    grid-template-columns:1.25fr .75fr;
  }
}

@keyframes demo-panel-float {
  0%,100% { transform:rotateY(-7deg) rotateX(1deg) rotateZ(1.8deg) translateY(0); }
  50% { transform:rotateY(-6.2deg) rotateX(.7deg) rotateZ(1.35deg) translateY(-9px); }
}

@keyframes demo-layer-one {
  0%,100% { transform:rotate(-3deg) translate(18px,22px); }
  50% { transform:rotate(-2.4deg) translate(24px,15px); }
}

@keyframes demo-layer-two {
  0%,100% { transform:rotate(2.5deg) translate(28px,36px); }
  50% { transform:rotate(1.8deg) translate(20px,42px); }
}

@keyframes demo-icon-float {
  0%,100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(-6px) rotate(2deg); }
}

@keyframes demo-signal {
  0%,100% { opacity:.25; }
  50% { opacity:.52; }
}

@keyframes live-demo-float {
  0%,100% { transform:rotate(2.2deg) translateY(0); }
  50% { transform:rotate(1.4deg) translateY(-8px); }
}

@keyframes live-art-glow {
  0%,100% { opacity:.58; transform:skewX(-10deg) translateX(-4%); }
  50% { opacity:.94; transform:skewX(-8deg) translateX(4%); }
}

@keyframes tiktok-art-glow {
  0%,100% { opacity:.58; transform:skewX(10deg) translateX(4%); }
  50% { opacity:.94; transform:skewX(8deg) translateX(-4%); }
}

@keyframes live-reaction {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-7px) scale(1.06); }
}

@keyframes demo-panel-float-mobile {
  0%,100% { transform:rotate(-1deg) translateY(0); }
  50% { transform:rotate(-.6deg) translateY(-6px); }
}

/* Why Ongmatmedia — clear line rhythm and readable proof points. */
.site-shell .why-layout {
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:center;
  gap:112px;
}

.site-shell .why-layout>div:first-child {
  align-self:center;
}

.site-shell .why-layout>div:first-child h2 {
  max-width:600px;
  margin:0;
  font-size:clamp(47px,3.9vw,60px);
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.018em;
  text-wrap:balance;
}

.site-shell .why-layout>div:first-child .section-copy {
  max-width:520px;
  margin-top:28px;
  font-size:15px;
  line-height:1.78;
}

.site-shell .why-proof {
  min-height:394px;
  padding:42px 44px 28px;
  border-radius:28px;
}

.site-shell .why-proof::before {
  left:44px;
  width:92px;
}

.site-shell .proof-header {
  grid-template-columns:9px minmax(0,1fr);
  column-gap:11px;
  padding-bottom:30px;
}

.site-shell .proof-header .pulse {
  width:8px;
  height:8px;
}

.site-shell .proof-header strong {
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.025em;
}

.site-shell .proof-header small {
  margin-top:4px;
  font-size:13px;
  line-height:1.55;
}

.site-shell .proof-list span {
  min-height:82px;
  padding:0 5px;
  font-size:15px;
  font-weight:500;
  line-height:1.45;
}

.site-shell .proof-list .check {
  width:22px;
  height:22px;
}

/* Legal pages: open reading layout on the page background. */
.site-shell .legal-page {
  position:relative;
  padding:clamp(82px,8vw,128px) 0;
  background:
    radial-gradient(ellipse 36% 42% at 82% 16%,rgba(29,150,229,.08),transparent 72%),
    linear-gradient(180deg,#f8fbff 0%,#fbfdff 58%,#f5fafc 100%);
}

.site-shell .legal-copy {
  width:min(100% - 72px,900px);
  max-width:900px;
  margin-left:max(36px,calc((100% - 1180px) / 2));
  margin-right:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.site-shell .legal-copy .eyebrow {
  margin:0 0 13px;
  color:#1187d6;
}

.site-shell .legal-copy h1 {
  max-width:680px;
  margin:0;
  color:#0b2033;
  font-family:"Manrope","Noto Sans Thai",system-ui,sans-serif;
  font-size:clamp(46px,5.2vw,70px);
  line-height:1.04;
  letter-spacing:-.05em;
}

.site-shell .legal-copy>p {
  max-width:690px;
  margin:14px 0 0;
  color:#5f7285;
  font-size:15px;
  line-height:1.78;
}

.site-shell .legal-copy h2 {
  max-width:690px;
  margin:36px 0 0;
  padding-top:28px;
  border-top:1px solid rgba(94,143,177,.14);
  color:#17334d;
  font-family:"Manrope","Noto Sans Thai",system-ui,sans-serif;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.025em;
}

/* Hero demo clarity: the product preview should read crisply, not like a faded background. */
.site-shell .order-window {
  border-color:rgba(88,145,188,.34);
  background:#fff;
  box-shadow:0 40px 92px rgba(31,84,126,.19),0 16px 38px rgba(32,86,127,.1),inset 0 1px 0 #fff;
  filter:contrast(1.06) saturate(1.04);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.site-shell .order-window-bar {
  background:#fff;
  border-bottom:1px solid rgba(99,146,178,.13);
}

.site-shell .order-window-bar span,
.site-shell .order-window-title h3 {
  color:#0d243a;
}

.site-shell .order-window-body {
  background:linear-gradient(145deg,#fff,#f8fcff);
}

.site-shell .order-window-title span,
.site-shell .order-link>span {
  color:#189680;
  font-weight:800;
}

.site-shell .order-window-title i,
.site-shell .order-window-body footer span {
  color:#4d6377;
  font-weight:700;
}

.site-shell .order-service-list article {
  border:1px solid rgba(108,153,188,.22);
  background:#fff;
  box-shadow:0 14px 34px rgba(36,84,118,.075),inset 0 1px 0 #fff;
}

.site-shell .order-service-list article.active {
  border-color:rgba(24,132,229,.5);
  background:linear-gradient(135deg,#fbfdff,#eaf6ff);
  box-shadow:0 18px 42px rgba(18,119,218,.18),inset 0 0 0 1px rgba(36,139,236,.14);
}

.site-shell .order-service-list small {
  color:#526a7f;
  font-weight:800;
}

.site-shell .order-service-list strong {
  color:#0f263c;
  font-weight:800;
}

.site-shell .order-link>div {
  border:1px solid rgba(110,154,187,.18);
  background:#fff;
  color:#7b8fa1;
}

.site-shell .hero-panel-layer {
  opacity:.45;
}

.site-shell .hero-panel-layer.layer-two {
  opacity:.28;
}

.site-shell .demo-aura {
  opacity:.58;
}

/* Product pages: stronger first-screen service presentation. */
.site-shell .product-hero {
  position:relative;
  overflow:hidden;
  padding:clamp(86px,8vw,128px) 0 clamp(76px,7vw,112px);
  background:
    radial-gradient(ellipse 34% 48% at 82% 18%,rgba(30,136,229,.12),transparent 72%),
    radial-gradient(ellipse 28% 38% at 10% 84%,rgba(24,185,159,.075),transparent 76%),
    linear-gradient(180deg,#f8fbff 0%,#fbfdff 56%,#f4f9fc 100%);
}

.site-shell .product-hero-grid {
  grid-template-columns:minmax(0,820px);
  gap:34px;
  align-items:start;
  justify-content:start;
}

.site-shell .product-hero-copy {
  max-width:740px;
}

.site-shell .product-hero .eyebrow {
  margin:0 0 18px;
  color:#0875e8;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
}

.site-shell .product-hero h1 {
  max-width:760px;
  margin:0;
  color:#081735;
  font-family:"Manrope","Noto Sans Thai",system-ui,sans-serif;
  font-size:clamp(48px,3.8vw,58px);
  line-height:1.22;
  letter-spacing:-.018em;
  text-wrap:balance;
}

.site-shell .product-hero p:not(.eyebrow) {
  max-width:610px;
  margin:24px 0 0;
  color:#52667d;
  font-size:16px;
  line-height:1.78;
}

.site-shell .product-hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

.site-shell .product-hero-actions .button-ghost {
  border-color:rgba(97,142,176,.18);
  background:#fff;
  color:#10233a;
  box-shadow:0 14px 34px rgba(31,84,126,.055);
}

.site-shell .product-spec {
  position:relative;
  min-height:0;
  width:min(100%,780px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.site-shell .product-spec::before {
  content:none;
}

.site-shell .product-spec-head {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:16px;
}

.site-shell .product-spec-head small {
  display:block;
  color:#0875e8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.site-shell .product-spec-head strong {
  display:block;
  margin-top:4px;
  color:#0f263c;
  font-size:19px;
  line-height:1.2;
}

.site-shell .product-icon {
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:54px;
  height:54px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 32px rgba(25,88,137,.12);
}

.site-shell .product-icon svg {
  width:31px;
  height:31px;
}

.site-shell .product-spec-table {
  position:relative;
  z-index:1;
  display:grid;
  margin:22px 0 0;
  border-top:1px solid rgba(82,126,162,.22);
}

.site-shell .product-spec-table>div {
  display:grid;
  grid-template-columns:minmax(136px,.7fr) minmax(0,1fr);
  gap:22px;
  align-items:center;
  min-height:62px;
  padding:14px 0;
  border-bottom:1px solid rgba(82,126,162,.2);
}

.site-shell .product-spec-table dt {
  color:#75889b;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.site-shell .product-spec-table dd {
  margin:0;
  color:#0f263c;
  font-size:18px;
  font-weight:800;
  line-height:1.2;
  text-align:right;
}

.site-shell .product-spec-table dd span {
  display:block;
  margin-top:4px;
  color:#65798c;
  font-size:12px;
  font-weight:700;
}

.site-shell .product-hero-facebook .product-spec {
  background:transparent;
}

.site-shell .product-hero-tiktok .product-spec {
  background:transparent;
}

.site-shell .product-hero-tiktok .product-icon {
  background:#0b0b0f;
}

.site-shell .product-hero-tiktok .product-hero .eyebrow,
.site-shell .product-hero-tiktok .eyebrow {
  color:#0b8bd8;
}

.site-shell .calculator {
  grid-template-columns:minmax(0,1.12fr) minmax(520px,.88fr);
  gap:clamp(32px,4.5vw,78px);
  padding:clamp(40px,4.4vw,58px);
  border-radius:18px;
}

.site-shell .calculator h2 {
  max-width:none;
  font-size:clamp(31px,2.75vw,40px);
  line-height:1.2;
  letter-spacing:-.022em;
  white-space:nowrap;
}

.site-shell .calculator p:not(.eyebrow) {
  margin-top:16px;
  font-size:15px;
  line-height:1.9;
}

.site-shell .calculator-total {
  margin-top:28px;
  font-size:clamp(31px,3vw,42px);
  line-height:1.1;
}

.site-shell .calculator form {
  min-width:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(170px,.8fr);
  gap:18px;
}

.site-shell .calculator[data-calculator-service="tiktok-views"] form {
  grid-template-columns:minmax(0,1fr) minmax(190px,.62fr);
}

.site-shell .calculator label {
  min-width:0;
  gap:10px;
  color:#d3deea;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}

.site-shell .calculator input,
.site-shell .calculator select {
  min-height:62px;
  padding:0 18px;
  border-radius:11px;
  font-size:18px;
  font-weight:650;
  line-height:1.25;
}

.site-shell .calculator .button {
  width:100%;
  justify-content:center;
  min-width:0;
  min-height:62px;
  padding:0 32px;
  border-radius:11px;
  font-size:17px;
  font-weight:800;
}

/* Roomier display typography for Vietnamese accents and multi-line titles. */
.site-shell .hero h1 {
  line-height:1.16;
}

.site-shell .services-section .section-heading h2,
.site-shell .section-heading h2,
.site-shell .why-layout>div:first-child h2,
.site-shell .pricing-layout h2,
.site-shell .faq-layout h2,
.site-shell .reseller-copy h2 {
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(48px,3.8vw,58px);
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.018em;
}

.site-shell .cta-box h2,
.site-shell .service-card h3 {
  line-height:1.22;
  letter-spacing:-.018em;
}

/* Readable supporting type across the public landing page. */
.site-shell .eyebrow {
  font-size:12px;
}

.site-shell .main-nav a,
.site-shell .login-link,
.site-shell .language-menu summary,
.site-shell .button-sm {
  font-size:14px;
}

.site-shell .header .button-sm {
  box-shadow:none;
}

.site-shell .section-heading>p:last-child,
.site-shell .section-copy,
.site-shell .service-card p,
.site-shell .step p,
.site-shell .faq-list p,
.site-shell .cta-box p {
  font-size:15px;
}

.site-shell .service-copy>a,
.site-shell .text-link,
.site-shell .faq-list summary {
  font-size:15px;
}

.site-shell #policies {
  padding-top:92px;
}

.site-shell #policies .brand {
  font-size:22px;
}

.site-shell #policies .footer-grid {
  gap:52px;
  padding-bottom:58px;
}

.site-shell #policies .footer-grid p {
  max-width:280px;
  margin-top:18px;
  font-size:15px;
  line-height:1.75;
}

.site-shell #policies .footer-grid>div:not(:first-child) {
  gap:14px;
}

.site-shell #policies .footer-grid strong {
  margin-bottom:5px;
  font-size:14px;
  line-height:1.5;
}

.site-shell #policies .footer-grid a:not(.brand) {
  font-size:15px;
  line-height:1.55;
}

.site-shell #policies .footer-bottom {
  padding-top:24px;
  font-size:13px;
  line-height:1.6;
}

/* Pricing page — calm editorial header and compact, legible service rows. */
.site-shell .pricing-page {
  position:relative;
  min-height:760px;
  padding:170px 0 180px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 42% 34% at 88% 10%,rgba(29,191,176,.09),transparent 74%),
    radial-gradient(ellipse 42% 38% at 4% 48%,rgba(33,126,239,.085),transparent 76%),
    linear-gradient(180deg,#f8fbfe 0%,#f4f9fd 46%,#fbfdfd 100%);
}

.site-shell .pricing-page::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(61,125,166,.025) 119px 120px);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}

.site-shell .pricing-page>.container {
  position:relative;
  z-index:1;
}

.site-shell .pricing-page .section-heading {
  max-width:720px;
  margin-bottom:54px;
}

.site-shell .pricing-page .section-heading h2 {
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(48px,3.8vw,58px);
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.018em;
}

.site-shell .pricing-page .section-heading>p:last-child {
  max-width:620px;
  font-size:16px;
  line-height:1.75;
}

.site-shell .currency-tabs {
  display:inline-flex;
  min-height:48px;
  margin-bottom:20px;
  padding:4px;
  border:1px solid rgba(115,153,181,.2);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 32px rgba(35,79,111,.06),inset 0 1px 0 #fff;
  backdrop-filter:blur(14px);
}

.site-shell .currency-tabs a {
  display:grid;
  min-width:66px;
  place-items:center;
  padding:0 16px;
  border-radius:10px;
  color:#718398;
  font-size:13px;
  font-weight:700;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}

.site-shell .currency-tabs a:hover { color:#087bea; }
.site-shell .currency-tabs a.active {
  background:linear-gradient(135deg,#087bea,#169bd6);
  box-shadow:0 8px 20px rgba(8,123,234,.2);
  color:#fff;
}

.site-shell .pricing-table {
  overflow:hidden;
  border:1px solid rgba(105,148,179,.18);
  border-radius:26px;
  background:rgba(255,255,255,.82);
  box-shadow:0 34px 90px rgba(34,81,116,.1),inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
}

.site-shell .pricing-row {
  grid-template-columns:minmax(0,42fr) minmax(0,18fr) minmax(0,18fr) minmax(0,22fr);
  column-gap:0;
  min-height:112px;
  padding:0 34px;
  border-color:rgba(115,153,181,.14);
}

.site-shell .pricing-row:nth-child(2) {
  background:linear-gradient(90deg,rgba(231,243,255,.72),rgba(255,255,255,.22) 72%);
}

.site-shell .pricing-row:nth-child(3) {
  background:linear-gradient(90deg,rgba(238,251,249,.72),rgba(255,248,251,.3) 74%);
}

.site-shell .pricing-row.pricing-heading {
  min-height:58px;
  background:rgba(248,251,253,.72);
  color:#8291a4;
  font-size:11px;
  letter-spacing:.09em;
}

.site-shell .pricing-row>span:first-child {
  gap:16px;
  color:#13233c;
  font-size:16px;
  line-height:1.4;
}

.site-shell .pricing-row>* { min-width:0; padding-inline:20px; }

.site-shell .pricing-table .pricing-row .platform-logo {
  width:46px;
  height:46px;
  flex:0 0 46px;
  object-fit:contain;
}

.site-shell .pricing-row:not(.pricing-heading)>span:nth-child(2) {
  justify-self:stretch;
  text-align:left;
  color:#667a8e;
  font-size:14px;
  line-height:1.5;
}

.site-shell .pricing-row strong {
  justify-self:stretch;
  text-align:left;
  color:#102642;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.025em;
  white-space:nowrap;
}

.site-shell .pricing-heading>span:nth-child(2),
.site-shell .pricing-heading>span:nth-child(3) {
  justify-self:stretch;
  text-align:left;
}

.site-shell .pricing-row>a { justify-self:center; }

.site-shell .pricing-row>a {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 18px;
  border-radius:12px;
  background:#087bea;
  box-shadow:0 12px 25px rgba(8,123,234,.18);
  color:#fff;
  font-size:13px;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}

.site-shell .pricing-row>a:hover {
  transform:translateY(-2px);
  background:#066fd8;
  box-shadow:0 16px 30px rgba(8,123,234,.24);
}

.site-shell .pricing-row>a .arrow { width:16px; }
.site-shell .pricing-page .price-source {
  margin:18px 4px 0;
  color:#74879a;
  font-size:13px;
  line-height:1.65;
}

/* Reseller page — bright brand surface with a focused technical visual. */
.site-shell .reseller-page {
  position:relative;
  min-height:700px;
  padding:160px 0 150px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 46% 62% at 89% 40%,rgba(26,194,178,.13),transparent 72%),
    radial-gradient(ellipse 42% 58% at 5% 76%,rgba(30,126,240,.11),transparent 74%),
    linear-gradient(140deg,#f8fbff 0%,#eef7fd 56%,#eefaf8 100%);
  color:#0b1736;
}

.site-shell .reseller-page::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 119px,rgba(58,123,164,.03) 119px 120px),
    linear-gradient(124deg,transparent 20%,rgba(255,255,255,.62) 50%,transparent 78%);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
}

.site-shell .reseller-page-grid {
  position:relative;
  z-index:1;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:112px;
}

.site-shell .reseller-page .eyebrow { color:#087bea; }
.site-shell .reseller-page h1 {
  max-width:660px;
  color:#0b1736;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(48px,3.8vw,58px);
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.018em;
}

.site-shell .reseller-page p:not(.eyebrow) {
  max-width:610px;
  margin:28px 0 34px;
  color:#52677b;
  font-size:16px;
  line-height:1.75;
}

.site-shell .reseller-page .hero-actions { gap:14px; }
.site-shell .reseller-page .button-light {
  border-color:#087bea;
  background:linear-gradient(105deg,#087bea,#0aa5c6);
  box-shadow:0 16px 34px rgba(8,123,234,.2);
  color:#fff;
}

.site-shell .reseller-page .button-outline {
  border:1px solid rgba(81,126,160,.22);
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94);
  color:#17314c;
  backdrop-filter:blur(12px);
}

.site-shell .reseller-page .button-outline:hover {
  border-color:rgba(8,123,234,.34);
  background:#fff;
  color:#087bea;
}

.site-shell .reseller-page .api-snippet {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(92,143,181,.24);
  border-radius:24px;
  background:linear-gradient(145deg,#0b1728,#10283a 68%,#103135);
  box-shadow:0 36px 90px rgba(34,83,119,.22),inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(6px);
}

.site-shell .reseller-page .api-snippet::before {
  content:"";
  position:absolute;
  top:18px;
  right:22px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#30d5c2;
  box-shadow:-16px 0 #4ea3ff,-32px 0 #ff7c8e;
}

.site-shell .reseller-page .api-snippet small {
  padding:20px 24px;
  border-color:rgba(160,197,221,.1);
  color:#8fa7bb;
  font-size:12px;
}

.site-shell .reseller-page .api-snippet pre {
  padding:36px 28px 38px;
  color:#d8e7f2;
  font-size:14px;
  line-height:2;
}

.site-shell .reseller-page .api-snippet>span {
  padding:17px 24px;
  border-color:rgba(160,197,221,.1);
  background:rgba(7,18,31,.18);
  color:#67e4d3;
  font-size:12px;
}

.site-shell .api-integration-visual {
  overflow:hidden;
  border:1px solid rgba(103,150,184,.2);
  border-radius:28px;
  background:rgba(255,255,255,.7);
  box-shadow:0 38px 100px rgba(34,83,119,.15),inset 0 1px 0 #fff;
  backdrop-filter:blur(18px);
}

.site-shell .api-integration-visual>header {
  display:flex;
  min-height:64px;
  align-items:center;
  justify-content:space-between;
  padding:0 25px;
  border-bottom:1px solid rgba(105,150,182,.14);
}

.site-shell .api-integration-visual>header>strong {
  color:#18324c;
  font-size:13px;
  letter-spacing:.04em;
}

.site-shell .api-integration-visual>header>span {
  display:flex;
  align-items:center;
  gap:9px;
  color:#467082;
  font-size:11px;
  font-weight:700;
}

.site-shell .api-integration-visual>header i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#18b99f;
  box-shadow:0 0 0 6px rgba(24,185,159,.1);
}

.site-shell .integration-flow {
  display:grid;
  grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:25px;
}

.site-shell .integration-flow>div {
  display:grid;
  min-height:96px;
  align-content:center;
  gap:8px;
  padding:16px;
  border:1px solid rgba(104,149,181,.16);
  border-radius:16px;
  background:linear-gradient(145deg,#f8fbff,#edf5fa);
}

.site-shell .integration-flow>div.active {
  border-color:rgba(19,151,211,.26);
  background:linear-gradient(145deg,#eaf6ff,#e8f9f6);
  box-shadow:0 12px 30px rgba(22,127,185,.1);
}

.site-shell .integration-flow small {
  color:#1d91e9;
  font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.site-shell .integration-flow strong {
  color:#18324c;
  font-size:12px;
  line-height:1.45;
}

.site-shell .integration-flow>span {
  display:grid;
  place-items:center;
  color:#159fbe;
}

.site-shell .integration-flow>span svg { width:20px; height:20px; }

.site-shell .reseller-page .api-integration-visual .api-snippet {
  margin:0 25px 25px;
  border-radius:18px;
  box-shadow:0 22px 55px rgba(27,67,96,.18),inset 0 1px 0 rgba(255,255,255,.06);
  transform:none;
}

.site-shell .reseller-page .api-integration-visual .api-snippet::before { display:none; }
.site-shell .reseller-page .api-integration-visual .api-snippet small { padding:14px 18px; font-size:10px; }
.site-shell .reseller-page .api-integration-visual .api-snippet pre { padding:20px 18px 22px; font-size:11px; line-height:1.8; }
.site-shell .reseller-page .api-integration-visual .api-snippet>span { padding:12px 18px; font-size:10px; }

.site-shell .api-integration-visual,
.site-shell .integration-flow>div,
.site-shell .integration-flow>span svg {
  transition:transform .65s cubic-bezier(.2,.8,.2,1),border-color .45s ease,box-shadow .45s ease;
}

@media (prefers-reduced-motion:no-preference) {
  .site-shell .api-integration-visual {
    animation:api-visual-float 7s ease-in-out infinite;
    will-change:transform;
  }

  .site-shell .api-integration-visual:hover {
    animation-play-state:paused;
    transform:translateY(-8px);
    box-shadow:0 48px 115px rgba(34,83,119,.19),inset 0 1px 0 #fff;
  }

  .site-shell .integration-flow>div {
    animation:api-node-signal 6s ease-in-out infinite;
  }

  .site-shell .integration-flow>div:nth-of-type(2) { animation-delay:-4s; }
  .site-shell .integration-flow>div:nth-of-type(3) { animation-delay:-2s; }

  .site-shell .integration-flow>span svg {
    animation:api-arrow-flow 2.4s ease-in-out infinite;
  }

  .site-shell .integration-flow>span:nth-of-type(2) svg { animation-delay:-1.2s; }

  .site-shell .api-integration-visual>header i {
    animation:api-status-pulse 2.2s ease-out infinite;
  }
}

@keyframes api-visual-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-9px); }
}

@keyframes api-node-signal {
  0%,58%,100% { transform:translateY(0); border-color:rgba(104,149,181,.16); box-shadow:none; }
  68%,80% { transform:translateY(-4px); border-color:rgba(23,153,210,.32); box-shadow:0 14px 30px rgba(22,127,185,.11); }
}

@keyframes api-arrow-flow {
  0%,100% { transform:translateX(-3px); opacity:.45; }
  50% { transform:translateX(4px); opacity:1; }
}

@keyframes api-status-pulse {
  0% { box-shadow:0 0 0 0 rgba(24,185,159,.28); }
  65%,100% { box-shadow:0 0 0 9px rgba(24,185,159,0); }
}

.site-shell .reseller-page + #api {
  position:relative;
  min-height:650px;
  padding:155px 0 165px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 34% 48% at 88% 48%,rgba(32,192,173,.075),transparent 74%),
    linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
}

.site-shell .reseller-page + #api::before {
  content:"";
  position:absolute;
  right:-180px;
  bottom:-250px;
  width:620px;
  height:620px;
  border:1px solid rgba(37,146,190,.07);
  border-radius:50%;
  box-shadow:0 0 0 90px rgba(28,137,208,.018),0 0 0 180px rgba(24,188,165,.014);
}

.site-shell .reseller-page + #api>.container {
  display:grid;
  position:relative;
  z-index:1;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;
  gap:110px;
}

.site-shell .reseller-page + #api .section-heading {
  max-width:590px;
  margin:0;
}

.site-shell .reseller-page + #api .section-heading h2 {
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(48px,3.8vw,58px);
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.018em;
}

.site-shell .reseller-page + #api .section-heading>p:last-child {
  font-size:15px;
  line-height:1.75;
}

.site-shell .api-methods {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:22px;
  border:1px solid rgba(109,150,179,.18);
  border-radius:26px;
  background:rgba(255,255,255,.76);
  box-shadow:0 30px 80px rgba(34,78,111,.09),inset 0 1px 0 #fff;
  backdrop-filter:blur(16px);
}

.site-shell .api-methods span {
  display:grid;
  grid-template-columns:9px minmax(0,1fr);
  grid-template-rows:auto auto;
  min-height:76px;
  align-items:center;
  column-gap:13px;
  row-gap:4px;
  padding:0 20px;
  border:1px solid rgba(111,151,180,.15);
  border-radius:16px;
  background:linear-gradient(135deg,#f8fbff,#f1f7fb);
  color:#263d55;
  font:600 14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.site-shell .api-methods span::before {
  content:"";
  grid-row:1/3;
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:#168df0;
  box-shadow:0 0 0 6px rgba(22,141,240,.09);
}

.site-shell .api-methods span:nth-child(even)::before { background:#14ad98; box-shadow:0 0 0 6px rgba(20,173,152,.09); }
.site-shell .api-methods span:last-child { grid-column:1/-1; }
.site-shell .api-methods small { align-self:end; color:#486177; font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-size:13px; font-weight:650; line-height:1.35; }
.site-shell .api-methods code { align-self:start; color:#1687df; font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Reseller signature visual — an API constellation rather than another dashboard card. */
.site-shell .reseller-network {
  position:relative;
  min-height:560px;
  isolation:isolate;
}

.site-shell .reseller-network::before {
  content:"";
  position:absolute;
  z-index:-2;
  inset:3% 1% 2%;
  border-radius:48% 52% 46% 54%/52% 43% 57% 48%;
  background:radial-gradient(circle at 50% 48%,rgba(23,146,223,.13),transparent 28%),radial-gradient(circle at 68% 44%,rgba(22,190,169,.09),transparent 44%);
  filter:blur(4px);
}

.site-shell .network-lines {
  position:absolute;
  z-index:-1;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

.site-shell .network-lines path {
  fill:none;
  stroke:#5fb4d4;
  stroke-width:1.5;
  stroke-dasharray:7 9;
  opacity:.5;
}

.site-shell .network-lines circle {
  fill:#18b99f;
  filter:drop-shadow(0 0 6px rgba(24,185,159,.7));
}

.site-shell .network-status {
  display:flex;
  position:absolute;
  top:22px;
  left:28px;
  align-items:center;
  gap:9px;
  color:#4d7184;
  font-size:11px;
  font-weight:750;
}

.site-shell .network-status i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#18b99f;
  box-shadow:0 0 0 6px rgba(24,185,159,.1);
}

.site-shell .network-node,
.site-shell .network-hub,
.site-shell .network-request {
  position:absolute;
  border:1px solid rgba(91,143,180,.2);
  background:rgba(255,255,255,.78);
  box-shadow:0 24px 60px rgba(35,83,116,.11),inset 0 1px 0 #fff;
  backdrop-filter:blur(16px);
}

.site-shell .network-node {
  display:grid;
  width:168px;
  min-height:104px;
  align-content:center;
  gap:5px;
  padding:16px 18px;
  border-radius:18px;
}

.site-shell .network-node.client { top:226px; left:0; }
.site-shell .network-node.services { top:64px; right:5px; }
.site-shell .network-node.orders { top:226px; right:-8px; }
.site-shell .network-node.balance { right:5px; bottom:48px; }

.site-shell .network-node small {
  color:#1687df;
  font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}

.site-shell .network-node strong { color:#18324c; font-size:12px; line-height:1.35; }
.site-shell .network-node code { color:#6a8092; font:600 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }

.site-shell .network-hub {
  display:grid;
  top:184px;
  left:50%;
  width:162px;
  height:162px;
  place-items:center;
  align-content:center;
  gap:4px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:linear-gradient(145deg,#087bea,#0aa5c6 58%,#18ad96);
  box-shadow:0 30px 75px rgba(15,116,181,.28),inset 0 1px 0 rgba(255,255,255,.34);
  transform:translateX(-50%);
  color:#fff;
}

.site-shell .network-hub>span {
  position:relative;
  display:grid;
  width:54px;
  height:54px;
  place-items:center;
  border-radius:17px;
  background:#fff;
  box-shadow:0 12px 28px rgba(5,54,91,.18);
}

.site-shell .network-hub .logo { width:42px; height:42px; }
.site-shell .network-hub small { margin-top:5px; color:rgba(255,255,255,.78); font-size:8px; font-weight:800; letter-spacing:.11em; }
.site-shell .network-hub strong { font-size:18px; letter-spacing:-.02em; }

.site-shell .network-request {
  display:grid;
  right:170px;
  bottom:0;
  left:165px;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:50px;
  padding:0 15px;
  border-color:rgba(79,130,166,.18);
  border-radius:14px;
  background:rgba(9,27,43,.94);
  box-shadow:0 18px 42px rgba(19,62,92,.2);
  color:#cfe0ec;
}

.site-shell .network-request span { color:#7fa0b5; font:650 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-shell .network-request code { overflow:hidden; color:#dce8f0; font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.site-shell .network-request b { display:flex; align-items:center; gap:5px; color:#57d9c7; font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.site-shell .network-request .check { width:12px; height:12px; }

.site-shell .reseller-page + #api {
  color:#f3f8fc;
  background:
    radial-gradient(ellipse 42% 58% at 90% 30%,rgba(21,182,166,.14),transparent 72%),
    radial-gradient(ellipse 36% 48% at 5% 78%,rgba(22,126,232,.13),transparent 74%),
    linear-gradient(135deg,#071421,#0b1d2b 58%,#0b2529);
}

.site-shell .reseller-page + #api::before { border-color:rgba(72,176,197,.1); box-shadow:0 0 0 90px rgba(31,134,213,.025),0 0 0 180px rgba(25,184,159,.02); }
.site-shell .reseller-page + #api .section-heading h2 { color:#f5fbff; }
.site-shell .reseller-page + #api .section-heading>p:last-child { color:#afc1cf; }
.site-shell .reseller-page + #api .eyebrow { color:#66e1d0; }
.site-shell .reseller-page + #api .api-methods { border-color:rgba(129,174,201,.14); background:rgba(11,29,43,.62); box-shadow:0 35px 90px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05); }
.site-shell .reseller-page + #api .api-methods span { border-color:rgba(129,174,201,.13); background:linear-gradient(135deg,rgba(20,46,65,.92),rgba(15,52,54,.8)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.site-shell .reseller-page + #api .api-methods small { color:#e4eef5; }
.site-shell .reseller-page + #api .api-methods code { color:#65c8ff; }

/* Reseller growth story — one operating pipeline, not another dashboard grid. */
.site-shell .api-scale-visual {
  position:relative;
  min-height:470px;
  overflow:hidden;
  border:1px solid rgba(116,185,205,.18);
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 33%,rgba(25,181,168,.12),transparent 36%),
    linear-gradient(145deg,rgba(14,38,54,.94),rgba(9,29,42,.78));
  box-shadow:0 42px 90px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055);
}

.site-shell .api-scale-visual::before {
  content:"";
  position:absolute;
  top:0;
  left:-35%;
  width:35%;
  height:1px;
  background:linear-gradient(90deg,transparent,#4ae2d0,transparent);
}

.site-shell .api-scale-visual>header {
  display:flex;
  min-height:67px;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid rgba(123,176,199,.13);
  color:#7f9bad;
  font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
}

.site-shell .api-scale-visual>header b { display:flex; align-items:center; gap:9px; color:#8fd8cc; font-weight:650; letter-spacing:0; }
.site-shell .api-scale-visual>header i { width:7px; height:7px; border-radius:50%; background:#23d0b7; box-shadow:0 0 0 6px rgba(35,208,183,.09); }

.site-shell .scale-pipeline {
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px minmax(0,1.08fr) 42px minmax(0,1fr);
  align-items:center;
  padding:45px 28px 38px;
}

.site-shell .scale-pipeline article { position:relative; min-width:0; padding:17px 12px 17px 19px; border-left:1px solid rgba(112,179,203,.24); }
.site-shell .scale-pipeline article::before { content:""; position:absolute; top:17px; bottom:17px; left:-1px; width:2px; background:linear-gradient(#2a99e8,#28d2ba); transform:scaleY(.38); transform-origin:top; }
.site-shell .scale-pipeline em { position:absolute; top:-11px; right:10px; color:rgba(139,183,202,.18); font:700 38px/1 "Manrope",sans-serif; letter-spacing:-.07em; }
.site-shell .scale-pipeline small { display:block; margin-bottom:9px; color:#55b8e9; font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.site-shell .scale-pipeline strong { display:block; max-width:150px; color:#ecf6fb; font-size:13px; line-height:1.5; }
.site-shell .scale-pipeline .pipeline-core { padding-block:27px; border-left-color:#28d2ba; }
.site-shell .scale-pipeline .pipeline-core::before { transform:scaleY(1); box-shadow:0 0 18px rgba(40,210,186,.4); }
.site-shell .pipeline-arrow { display:grid; place-items:center; color:#4387a8; }
.site-shell .pipeline-arrow .arrow { width:17px; }

.site-shell .api-command-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 28px 28px;
  border-top:1px solid rgba(124,177,199,.15);
  border-bottom:1px solid rgba(124,177,199,.11);
}

.site-shell .api-command-list span {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:58px;
  padding:0 15px;
  border-bottom:1px solid rgba(124,177,199,.1);
}

.site-shell .api-command-list span:nth-child(odd) { border-right:1px solid rgba(124,177,199,.1); }
.site-shell .api-command-list span:last-child { grid-column:1/-1; border-right:0; border-bottom:0; }
.site-shell .api-command-list b { color:#4bb9f1; font:750 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-shell .api-command-list strong { overflow:hidden; color:#dceaf1; font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.site-shell .api-command-list code { color:#5e8599; font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }

@media (prefers-reduced-motion:no-preference) {
  .site-shell .api-scale-visual::before { animation:scale-scan 5.8s ease-in-out infinite; }
  .site-shell .scale-pipeline article::before { animation:pipeline-rise 4.8s ease-in-out infinite; }
  .site-shell .scale-pipeline article:nth-of-type(2)::before { animation-delay:-1.6s; }
  .site-shell .scale-pipeline article:nth-of-type(3)::before { animation-delay:-3.2s; }
  .site-shell .pipeline-arrow .arrow { animation:api-arrow-flow 2.4s ease-in-out infinite; }
  .site-shell .api-scale-visual>header i { animation:api-status-pulse 2.2s ease-out infinite; }
}

@keyframes scale-scan { 0% { left:-35%; opacity:0; } 16%,72% { opacity:1; } 100% { left:100%; opacity:0; } }
@keyframes pipeline-rise { 0%,100% { transform:scaleY(.38); opacity:.55; } 50% { transform:scaleY(1); opacity:1; } }

@media (prefers-reduced-motion:no-preference) {
  .site-shell .network-lines path { animation:network-dash 12s linear infinite; }
  .site-shell .network-lines circle { animation:network-pulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  .site-shell .network-lines circle:nth-of-type(2) { animation-delay:-.7s; }
  .site-shell .network-lines circle:nth-of-type(3) { animation-delay:-1.4s; }
  .site-shell .network-lines circle:nth-of-type(4) { animation-delay:-2.1s; }
  .site-shell .network-hub { animation:network-hub-float 6s ease-in-out infinite; }
  .site-shell .network-node { transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease; }
  .site-shell .network-node:hover { transform:translateY(-7px); border-color:rgba(23,153,210,.34); box-shadow:0 30px 68px rgba(35,83,116,.16),inset 0 1px 0 #fff; }
  .site-shell .network-status i { animation:api-status-pulse 2.2s ease-out infinite; }
}

@keyframes network-dash { to { stroke-dashoffset:-160; } }
@keyframes network-pulse { 0%,100% { transform:scale(.75); opacity:.45; } 50% { transform:scale(1.45); opacity:1; } }
@keyframes network-hub-float { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-9px); } }

/* Reseller section — light, technical, and consistent with the page palette. */
.site-shell .reseller-section {
  border-block:1px solid rgba(83,145,184,.12);
  background:
    linear-gradient(112deg,rgba(25,126,238,.075),transparent 38%),
    linear-gradient(292deg,rgba(30,194,171,.105),transparent 42%),
    linear-gradient(180deg,#fafdff 0%,#f2f9fd 58%,#f4fbf9 100%);
}

.site-shell .reseller-section::before {
  background:
    repeating-linear-gradient(90deg,transparent 0 119px,rgba(55,126,169,.04) 119px 120px),
    linear-gradient(130deg,transparent 14%,rgba(255,255,255,.72) 48%,transparent 78%);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}

.site-shell .reseller {
  background:transparent;
  overflow:visible;
  color:#0b1736;
}

.site-shell .reseller::before {
  opacity:.18;
  border-color:rgba(27,157,187,.16);
  box-shadow:0 0 0 78px rgba(31,128,235,.022),0 0 0 156px rgba(30,191,168,.018);
  pointer-events:none;
}

.site-shell .reseller-copy .eyebrow {
  color:#087bea;
}

.site-shell .reseller-copy h2 {
  max-width:560px;
  margin:0;
  color:#0b1736;
}

.site-shell .reseller-copy>p:not(.eyebrow) {
  color:#52677b;
}

.site-shell .reseller-copy .button-light {
  border-color:#087bea;
  background:linear-gradient(105deg,#087bea,#0aa5c6);
  box-shadow:0 14px 30px rgba(8,123,234,.18);
  color:#fff;
}

.site-shell .reseller-copy .button-light:hover {
  background:linear-gradient(105deg,#066fd8,#0797b8);
  color:#fff;
}

.site-shell .code-visual {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(174,216,238,.72);
  border-radius:24px;
  background:
    radial-gradient(circle at 0% 0%,rgba(129,207,255,.5),transparent 36%),
    radial-gradient(circle at 100% 0%,rgba(88,230,218,.42),transparent 38%),
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(230,247,255,.9) 54%,rgba(214,255,247,.86));
  box-shadow:0 34px 90px rgba(38,124,181,.2),inset 0 1px 0 rgba(255,255,255,.9);
}

.site-shell .code-visual::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(132deg,rgba(255,255,255,.82),transparent 34%,rgba(10,201,191,.16)),
    radial-gradient(ellipse 68% 46% at 102% 42%,rgba(10,190,206,.42),transparent 70%);
  pointer-events:none;
}

.site-shell .code-bar {
  height:50px;
  padding:0 20px;
  border-bottom:1px solid rgba(134,190,222,.26);
  background:rgba(255,255,255,.56);
}

.site-shell .code-bar span {
  width:8px;
  height:8px;
}

.site-shell .code-bar span:nth-child(1) { background:#ff6b6b; }
.site-shell .code-bar span:nth-child(2) { background:#ffd166; }
.site-shell .code-bar span:nth-child(3) { background:#28d9a5; }

.site-shell .code-bar small {
  margin-left:auto;
  color:#4b6f96;
  font-size:11px;
  font-weight:700;
}

.site-shell .code-meta {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:18px 22px 0;
}

.site-shell .code-meta span,
.site-shell .code-meta code {
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 11px;
  border:1px solid rgba(137,210,236,.5);
  border-radius:999px;
  background:rgba(212,248,255,.78);
  color:#087bea;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}

.site-shell .code-meta strong {
  color:#061738;
  font-size:18px;
  letter-spacing:-.018em;
}

.site-shell .code-meta code {
  color:#0d2a48;
  font-family:"Manrope",system-ui,sans-serif;
  letter-spacing:0;
  background:rgba(239,253,255,.78);
}

.site-shell .code-visual pre {
  position:relative;
  overflow:hidden;
  margin:18px 18px 0;
  padding:22px;
  border:1px solid rgba(119,184,232,.2);
  border-radius:18px;
  background:
    radial-gradient(ellipse 58% 42% at 100% 100%,rgba(0,210,196,.62),transparent 72%),
    radial-gradient(ellipse 58% 56% at 84% 10%,rgba(35,126,255,.17),transparent 72%),
    linear-gradient(145deg,#071536,#0b2148);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 36px rgba(4,28,69,.14);
  color:#dcecff;
  font-size:13px;
  line-height:1.9;
}

.site-shell .code-visual pre>span {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin-right:7px;
  padding:0 8px;
  border-radius:7px;
  background:linear-gradient(135deg,#087bea,#0aa5ff);
  color:#fff;
  font-weight:800;
  box-shadow:0 8px 18px rgba(8,123,234,.28);
}

.site-shell .code-visual b { color:#b9d6ec; }
.site-shell .code-visual i { color:#83f2df; }
.site-shell .code-visual em { color:#ffd987; }

.site-shell .api-success {
  gap:10px;
  margin:18px;
  padding:14px 16px;
  border:1px solid rgba(119,230,201,.45);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(219,255,245,.9),rgba(226,255,250,.72));
  color:#0d594e;
  font:700 12px/1.3 "Manrope",system-ui,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.site-shell .api-success .check {
  width:18px;
  height:18px;
  color:#51f0c9;
}

.site-shell .api-success span {
  color:#067a66;
  font-weight:800;
}

.site-shell .api-success strong {
  margin-left:auto;
  color:#0d3b35;
  font-size:12px;
}

.site-shell .api-doc-card {
  min-height:420px;
  border-color:rgba(197,221,237,.86);
  background:
    radial-gradient(ellipse 56% 64% at 95% 4%,rgba(47,205,220,.075),transparent 74%),
    radial-gradient(ellipse 42% 44% at 0% 0%,rgba(8,123,234,.055),transparent 74%),
    linear-gradient(145deg,#ffffff 0%,#fbfdff 58%,#f8fcff 100%);
  box-shadow:0 38px 90px rgba(39,91,126,.11),inset 0 1px 0 #fff;
  color:#0b1736;
}

.site-shell .api-doc-card::before {
  background:
    radial-gradient(ellipse 42% 60% at 90% 92%,rgba(16,198,215,.045),transparent 76%),
    linear-gradient(120deg,rgba(255,255,255,.9),transparent 56%);
}

.site-shell .api-doc-card .code-bar {
  height:46px;
  border-color:rgba(166,204,226,.32);
  background:rgba(255,255,255,.82);
}

.site-shell .api-doc-card .code-bar small { color:#4c6d90; }

.site-shell .api-doc-shell {
  display:grid;
  grid-template-columns:188px minmax(0,1fr);
  min-height:374px;
}

.site-shell .api-doc-sidebar {
  padding:24px 15px;
  border-right:1px solid rgba(141,191,222,.28);
  background:linear-gradient(180deg,rgba(239,249,255,.86),rgba(255,255,255,.58));
}

.site-shell .api-doc-brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:#0b1736;
  font-size:14px;
  font-weight:800;
}

.site-shell .api-doc-logo {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  overflow:visible;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.site-shell .api-doc-logo .logo {
  width:28px;
  height:28px;
  display:block;
  border-radius:0;
  object-fit:cover;
}

.site-shell .api-doc-sidebar p {
  margin:16px 0 14px;
  color:#42637f;
  font-size:16px;
}

.site-shell .api-doc-sidebar nav {
  display:grid;
  gap:8px;
}

.site-shell .api-doc-sidebar a {
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:10px;
  color:#213a54;
  font-size:13px;
  font-weight:650;
}

.site-shell .api-doc-sidebar a>svg {
  flex:0 0 auto;
  width:17px;
  height:17px;
  color:#5f7d99;
}

.site-shell .api-doc-sidebar a.active {
  border-color:rgba(8,123,234,.18);
  background:linear-gradient(135deg,rgba(226,246,255,.9),rgba(240,253,255,.82));
  color:#087bea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 10px 20px rgba(8,123,234,.08);
}

.site-shell .api-doc-sidebar .check {
  width:17px;
  height:17px;
  padding:3px;
  border-radius:999px;
  background:#11b981;
  color:#fff;
}

.site-shell .api-doc-main {
  min-width:0;
  padding:24px 14px 18px;
}

.site-shell .api-doc-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 22px;
}

.site-shell .api-doc-head h3 {
  margin:0;
  color:#0b1736;
  font-size:22px;
  line-height:1.08;
  letter-spacing:-.02em;
}

.site-shell .api-doc-head p {
  margin:8px 0 0;
  color:#60758a;
  font-size:12px;
}

.site-shell .endpoint-pill {
  display:flex;
  align-items:center;
  overflow:hidden;
  min-height:34px;
  border:1px solid rgba(118,176,216,.42);
  border-radius:8px;
  background:rgba(255,255,255,.76);
}

.site-shell .endpoint-pill span {
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:0 12px;
  background:linear-gradient(135deg,#087bea,#0a9bff);
  color:#fff;
  font-size:12px;
  font-weight:850;
}

.site-shell .endpoint-pill code,
.site-shell .endpoint-pill small {
  padding:0 10px;
  color:#17334d;
  font-family:"Manrope",system-ui,sans-serif;
  font-size:12px;
}

.site-shell .endpoint-pill small { color:#8fa9bf; }

.site-shell .api-doc-tabs {
  display:flex;
  gap:34px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(112,154,191,.24);
}

.site-shell .api-doc-tabs span {
  position:relative;
  padding:0 0 12px;
  color:#60758a;
  font-size:12px;
  font-weight:700;
}

.site-shell .api-doc-tabs span.active {
  color:#28caff;
}

.site-shell .api-doc-tabs span.active::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:#22c7ff;
  box-shadow:0 0 20px rgba(34,199,255,.48);
}

.site-shell .api-doc-card .api-request {
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow-x:auto;
  margin:0;
  padding:17px 18px;
  display:grid;
  gap:5px;
  border-color:rgba(58,103,148,.28);
  border-style:solid;
  border-width:1px;
  border-radius:14px;
  background:
    radial-gradient(ellipse 48% 70% at 96% 100%,rgba(13,129,177,.18),transparent 72%),
    linear-gradient(145deg,#273343,#344251 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  color:#f0f7ff;
  font-size:13px;
  line-height:1.75;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.site-shell .api-doc-card .api-code-line {
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  column-gap:12px;
  align-items:baseline;
  min-width:0;
  min-height:24px;
}

.site-shell .api-doc-card .api-code-line span {
  color:#8fb2cf;
  text-align:right;
  user-select:none;
}

.site-shell .api-doc-card .api-code-line code {
  min-width:0;
  color:#f0f7ff;
  font:inherit;
  white-space:pre;
}

.site-shell .api-doc-card .api-code-line:nth-child(n+2):nth-child(-n+4) code {
  padding-left:18px;
}

.site-shell .api-doc-card .api-success {
  min-height:50px;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:18px;
  margin:14px 0 0;
  padding:0 18px;
  border-color:rgba(122,183,222,.36);
  border-radius:14px;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}

.site-shell .api-doc-card .api-success strong {
  margin:0;
  color:#0b1736;
  font-size:13px;
}

.site-shell .api-doc-card .api-success span {
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 13px;
  border:1px solid rgba(23,207,164,.54);
  border-radius:8px;
  background:rgba(29,226,180,.18);
  color:#06a780;
  font-weight:850;
}

.site-shell .api-doc-card .api-success small,
.site-shell .api-doc-card .api-success code {
  color:#294761;
  font-size:12px;
}

.site-shell .api-doc-card .api-success code {
  color:#9cb6ca;
  text-align:right;
  font-family:"Manrope",system-ui,sans-serif;
}

@media (prefers-color-scheme:dark) and (scripting:none) {
  .site-shell.home-site::before {
    background:
      radial-gradient(ellipse 45% 62% at 86% 34%,rgba(36,154,211,.1),transparent 72%),
      radial-gradient(ellipse 31% 42% at 66% 84%,rgba(28,179,157,.07),transparent 74%),
      linear-gradient(145deg,#091421,#0d1d2b 62%,#0d2427);
  }
  .site-shell.home-site .header { background:rgba(9,20,33,.2); }
  .site-shell .demo-aura { opacity:.5; }
  .site-shell .order-window { background:rgba(14,29,43,.9); }
  .site-shell .order-window-body { background:linear-gradient(145deg,#111e2d,#102429); }
  .site-shell .order-service-list article.active { background:linear-gradient(135deg,rgba(20,45,66,.96),rgba(16,54,58,.9)); }
  .site-shell .service-card.blue {
    border-color:rgba(95,163,218,.16);
    background:radial-gradient(ellipse 48% 66% at 80% 48%,rgba(43,139,222,.16),transparent 72%),linear-gradient(135deg,#0e1b2a,#10283a 60%,#102d31);
  }
  .site-shell .service-card.ink {
    border-color:rgba(131,146,167,.15);
    background:radial-gradient(ellipse 44% 58% at 19% 34%,rgba(37,211,218,.11),transparent 72%),radial-gradient(ellipse 42% 54% at 34% 76%,rgba(254,44,85,.09),transparent 74%),linear-gradient(135deg,#111923,#1b1d2a 62%,#261b25);
  }
  .site-shell .pricing-page {
    background:radial-gradient(ellipse 42% 34% at 88% 10%,rgba(29,191,176,.08),transparent 74%),radial-gradient(ellipse 42% 38% at 4% 48%,rgba(33,126,239,.08),transparent 76%),linear-gradient(180deg,#091421,#0c1a27);
  }
  .site-shell .currency-tabs { border-color:rgba(140,174,196,.16); background:rgba(15,31,46,.78); }
  .site-shell .pricing-table { border-color:rgba(140,174,196,.16); background:rgba(14,29,44,.86); box-shadow:0 34px 90px rgba(0,0,0,.24); }
  .site-shell .pricing-row.pricing-heading { background:rgba(19,38,55,.76); }
  .site-shell .pricing-row:nth-child(2) { background:linear-gradient(90deg,rgba(20,48,72,.76),rgba(14,29,44,.18) 72%); }
  .site-shell .pricing-row:nth-child(3) { background:linear-gradient(90deg,rgba(17,53,53,.68),rgba(36,25,38,.2) 74%); }
  .site-shell .pricing-row>span:first-child,.site-shell .pricing-row strong { color:#edf7ff; }
  .site-shell .pricing-row:not(.pricing-heading)>span:nth-child(2),.site-shell .pricing-page .price-source { color:#a9bac8; }
  .site-shell .reseller-page { background:radial-gradient(ellipse 46% 62% at 89% 40%,rgba(26,194,178,.09),transparent 72%),radial-gradient(ellipse 42% 58% at 5% 76%,rgba(30,126,240,.08),transparent 74%),linear-gradient(140deg,#091421,#0c1d29); color:#f5fbff; }
  .site-shell .reseller-page h1 { color:#f5fbff; }
  .site-shell .reseller-page p:not(.eyebrow) { color:#b3c4d1; }
  .site-shell .reseller-page .button-outline { border-color:rgba(152,188,211,.18); background:rgba(16,35,51,.7); color:#dceaf4; }
  .site-shell .api-integration-visual { border-color:rgba(140,174,196,.16); background:rgba(13,30,44,.74); box-shadow:0 38px 100px rgba(0,0,0,.25); }
  .site-shell .api-integration-visual>header { border-color:rgba(140,174,196,.13); }
  .site-shell .api-integration-visual>header>strong,.site-shell .integration-flow strong { color:#e7f2f9; }
  .site-shell .api-integration-visual>header>span { color:#a9becb; }
  .site-shell .integration-flow>div { border-color:rgba(140,174,196,.14); background:linear-gradient(145deg,#102236,#102b35); }
  .site-shell .integration-flow>div.active { border-color:rgba(55,177,199,.24); background:linear-gradient(145deg,#10304a,#103a38); }
  .site-shell .reseller-page + #api { background:radial-gradient(ellipse 34% 48% at 88% 48%,rgba(32,192,173,.06),transparent 74%),linear-gradient(180deg,#0b1724,#0d1d29); }
  .site-shell .api-methods { border-color:rgba(140,174,196,.16); background:rgba(13,30,44,.76); box-shadow:0 30px 80px rgba(0,0,0,.22); }
  .site-shell .api-methods span { border-color:rgba(140,174,196,.14); background:linear-gradient(135deg,#102236,#102c31); color:#dce9f2; }
  .site-shell .api-methods small { color:#dce9f2; }
  .site-shell .api-methods code { color:#65baff; }
  .site-shell .reseller-section { background:linear-gradient(120deg,#0f1c2b,#0d2027); }
  .site-shell .reseller { color:#fff; }
  .site-shell .reseller-copy .eyebrow { color:#80eadb; }
  .site-shell .reseller-copy h2 { color:#f5fbff; }
  .site-shell .reseller-copy>p:not(.eyebrow) { color:#b8c8d4; }
  .site-shell .legal-page { background:radial-gradient(ellipse 36% 42% at 82% 16%,rgba(34,169,214,.09),transparent 72%),linear-gradient(180deg,#0b1724 0%,#0d1d29 100%); }
  .site-shell .legal-copy { border-color:transparent; background:transparent; box-shadow:none; }
  .site-shell .legal-copy h1,.site-shell .legal-copy h2 { color:#edf7ff; }
  .site-shell .legal-copy>p { color:#aec1cf; }
  .site-shell .legal-copy h2 { border-color:rgba(140,174,196,.14); }
}

@media (max-width:1320px) {
  .site-shell .order-window { width:min(100%,670px); }
  .site-shell .floating-facebook { left:-18px; }
  .site-shell .floating-tiktok { left:-28px; }
  .site-shell .why-layout { gap:76px; }
}

@media (max-width:1000px) {
  .site-shell .order-stage { top:0; transform:none; }
  .site-shell .why-layout { gap:62px; }
  .site-shell .services-section .section-heading h2,
  .site-shell .section-heading h2,
  .site-shell .product-hero h1,
  .site-shell .why-layout>div:first-child h2,
  .site-shell .pricing-layout h2,
  .site-shell .faq-layout h2,
  .site-shell .reseller-copy h2 { font-size:clamp(43px,5vw,54px); }
  .site-shell .reseller-network { min-height:520px; transform:scale(.92); transform-origin:center; }
}

@media (max-width:700px) {
  .site-shell .legal-page {
    padding:56px 0 76px;
  }

  .site-shell .legal-copy {
    width:min(100% - 32px,900px);
    margin-inline:16px;
    padding:0;
    border-radius:0;
  }

  .site-shell .legal-copy h1 {
    font-size:clamp(38px,11vw,46px);
    line-height:1.08;
  }

  .site-shell .legal-copy>p {
    font-size:14px;
    line-height:1.72;
  }

  .site-shell .legal-copy h2 {
    margin-top:30px;
    padding-top:22px;
    font-size:19px;
  }

  .site-shell .hero h1>span {
    display:block;
    font-size:clamp(33px,9.2vw,40px);
    white-space:normal;
    text-wrap:balance;
  }

  .site-shell .hero h1>.typewriter-title {
    font-size:clamp(31px,8.7vw,43px);
    letter-spacing:-.006em;
    white-space:normal;
    overflow-wrap:normal;
    text-wrap:balance;
  }
  .site-shell .order-stage { min-height:430px; }
  .site-shell .demo-aura { inset:5% -12% 4%; }
  .site-shell .order-window { width:96%; border-radius:21px; transform:none; transform-origin:center; animation:none; }
  .site-shell .order-window-bar { min-height:62px; padding:0 17px; }
  .site-shell .order-window-body { padding:25px 20px; }
  .site-shell .order-window-title h3 { font-size:24px; }
  .site-shell .order-service-list article { min-height:84px; padding:16px; }
  .site-shell .live-service-visual { min-height:450px; }
  .site-shell .tiktok-service-visual { min-height:450px; }
  .site-shell .facebook-live-demo { width:min(100%,390px); }
  .site-shell .live-comments { max-width:235px; }
  .site-shell .why-layout { gap:48px; }
  .site-shell .services-section .section-heading h2,
  .site-shell .section-heading h2,
  .site-shell .product-hero h1,
  .site-shell .why-layout>div:first-child h2,
  .site-shell .pricing-layout h2,
  .site-shell .faq-layout h2,
  .site-shell .reseller-copy h2 { font-size:clamp(38px,11vw,48px); line-height:1.23; }
  .site-shell .why-proof { min-height:0; padding:32px 25px 20px; border-radius:22px; }
  .site-shell .why-proof::before { left:25px; }
  .site-shell .proof-header strong { font-size:18px; }
  .site-shell .proof-header small { font-size:12px; }
  .site-shell .proof-list span { min-height:70px; font-size:14px; }
  .site-shell #policies { padding-top:72px; }
  .site-shell #policies .footer-grid { gap:34px 24px; }
  .site-shell #policies .footer-grid p { font-size:15px; }
  .site-shell #policies .footer-grid strong { font-size:14px; }
  .site-shell #policies .footer-grid a:not(.brand) { font-size:15px; }
  .site-shell .pricing-page { padding:118px 0 120px; }
  .site-shell .pricing-page .section-heading { margin-bottom:38px; }
  .site-shell .pricing-page .section-heading h2 { font-size:clamp(38px,11vw,48px); }
  .site-shell .pricing-page .section-heading>p:last-child { font-size:15px; }
  .site-shell .currency-tabs { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
  .site-shell .currency-tabs a { min-width:0; padding:0 10px; }
  .site-shell .pricing-table { border-radius:20px; }
  .site-shell .pricing-row { grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; min-height:0; padding:24px 20px; }
  .site-shell .pricing-row>* { padding-inline:0; }
  .site-shell .pricing-row>span:first-child { font-size:15px; }
  .site-shell .pricing-table .pricing-row .platform-logo { width:40px; height:40px; flex-basis:40px; }
  .site-shell .pricing-row:not(.pricing-heading)>span:nth-child(2) { grid-column:1; font-size:13px; }
  .site-shell .pricing-row strong { grid-column:2; grid-row:1; font-size:17px; }
  .site-shell .pricing-row>a { grid-column:2; grid-row:2; min-height:38px; padding:0 13px; font-size:12px; }
  .site-shell .reseller-page { min-height:0; padding:118px 0 105px; }
  .site-shell .reseller-page-grid { grid-template-columns:1fr; gap:58px; }
  .site-shell .reseller-page h1 { font-size:clamp(38px,11vw,48px); line-height:1.23; }
  .site-shell .reseller-page p:not(.eyebrow) { margin:22px 0 30px; font-size:15px; }
  .site-shell .reseller-page .hero-actions { align-items:stretch; }
  .site-shell .reseller-network { min-height:660px; transform:none; }
  .site-shell .reseller-network::before { inset:3% -10% 1%; }
  .site-shell .network-lines { display:none; }
  .site-shell .network-status { top:4px; left:4px; }
  .site-shell .network-hub { top:64px; width:148px; height:148px; }
  .site-shell .network-hub>span { width:50px; height:50px; }
  .site-shell .network-node { width:calc(50% - 7px); min-height:102px; padding:15px; }
  .site-shell .network-node.client { top:250px; left:0; }
  .site-shell .network-node.services { top:250px; right:0; }
  .site-shell .network-node.orders { top:372px; right:auto; left:0; }
  .site-shell .network-node.balance { top:372px; right:0; bottom:auto; }
  .site-shell .network-request { right:0; bottom:38px; left:0; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding:0 12px; }
  .site-shell .network-request code { font-size:8px; }
  .site-shell .reseller-page .api-snippet { border-radius:20px; transform:none; }
  .site-shell .reseller-page .api-snippet pre { overflow-x:auto; padding:28px 22px 30px; font-size:12px; }
  .site-shell .api-integration-visual { border-radius:21px; }
  .site-shell .api-integration-visual>header { min-height:58px; padding:0 18px; }
  .site-shell .integration-flow { grid-template-columns:1fr; gap:9px; padding:18px; }
  .site-shell .integration-flow>div { min-height:72px; padding:13px 16px; }
  .site-shell .integration-flow>span { transform:rotate(90deg); }
  .site-shell .reseller-page .api-integration-visual .api-snippet { margin:0 18px 18px; }
  .site-shell .reseller-page .api-integration-visual .api-snippet pre { padding:20px 17px 22px; font-size:10px; }
  .site-shell .reseller-page + #api { min-height:0; padding:110px 0 120px; }
  .site-shell .reseller-page + #api>.container { grid-template-columns:1fr; gap:50px; }
  .site-shell .reseller-page + #api .section-heading h2 { font-size:clamp(38px,11vw,48px); }
  .site-shell .api-scale-visual { min-height:0; border-radius:22px; }
  .site-shell .api-scale-visual>header { min-height:60px; padding:0 18px; }
  .site-shell .scale-pipeline { grid-template-columns:1fr; gap:9px; padding:30px 20px 24px; }
  .site-shell .scale-pipeline article { min-height:78px; padding:16px 17px 16px 21px; }
  .site-shell .scale-pipeline em { top:10px; right:15px; }
  .site-shell .pipeline-arrow { height:20px; transform:rotate(90deg); }
  .site-shell .api-command-list { grid-template-columns:1fr; margin:0 20px 20px; }
  .site-shell .api-command-list span:nth-child(odd) { border-right:0; }
  .site-shell .api-command-list span:last-child { grid-column:auto; }
  .site-shell .api-methods { grid-template-columns:1fr; padding:14px; border-radius:20px; }
  .site-shell .api-methods span { min-height:64px; padding:0 17px; }
  .site-shell .api-methods span:last-child { grid-column:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .site-shell .hero h1>.typewriter-title::after { display:none; animation:none; }
  .site-shell .order-window,
  .site-shell .hero-panel-layer,
  .site-shell .floating-platform svg,
  .site-shell .signal-line,
  .site-shell .facebook-live-demo,
  .site-shell .facebook-live-art,
  .site-shell .facebook-live-art img,
  .site-shell .tiktok-service-visual::before,
  .site-shell .tiktok-views-art,
  .site-shell .live-reactions i,
  .site-shell .api-integration-visual,
  .site-shell .integration-flow>div,
  .site-shell .integration-flow>span svg,
  .site-shell .api-integration-visual>header i { animation:none; }

  .site-shell .network-lines path,
  .site-shell .network-lines circle,
  .site-shell .network-hub,
  .site-shell .network-status i { animation:none; }

  .site-shell .api-scale-visual::before,
  .site-shell .scale-pipeline article::before,
  .site-shell .pipeline-arrow .arrow,
  .site-shell .api-scale-visual>header i { animation:none; }

  .site-shell .order-stage,
  .site-shell .facebook-live-art,
  .site-shell .facebook-live-art::before,
  .site-shell .facebook-live-art img,
  .site-shell .tiktok-views-art,
  .site-shell .tiktok-views-art::before,
  .site-shell .api-integration-visual,
  .site-shell .integration-flow>div,
  .site-shell .integration-flow>span svg { transition:none; }
}

/* API v2 — bright integration engine. */
.site-shell .reseller-page + #api {
  color:#10243b;
  background:
    radial-gradient(ellipse 42% 62% at 87% 36%,rgba(33,202,181,.14),transparent 72%),
    radial-gradient(ellipse 38% 54% at 8% 88%,rgba(29,132,239,.11),transparent 74%),
    linear-gradient(145deg,#fbfdff 0%,#f2f9ff 52%,#effbf8 100%);
}

.site-shell .reseller-page + #api::before {
  border-color:rgba(48,155,196,.09);
  box-shadow:0 0 0 90px rgba(31,134,213,.025),0 0 0 180px rgba(25,184,159,.02);
}

.site-shell .reseller-page + #api .section-heading h2 { color:#0b1736; }
.site-shell .reseller-page + #api .section-heading>p:last-child { color:#60758a; }
.site-shell .reseller-page + #api .eyebrow { color:#087bea; }

.site-shell .api-engine-visual {
  position:relative;
  min-height:500px;
  overflow:hidden;
  border:1px solid rgba(93,151,186,.18);
  border-radius:32px;
  background:rgba(255,255,255,.78);
  box-shadow:0 38px 90px rgba(39,91,126,.11),inset 0 1px 0 #fff;
  backdrop-filter:blur(18px);
}

.site-shell .api-engine-visual::after {
  content:"";
  position:absolute;
  z-index:-1;
  top:-90px;
  left:12%;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,172,218,.12),transparent 67%);
}

.site-shell .api-engine-visual>header {
  display:flex;
  min-height:68px;
  align-items:center;
  justify-content:space-between;
  padding:0 29px;
  border-bottom:1px solid rgba(102,153,185,.14);
  color:#7790a3;
  font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
}

.site-shell .api-engine-visual>header b { display:flex; align-items:center; gap:9px; color:#159b89; font-weight:700; letter-spacing:0; }
.site-shell .api-engine-visual>header b i { width:8px; height:8px; border-radius:50%; background:#1cc4aa; box-shadow:0 0 0 6px rgba(28,196,170,.1); }

.site-shell .api-engine-body {
  display:grid;
  grid-template-columns:minmax(180px,.78fr) minmax(0,1.22fr);
  align-items:center;
  gap:35px;
  min-height:255px;
  padding:34px 34px 28px;
}

.site-shell .api-engine-core {
  display:grid;
  position:relative;
  width:174px;
  height:174px;
  place-items:center;
  align-content:center;
  justify-self:center;
  gap:4px;
  border:1px solid rgba(53,151,201,.2);
  border-radius:50%;
  background:linear-gradient(145deg,#f7fcff,#e9f7ff 56%,#e9fbf6);
  box-shadow:0 27px 60px rgba(34,117,167,.14),inset 0 0 0 13px rgba(255,255,255,.67);
}

.site-shell .api-engine-core::before,
.site-shell .api-engine-core::after { content:""; position:absolute; border:1px dashed rgba(35,150,195,.18); border-radius:50%; }
.site-shell .api-engine-core::before { inset:-17px; }
.site-shell .api-engine-core::after { inset:-34px; opacity:.52; }
.site-shell .api-engine-core>span { display:grid; width:50px; height:50px; place-items:center; border-radius:16px; background:#fff; box-shadow:0 11px 28px rgba(30,102,148,.12); }
.site-shell .api-engine-core .logo { width:38px; height:38px; }
.site-shell .api-engine-core small { margin-top:7px; color:#6d8da3; font-size:8px; font-weight:800; letter-spacing:.1em; }
.site-shell .api-engine-core strong { color:#087bea; font-size:19px; }
.site-shell .api-engine-core>i { position:absolute; top:16px; right:25px; width:8px; height:8px; border-radius:50%; background:#1bc4aa; box-shadow:0 0 0 7px rgba(27,196,170,.1); }

.site-shell .api-flow-stack { display:grid; gap:9px; }
.site-shell .api-flow-stack article {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 20px;
  min-height:65px;
  align-items:center;
  gap:12px;
  padding:0 17px;
  border:1px solid rgba(103,151,181,.15);
  border-radius:15px;
  background:rgba(248,252,255,.84);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.site-shell .api-flow-stack article.active { border-color:rgba(25,158,200,.28); background:linear-gradient(110deg,rgba(237,248,255,.96),rgba(235,251,247,.92)); box-shadow:0 14px 34px rgba(31,122,169,.09); transform:translateX(8px); }
.site-shell .api-flow-stack em { color:#91a8b8; font:750 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-shell .api-flow-stack small { display:block; margin-bottom:5px; color:#188eca; font:750 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.site-shell .api-flow-stack strong { display:block; overflow:hidden; color:#17334c; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.site-shell .api-flow-stack svg { width:16px; color:#22a9a0; }

.site-shell .api-engine-visual .api-command-list {
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0 28px 28px;
  border:1px solid rgba(102,153,185,.14);
  border-radius:15px;
  background:rgba(246,251,254,.72);
}
.site-shell .api-engine-visual .api-command-list span { grid-template-columns:auto minmax(0,1fr); align-content:center; gap:5px 9px; min-height:70px; border-right:1px solid rgba(102,153,185,.12); border-bottom:0; }
.site-shell .api-engine-visual .api-command-list span:nth-child(odd) { border-right:1px solid rgba(102,153,185,.12); }
.site-shell .api-engine-visual .api-command-list span:last-child { grid-column:auto; border-right:0; }
.site-shell .api-engine-visual .api-command-list b { grid-row:1/3; color:#168ee0; }
.site-shell .api-engine-visual .api-command-list strong { color:#29465d; font-size:10px; }
.site-shell .api-engine-visual .api-command-list code { color:#83a0b2; font-size:8px; }

@media (prefers-reduced-motion:no-preference) {
  .site-shell .api-engine-core::before { animation:api-ring-spin 16s linear infinite; }
  .site-shell .api-engine-core::after { animation:api-ring-spin 22s linear reverse infinite; }
  .site-shell .api-engine-core>i,
  .site-shell .api-engine-visual>header b i { animation:api-status-pulse 2.2s ease-out infinite; }
  .site-shell .api-flow-stack article { animation:api-row-breathe 6s ease-in-out infinite; }
  .site-shell .api-flow-stack article:nth-child(2) { animation-delay:-2s; }
  .site-shell .api-flow-stack article:nth-child(3) { animation-delay:-4s; }
}

@keyframes api-ring-spin { to { transform:rotate(360deg); } }
@keyframes api-row-breathe { 0%,100% { translate:0 0; } 50% { translate:4px 0; } }

@media (max-width:700px) {
  .site-shell .api-engine-visual { min-height:0; border-radius:22px; }
  .site-shell .api-engine-visual>header { min-height:60px; padding:0 18px; }
  .site-shell .api-engine-body { grid-template-columns:1fr; gap:44px; padding:52px 20px 26px; }
  .site-shell .api-engine-core { width:150px; height:150px; }
  .site-shell .api-flow-stack article.active { transform:none; }
  .site-shell .api-engine-visual .api-command-list { grid-template-columns:1fr; margin:0 20px 20px; }
  .site-shell .api-engine-visual .api-command-list span,
  .site-shell .api-engine-visual .api-command-list span:nth-child(odd) { min-height:58px; border-right:0; border-bottom:1px solid rgba(102,153,185,.12); }
  .site-shell .api-engine-visual .api-command-list span:last-child { border-bottom:0; }
}

@media (prefers-reduced-motion:reduce) {
  .site-shell .api-engine-core::before,
  .site-shell .api-engine-core::after,
  .site-shell .api-engine-core>i,
  .site-shell .api-engine-visual>header b i,
  .site-shell .api-flow-stack article { animation:none; }
}

/* Growth path — deliberately distinct from the API constellation above. */
.site-shell .growth-path-visual {
  position:relative;
  min-height:500px;
  overflow:hidden;
  border:1px solid rgba(93,151,186,.17);
  border-radius:32px;
  background:rgba(255,255,255,.72);
  box-shadow:0 38px 90px rgba(39,91,126,.1),inset 0 1px 0 #fff;
  backdrop-filter:blur(18px);
}

.site-shell .growth-path-visual::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 32.9%,rgba(77,147,187,.055) 33%,transparent 33.1%,transparent 65.9%,rgba(77,147,187,.055) 66%,transparent 66.1%),
    radial-gradient(circle at 85% 20%,rgba(32,199,178,.11),transparent 32%);
}

.site-shell .growth-path-visual>header {
  display:flex;
  position:relative;
  z-index:1;
  min-height:68px;
  align-items:center;
  justify-content:space-between;
  padding:0 29px;
  border-bottom:1px solid rgba(102,153,185,.14);
  color:#748fa2;
  font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
}

.site-shell .growth-path-visual>header b { color:#159b89; font-weight:750; }

.site-shell .growth-steps {
  display:grid;
  position:relative;
  z-index:1;
  height:355px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;
  gap:13px;
  padding:35px 28px 0;
}

.site-shell .growth-step {
  display:flex;
  position:relative;
  flex-direction:column;
  justify-content:space-between;
  padding:23px 20px 20px;
  overflow:hidden;
  border:1px solid rgba(89,150,186,.16);
  border-bottom:0;
  border-radius:21px 21px 0 0;
  background:linear-gradient(155deg,rgba(246,251,255,.96),rgba(230,244,252,.78));
  box-shadow:0 -16px 40px rgba(41,104,145,.055);
}

.site-shell .growth-step.step-1 { height:176px; }
.site-shell .growth-step.step-2 { height:232px; background:linear-gradient(155deg,rgba(239,249,255,.98),rgba(224,247,244,.8)); }
.site-shell .growth-step.step-3 { height:294px; border-color:rgba(26,166,180,.24); background:linear-gradient(150deg,rgba(231,248,255,.98),rgba(220,249,242,.92)); box-shadow:0 -22px 55px rgba(28,139,171,.1); }
.site-shell .growth-step em { color:#8fa7b8; font:750 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-shell .growth-step strong { max-width:135px; color:#17334d; font-size:14px; line-height:1.45; }
.site-shell .growth-step>div { display:grid; gap:7px; }
.site-shell .growth-step>div i { display:block; height:5px; border-radius:99px; background:rgba(42,136,190,.12); }
.site-shell .growth-step>div i:nth-child(2) { width:75%; background:rgba(28,176,173,.13); }
.site-shell .growth-step>div i:nth-child(3) { width:48%; }
.site-shell .growth-step>span { display:grid; position:absolute; top:18px; right:18px; width:38px; height:38px; place-items:center; border-radius:12px; background:#fff; box-shadow:0 9px 24px rgba(32,107,151,.12); }
.site-shell .growth-step>span .logo { width:29px; height:29px; }

.site-shell .growth-path-visual>footer {
  display:grid;
  position:relative;
  z-index:2;
  min-height:55px;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:0 29px;
  border-top:1px solid rgba(93,151,186,.16);
  background:rgba(249,252,254,.76);
  color:#7f98aa;
  font:750 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.site-shell .growth-path-visual>footer i { position:relative; height:2px; border-radius:99px; background:linear-gradient(90deg,#198dea,#1cc3aa); }
.site-shell .growth-path-visual>footer i::after { content:""; position:absolute; top:50%; right:0; width:8px; height:8px; border-radius:50%; background:#1cc3aa; box-shadow:0 0 0 6px rgba(28,195,170,.1); transform:translateY(-50%); }

@media (prefers-reduced-motion:no-preference) {
  .site-shell .growth-step { animation:growth-step-breathe 6s ease-in-out infinite; }
  .site-shell .growth-step.step-2 { animation-delay:-2s; }
  .site-shell .growth-step.step-3 { animation-delay:-4s; }
  .site-shell .growth-path-visual>footer i::after { animation:growth-dot-travel 5.4s ease-in-out infinite; }
}

@keyframes growth-step-breathe { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@keyframes growth-dot-travel { 0%,100% { right:100%; } 50% { right:0; } }

@media (max-width:700px) {
  .site-shell .growth-path-visual { min-height:0; border-radius:22px; }
  .site-shell .growth-path-visual>header { min-height:60px; padding:0 18px; }
  .site-shell .growth-steps { height:auto; grid-template-columns:1fr; align-items:stretch; gap:10px; padding:26px 20px; }
  .site-shell .growth-step,.site-shell .growth-step.step-1,.site-shell .growth-step.step-2,.site-shell .growth-step.step-3 { height:112px; border-bottom:1px solid rgba(89,150,186,.16); border-radius:17px; }
  .site-shell .growth-step.step-1 { width:82%; }
  .site-shell .growth-step.step-2 { width:91%; }
  .site-shell .growth-step.step-3 { width:100%; }
  .site-shell .growth-step strong { max-width:190px; }
  .site-shell .growth-step>div { display:none; }
  .site-shell .growth-path-visual>footer { min-height:52px; padding:0 20px; }
}

@media (prefers-reduced-motion:reduce) {
  .site-shell .growth-step,
  .site-shell .growth-path-visual>footer i::after { animation:none; }
}

/* Refined reseller constellation: one centered system with a shared light language. */
.site-shell .network-status {
  top:16px;
  left:24px;
  z-index:3;
  min-height:34px;
  padding:0 14px;
  border:1px solid rgba(40,158,183,.22);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 13px 32px rgba(31,112,150,.12),inset 0 1px 0 #fff;
  backdrop-filter:blur(12px);
  transform:none;
}

.site-shell .network-status i { width:7px; height:7px; box-shadow:0 0 0 5px rgba(24,185,159,.09); }
.site-shell .network-lines { z-index:0; pointer-events:none; }
.site-shell .network-lines path { stroke:#2ba8cb; stroke-width:2.1; stroke-dasharray:6 8; opacity:.72; filter:drop-shadow(0 0 4px rgba(34,174,196,.28)); }
.site-shell .network-lines circle { display:none; }

.site-shell .network-request {
  right:8px;
  top:7px;
  bottom:auto;
  left:auto;
  width:min(340px,50%);
  grid-template-columns:auto minmax(0,1fr) auto;
  min-height:52px;
  padding:0 9px;
  border-color:rgba(255,255,255,.28);
  border-radius:16px;
  background:linear-gradient(118deg,#087bea 0%,#079fd0 54%,#18b49f 100%);
  box-shadow:0 23px 52px rgba(15,118,176,.22),inset 0 1px 0 rgba(255,255,255,.28);
  transform:none;
  color:#34536a;
}
.site-shell .network-request span { display:grid; min-height:34px; place-items:center; padding:0 10px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(255,255,255,.14); color:#fff; font-size:8px; }
.site-shell .network-request code { color:rgba(255,255,255,.88); font-size:8px; }
.site-shell .network-request b { padding:8px 9px; border-radius:9px; background:rgba(5,66,96,.18); color:#fff; font-size:8px; }
.site-shell .network-request .check { color:#7dffdf; }

@media (prefers-reduced-motion:no-preference) {
  .site-shell .network-lines circle { animation:none; }
  .site-shell .network-lines path { animation-duration:8s; }
  .site-shell .network-request { transition:translate .4s ease,box-shadow .4s ease,border-color .4s ease; }
  .site-shell .network-request:hover { translate:0 -5px; border-color:rgba(255,255,255,.48); box-shadow:0 29px 62px rgba(15,118,176,.28),inset 0 1px 0 rgba(255,255,255,.38); }
}

@media (max-width:700px) {
  .site-shell .network-status { top:4px; left:50%; transform:translateX(-50%); }
  .site-shell .network-request { top:auto; right:auto; bottom:38px; left:50%; width:100%; grid-template-columns:auto minmax(0,1fr) auto; transform:translateX(-50%); }
}

/* Reseller growth matrix — status and sample request now belong to the scale story. */
.site-shell .growth-path-visual {
  min-height:0;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(241,249,253,.9));
}

.site-shell .growth-path-visual>header {
  min-height:78px;
  padding:0 30px;
  color:#527289;
}

.site-shell .growth-status {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:1px solid rgba(25,174,161,.2);
  border-radius:999px;
  background:#fff;
  color:#326777;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:12px;
  font-weight:750;
  letter-spacing:0;
  box-shadow:0 10px 25px rgba(36,108,145,.08);
}

.site-shell .growth-status i,
.site-shell .growth-table-row>b i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#18b99f;
  box-shadow:0 0 0 5px rgba(24,185,159,.1);
}

.site-shell .growth-table {
  position:relative;
  z-index:1;
  padding:0 30px;
}

.site-shell .growth-table-head,
.site-shell .growth-table-row {
  display:grid;
  grid-template-columns:54px minmax(180px,1.35fr) 90px minmax(140px,1fr) 110px;
  align-items:center;
  column-gap:18px;
}

.site-shell .growth-table-head {
  min-height:44px;
  color:#8aa0af;
  font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
}

.site-shell .growth-table-row {
  min-height:104px;
  border-top:1px solid rgba(88,146,181,.15);
  color:#17334d;
  transition:background .3s ease,transform .3s ease;
}

.site-shell .growth-table-row:last-child { border-bottom:1px solid rgba(88,146,181,.15); }
.site-shell .growth-table-row:hover { background:linear-gradient(90deg,rgba(18,143,231,.045),rgba(25,185,159,.045)); transform:translateX(4px); }
.site-shell .growth-table-row>em { color:#178ce4; font:750 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-shell .growth-table-row>div { display:grid; gap:6px; }
.site-shell .growth-table-row strong { color:#16344d; font-size:16px; line-height:1.25; }
.site-shell .growth-table-row small { color:#7890a1; font-size:12px; }
.site-shell .growth-table-row>code { color:#267aab; font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-shell .growth-table-row>b { display:flex; align-items:center; gap:9px; color:#29947f; font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-shell .growth-table-row>b i { width:6px; height:6px; box-shadow:none; }

.site-shell .growth-mark {
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border:1px solid rgba(44,145,188,.16);
  border-radius:13px;
  background:#fff;
  box-shadow:0 8px 22px rgba(35,101,138,.08);
}
.site-shell .growth-mark i { color:#138dd9; font:800 11px/1 "Inter Tight",system-ui,sans-serif; }
.site-shell .growth-mark .logo { width:29px; height:29px; }

.site-shell .growth-path-visual>.growth-request {
  display:grid;
  position:relative;
  min-height:70px;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin:28px 30px 30px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:18px;
  background:linear-gradient(118deg,#087bea 0%,#079fd0 54%,#18b49f 100%);
  box-shadow:0 20px 48px rgba(15,118,176,.2),inset 0 1px 0 rgba(255,255,255,.3);
  color:#fff;
}
.site-shell .growth-request span { display:grid; min-height:42px; place-items:center; padding:0 13px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.14); font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-shell .growth-request code { overflow:hidden; color:rgba(255,255,255,.9); font:650 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.site-shell .growth-request b { display:flex; align-items:center; gap:7px; padding:11px 13px; border-radius:11px; background:rgba(5,66,96,.18); color:#fff; font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.site-shell .growth-request .check { width:13px; height:13px; color:#8bffe1; }

@media (max-width:1320px) {
  .site-shell .growth-table {
    padding:0 22px;
  }

  .site-shell .growth-table-head {
    display:none;
  }

  .site-shell .growth-table-row {
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:10px 14px;
    min-height:112px;
  }

  .site-shell .growth-table-row>code {
    grid-column:2;
    grid-row:2;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .site-shell .growth-table-row>b {
    grid-column:3;
    grid-row:2;
    justify-self:end;
  }

  .site-shell .growth-table-row>.growth-mark {
    grid-column:3;
    grid-row:1;
    justify-self:end;
  }

  .site-shell .growth-path-visual>.growth-request {
    grid-template-columns:auto minmax(0,1fr);
  }

  .site-shell .growth-request b {
    grid-column:1/-1;
    justify-self:end;
  }
}

@media (max-width:700px) {
  .site-shell .growth-path-visual>header { min-height:68px; padding:0 18px; }
  .site-shell .growth-status { padding:9px 11px; font-size:10px; }
  .site-shell .growth-table { padding:0 18px; }
  .site-shell .growth-table-head { display:none; }
  .site-shell .growth-table-row { grid-template-columns:34px minmax(0,1fr) 40px; gap:10px; min-height:100px; }
  .site-shell .growth-table-row>code { grid-column:2; }
  .site-shell .growth-table-row>b { grid-column:3; grid-row:1/3; font-size:0; }
  .site-shell .growth-path-visual>.growth-request { min-height:118px; grid-template-columns:1fr auto; gap:12px; margin:20px 18px 18px; padding:14px; }
  .site-shell .growth-request code { grid-column:1/-1; grid-row:2; }
}

@media (prefers-reduced-motion:reduce) {
  .site-shell .growth-table-row { transition:none; }
}

/* Responsive completion: compact cards, single-column reading flow, and mobile navigation. */
.site-shell .mobile-nav { display:none; position:relative; }

@media (max-width:1000px) {
  .site-shell .nav-wrap { gap:10px; }
  .site-shell .brand { margin-right:auto; }
  .site-shell .nav-actions { margin-left:auto; gap:8px; }
  .site-shell .nav-actions .login-link,
  .site-shell .nav-actions>.button { display:none; }
  .site-shell .language-menu summary { min-height:42px; padding:0 12px; border:1px solid rgba(83,128,163,.18); border-radius:12px; background:rgba(255,255,255,.86); }
  .site-shell .mobile-nav { display:block; flex:0 0 auto; }
  .site-shell .mobile-nav>summary { display:grid; width:42px; height:42px; place-content:center; gap:4px; border:1px solid rgba(83,128,163,.18); border-radius:12px; background:rgba(255,255,255,.86); cursor:pointer; list-style:none; }
  .site-shell .mobile-nav>summary::-webkit-details-marker { display:none; }
  .site-shell .mobile-nav>summary i { display:block; width:17px; height:2px; border-radius:2px; background:#17334d; }
  .site-shell .mobile-nav>nav { display:grid; position:absolute; z-index:30; top:52px; right:0; width:min(286px,calc(100vw - 32px)); gap:3px; padding:12px; border:1px solid rgba(82,133,168,.18); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 24px 60px rgba(30,72,105,.18); }
  .site-shell .mobile-nav>nav>a { padding:12px 14px; border-radius:10px; color:#17334d; font-size:14px; font-weight:650; text-decoration:none; }
  .site-shell .mobile-nav>nav>a:hover { background:#eef7fd; }
  .site-shell .mobile-nav>nav>.button { justify-content:center; color:#fff; }
  .site-shell .service-card { min-height:0; grid-template-columns:1fr; gap:24px; padding:52px 48px 26px; }
  .site-shell .service-card .service-copy { max-width:620px; }
  .site-shell .live-service-visual,
  .site-shell .tiktok-service-visual { min-height:420px; }
  .site-shell .facebook-live-art,
  .site-shell .tiktok-views-art { width:min(72%,520px); }
  .site-shell .calculator form { grid-template-columns:1fr; }
  .site-shell .calculator { grid-template-columns:1fr; }
  .site-shell .calculator h2 { white-space:normal; }
  .site-shell .calculator .button { width:100%; justify-content:center; }
}

@media (max-width:820px) {
  .site-shell .reseller-page-grid { grid-template-columns:1fr; gap:56px; }
  .site-shell .reseller-page { min-height:0; }
}

@media (max-width:700px) {
  .site-shell .nav-wrap { gap:8px; }
  .site-shell .nav-actions { gap:7px; }
  .site-shell .language-menu summary { min-height:42px; padding:0 10px; }
  .site-shell .steps { gap:18px; }
  .site-shell .step {
    min-height:0;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    grid-template-areas:
      "num num"
      "icon title"
      "icon copy";
    column-gap:16px;
    row-gap:8px;
    padding:22px 18px;
    border:1px solid rgba(103,154,188,.14);
    border-radius:22px;
    background:rgba(255,255,255,.62);
  }
  .site-shell .step+.step {
    padding-left:18px;
    border-left:1px solid rgba(103,154,188,.14);
    border-top:1px solid rgba(103,154,188,.14);
  }
  .site-shell .step>span {
    position:static;
    grid-area:num;
    color:#087bea;
    font-size:12px;
    font-weight:850;
    letter-spacing:.08em;
  }
  .site-shell .step-icon {
    grid-area:icon;
    width:52px;
    height:52px;
    margin:0;
    border-radius:999px;
  }
  .site-shell .step h3 {
    grid-area:title;
    align-self:end;
    margin:0;
    font-size:17px;
    line-height:1.25;
  }
  .site-shell .step p {
    grid-area:copy;
    max-width:none;
    margin:0;
    font-size:13px;
    line-height:1.75;
  }
  .site-shell .service-card { gap:12px; padding:36px 22px 18px; border-radius:24px; }
  .site-shell .live-service-visual,
  .site-shell .tiktok-service-visual { min-height:320px; }
  .site-shell .facebook-live-art,
  .site-shell .tiktok-views-art { width:min(94%,390px); }
  .site-shell .why-layout { grid-template-columns:1fr; gap:42px; }
  .site-shell .cta-box { flex-direction:column; align-items:flex-start; gap:28px; padding:42px 26px; }
  .site-shell .cta-box>div:not(.cta-orb) { width:100%; }
  .site-shell .cta-actions { width:100%; align-items:stretch; }
  .site-shell .cta-actions .button { width:100%; justify-content:center; }
  .site-shell .product-hero-grid,
  .site-shell .calculator { grid-template-columns:1fr; }
  .site-shell .calculator { gap:30px; padding:32px 22px; border-radius:18px; }
  .site-shell .calculator h2 { font-size:clamp(28px,8.2vw,36px); }
  .site-shell .calculator p:not(.eyebrow) { font-size:14px; line-height:1.85; }
  .site-shell .calculator-total { margin-top:22px; font-size:30px; }
  .site-shell .calculator label { gap:9px; font-size:13px; }
  .site-shell .calculator input,
  .site-shell .calculator select,
  .site-shell .calculator .button { min-height:54px; font-size:16px; }
  .site-shell .use-grid { grid-template-columns:1fr; }
  .site-shell .product-spec { min-height:0; padding:24px; border-radius:22px; }
  .site-shell .product-spec-table>div { grid-template-columns:1fr; gap:6px; min-height:0; padding:13px 0; }
  .site-shell .product-spec-table dd { text-align:left; font-size:17px; }
  .site-shell .code-meta { grid-template-columns:1fr; gap:9px; padding:16px 16px 0; }
  .site-shell .code-meta span,
  .site-shell .code-meta code { justify-content:flex-start; width:max-content; max-width:100%; }
  .site-shell .code-visual pre { margin:16px 14px 0; padding:18px 16px; font-size:12px; }
  .site-shell .api-success { margin:14px; align-items:flex-start; flex-wrap:wrap; }
  .site-shell .api-success strong { width:100%; margin-left:28px; }
  .site-shell .api-doc-card { min-height:0; }
  .site-shell .api-doc-shell { grid-template-columns:minmax(0,1fr); min-height:0; }
  .site-shell .api-doc-sidebar { padding:18px 16px; border-right:0; border-bottom:1px solid rgba(115,161,202,.14); }
  .site-shell .api-doc-sidebar p { margin:10px 0 12px; font-size:14px; }
  .site-shell .api-doc-sidebar nav { display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; }
  .site-shell .api-doc-sidebar a { flex:0 0 auto; min-height:34px; font-size:12px; }
  .site-shell .api-doc-main { overflow:hidden; padding:18px 14px 14px; }
  .site-shell .api-doc-head { display:grid; gap:12px; }
  .site-shell .api-doc-head h3 { font-size:20px; }
  .site-shell .endpoint-pill { width:max-content; max-width:100%; }
  .site-shell .api-doc-tabs { gap:24px; overflow-x:auto; }
  .site-shell .api-doc-card .api-request { width:auto; margin:0; padding:15px 12px; font-size:12px; }
  .site-shell .api-doc-card .api-code-line { grid-template-columns:20px minmax(0,1fr); column-gap:9px; }
  .site-shell .api-doc-card .api-code-line code { white-space:pre-wrap; overflow-wrap:anywhere; }
  .site-shell .api-doc-card .api-code-line:nth-child(n+2):nth-child(-n+4) code { padding-left:12px; }
  .site-shell .api-doc-card .api-success { grid-template-columns:1fr auto; gap:10px; min-height:0; padding:13px; }
  .site-shell .api-doc-card .api-success small,
  .site-shell .api-doc-card .api-success code { grid-column:1/-1; }
  .site-shell #policies .footer-grid>div:first-child { grid-column:1/-1; }
}

@media (prefers-color-scheme:dark) and (scripting:none) and (max-width:700px) {
  .site-shell .mobile-nav>summary,
  .site-shell .mobile-nav>nav { border-color:rgba(143,180,204,.18); background:rgba(13,29,43,.98); }
  .site-shell .mobile-nav>summary i { background:#e9f3f9; }
  .site-shell .mobile-nav>nav>a { color:#e9f3f9; }
  .site-shell .mobile-nav>nav>a:hover { background:rgba(72,139,181,.14); }
}