/* ============================================================
   /api — the Business API docs and pricing page.
   Builds on base.css tokens and landing.css's header/footer.
   ============================================================ */

.api-nav__actions{display:flex; align-items:center; gap:var(--s3)}
.api-nav__link{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:500}
.api-nav__link:hover{color:var(--ink)}
@media (max-width:520px){ .api-nav__link{display:none} }

/* ---------- hero ---------- */
.api-hero{padding:clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); background:linear-gradient(180deg, var(--pink-tint-2), var(--bg))}
.api-hero h1{font-size:clamp(32px, 5vw, 52px); line-height:1.08; letter-spacing:-.02em; margin:var(--s2) 0 var(--s3); max-width:18ch}
.api-hero .lead{max-width:60ch}
.api-hero__cta{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}

/* ---------- two-column layout: sticky contents on desktop ---------- */
.api-layout{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--s5); padding-top:var(--s4); padding-bottom:var(--sec-y)}
.api-toc{display:none}
@media (min-width:1024px){
  .api-layout{grid-template-columns:220px minmax(0, 1fr)}
  .api-toc{display:flex; flex-direction:column; gap:2px; position:sticky; top:calc(var(--nav-h) + 16px); align-self:start; max-height:calc(100vh - var(--nav-h) - 32px); overflow:auto; font-size:14px}
  .api-toc a{color:var(--ink-2); text-decoration:none; padding:5px 10px; border-radius:8px}
  .api-toc a:hover{background:var(--bg-2); color:var(--ink)}
  .api-toc__label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:0 0 var(--s1) 10px}
}

/* ---------- document ---------- */
.api-doc{min-width:0}
.api-doc section{padding-top:var(--s5); scroll-margin-top:calc(var(--nav-h) + 12px)}
.api-doc section:first-child{padding-top:0}
.api-doc h2{font-size:clamp(24px, 3vw, 30px); letter-spacing:-.01em; margin:0 0 var(--s3)}
.api-doc h3{font-size:18px; margin:0 0 var(--s2)}
.api-doc p, .api-doc li{color:var(--ink-2); line-height:1.65}
.api-doc p strong, .api-doc li strong{color:var(--ink)}
.api-doc a{color:var(--pink-dark)}
.api-doc code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88em; background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--ink); word-break:break-word}

.code{margin:var(--s2) 0 var(--s3); background:#1C1B1F; color:#F4EEF0; border-radius:var(--r); padding:var(--s3); overflow-x:auto; font-size:13px; line-height:1.6}
.code code{background:none; border:0; padding:0; color:inherit; font-size:inherit; word-break:normal; white-space:pre}

.steps{padding-left:1.3em; display:grid; gap:var(--s1)}
.ticks{list-style:none; padding:0; display:grid; gap:var(--s2)}
.ticks li{position:relative; padding-left:26px}
.ticks li::before{content:""; position:absolute; left:2px; top:.55em; width:12px; height:7px; border-left:2px solid var(--pink); border-bottom:2px solid var(--pink); transform:rotate(-45deg)}

/* ---------- flow diagram ---------- */
.flow{display:flex; flex-direction:column; align-items:stretch; gap:var(--s1); margin:var(--s2) 0 var(--s4)}
.flow__box{border:1px solid var(--line); border-radius:var(--r); padding:var(--s2) var(--s3); background:var(--bg); display:flex; flex-direction:column; gap:2px}
.flow__box span{color:var(--ink-2); font-size:14px}
.flow__box--key{border-color:#F3C3D0; background:var(--pink-tint-2)}
.flow__box--us{border-color:var(--pink); background:var(--pink-tint)}
.flow__arrow{align-self:center; color:var(--pink); font-size:22px; transform:rotate(90deg); line-height:1}
@media (min-width:760px){
  .flow{flex-direction:row; align-items:center}
  .flow__box{flex:1}
  .flow__arrow{transform:none}
}

/* ---------- callouts ---------- */
.callout{border:1px solid var(--line); border-left:4px solid var(--ink-3); border-radius:var(--r); padding:var(--s3); margin:0 0 var(--s3); background:var(--bg-2)}
.callout h3{margin-bottom:var(--s1)}
.callout p{margin:0}
.callout p + p{margin-top:var(--s1)}
.callout--danger{border-left-color:#C0392B; background:#FDF1EF}
.callout--danger h3{color:#A5301F}
.callout--warn{border-left-color:#D98E04; background:#FFF8EA}
.callout--warn h3{color:#8A5A00}

/* ---------- tables ---------- */
.tbl-doc{width:100%; border-collapse:collapse; margin:var(--s2) 0 var(--s3); font-size:14px; display:block; overflow-x:auto}
.tbl-doc tbody, .tbl-doc thead{display:table; width:100%; table-layout:auto}
.tbl-doc th, .tbl-doc td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink-2)}
.tbl-doc thead th{color:var(--ink); font-weight:600; background:var(--bg-2)}
.tbl-doc tbody th{color:var(--ink); font-weight:600; width:32%}
.tbl-doc td:first-child{white-space:nowrap}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--s2); margin:var(--s3) 0}
.plan{position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3); background:var(--bg); box-shadow:var(--shadow-sm)}
.plan p{margin:0}
.plan--pop{border-color:var(--pink); box-shadow:var(--shadow-md)}
.plan__tag{position:absolute; top:-10px; right:12px; background:var(--pink); color:#fff; font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px}
.plan__name{font-weight:600; color:var(--ink) !important}
.plan__price{font-size:30px; font-weight:700; color:var(--ink) !important; letter-spacing:-.02em; margin-top:var(--s1) !important}
.plan__images{font-weight:500; color:var(--ink) !important}
.plan__per{font-size:13px}

/* ---------- limits ---------- */
.limits{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--s2); margin-bottom:var(--s3)}
.limits div{border:1px solid var(--line); border-radius:var(--r); padding:var(--s2) var(--s3); background:var(--pink-tint-2); display:flex; flex-direction:column}
.limits strong{font-size:24px; color:var(--ink)}
.limits span{font-size:13px; color:var(--ink-2)}

/* ---------- endpoints ---------- */
.ep{border-top:1px solid var(--line); padding-top:var(--s4); margin-top:var(--s4); scroll-margin-top:calc(var(--nav-h) + 12px)}
.ep h3{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:17px; display:flex; align-items:center; gap:var(--s1); flex-wrap:wrap}
.verb{font-size:12px; font-weight:700; border-radius:6px; padding:3px 8px; letter-spacing:.04em}
.verb--get{background:#E7F5EE; color:#1E7B4E}
.verb--post{background:var(--pink-tint); color:var(--pink-dark)}

/* ---------- faq + end ---------- */
details{border-bottom:1px solid var(--line); padding:var(--s2) 0}
summary{cursor:pointer; font-weight:600; color:var(--ink)}
details p{margin:var(--s1) 0 0}
.api-end{margin-top:var(--s6); text-align:center; padding:var(--s5) var(--s3); border-radius:var(--r-xl); background:var(--pink-tint)}
.api-end h2{margin-bottom:var(--s1)}
.api-end p{margin:0 0 var(--s3)}

/* ---------- integrate in 4 steps ---------- */
.int__title{font-size:20px; margin:var(--s4) 0 var(--s2) !important}
.int{list-style:none; padding:0; margin:0; display:grid; gap:var(--s2)}
.int__step{display:flex; gap:var(--s3); align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3); background:var(--bg); box-shadow:var(--shadow-sm); min-width:0}
.int__step > div{min-width:0; flex:1}
.int__step h4{font-size:16px; margin:0 0 6px; color:var(--ink)}
.int__step p{margin:0 0 var(--s2)}
.int__step .code{margin-bottom:0}
.int__n{flex:none; width:34px; height:34px; border-radius:50%; background:var(--pink); color:#fff; font-weight:700; display:grid; place-items:center}
@media (max-width:520px){ .int__step{flex-direction:column; gap:var(--s2)} }

/* Buttons inside the document keep button colours, not link colours. */
.api-doc a.btn{color:#fff; text-decoration:none}
.api-doc a.btn--ghost{color:var(--ink)}

/* ---------- overview page ---------- */
.ov{padding-bottom:var(--sec-y)}
.ov section{padding-top:var(--s6)}
.ov h2{font-size:clamp(24px,3vw,30px); letter-spacing:-.01em; margin:0 0 var(--s3)}
.ov__sub{color:var(--ink-2); margin:-8px 0 0}
.ov__small{color:var(--ink-3); font-size:14px}
.ov__cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--s3)}
.ov__card{border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); background:#fff; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:8px}
.ov__card h3{font-size:18px; margin:0}
.ov__card p{color:var(--ink-2); margin:0; flex:1}
.ov__card a{color:var(--pink-dark); font-weight:600; text-decoration:none}
.ov__icon{font-size:28px}
.ov__steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:var(--s2); counter-reset:s}
.ov__steps li{counter-increment:s; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3); display:flex; flex-direction:column; gap:4px; background:var(--pink-tint-2)}
.ov__steps li::before{content:counter(s); width:30px; height:30px; border-radius:50%; background:var(--pink); color:#fff; font-weight:700; display:grid; place-items:center; margin-bottom:6px}
.ov__steps span{color:var(--ink-2); font-size:15px}
.ov__rules{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--s2)}
.ov__rules .callout{margin:0}
.ov__rules .callout p{color:var(--ink-2); line-height:1.6}
.api-end a.btn{color:#fff}
.api-end a.btn--ghost{color:var(--ink)}

/* ---------- "What you can make" showcase ---------- */
.ov__sub{margin-bottom:var(--s3) !important}
.show{
  border:1px solid var(--line); border-radius:var(--r-xl); background:#fff; box-shadow:var(--shadow-sm);
  padding:var(--s3); display:flex; flex-direction:column; gap:8px; min-width:0;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.show:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}
.show h3{font-size:19px; letter-spacing:-.01em; margin:0}
.show p{color:var(--ink-2); margin:0; line-height:1.55}
.show a{color:var(--pink-dark); font-weight:600; text-decoration:none; margin-top:auto; padding-top:6px}
.show__tag{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); border-radius:99px; padding:3px 10px 3px 4px}
.show__tag:not(:has(.verb)){padding-left:10px; font-family:inherit; font-weight:600}
.show__tag .verb{font-size:10.5px; padding:2px 6px}

/* the wide clothing card */
.show--wide{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); padding:var(--s4); background:linear-gradient(135deg, #fff 0%, var(--pink-tint-2) 100%); margin-bottom:var(--s3)}
.show__text{display:flex; flex-direction:column; gap:10px; justify-content:center}
.show--wide h3{font-size:clamp(22px,2.6vw,28px)}
.show__flow{display:flex; align-items:center; gap:var(--s2); min-width:0}
.show__before{margin:0; flex:0 0 26%; position:relative}
.show__before img{width:100%; height:auto; border-radius:var(--r); filter:saturate(.85); box-shadow:var(--shadow-sm)}
.show__before figcaption{position:absolute; left:8px; bottom:8px; background:rgba(26,26,26,.72); color:#fff; font-size:11.5px; font-weight:600; border-radius:99px; padding:3px 9px}
.show__arrow{flex:none; width:34px; height:34px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; font-weight:700; box-shadow:0 6px 16px rgba(232,85,123,.35)}
.show__after{flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; min-width:0}
.show__after img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow-sm); background:var(--bg-2)}
@media (min-width:960px){ .show--wide{grid-template-columns:320px minmax(0,1fr); align-items:center} }
@media (max-width:560px){
  .show__flow{flex-direction:column}
  .show__before{flex:none; width:46%}
  .show__arrow{transform:rotate(90deg)}
  .show__after{grid-template-columns:repeat(2, 1fr); width:100%}
}

/* the three smaller cards */
.show__row{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:var(--s3)}
.show__media{border-radius:var(--r-lg); background:var(--bg-2); margin-bottom:8px; aspect-ratio:4/3; overflow:hidden}
.show__grid{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px; background:#F6F3F4}
.show__grid img{width:100%; height:100%; object-fit:cover; border-radius:10px; background:#fff}
.show__faces{display:flex; align-items:center; justify-content:center; padding:0 12px; background:linear-gradient(135deg, var(--pink-tint) 0%, #F7F1FA 100%)}
.show__faces img{width:27%; aspect-ratio:1; object-fit:cover; border-radius:50%; border:3px solid #fff; box-shadow:var(--shadow-sm); margin-left:-7%}
.show__faces img:first-child{margin-left:0}
.show__more{margin-left:8px; font-size:12px; font-weight:700; color:var(--pink-dark); background:#fff; border-radius:99px; padding:4px 10px; box-shadow:var(--shadow-sm); white-space:nowrap}
.show__usage{display:flex; flex-direction:column; justify-content:center; gap:8px; padding:16px; background:#1C1B1F}
.usage__row{display:grid; grid-template-columns:80px 1fr; align-items:center; gap:10px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; color:#F4EEF0}
.usage__row span:last-child{display:flex; align-items:center; gap:8px}
.usage__row i{display:block; height:8px; width:var(--w); border-radius:99px; background:linear-gradient(90deg, var(--pink), #F59DB5)}
.usage__head{color:#9C94A0; font-size:11px; text-transform:uppercase; letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){ .show, .show:hover{transition:none; transform:none} }
.show__grid{grid-template-rows:1fr 1fr}
.show__grid img{min-height:0; object-fit:contain}
@media (max-width:560px){ .show__faces, .show__usage{aspect-ratio:16/9} }