.api-scope{
  --api-navy:#1D4E89;
  --api-ink:#0F2648;
  --api-accent:#F18321;
  --api-line:#ECEBEB;
  --api-muted:#6C6C6C;
  --api-tint:#F7F8FA;
}
.api-kicker{font-weight:700;text-transform:uppercase;color:var(--api-accent)}
.api-h2{color:var(--api-navy);font-weight:600;margin:0}
.api-h3{color:var(--api-navy);font-weight:600;margin:0}
.api-h4{color:var(--api-navy);font-weight:600;margin:0}
.api-h2 em,.api-h3 em{font-style:normal;color:var(--api-accent)}
.api-head{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:880px}
.api-lead{color:var(--api-muted);margin:8px 0 0;max-width:780px}
.api-full{grid-column:1 / -1}
.api-half{grid-column:1 / -1}
@media (min-width:1025px){.api-half{grid-column:1 / span 6}.api-half--right{grid-column:7 / span 6}}
.api-block{display:flex;flex-direction:column;gap:14px;margin:0}
.api-block-title{margin:0}
.api-list{display:grid;grid-template-columns:1fr;gap:9px;margin:0;padding:0;list-style:none}
.api-list li{position:relative;padding-left:20px;color:var(--api-muted)}
.api-list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background-color:var(--api-accent)}
.api-list--2{grid-template-columns:1fr}
@media (min-width:768px){.api-list--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 30px}}
.api-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:768px){.api-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){
  .api-cards[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .api-cards[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.api-card{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--api-line);border-radius:20px;background-color:#fff;transition:border-color .4s,box-shadow .4s,translate .4s}
@media (min-width:1025px){.api-card{border-radius:24px;padding:24px}}
.api-card:hover{border-color:rgba(241,131,33,.75);box-shadow:0 22px 46px rgba(29,78,137,.12);translate:0 -3px}
/* the accent rail runs down the card's edge on hover */
.api-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--api-accent);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.api-card:hover::after{transform:scaleY(1)}
.api-card--tint{background-color:var(--api-tint);border-color:transparent}
.api-card--tint:hover{background-color:#fff;border-color:rgba(241,131,33,.6)}
a.api-card{text-decoration:none}
.api-card{position:relative;overflow:hidden}
.api-card-title{margin:0;color:var(--api-navy)}
.api-card-num{color:var(--api-accent)}
.api-table-wrap{grid-column:1 / -1;overflow-x:auto;border:1px solid var(--api-line);border-radius:18px;background-color:#fff;-webkit-overflow-scrolling:touch}
.api-table{width:100%;border-collapse:collapse;min-width:620px}
.api-table caption{caption-side:top;text-align:left;padding:0}
.api-table th{background-color:var(--api-ink);color:#fff;font-weight:600;font-size:13px;line-height:1.35;text-align:left;padding:12px 14px;vertical-align:top;white-space:nowrap}
.api-table th span{display:block;font-weight:400;font-size:11px;opacity:.72;white-space:normal}
.api-table td{padding:11px 14px;border-top:1px solid var(--api-line);color:var(--api-muted);font-size:14px;line-height:1.45;vertical-align:top}
.api-table tbody tr:nth-child(even){background-color:#FAFAFA}
.api-table .api-yes{color:var(--api-accent);font-weight:700}
.api-table .api-no{color:#C9C9C9}
.api-note{margin:0;border-left:3px solid var(--api-accent);border-radius:0 18px 18px 0;background-image:linear-gradient(90deg,rgba(241,131,33,.07),rgba(255,255,255,0));padding:18px 22px}
.api-note-title{margin:0 0 6px;color:var(--api-navy);font-weight:600}
.api-note p{margin:0;color:var(--api-muted)}
.api-steps{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;counter-reset:api-step;border-top:1px solid var(--api-line)}
.api-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:20px 0}
.api-step+.api-step{border-top:1px solid var(--api-line)}
.api-step-num{color:var(--api-accent);font-weight:700;letter-spacing:.02em}
.api-step-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.api-figures{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:768px){.api-figures--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.api-figure{margin:0;display:flex;flex-direction:column;gap:10px}
.api-figure img{display:block;width:100%;height:auto;background-color:#fff}
/* figures sit in their own frame so the artwork can breathe on hover */
.api-media{position:relative;overflow:hidden;border:1px solid var(--api-line);border-radius:18px;background-color:#fff}
@media (min-width:1025px){.api-media{border-radius:22px}}
.api-media img{display:block;width:100%;height:auto;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.api-media:hover img{transform:scale(1.04)}
.api-figure figcaption{color:var(--api-muted);font-size:13px;line-height:1.5}
.api-two{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:1025px){.api-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}}
/* blocks nested in a two-up belong to that grid, not to the page grid */
.api-two>*{grid-column:auto}
.api-two>.api-block{display:flex}
.api-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;border:0;border-radius:100px;background-color:var(--api-accent);color:#fff;font-weight:500;font-size:16px;line-height:1.3;text-decoration:none;cursor:pointer;transition:background-color .3s,translate .3s}
.api-btn:hover{background-color:#d9720f;translate:0 -2px}
.api-btn--ghost{background-color:transparent;border:1px solid rgba(255,255,255,.45);color:#fff}
.api-btn--ghost:hover{background-color:rgba(255,255,255,.12);border-color:#fff}
/* ── motion ────────────────────────────────────────────────────────────────
   The home page's beats, rebuilt for a static page: every block fades up as it
   enters the viewport, a section head runs kicker -> heading -> lead one after
   the other with the heading wiping in from behind a mask, and each group
   (cards, stages, figures) steps in item by item. Where a browser cannot drive
   an animation from the scroll timeline, the same motion is released by an
   IntersectionObserver — the page's script puts .api-no-timeline on <html>, so
   nothing is ever hidden by CSS alone. */
@keyframes apiFadeUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes apiHeadIn{from{opacity:0;-webkit-mask-position:60% 0;mask-position:60% 0}to{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes apiHeroCopy{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes apiHeroMedia{from{opacity:0;translate:0 26px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
/* the heading wipe: at rest the mask is fully opaque, so it is safe on its own */
.api-head .api-h2{-webkit-mask-image:linear-gradient(45deg,#000,#000 15%,transparent 30%);mask-image:linear-gradient(45deg,#000,#000 15%,transparent 30%);-webkit-mask-size:800% 100%;mask-size:800% 100%;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* the step of each beat inside a group (a head reads: kicker, heading, lead) */
.api-head>*:nth-child(1){--api-i:0}
.api-head>*:nth-child(2){--api-i:1}
.api-head>*:nth-child(3){--api-i:2}
.api-cards>*:nth-child(1),.api-api-cols>*:nth-child(1),.api-steps>*:nth-child(1),.api-figures>*:nth-child(1){--api-i:0}
.api-cards>*:nth-child(2),.api-api-cols>*:nth-child(2),.api-steps>*:nth-child(2),.api-figures>*:nth-child(2){--api-i:1}
.api-cards>*:nth-child(3),.api-api-cols>*:nth-child(3),.api-steps>*:nth-child(3),.api-figures>*:nth-child(3){--api-i:2}
.api-cards>*:nth-child(4),.api-api-cols>*:nth-child(4),.api-steps>*:nth-child(4),.api-figures>*:nth-child(4){--api-i:3}
@supports (animation-timeline: view()){
  .api-reveal,.api-head>*,.api-cards>*,.api-api-cols>*,.api-steps>*,.api-figures>*{
    animation:apiFadeUp .85s cubic-bezier(.22,1,.36,1) both;
    animation-timeline:view();
    animation-range:cover calc(22% + var(--api-i,0) * 6%) cover calc(36% + var(--api-i,0) * 6%);
  }
  .api-head .api-h2{animation-name:apiHeadIn}
}
/* same motion, released by an observer instead of the scroll timeline */
html.api-no-timeline .api-reveal,
html.api-no-timeline .api-head>*,
html.api-no-timeline .api-cards>*,
html.api-no-timeline .api-api-cols>*,
html.api-no-timeline .api-steps>*,
html.api-no-timeline .api-figures>*{
  opacity:0;translate:0 26px;
  transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .8s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--api-i,0) * 90ms);
}
html.api-no-timeline .api-in{opacity:1;translate:0 0}
/* the hero arrives on its own beat as the page paints */
.api-hero-copy>*{animation:apiHeroCopy .9s cubic-bezier(.22,1,.36,1) both}
.api-hero-copy>*:nth-child(1){animation-delay:.06s}
.api-hero-copy>*:nth-child(2){animation-delay:.14s}
.api-hero-copy>*:nth-child(3){animation-delay:.22s}
.api-hero-copy>*:nth-child(4){animation-delay:.3s}
.api-hero-copy>*:nth-child(5){animation-delay:.38s}
.api-hero-media{animation:apiHeroMedia 1.1s cubic-bezier(.22,1,.36,1) both .2s}
@media (prefers-reduced-motion: reduce){
  .api-reveal,.api-head>*,.api-cards>*,.api-api-cols>*,.api-steps>*,.api-figures>*,.api-hero-copy>*,.api-hero-media{animation:none!important}
  html.api-no-timeline .api-reveal,
  html.api-no-timeline .api-head>*,
  html.api-no-timeline .api-cards>*,
  html.api-no-timeline .api-api-cols>*,
  html.api-no-timeline .api-steps>*,
  html.api-no-timeline .api-figures>*{opacity:1!important;translate:none!important;transition:none!important}
}

/* ── page chrome ─────────────────────────────────────────────────────────
   The site's header is written to live inside the hero column, which supplies
   the page padding and absorbs the header's negative bottom margin. On this
   page it is the page's own bar: it takes the same padding and stops
   overlapping the hero below it. */
.api-scope > header{padding-left:20px!important;padding-right:20px!important;margin-bottom:0!important}
@media (min-width:768px){.api-scope > header{padding-left:40px!important;padding-right:40px!important}}
@media (min-width:1025px){.api-scope > header{padding-left:60px!important;padding-right:60px!important}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
/* the in-page index is sticky, so anchors have to stop clear of it */
.api-section{scroll-margin-top:72px}

/* ── hero ─────────────────────────────────────────────────────────────── */
.api-hero{position:relative;overflow:hidden;background-color:var(--api-ink);color:#fff}
.api-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);pointer-events:none}
.api-hero~*{position:relative}
.api-hero-inner{position:relative;width:100%;display:grid;grid-template-columns:1fr;gap:28px;padding:30px 20px 44px}
@media (min-width:768px){.api-hero-inner{padding:48px 40px 64px}}
@media (min-width:1025px){.api-hero-inner{grid-template-columns:1.02fr .98fr;align-items:center;gap:52px;padding:64px 60px 84px}}
.api-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.api-hero h1{color:#fff!important;margin:0;max-width:640px}
.api-hero-lead{color:rgba(255,255,255,.78);max-width:560px;margin:0}
.api-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.api-hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;margin-top:10px;width:100%}
@media (min-width:1025px){.api-hero-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.api-stat-value{color:var(--api-accent);font-weight:700;font-size:22px;line-height:1.1}
.api-stat-label{color:rgba(255,255,255,.68);font-size:13px;line-height:1.4;margin-top:6px;display:block}
.api-hero-media{position:relative;border-radius:20px;overflow:hidden;background-color:#fff;box-shadow:0 30px 70px rgba(0,0,0,.35)}
@media (min-width:1025px){.api-hero-media{border-radius:28px}}
.api-hero-media img{display:block;width:100%;height:auto;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.api-hero-media:hover img{transform:scale(1.03)}

/* ── on this page ─────────────────────────────────────────────────────── */
.api-index{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--api-line);background-color:rgba(255,255,255,.94);backdrop-filter:blur(10px)}
.api-index-list{display:flex;gap:8px;margin:0;padding:12px 20px;list-style:none;overflow-x:auto;scrollbar-width:none}
@media (min-width:768px){.api-index-list{padding:12px 40px}}
@media (min-width:1025px){.api-index-list{padding:12px 60px}}
.api-index-list::-webkit-scrollbar{display:none}
.api-index-list a{display:inline-flex;white-space:nowrap;padding:8px 14px;border:1px solid var(--api-line);border-radius:100px;color:var(--api-muted);font-size:13px;font-weight:500;text-decoration:none;transition:color .3s,border-color .3s,background-color .3s}
.api-index-list a:hover{color:var(--api-navy);border-color:var(--api-navy)}
.api-index-list a[aria-current="true"]{color:#fff;background-color:var(--api-navy);border-color:var(--api-navy)}

/* ── closing band ─────────────────────────────────────────────────────── */
.api-cta{margin-top:8px;background-color:var(--api-ink);color:#fff}
.api-cta-inner{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:56px 20px}
@media (min-width:768px){.api-cta-inner{padding:72px 40px}}
@media (min-width:1025px){.api-cta-inner{padding:90px 60px;max-width:1000px}}
.api-cta h2{color:#fff;margin:0;max-width:760px}
.api-cta p{color:rgba(255,255,255,.76);margin:0;max-width:640px}
.api-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.api-back{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.7);font-size:14px;text-decoration:none;margin-top:18px}
.api-back:hover{color:#fff}

/* the header's music toggle drives the home page's audio element, which this
   page does not load — a control that does nothing is worse than no control */
.api-scope header button[aria-label="Toggle music"]{display:none!important}

/* ── menu (shared with the site pages) ── */

/* ===== The shared menu: one row of links, the same on every page =====
   Seven items do not fit the bar at every viewport it is shown at — the site's
   own four were already tight on the tablet band. Rather than wrap the bar or
   push it apart, the row is allowed to shrink and scroll sideways, with the
   scrollbar hidden so it reads as a plain menu. The menu appears from the site's
   own `md` breakpoint up, exactly as the home page shows it. */
header nav {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
header nav::-webkit-scrollbar {
  display: none;
}
/* the menu is a row of links, not a scrollable document: keep the scroll a
   sideways nudge and never let it swallow a vertical page scroll */
header nav a {
  scroll-margin: 0;
}
/* The menu item that names the page you are on. The home page has no item of its
   own — every anchor item points into it — so this only ever shows on /api/ and
   /gallery/, where the site's own bar has no such state. */
header nav a[aria-current='page'] {
  color: #26272a;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  header nav {
    scroll-behavior: auto;
  }
}

/* ── footer (shared with the site pages) ── */

/* ─────────────────────────────────────────────────────────────────────────────
   Footer — wordmark fit + removal of the decorative artwork
   -----------------------------------------------------------------------------
   1. The wordmark ("Daakshya") is set in Roboto Flex 800 with -0.583vw/-2px
      tracking. Measured in the browser, the word renders 4.6405x its font size
      at zero tracking, plus 8 x the letter-spacing (one per glyph):

          width = 4.6405 * font-size + 8 * letter-spacing      [measured]

      The site's own sizes are fixed pixels from the md step up (180 / 240 /
      320px), so on any viewport narrower than ~1600px the word is wider than
      its row and both ends are cut off by the row's `overflow-hidden`:

          font  word    row @ breakpoint        result
          180px 819px   md  768px -> 680px      clipped ~140px
          240px 1098px  lg 1024px -> 904px      clipped ~194px
          320px 1469px  xl 1280px -> 1160px     clipped ~309px

      Each breakpoint therefore keeps the site's size but caps it with a
      viewport-derived maximum, so the word fills the row and always fits. The
      cap = (row - safety + 8px of tracking) / 4.6405, where row is the viewport
      less the footer + row padding, and safety is a 16px scrollbar allowance
      plus 12px of breathing room (100vw includes the scrollbar; the page box
      does not). Wide screens are untouched: the cap only starts to bite below
      ~930px (md), ~1300px (lg) and ~1610px (xl) — at 1920px the word is exactly
      the site's original 320px face.

   2. The footer's decorative artwork is two next/image webps served through
      /_next/image?url=… — a route the cPanel host does not have, so it returns
      404 and the graphic never renders (nothing but an empty 100%-cover box).
      The image tags are dropped from the markup and hidden here as a fallback,
      in case hydration reinstates them.
   ──────────────────────────────────────────────────────────────────────────── */

/* 2. the artwork that never renders */
footer > div.pointer-events-none > img { display: none !important; }

/* 3. the footer's brand background
   The template ships the footer on bg-black (#000) — the only black surface
   left on the site, now that the preloader, the Core Values section and the
   mobile menu panel have all moved to the brand primary (#0F2648). The
   background is set on the element rather than by editing the page markup:
   the footer belongs to React, which re-renders it from its own chunk, and the
   rule also reaches the pages whose markup this tree does not author. */
footer { background-color: #0F2648 !important; }

/* 1. wordmark fitted to the row at every width */
footer .font-brand {
  /* phones: the row is the viewport less 48px of footer padding; the tracking
     here is proportional (-0.5833vw, i.e. +4.667vw of width over 8 gaps) */
  font-size: min(calc(86 / 360 * 100vw), calc((104.667vw - 76px) / 4.6405)) !important;
}
/* tablets: fixed -2px tracking, 88px of padding */
@media (min-width: 768px) and (max-width: 1024.98px) {
  footer .font-brand { font-size: min(180px, calc((100vw - 100px) / 4.6405)) !important; }
}
/* laptops: 120px of padding */
@media (min-width: 1025px) and (max-width: 1279.98px) {
  footer .font-brand { font-size: min(240px, calc((100vw - 132px) / 4.6405)) !important; }
}
/* desktops: 120px of padding, and xl:-ml-3 widens the row by 12px on the left */
@media (min-width: 1280px) {
  footer .font-brand { font-size: min(320px, calc((100vw - 120px) / 4.6405)) !important; }
}


/* Restrict copy, paste, select, and contextmenu for API page */
body, html, * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}