/* ==================================================
   SMS API PAGE (/api-sms) — page-only pieces. Shared product-page pieces are in product-v3.css,
   the base design in home-v2.css. Accent: the API SMS icon orange (.pv-page--api).
   ================================================== */

/* ---------- hero: terminal mock + floating cards ---------- */
.api-demo { position: relative; width: 100%; max-width: 520px; min-height: 520px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.api-demo__term { position: relative; width: 100%; max-width: 440px; border-radius: 18px; background: #101828; box-shadow: 0 28px 60px rgba(16, 24, 40, 0.28); overflow: hidden; }
.api-demo__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #1D2939; }
.api-demo__bar span { width: 10px; height: 10px; border-radius: 50%; background: #475467; }
.api-demo__bar span:nth-child(1) { background: #FDA29B; }
.api-demo__bar span:nth-child(2) { background: #FEC84B; }
.api-demo__bar span:nth-child(3) { background: #6CE9A6; }
.api-demo__bar em { margin-left: 8px; font-size: 11px; font-style: normal; color: #98A2B3; font-family: 'Inter', sans-serif; }
.api-demo__screen { margin: 0; padding: 18px 18px 44px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 20px; color: #E4E7EC; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.api-line { display: block; opacity: 0; animation: api-line 11s ease-out infinite; }
.api-line--1 { animation-delay: 0.2s; }
.api-line--2 { animation-delay: 0.9s; }
.api-line--3 { animation-delay: 1.5s; }
.api-line--4 { animation-delay: 2.0s; height: 20px; }
.api-line--5 { animation-delay: 3.0s; }
.api-line--6 { animation-delay: 3.2s; }
.api-line--7 { animation-delay: 3.4s; }
.api-line--8 { animation-delay: 3.6s; }
.api-line--9 { animation-delay: 3.8s; }
.api-line--10 { animation-delay: 5.2s; }
@keyframes api-line { 0% { opacity: 0; transform: translateY(3px); } 3%, 90% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }
.api-cursor::after { content: ""; display: inline-block; width: 8px; height: 14px; margin-top: 3px; background: #F79009; animation: api-blink 0.9s steps(1) infinite; }
@keyframes api-blink { 50% { opacity: 0; } }
.api-p { color: #F79009; font-weight: 700; }
.api-k { color: #FDB022; font-style: normal; }
.api-s { color: #A6F4C5; font-style: normal; }
.api-t { color: #84CAFF; font-style: normal; }
.api-m { color: #98A2B3; font-style: normal; }

.api-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #EEF0F4;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
    font-family: 'Inter', sans-serif;
    opacity: 0;
    transform: translateY(8px);
    animation: api-float-in 11s ease-out infinite;
    z-index: 2;
}
.api-float__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; }
.api-float__icon--ok { background: #F0FDF4; }
.api-float__icon--hook { background: #FFF6ED; }
.api-float__icon--otp { background: #E6F7F5; }
.api-float__icon img { display: block; }
.api-float__body { display: flex; flex-direction: column; line-height: 1.25; }
.api-float__body strong { font-size: 13px; font-weight: 600; color: var(--f2h-ink); }
.api-float__body em { font-size: 12px; font-style: normal; color: var(--f2h-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.api-float__dot { width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: #D97706; animation: api-ping 1.2s ease-out infinite; }
.api-float--ok   { right: -10px; top: -22px;  animation-delay: 3.2s; }
.api-float--hook { left: -14px; bottom: -22px; animation-delay: 5.4s; }
.api-float--otp  { right: -6px;  top: 46%; animation-delay: 6.4s; }
@keyframes api-float-in { 0% { opacity: 0; transform: translateY(8px); } 4%, 90% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes api-ping { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); } }

/* the hero card must fit the first screen: the terminal shrinks with the viewport height, as the phones do on the other pages */
@media (min-width: 1025px) {
    .pv-page .api-demo { min-height: 0; max-width: min(520px, 100%); }
    .pv-page .api-demo__term { max-width: clamp(320px, calc((100vh - 270px) * 0.78), 440px); }
    .pv-page .api-demo__screen { font-size: clamp(10.5px, calc((100vh - 270px) * 0.022), 12.5px); line-height: 1.6; }
    .pv-page .api-float--ok { top: -22px; right: 0; }
    .pv-page .api-float--hook { bottom: -22px; left: 0; }
    .pv-page .api-float--otp { top: 46%; right: 0; }
}

.f2h-hero__lead code { padding: 1px 6px; border-radius: 5px; background: #FFF6ED; color: #B45309; font-size: 0.92em; }

/* ---------- API explorer ---------- */
.api-x { padding: 18px 18px 22px; border-radius: 22px; }
.api-x__channels { display: flex; flex-wrap: wrap; gap: 8px; }
.api-x__ch {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
    border: 1px solid #E4E7EC; background: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: #344054; cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.api-x__ch img { display: block; }
.api-x__ch:hover { border-color: var(--pv-soft-border); background: var(--pv-soft); }
.api-x__ch.is-on { border-color: var(--pv-accent); background: var(--pv-soft); color: var(--pv-accent-dark); }
.api-x__langs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; padding: 4px; border-radius: 12px; background: #F2F4F7; }
.api-x__lang {
    padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #475467; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.api-x__lang:hover { color: var(--f2h-ink); }
.api-x__lang.is-on { background: #FFFFFF; color: var(--pv-accent-dark); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); }
.api-x__panel { display: none; margin-top: 18px; min-width: 0; }
.api-x__panel.is-on { display: block; }
.api-x__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; }
.api-x__head h3 { margin: 0; font-family: inherit; font-size: 19px; font-weight: 700; color: var(--f2h-ink); }
.api-x__endpoint { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px; border-radius: 9px; background: #FFF6ED; color: #7C2D12; font-size: 12.5px; overflow-wrap: anywhere; }
.api-x__endpoint em { padding: 2px 7px; border-radius: 6px; background: var(--pv-accent); color: #FFFFFF; font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: 0.04em; }
.api-x__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.api-x__req, .api-x__res { min-width: 0; }
.api-x__res { display: grid; gap: 14px; }
.api-x .pv-code, .api-hooks .pv-code { min-width: 0; max-width: 100%; }
.api-x__code { display: none; }
.api-x__code.is-on { display: block; }
.api-x .pv-code pre, .api-hooks .pv-code pre { max-height: 420px; max-width: 100%; overflow: auto; }
/* request samples wrap instead of scrolling sideways: every parameter stays readable and copy still copies the whole command */
.api-x__req .pv-code pre, .api-x__req .pv-code code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.api-x__copy {
    padding: 4px 10px; border: 1px solid #344054; border-radius: 7px; background: transparent; color: #D0D5DD; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.api-x__copy:hover { background: #344054; color: #FFFFFF; }
.api-x__note { margin: 12px 0 0 !important; font-size: 13.5px; line-height: 21px; color: var(--f2h-muted); }
.api-x__note + .api-x__note { display: none; }

/* ---------- webhooks ---------- */
.api-hooks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.api-hooks__how, .api-hooks__samples { min-width: 0; }
.api-hooks__how { padding: 26px 26px 26px; border-radius: 22px; }
.api-hooks__how h3 { margin: 0 0 12px; font-family: inherit; font-size: 20px; font-weight: 700; color: var(--f2h-ink); }
.api-hooks__steps { margin: 0 0 18px; padding: 0 0 0 20px; font-size: 14.5px; line-height: 23px; color: #475467; }
.api-hooks__steps li { margin-bottom: 8px; }
.api-hooks__steps b { color: var(--f2h-ink); }
.api-hooks__steps code { padding: 1px 5px; border-radius: 4px; background: #FFF6ED; color: #B45309; font-size: 12.5px; }
.api-hooks__samples { display: grid; gap: 14px; }

/* ---------- error table ---------- */
.api-errors { padding: 0; }
.api-errors__scroll { overflow-x: auto; }
.api-errors__table th, .api-errors__table td { white-space: normal; vertical-align: top; }
.api-errors__table td code { padding: 1px 6px; border-radius: 5px; background: #FFF6ED; color: #B45309; font-size: 12px; }
.api-errors__fix { color: #475467; }
.api-errors__note { border-top: 1px solid #EEF0F4; }
.api-errors__note a { color: var(--pv-accent-dark); }

/* ---------- best practices ---------- */
.api-tips .f2h-channel { cursor: default; }
.api-tips .f2h-channel__text { min-height: 0; }

/* ---------- FAQ groups ---------- */
.api-faq__group { margin: 26px 0 10px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pv-accent-dark); }
.api-faq__group:first-child { margin-top: 0; }
.api-faq summary h4 { margin: 0; font-family: inherit; font-size: 16.5px; font-weight: 600; line-height: 24px; color: var(--f2h-ink); }
.api-faq details[open] summary h4 { color: var(--pv-accent); }
.api-faq .pv-faq__body p, .api-x__note, .api-hooks__steps li { overflow-wrap: anywhere; }

@media (max-width: 1200px) {
    .api-demo { max-width: 460px; min-height: 480px; }
    .api-float--hook { left: 0; }
    .api-float--ok, .api-float--otp { right: 0; }
}
@media (max-width: 1024px) {
    .api-demo { min-height: 0; padding: 20px 0 30px; }
    .api-demo__term { max-width: 420px; }
    .api-x__grid { grid-template-columns: 1fr; }
    .api-hooks { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .api-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 0; }
    .api-demo__screen { font-size: 10.5px; line-height: 17px; padding: 14px; }
    .api-float { position: static; width: 100%; max-width: 420px; padding: 8px 12px 8px 8px; opacity: 1; transform: none; animation: none; }
    .api-x { padding: 14px 12px 18px; }
    .api-x__ch { padding: 8px 12px 8px 8px; font-size: 12.5px; }
    .api-x__lang { padding: 6px 9px; font-size: 12px; }
    .api-x__head h3 { font-size: 17px; }
    .api-x .pv-code pre { font-size: 12px; }
    .api-hooks__how { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .api-line, .api-float { opacity: 1; transform: none; animation: none; }
    .api-cursor::after, .api-float__dot { animation: none; }
}

/* four get-started steps on this page */
.pv-page--api #get-started ol.pv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .pv-page--api #get-started ol.pv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .pv-page--api #get-started ol.pv-steps { grid-template-columns: 1fr; } }

/* "where the ID comes from": short numbered steps under each request sample */
.api-x__how { margin: 14px 0 0; padding: 14px 16px 12px; border-radius: 14px; background: var(--pv-soft, #FFF7E8); border: 1px solid var(--pv-soft-border, #FBE3B8); }
.api-x__how strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--f2h-ink); }
.api-x__how ol { counter-reset: how; margin: 8px 0 0; padding: 0; list-style: none; }
.api-x__how li { counter-increment: how; position: relative; padding: 0 0 0 30px; margin: 0 0 7px; font-size: 13.5px; line-height: 20px; color: #344054; overflow-wrap: anywhere; }
.api-x__how li::before { content: counter(how); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: var(--pv-accent); color: #FFFFFF; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 20px; }
.api-x__how p { margin: 6px 0 0 !important; font-size: 13px; line-height: 19px; color: var(--f2h-muted); }