/* Shared layout for the public pages (home, APIs, API detail, pricing). */
.sec { padding: 80px 0; }
.sec:nth-of-type(even) { background: var(--panel-2); }
.sec-title { text-align: center; margin-bottom: 32px; }
.sec-title h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; }
.sec-title p { color: var(--dim); margin-top: 8px; }
.narrow { max-width: 860px; margin: 0 auto; }
/* Page header band (APIs, Pricing): full-bleed indigo like the nav */
.page-title { padding: 56px 0 44px; text-align: center; background: var(--hero-bg); color: #ffffff; margin: 0 calc(50% - 50vw) 36px; padding-left: 16px; padding-right: 16px; }
.page-title h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.035em; }
.page-title p { color: rgba(255, 255, 255, 0.84); margin-top: 10px; }

.endpoint { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px;
  background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-bg); border-radius: 12px; font-family: var(--mono); font-size: 13px; }
.endpoint .url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; color: var(--code-fg); }
.endpoint .name { color: #8b94ad; font-family: var(--font); font-size: 13px; white-space: nowrap; }

.api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.api-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, box-shadow .15s; min-width: 0; box-shadow: var(--shadow); }
.api-card:hover { border-color: var(--mint-edge); box-shadow: 0 12px 34px -14px rgba(81, 95, 226, 0.3); }
.api-card .top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.api-card .ico { width: 36px; height: 36px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-size: 17px; }
.api-card b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-card p { color: var(--dim); font-size: 13.5px; flex: 1; }
.api-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--dim); }
@media (max-width: 640px) { .sec { padding: 56px 0; } }