/* Calebe Pay documentation. Presentation only; the API contract is unchanged. */
:root {
  --accent: #1759d9;
  --line: #dce4f0;
  --ink: #111b2d;
  --muted: #53627b;
  --navy: #09172f;
  --blue: #246bfe;
  --orange: #f29102;
  color: var(--ink);
  background: #f7f9fc;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { background: radial-gradient(ellipse at 100% 0, #eaf0ff 0, transparent 650px), #f7f9fc; }
* { box-sizing: border-box; }
::selection { background: #ccddff; color: #071936; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: #246bfe26; }
a { color: var(--accent); text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #6698ff; outline-offset: 5px; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 20; transform: translateY(-180%); padding: 10px 18px; color: white; background: #164cc0; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
aside {
  width: 270px; padding: 36px 24px 24px; z-index: 5;
  background: radial-gradient(ellipse at 0 0, #1b3b6c 0, transparent 440px), var(--navy);
  border: 0; color: #c8d5ed; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: #49628c #0a1830;
}
.brand { gap: 10px; font-size: 25px; letter-spacing: -1px; color: white; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand .mark { display: block; width: 44px; height: 44px; background: transparent; border-radius: 12px; box-shadow: 0 0 0 1px #ffffff2b, 0 5px 20px #030c2159; }
.brand .wordmark { width: 110px; height: auto; filter: brightness(0) invert(1); }
.brand span { color: #8aafff; margin-left: -6px; font-size: 24px; font-weight: 400; }
aside .small { color: #bbc9e2; font-size: 12px; letter-spacing: .2px; margin: 17px 0 0; }
.eyebrow { color: #94aaca; margin: 35px 0 12px; font-size: 10px; letter-spacing: 1.8px; }
nav { counter-reset: navigation; }
nav a { display: flex; align-items: center; gap: 12px; margin: 3px 0; padding: 10px 12px; border-radius: 9px; color: #c3cee0; font-size: 13px; line-height: 1.55; min-height: 42px; border: 1px solid transparent; transition: background .18s, color .18s, border-color .18s; }
nav a::before { counter-increment: navigation; content: counter(navigation, decimal-leading-zero); color: #8ca2c6; font: 10px/1.2 "SFMono-Regular", Consolas, monospace; }
nav a:last-child { margin-top: 18px; border-top-color: #ffffff1a; border-radius: 0; }
nav a:last-child::before { content: none; }
nav a:hover { background: #ffffff0c; color: white; }
nav a .nav-label { display: inline-block; min-width: 0; transform: scale(1); transform-origin: left center; transition: transform .24s cubic-bezier(.2,.65,.3,1); }
nav a[aria-current="location"] .nav-label { transform: scale(1.025); }
nav a[aria-current="location"] {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(ellipse at 35% 50%, #d6e7ff1c, transparent 85%),
    linear-gradient(180deg, #ffffff09, #c5dfff0e);
  border-color: transparent;
  box-shadow: inset 0 3px 7px #020b2838, inset 0 -2px 5px #d9ecff0e;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}
nav a[aria-current="location"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #f3f9ffe6 0%, #d9ecff6b 12%, #c1d8ff1a 32%, #c1d8ff12 61%, #d9ecff73 83%, #f3f9fff0 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}
nav a[aria-current="location"]::before { color: #e0efff; }
.sidefooter { padding-top: 28px; color: #a4b6d3; font-size: 11px; line-height: 1.9; }
.dot { background: #f29102; width: 6px; height: 6px; box-shadow: 0 0 0 4px #f2910215; }
.menu-toggle { display: none; }
main { margin-left: 270px; max-width: 1600px; padding: 25px clamp(28px, 4.5vw, 88px) 50px; min-width: 0; }
header { padding: 0 0 23px; border-color: var(--line); font-size: 12px; color: #54637d; gap: 16px; }
header>span { display: flex; flex-wrap: wrap; gap: 12px; }
header>span>span { color: #a1abc0; }
header a { border-color: #ced9ec; padding: 10px 16px; border-radius: 24px; background: linear-gradient(#f0f4fb, #fff); color: #244370; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 2px 4px #10264b0b; }
.hero { position: relative; isolation: isolate; overflow: hidden; margin: 28px 0 22px; padding: clamp(28px, 4vw, 60px); border: 1px solid #244475; border-radius: 24px; background: radial-gradient(ellipse at 100% 10%, #2457a266, transparent 65%), linear-gradient(125deg, #0c1d3c, #08162c); color: white; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 400px; height: 400px; right: -235px; top: -235px; border-radius: 50%; border: 1px solid #80a9ff26; box-shadow: 0 0 0 65px #80a9ff06, 0 0 0 130px #80a9ff04; pointer-events: none; }
.hero::after { content: ""; position: absolute; bottom: 0; left: 48px; width: 70px; height: 4px; background: var(--orange); }
.badge { border: 0; border-radius: 0; padding: 0; background: none; color: #a8c5ff; font-size: 10px; letter-spacing: 2px; }
.badge::before { content: ""; display: inline-block; height: 6px; width: 6px; margin-right: 10px; background: #f29102; border-radius: 50%; vertical-align: 1px; }
.hero h1 { font-size: clamp(36px, 3.8vw, 62px); font-weight: 600; line-height: 1.06; letter-spacing: -.055em; margin: 23px 0 24px; text-wrap: balance; }
.hero h1 span { color: #84aaff; }
.hero p { color: #c2cee3; max-width: 650px; font-size: 16px; line-height: 1.8; margin: 0; }
.actions { flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.button { border: 1px solid #1655ce; background: linear-gradient(180deg, #195bd9, #3378ff); color: #fff; border-radius: 28px; padding: 13px 22px; min-height: 48px; gap: 16px; font-size: 13px; line-height: 1.45; box-shadow: inset 0 3px 6px #082a7555, inset 0 -1px #ffffff33; transition: background .18s, border-color .18s, box-shadow .18s; }
.button:hover { filter: none; background: #1c5ce2; box-shadow: inset 0 3px 7px #082a7570; }
.button:active { box-shadow: inset 0 4px 9px #082a7588; }
.button.secondary { background: linear-gradient(#e8eef8, #fff); border-color: #d1dbeb; color: #223855; box-shadow: inset 0 2px 5px #11294b14; }
.button.secondary:hover { background: #e7effc; }
.hero .button.secondary { background: linear-gradient(#ffffff07, #ffffff0f); border-color: #7899c84a; color: #edf3ff; box-shadow: inset 0 2px 5px #00000033; }
.hero .button.secondary:hover { background: #ffffff1a; }
.hero .button>span { display: grid; place-items: center; background: #fff; color: #246bfe; width: 26px; height: 26px; border-radius: 50%; margin: -4px -9px -4px 0; }
.callout { border: 1px solid #e7d9ba; background: #fffcf5; color: #68562e; border-radius: 14px; font-size: 13px; line-height: 1.85; margin: 0 0 26px; padding: 20px 24px; }
.callout strong { color: #56421d; font-size: 14px; margin-bottom: 5px; }
.callout a { color: #725115; text-decoration: underline; }
.callout code { color: #695020; background: #f3ecd9; }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0 52px; }
.card { position: relative; padding: 24px; background: linear-gradient(150deg, white, #f7faff); border: 1px solid #dce4f2; border-radius: 16px; box-shadow: 0 4px 16px #16355e04; transition: border-color .2s, box-shadow .2s, transform .2s; }
.card:hover { border-color: #8baef8; transform: translateY(-3px); box-shadow: 0 10px 25px #153d7c0c; }
.card .icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid #d8e5ff; border-radius: 11px; background: #edf3ff; color: #246bfe; font: 20px/1 monospace; }
.card b { font-size: 15px; line-height: 1.5; color: #172945; margin: 18px 0 8px; padding-right: 8px; }
.card p { font-size: 13px; line-height: 1.75; color: #5c6b83; }
.section { scroll-margin-top: 28px; margin: 54px 0; padding-top: 30px; border-top: 1px solid var(--line); }
.section h2 { font-size: clamp(25px, 2.5vw, 34px); font-weight: 600; letter-spacing: -1.1px; line-height: 1.22; color: #142441; margin: 0 0 18px; text-wrap: balance; }
.section h3 { color: #223c63; font-size: 17px; margin: 30px 0 12px; }
.section p,.section li { color: var(--muted); font-size: 15px; line-height: 1.85; }
.section p a { text-decoration: underline; }
code { background: #eaf0fb; color: #244e8b; border-radius: 5px; padding: 3px 6px; font-size: .86em; overflow-wrap: anywhere; }
.codebox { background: #0b1830; border-color: #243858; border-radius: 16px; margin: 24px 0; box-shadow: 0 12px 28px #0d254513; }
.codebar { background: #13223c; border-color: #ffffff12; padding: 13px 22px; color: #b7c9e7; letter-spacing: 1.3px; font-size: 10px; gap: 16px; }
.codebar>span::before { content: ""; width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #7fa6ec; margin-right: 12px; box-shadow: 12px 0 #5075b0, 24px 0 #2e4b76; }
.codebar>span { padding-left: 0; }
.codebar>span::before { margin-right: 36px; }
.copy { min-height: 36px; padding: 7px 13px; background: #0c192e; border-color: #425777; color: #d9e6fa; border-radius: 8px; font-size: 12px; letter-spacing: 0; }
.copy:hover { background: #263d61; border-color: #90b4ed; }
.codebar .lang { min-height: 36px; padding: 6px 9px; background: #0c192e; border-color: #425777; color: #d9e6fa; border-radius: 8px; font-size: 12px; letter-spacing: 0; }
.codebar .lang:hover { border-color: #90b4ed; }
pre { padding: 26px; line-height: 1.9; color-scheme: dark; scrollbar-width: thin; scrollbar-color: #4b638a #0b1830; }
pre code { color: #c5d9fa; font-size: 13px; overflow-wrap: normal; }
pre [data-api-base] { color: #92b6ff; }
.endpoint { gap: 12px; padding: 16px 18px; border-radius: 12px; border-color: #dce4f0; background: #fff; }
.method { font-size: 10px; letter-spacing: .5px; background: #e9efff; color: #244eac; border-radius: 6px; min-width: 51px; padding: 5px 8px; }
.method.get { color: #176766; background: #e8f6f4; }
.endpoint code { color: #263d60; font-size: 13px; min-width: 0; }
.endpoint small { font-size: 12px; color: #64748b; }
table { border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; font-size: 14px; border-color: var(--line); }
td, th { padding: 17px 20px; border-bottom-color: #e4eaf3; }
th { background: #ecf1f9; color: #304b72; font-size: 12px; font-weight: 700; }
td { color: #52637c; }
td:first-child { color: #203958; width: 32%; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8faff; }
.note { border: 1px solid #d2dff7; border-left: 3px solid #6894ed; border-radius: 0 12px 12px 0; padding: 18px 22px; background: #edf3ff; color: #455d85; font-size: 14px; line-height: 1.85; }
ol { padding-left: 28px; }
ol li { padding: 6px 0 6px 10px; }
ol li::marker { color: #246bfe; font-weight: 700; font-variant-numeric: tabular-nums; }
footer { border-color: var(--line); padding-top: 26px; color: #687991; font-size: 12px; gap: 20px; flex-wrap: wrap; }
footer a { display: inline-block; padding: 8px 0; }
@media (min-width: 1800px) { main { margin-right: auto; } }
@media (max-width: 1120px) {
  aside { width: 238px; padding: 28px 18px 20px; }
  main { margin-left: 238px; padding: 24px 28px 45px; }
  .brand .wordmark { width: 96px; }
  .brand .mark { width: 40px; height: 40px; }
  .hero { padding: 34px; }
  .hero h1 { font-size: 42px; }
  .cards { gap: 10px; }
  .card { padding: 18px; }
  .endpoint small { width: 100%; margin-left: 63px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 100px; }
  aside { position: sticky; top: 0; width: 100%; padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; gap: 0 12px; max-height: 85svh; box-shadow: 0 3px 16px #0718311a; }
  .brand { font-size: 23px; }
  .brand .mark { width: 38px; height: 38px; }
  .brand .wordmark { width: 91px; }
  .brand span { font-size: 21px; }
  aside>p.small, aside .eyebrow, .sidefooter { display: none; }
  nav { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; margin-top: 16px; border-top: 1px solid #ffffff20; padding-top: 10px; }
  nav a { font-size: 12px; min-height: 44px; }
  nav a:last-child { margin-top: 3px; border: 1px solid transparent; border-radius: 9px; }
  .navigation-ready:not(.navigation-open) nav { display: none; }
  .navigation-ready .menu-toggle { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #597296; background: #122747; color: #e6efff; border-radius: 10px; padding: 9px 12px; font-size: 12px; min-height: 44px; }
  .menu-toggle span { font-size: 18px; }
  main { margin: 0; padding: 20px 20px 36px; }
  header { font-size: 11px; padding-bottom: 18px; }
  header>span { gap: 5px; }
  header a { font-size: 11px; padding: 9px 13px; }
  .hero { margin-top: 22px; padding: 34px 28px 38px; border-radius: 20px; }
  .hero h1 { font-size: clamp(34px, 6.8vw, 48px); margin: 23px 0; }
  .hero h1 br { display: none; }
  .hero h1 span::before { content: " "; }
  .hero p { font-size: 15px; }
  .hero::after { left: 28px; }
  .cards { grid-template-columns: 1fr; gap: 12px; margin-bottom: 38px; }
  .card { padding: 20px 22px; }
  .card b { margin: 12px 0 5px; }
  .callout { padding: 18px 20px; }
  .section { scroll-margin-top: 105px; margin: 38px 0; padding-top: 28px; }
  .section h2 { font-size: 28px; }
  .section p,.section li { font-size: 15px; }
  table { display: table; table-layout: fixed; font-size: 13px; }
  td,th { padding: 13px 12px; overflow-wrap: anywhere; }
  td:first-child { width: 38%; }
  pre { padding: 20px; }
  .codebar { padding: 12px 15px; letter-spacing: .8px; }
  .codebar>span::before { display: none; }
  .endpoint { padding: 14px; gap: 10px; }
  .endpoint code { font-size: 12px; flex: 1; }
  .endpoint small { margin-left: 0; }
  .note { padding: 16px 18px; }
  footer { display: flex; font-size: 12px; gap: 8px; }
}
@media (max-width: 380px) {
  aside { padding: 14px; gap: 8px; }
  .brand .wordmark { width: 80px; }
  .brand { gap: 7px; }
  .brand span { font-size: 19px; }
  .navigation-ready .menu-toggle { font-size: 11px; padding: 8px; }
  main { padding-left: 14px; padding-right: 14px; }
  .hero { padding: 28px 22px 32px; }
  .hero h1 { font-size: 34px; }
  .button { padding: 13px 17px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, button { transition: none !important; }
  nav a .nav-label { transition: none; }
  .card:hover { transform: none; }
}
@media print {
  aside, header, .actions, .skip-link, .copy { display: none; }
  main { margin: 0; padding: 0; max-width: none; }
  .hero { background: white; color: black; border: 0; padding: 0; }
  .hero h1 span,.hero p,.badge { color: black; }
  .hero::before,.hero::after { display: none; }
  .codebox, pre { background: #f3f5f9; color: black; box-shadow: none; }
  pre code, pre [data-api-base] { color: black; }
  pre { white-space: pre-wrap; }
  .section { break-inside: avoid; }
}