/* The public API page (/phone-validator-api). Tabs are radio buttons styled
   by CSS alone, so every sample works without JavaScript. Selectors start
   with .public-page where the public shell styles the same elements. */

/* Hero: the pitch beside the request. */
.api-product-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.public-page .api-product-pitch h1.h1-xlarge { max-width: none; }
.public-page .api-product-pitch p.public-hero-copy { max-width: 520px; }

/* Code panels. */
.api-product-code { min-width: 0; border-radius: 10px; background: #111816; color: #e6efe9; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(17, 24, 22, .55); }
.api-product-tab-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.api-product-tab-labels { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 14px 0; border-bottom: 1px solid #26332e; }
.api-product-tab-labels label { margin: 0 0 -1px; padding: 7px 12px; border-radius: 6px 6px 0 0; color: #9fb2a9; font-size: 13px; font-weight: 600; cursor: pointer; }
.api-product-tab-labels label:hover { color: #fff; }
.public-page p.api-product-endpoint { margin: 0; padding: 12px 18px; border-bottom: 1px solid #26332e; color: #cfe3d8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
.api-product-endpoint span { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 4px; background: #1d4d36; color: #7ee2a8; font-size: 12px; font-weight: 700; }
.api-product-panel { display: none; margin: 0; padding: 16px 18px; background: transparent; color: #f2d58a; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.api-product-tab-input[data-lang="curl"]:checked ~ .api-product-tab-labels label[data-lang="curl"],
.api-product-tab-input[data-lang="python"]:checked ~ .api-product-tab-labels label[data-lang="python"],
.api-product-tab-input[data-lang="node"]:checked ~ .api-product-tab-labels label[data-lang="node"],
.api-product-tab-input[data-lang="php"]:checked ~ .api-product-tab-labels label[data-lang="php"],
.api-product-tab-input[data-lang="ruby"]:checked ~ .api-product-tab-labels label[data-lang="ruby"],
.api-product-tab-input[data-lang="go"]:checked ~ .api-product-tab-labels label[data-lang="go"],
.api-product-tab-input[data-lang="csharp"]:checked ~ .api-product-tab-labels label[data-lang="csharp"] { background: #1d4d36; color: #fff; }
.api-product-tab-input[data-lang="curl"]:checked ~ .api-product-panel[data-lang="curl"],
.api-product-tab-input[data-lang="python"]:checked ~ .api-product-panel[data-lang="python"],
.api-product-tab-input[data-lang="node"]:checked ~ .api-product-panel[data-lang="node"],
.api-product-tab-input[data-lang="php"]:checked ~ .api-product-panel[data-lang="php"],
.api-product-tab-input[data-lang="ruby"]:checked ~ .api-product-panel[data-lang="ruby"],
.api-product-tab-input[data-lang="go"]:checked ~ .api-product-panel[data-lang="go"],
.api-product-tab-input[data-lang="csharp"]:checked ~ .api-product-panel[data-lang="csharp"] { display: block; }
.api-product-tab-input:focus-visible ~ .api-product-tab-labels { outline: 2px solid #7ee2a8; outline-offset: -2px; }

/* Facts line under the hero. */
.api-product-facts { display: flex; flex-wrap: wrap; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid #dce6e0; border-bottom: 1px solid #dce6e0; }
.api-product-facts li { flex: 1 1 0; min-width: 160px; padding: 16px 20px; color: #4d5c55; font-size: 15px; }
.api-product-facts li + li { border-left: 1px solid #dce6e0; }
.api-product-facts strong { display: block; color: #146c43; font-size: 24px; font-weight: 700; line-height: 1.2; }
.api-product-facts a { color: inherit; text-decoration: none; }
.api-product-facts a:hover strong { text-decoration: underline; }
.public-page p.api-product-facts-note { margin: 10px 0 0; color: #6a7872; font-size: 13px !important; }

/* The response, annotated. */
.api-product-anatomy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; margin-top: 8px; }
.public-page p.api-product-response-label { margin: 0; padding: 14px 18px 0; color: #9fb2a9; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; }
.api-product-response-label span { margin-left: 6px; color: #7ee2a8; }
.public-page .api-product-response .public-code-example { margin: 0; padding: 10px 18px 18px; border: 0; border-radius: 0; background: transparent; color: #cfe3d8; font-size: 13px; overflow: auto; }
.api-product-notes { margin: 0; }
.api-product-notes > div { padding: 14px 0; border-top: 1px solid #dce6e0; }
.api-product-notes > div:first-child { border-top: 0; padding-top: 0; }
.api-product-notes dt { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.api-product-notes dt code { padding: 2px 8px; border-radius: 5px; background: #eef7f2; color: #146c43; font-size: 13px; font-weight: 600; }
.api-product-notes dd { margin: 0; color: #4d5c55; font-size: 15px; line-height: 1.55; }
.public-page p.api-product-anatomy-more { margin: 20px 0 0; }

/* Rest of the page. */
.public-page .api-product-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.public-page .api-product-features code { font-size: .92em; }
.public-page .api-product-agent .public-code-example { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.public-page .api-product-faq details { padding: 14px 0; border-bottom: 1px solid #dce6e0; }
.public-page .api-product-faq summary { font-weight: 600; cursor: pointer; }
.public-page .api-product-faq details p { margin: 10px 0 0; max-width: 760px; }
.public-page p.api-product-older { margin-top: 20px; font-size: 14px !important; }
.public-page .api-product-older a { color: #58665f; }

@media (max-width: 960px) {
  .api-product-hero-grid, .api-product-anatomy-grid { grid-template-columns: 1fr; gap: 28px; }
  .public-page .api-product-features { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .api-product-facts li { flex-basis: 50%; min-width: 0; padding: 12px 14px; }
  .api-product-facts li + li { border-left: 0; }
  .api-product-facts li:nth-child(even) { border-left: 1px solid #dce6e0; }
  .api-product-facts li:nth-child(n + 3) { border-top: 1px solid #dce6e0; }
  .api-product-facts strong { font-size: 20px; }
}

/* Security and privacy. */
.public-page .api-product-trust { background: #f6faf8; }
.public-page p.api-product-trust-lead { max-width: 720px; margin-bottom: 8px; }

/* Use cases and the AI-agent prompt. */
.api-product-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.public-page a.api-product-use { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid #dce6e0; border-radius: 10px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.public-page a.api-product-use:hover { border-color: #9fd0b6; box-shadow: 0 10px 24px -18px rgba(20, 108, 67, .6); }
.public-page .api-product-use h3 { margin: 0; font-size: 18px; }
.public-page .api-product-use p { margin: 0; flex: 1; }
.public-page .api-product-use span { color: #146c43; font-weight: 600; font-size: 15px; }
.public-page .api-product-use span::after { content: " →"; }
.public-page .api-product-uses-footer { margin-top: 24px; }
.public-page .api-product-uses-footer p { margin-bottom: 16px; }
.public-page section.api-product-agent { background: #f6faf8; }
.api-product-agent-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.public-page .api-product-prompt pre { margin: 0; padding: 10px 18px 18px; background: transparent; color: #f2d58a; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: break-word; }
@media (max-width: 960px) {
  .api-product-use-grid, .api-product-agent-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Design review pass (2026-11-06). ---- */

/* Code panels: one text colour, light JSON tokens, copy buttons. */
.api-product-panel, .public-page .api-product-prompt pre, .public-page .api-product-response .public-code-example { color: #e6efe9; }
.api-product .tok-key { color: #9fd8ff; }
.api-product .tok-str { color: #f2d58a; }
.api-product .tok-lit { color: #7ee2a8; }
.api-product-tabs, .api-product-response, .api-product-prompt { position: relative; }
.api-product-tab-labels { padding-right: 84px; }
.public-page .api-product-copy { position: absolute; top: 10px; right: 12px; padding: 4px 10px; border: 1px solid #3a4a43; border-radius: 6px; background: #1a2420; color: #cfe3d8; font-size: 12px; font-weight: 600; cursor: pointer; }
.public-page .api-product-copy:hover { background: #24332d; color: #fff; }
.public-page .api-product-copy:focus-visible { outline: 2px solid #7ee2a8; outline-offset: 2px; }

/* Focus ring on the focused tab, not the whole row. */
.api-product-tab-input:focus-visible ~ .api-product-tab-labels { outline: none; }
.api-product-tab-input[data-lang="curl"]:focus-visible ~ .api-product-tab-labels label[data-lang="curl"],
.api-product-tab-input[data-lang="python"]:focus-visible ~ .api-product-tab-labels label[data-lang="python"],
.api-product-tab-input[data-lang="node"]:focus-visible ~ .api-product-tab-labels label[data-lang="node"],
.api-product-tab-input[data-lang="php"]:focus-visible ~ .api-product-tab-labels label[data-lang="php"],
.api-product-tab-input[data-lang="ruby"]:focus-visible ~ .api-product-tab-labels label[data-lang="ruby"],
.api-product-tab-input[data-lang="go"]:focus-visible ~ .api-product-tab-labels label[data-lang="go"],
.api-product-tab-input[data-lang="csharp"]:focus-visible ~ .api-product-tab-labels label[data-lang="csharp"] { outline: 2px solid #7ee2a8; outline-offset: -2px; }

/* Status fact reads as a link. */
.api-product-facts .api-product-status a, .api-product-facts .api-product-fact-link a { display: block; }
.api-product-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #20bd79; box-shadow: 0 0 0 4px rgba(32, 189, 121, .18); vertical-align: middle; }
.api-product-facts .api-product-status a:hover, .api-product-facts .api-product-fact-link a:hover { color: #146c43; }

/* Use cases: four cards. */
.api-product-use-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Production grid: three columns (beats the shell's :has() two-column rule). */
.public-page .public-container .public-feature-grid.api-product-features:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Security: a checked list rather than another feature grid. */
.api-product-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; margin: 20px 0 0; padding: 0; list-style: none; }
.api-product-checklist li { position: relative; padding: 16px 18px 16px 52px; border: 1px solid #dce6e0; border-radius: 10px; background: #fff; }
.api-product-checklist li::before { content: ""; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: #146c43 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.public-page .api-product-checklist h3 { margin: 0 0 4px; font-size: 17px; }
.public-page .api-product-checklist p { margin: 0; font-size: 15px !important; }

/* FAQ: styled disclosure. */
.public-page .api-product-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; list-style: none; }
.public-page .api-product-faq summary::-webkit-details-marker { display: none; }
.public-page .api-product-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid #146c43; border-bottom: 2px solid #146c43; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.public-page .api-product-faq details[open] summary::after { transform: rotate(-135deg); }
.public-page .api-product-faq summary code { font-size: .92em; }

/* Closing band. */
.public-page section.api-product-cta { margin-top: 24px; padding: 56px 0; border-top: 1px solid #cfe6d8; border-bottom: 1px solid #cfe6d8; background: #eaf5ef; text-align: center; }
.public-page .api-product-cta h2 { text-align: center !important; }
.public-page p.api-product-cta-note { margin-bottom: 20px; color: #3f5a4c; text-align: center !important; }
.public-page .api-product-cta .public-actions { justify-content: center; }
.public-page p.api-product-older { margin: 20px 0 0; text-align: center !important; }
.public-page .api-product-older a { color: #58665f; }

@media (max-width: 1100px) {
  .api-product-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .public-page .public-container .public-feature-grid.api-product-features:has(> :nth-child(4)) { grid-template-columns: 1fr; }
  .api-product-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .api-product-use-grid { grid-template-columns: 1fr; }
  .api-product-tab-labels { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .api-product-tab-labels::-webkit-scrollbar { display: none; }
  .api-product-tab-labels label { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
  .public-page p.api-product-endpoint { white-space: nowrap; overflow-x: auto; overflow-wrap: normal; }
  .public-page .api-product-copy { top: 8px; }
}
@media (max-width: 640px) {
  .public-page .api-product-tabs .api-product-copy { top: auto; bottom: 14px; }
  .api-product-tab-labels { padding-right: 14px; }
}

/* The closing band meets the footer directly. */
.public-page--phone-validator-api + #footer.public-site-footer { margin-top: 0; }
/* Keyboard focus keeps its ring; a mouse click on a question doesn't draw one. */
.public-page .api-product-faq summary:focus:not(:focus-visible) { outline: none; }

/* Copy buttons: a full tap target; on phones the request keeps room below its last line. */
.public-page .api-product-copy { min-height: 44px; min-width: 44px; padding: 8px 12px; top: 4px; }
@media (max-width: 640px) {
  .api-product-tabs .api-product-panel { padding-bottom: 64px; }
}