/* TokenHub scenes: a handset, research papers, an agent editor and quota tickets. */
[data-product="token"] .sms-scenario { grid-template-rows:minmax(116px,auto) 270px; position:relative; isolation:isolate; }
[data-product="token"] .sms-scenario .sms-scenario-visual { display:flex; align-items:center; width:100%; margin:0; height:270px; aspect-ratio:auto; }
[data-product="token"] .sms-scenario--sending { background:#edf1f7; }
[data-product="token"] .sms-scenario--reports { background:#010c3d; }
[data-product="token"] .sms-scenario--queue { background:radial-gradient(ellipse at 22% 100%,#c1dbd9 0,transparent 64%),#dfeaff; }
[data-product="token"] .sms-scenario--routing { background:#2f6ee9; }
.tsh-art { width:100%; height:100%; display:grid; place-items:center; container-type:inline-size; color:#152c53; min-width:0; }
.tsh-stage { position:relative; width:100%; max-width:560px; aspect-ratio:560/300; font-size:clamp(12px,2.6cqi,14px); line-height:1.5; }
.tsh-stage * { box-sizing:border-box; }
.tsh-stage svg { width:1.5em; height:1.5em; display:block; flex:none; }
.tsh-stage img { width:1.8em; height:1.8em; object-fit:contain; flex:none; }
.tsh-stage small { font-size:.8em; }
.tsh-stage b { font-weight:600; }
.tsh-stage p { margin:0; }
[data-product="token"] .sms-scenario--queue .sms-scenario-visual { align-self:end; margin-bottom:-28px; }
.tsh-art--agents .tsh-stage { height:100%; max-width:none; aspect-ratio:auto; }
/* The email lives behind the handset, with its content kept in the left column. */
.tsh-draft { position:absolute; left:1%; top:10%; width:64%; min-height:90%; padding:3% 4%; background:white; border-radius:12px 12px 0 0; transform:rotate(-4deg); box-shadow:0 16px 30px -18px #23487566; }
.tsh-mail-top { display:flex; justify-content:space-between; align-items:center; gap:6px; padding-bottom:8%; border-bottom:1px solid #e7edf7; margin-bottom:6%; color:#3565b3; font-size:.85em; }
.tsh-mail-top svg { width:1.2em; height:1.2em; }
.tsh-draft>small { display:block; color:#64768f; }
.tsh-draft>b { display:block; width:76%; margin:3% 0 7%; font-size:1.2em; line-height:1.4; }
.tsh-mail-picture { position:relative; width:83%; height:17cqi; max-height:95px; background:#dce9fb; overflow:hidden; border-radius:4px; }
.tsh-sun { position:absolute; width:15%; aspect-ratio:1; border-radius:50%; background:#e4b96b; top:17%; left:64%; }
.tsh-mountain { position:absolute; width:75%; height:130%; background:#516f93; clip-path:polygon(50% 0,100% 100%,0 100%); left:-12%; top:15%; }
.tsh-mountain--back { left:30%; top:30%; background:#91acc7; }
.tsh-landscape-label { position:absolute; bottom:10%; left:7%; color:#fff; font-size:1.05em; font-weight:600; }
.tsh-mail-lines { display:grid; gap:5px; margin-top:7%; width:68%; }
.tsh-mail-lines i { height:3px; background:#e3eaf5; }
.tsh-mail-lines i:last-child { width:70%; }
.tsh-mail-send { display:flex; gap:5px; align-items:center; margin-top:7%; color:#416025; font-size:.8em; }
.tsh-mail-send svg { width:1em; height:1em; }
.tsh-phone { position:absolute; right:3%; top:-5%; width:36%; height:122%; border:3px solid #203858; border-bottom:0; border-radius:27px 27px 0 0; background:#f8faff; box-shadow:-8px 15px 24px -17px #1b396e88; padding:4% 2.5% 6%; }
.tsh-phone-status { position:absolute; top:3%; left:8%; right:8%; display:flex; align-items:center; justify-content:space-between; font-size:.65em; }
.tsh-phone-island { position:absolute; width:36%; height:6px; background:#203858; border-radius:10px; left:32%; top:1px; }
.tsh-battery { width:12px; height:6px; border:1px solid #203858; border-radius:2px; position:relative; }
.tsh-battery:after { content:''; position:absolute; inset:1px 2px 1px 1px; background:#203858; }
.tsh-phone-header { display:flex; align-items:center; gap:5px; padding:5% 0 9%; border-bottom:1px solid #dde5f2; font-size:12px; color:#1b58bc; }
.tsh-phone-chat { padding-top:10%; }
.tsh-chat-user { margin-left:7%; padding:8% 9%; background:#e3edff; border-radius:10px; font-size:12px; }
.tsh-chat-reply { margin-top:10%; font-size:12px; }
.tsh-anonymous-model { display:inline-grid; place-items:center; color:#3670da; }
.tsh-chat-reply .tsh-anonymous-model { display:block; margin-bottom:6%; }
.tsh-chat-reply p { color:#506786; margin-top:5%; font-size:.95em; line-height:1.65; }
.tsh-chat-attachment { display:flex; gap:5px; align-items:center; margin-top:9%; padding:7%; background:#edf5e2; border-radius:8px; font-size:11px; color:#385820; }
.tsh-chat-attachment>span { display:block; }
.tsh-chat-attachment small { display:block; margin-top:2px; }
.tsh-chat-attachment svg { width:1.25em; height:1.25em; }
.tsh-phone-input { display:flex; align-items:center; justify-content:space-between; margin-top:12%; padding:6%; border:1px solid #dde5f2; border-radius:8px; font-size:.72em; color:#5a6e8a; }
.tsh-homebar { position:absolute; left:32%; width:36%; height:3px; bottom:3%; border-radius:5px; background:#203858; }
.tsh-model-tag { position:absolute; left:3%; bottom:18px; display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; background:#243d65; color:#fff; font-size:12px; box-shadow:0 9px 20px -12px #21385b99; }
.tsh-model-tag .tsh-anonymous-model { color:#a6c4ff; }
.tsh-model-tag img { width:1.5em; height:1.5em; }
.tsh-tag-divider { height:12px; width:1px; margin:0 3px; background:#6982a8; }
/* A report and a physical access credential: quiet paper against a deep backdrop. */
.tsh-document { position:absolute; display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto; gap:4%; width:70%; height:94%; top:0; left:4%; padding:5% 6% 13%; border-radius:12px; background:#fff; color:#142e55; transform:rotate(-7deg); box-shadow:0 16px 30px -16px #0009; }
.tsh-document--back { transform:rotate(5deg); background:#8199bf; left:15%; top:6%; }
.tsh-document-top { display:flex; justify-content:space-between; padding-bottom:5%; border-bottom:1px solid #dfe6f0; font-size:11px; color:#506786; }
.tsh-document h4 { margin:0; font-size:1.7em; font-weight:600; letter-spacing:-.025em; line-height:1.2; }
.tsh-document p { color:#506786; font-size:12px; }
.tsh-report-chart { display:flex; align-items:end; gap:6%; min-height:0; height:100%; border-bottom:1px solid #ccd9ed; }
.tsh-report-chart i { width:9%; height:35%; background:#97b6e8; border-radius:2px 2px 0 0; }
.tsh-report-chart i:nth-child(2){height:47%}.tsh-report-chart i:nth-child(3){height:41%}.tsh-report-chart i:nth-child(4){height:67%}.tsh-report-chart i:nth-child(5){height:59%}.tsh-report-chart i:nth-child(6){height:83%;background:#2968d4}.tsh-report-chart i:nth-child(7){height:96%;background:#2968d4}
.tsh-report-lines { display:grid; gap:3px; }
.tsh-report-lines i { height:3px; background:#e3eaf5; }
.tsh-report-lines i:last-child { width:60%; }
.tsh-document-source { position:absolute; left:9%; right:9%; bottom:5%; display:flex; justify-content:space-between; color:#506786; font-size:10px; }
.tsh-access-key { position:absolute; width:53%; right:3%; top:47%; padding:4% 5%; background:#c9e884; color:#254221; border-radius:12px; transform:rotate(4deg); box-shadow:0 14px 28px -16px #000a; }
.tsh-access-key>svg { width:2em; height:2em; margin-bottom:6%; }
.tsh-access-key>b { display:block; font-size:1.08em; }
.tsh-access-key code { display:block; font-size:.9em; margin:4% 0 10%; }
.tsh-access-key>div { display:flex; align-items:center; gap:5px; padding-top:7%; border-top:1px dashed #75994e; font-size:11px; }
.tsh-access-key>div svg { width:1em; height:1em; }
/* A working editor, cropped into the scene, with the customer reply in front. */
.tsh-editor { position:absolute; top:12px; bottom:0; left:0; width:100%; border:2px solid #18345c; border-bottom:0; border-radius:12px 12px 0 0; overflow:hidden; background:#14253f; color:#c6d7ed; box-shadow:0 16px 32px -22px #17365a99; }
.tsh-editor-chrome { display:flex; align-items:center; gap:10px; padding:3% 4%; background:#263e60; font-size:11px; }
.tsh-editor-chrome>b { flex:1; font-weight:400; }
.tsh-editor-chrome>span:last-child { color:#b5cae8; }
.tsh-editor-dots { display:flex; gap:4px; }
.tsh-editor-dots i { width:5px; height:5px; border-radius:50%; background:#8299bc; }
.tsh-editor-body { display:flex; }
.tsh-editor-rail { width:9%; padding:5% 2%; display:flex; flex-direction:column; gap:18px; color:#7293bd; background:#1c3151; }
.tsh-editor-rail svg { width:1.3em; height:1.3em; }
.tsh-editor-code { flex:1; min-width:0; padding:4% 3% 13%; font-size:12px; }
.tsh-editor-code>div:not(.tsh-terminal) { display:flex; gap:12px; line-height:1.85; }
.tsh-editor-code em { color:#91a7c8; font-style:normal; font-size:.85em; }
.tsh-editor-code code { white-space:pre; font-family:Consolas,monospace; }
.tsh-editor-code code span { color:#a9bdff; }
.tsh-editor-code code strong { color:#d4eb9f; font-weight:400; }
.tsh-terminal { border-top:1px solid #425874; margin-top:6%; padding-top:4%; font-size:.85em; }
.tsh-terminal>span { font-size:.7em; letter-spacing:.06em; color:#b2c7e5; }
.tsh-terminal p { display:flex; align-items:center; gap:5px; margin-top:5px; }
.tsh-terminal p:first-of-type { color:#e2b684; }
.tsh-terminal p:last-child { color:#d4eb9f; }
.tsh-terminal i { width:5px; height:5px; border-radius:50%; background:#dcb17b; }
.tsh-terminal svg { width:1em; height:1em; }
.tsh-agent-message { position:absolute; right:16px; bottom:20px; width:calc(87% - 16px); display:flex; gap:9px; padding:4%; border-radius:12px; background:#fff; box-shadow:0 14px 28px -17px #24446c99; }
.tsh-agent-avatar { display:grid; place-items:center; width:2.5em; height:2.5em; border-radius:50%; background:#2f6ee9; color:#fff; flex:none; }
.tsh-agent-avatar svg { width:1.5em; height:1.5em; }
.tsh-agent-message b { font-size:12px; color:#4b6381; }
.tsh-agent-message p { margin-top:3%; font-size:14px; }
.tsh-agent-message small { display:flex; gap:3px; align-items:center; margin-top:5%; color:#456527; }
.tsh-agent-message small svg { width:1em; height:1em; }
/* A partner account distributes quotas to three independently managed customers. */
.tsh-art--partners .tsh-stage { width:94%; max-width:530px; }
.tsh-distribution-lines { position:absolute; inset:0; width:100%!important; height:100%!important; overflow:visible; }
.tsh-distribution-lines path { stroke:#b7d2ff; stroke-width:1.5; fill:none; }
.tsh-distribution-lines circle { fill:#d3eb94; }
.tsh-partner-hub { position:absolute; left:1%; top:16%; width:38%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:50%; background:#153f9c; color:white; }
.tsh-partner-avatar { display:grid; place-items:center; width:38px; height:38px; margin-bottom:3px; border-radius:50%; background:#cfe994; color:#294f25; }
.tsh-partner-avatar svg { width:22px; height:22px; }
.tsh-partner-hub>b { font-size:13px; text-align:center; }
.tsh-partner-hub>strong { font-size:32px; line-height:1.1; font-weight:600; letter-spacing:-.025em; color:#d2eb9b; }
.tsh-partner-hub>small { font-size:11px; color:#d3e2ff; }
.tsh-customer-key { position:absolute; left:62%; width:36%; height:22%; display:flex; align-items:center; gap:8px; padding:9px 12px; background:#f5f8ff; color:#183a6b; border-radius:12px; }
.tsh-customer-key--0 { top:11%; }
.tsh-customer-key--1 { top:40%; background:#dceaff; }
.tsh-customer-key--2 { top:69%; }
.tsh-customer-avatar { display:grid; place-items:center; width:28px; height:28px; flex:none; color:#2f6ee9; background:#e5eeff; border-radius:50%; }
.tsh-customer-avatar svg { width:16px; height:16px; }
.tsh-customer-key>div { min-width:0; flex:1; }
.tsh-customer-key b { display:block; font-size:12px; }
.tsh-customer-key small { display:block; margin-top:2px; font-size:10px; color:#4b6381; }
.tsh-customer-key>strong { font-size:16px; font-weight:600; }
@media(min-width:761px) and (max-width:1100px) {
 [data-product="token"] .sms-scenario { grid-template-rows:minmax(140px,auto) 250px; }
 [data-product="token"] .sms-scenario .sms-scenario-visual { height:250px; }
 [data-product="token"] .sms-scenario--queue .sms-scenario-visual { margin-bottom:-24px; }
 .tsh-customer-avatar { display:none; }
 .tsh-customer-key { left:59%; width:40%; }
}
@media(max-width:760px) {
 [data-product="token"] .sms-scenario { grid-template-rows:auto 230px; row-gap:26px; }
 [data-product="token"] .sms-scenario .sms-scenario-visual { height:230px; }
 .tsh-stage { font-size:12px; }
 .tsh-art--agents .tsh-stage { height:100%; aspect-ratio:auto; }
 [data-product="token"] .sms-scenario--queue .sms-scenario-visual { margin-bottom:-24px; }
 .tsh-phone { width:39%; right:0; }
 .tsh-draft { width:64%; }
 .tsh-phone-header { font-size:10px; }
 .tsh-phone-chat { padding-top:8%; }
 .tsh-chat-user,.tsh-chat-reply { font-size:11px; }
 .tsh-chat-attachment { font-size:10px; }
 .tsh-model-tag { font-size:11px; gap:4px; padding:6px 8px; bottom:12px; }
 .tsh-document h4 { font-size:1.5em; }
 .tsh-editor-code { font-size:11px; }
 .tsh-partner-hub { width:42%; left:0; }
 .tsh-partner-avatar { width:26px; height:26px; margin:0; }
 .tsh-partner-avatar svg { width:16px; height:16px; }
 .tsh-partner-hub>b { font-size:11px; }
 .tsh-partner-hub>strong { font-size:24px; }
 .tsh-partner-hub>small { font-size:10px; }
 .tsh-customer-key { width:42%; left:57%; padding:7px 8px; gap:4px; }
 .tsh-customer-avatar { display:none; }
 .tsh-customer-key>strong { font-size:14px; }
 .tsh-customer-key b { font-size:11px; }
 .tsh-customer-key small { font-size:9px; }
}
/* Token's layered product illustration; surrounding Hero styles stay shared. */
.token-scene { width:100%; min-width:0; max-width:560px; margin:0 auto; padding:14px 10px 0; color:var(--ink-deep,#010c3d); }
.token-scene svg { display:block; width:20px; height:20px; flex:none; }
.token-scene__stage { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; }
.token-gateway { grid-column:1/12; grid-row:1; min-width:0; padding:20px 20px 100px; border-radius:18px; background:var(--blue-text,#1f5fe8); color:#fff; box-shadow:0 24px 42px -24px rgb(24 69 159 / .5); transform:rotate(-2deg); }
.token-gateway__header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.token-gateway__brand { display:flex; align-items:center; gap:10px; }
.token-gateway__brand svg { width:28px; height:28px; }
.token-gateway__brand strong { font-size:18px; line-height:28px; font-weight:600; letter-spacing:-.02em; }
.token-gateway__protocol { padding:5px 9px; border:1px solid rgb(255 255 255 / .3); border-radius:6px; color:#fff; font-size:11px; line-height:16px; }
.token-gateway h3 { margin:16px 0 6px; color:#fff; font-size:clamp(22px,1.9vw,26px); line-height:1.2; font-weight:500; letter-spacing:-.025em; text-wrap:balance; }
.token-gateway>p { margin:0; color:#e2ebff; font-size:12px; line-height:18px; }
.token-request { margin-top:14px; padding:12px 14px; border-radius:10px; background:#164dbb; }
.token-request__endpoint { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid rgb(255 255 255 / .18); }
.token-request__endpoint>span { color:#fff; font-size:10px; line-height:16px; font-weight:600; letter-spacing:.04em; }
.token-request__endpoint>code { min-width:0; flex:1; color:#fff; font-size:12px; line-height:18px; }
.token-request__endpoint>svg { width:16px; height:16px; color:#d2e1ff; }
.token-request dl { display:grid; gap:6px; margin:10px 0 0; }
.token-request dl>div { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:baseline; gap:12px; }
.token-request dt,.token-request dd { margin:0; font-size:11px; line-height:18px; }
.token-request dt { color:#cbddff; }
.token-request dd { color:#fff; overflow-wrap:anywhere; }
.token-models { position:relative; z-index:1; grid-column:4/-1; grid-row:2; min-width:0; margin-top:-80px; padding:16px; border-radius:16px; background:#fff; box-shadow:0 22px 50px -22px rgb(20 44 96 / .3),0 3px 12px rgb(20 44 96 / .04); }
.token-models>header { display:flex; align-items:center; gap:10px; padding-bottom:10px; }
.token-models__routing-icon { color:var(--blue-text,#1f5fe8); }
.token-models h3 { flex:1; margin:0; font-size:16px; line-height:24px; font-weight:550; }
.token-models__count { color:#65748d; font-size:11px; font-variant-numeric:tabular-nums; }
.token-models__list { display:grid; }
.token-models__row { display:flex; min-height:50px; padding:6px 0; align-items:center; gap:10px; border-top:1px solid #edf1f8; }
.token-models__icon { display:grid; width:30px; height:30px; flex:none; place-items:center; border-radius:8px; color:var(--blue-text,#1f5fe8); background:#eef4ff; }
.token-models__icon svg { width:18px; height:18px; }
.token-models__copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.token-models__copy strong { font-size:13px; line-height:18px; font-weight:550; }
.token-models__copy>span { color:#526583; font-size:11px; line-height:16px; }
.token-models__row>svg { width:16px; height:16px; color:#8297b8; }
.token-models__response { display:flex; align-items:center; gap:7px; margin-top:6px; padding:8px; border-radius:8px; background:#eef4ff; color:#2857b4; font-size:11px; line-height:18px; }
.token-models__response svg { width:16px; height:16px; }
.token-models__response>span { flex:1; }
.token-models__response>code { color:#476793; font-size:10px; }
.token-access { position:relative; left:-32px; top:-16px; grid-column:1/4; grid-row:2; align-self:start; min-width:0; margin:-28px 10px 0 0; padding:12px 10px; border-radius:12px; background:#ffead6; box-shadow:0 16px 32px -18px rgb(108 65 36 / .25); }
.token-access__icon { display:grid; width:28px; height:28px; place-items:center; margin-bottom:8px; border-radius:8px; color:#b05b27; background:#fff5e9; }
.token-access strong { display:block; color:#713b22; font-size:12px; line-height:18px; font-weight:550; }
.token-access div>span { display:block; margin-top:4px; color:#8a4b27; font-size:10px; line-height:16px; }
.token-access__check { display:none; }
.token-scene figcaption { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; margin-top:16px; color:#526583; font-size:11px; line-height:18px; }
.token-scene figcaption>span+span::before { display:inline-block; width:3px; height:3px; margin:0 10px 3px 0; border-radius:50%; background:#9eb4d7; content:''; }
@media(max-width:480px) {
  .token-scene { padding:10px 8px 0; }
  .token-gateway { padding:16px 14px 84px; border-radius:16px; }
  .token-gateway__brand strong { font-size:18px; }
  .token-gateway__brand svg { width:26px; height:26px; }
  .token-gateway h3 { margin-top:14px; font-size:22px; }
  .token-gateway>p { font-size:11px; line-height:18px; }
  .token-gateway__protocol { font-size:10px; padding-inline:7px; }
  .token-request { margin-top:12px; padding:10px; }
  .token-request__endpoint { gap:8px; }
  .token-request__endpoint>code { font-size:10px; }
  .token-request dl>div { grid-template-columns:54px minmax(0,1fr); gap:8px; }
  .token-request dt,.token-request dd { font-size:10px; line-height:16px; }
  .token-models { grid-column:2/-1; margin-top:-62px; padding:14px; }
  .token-models__response>code { display:none; }
  .token-access { left:0; top:0; display:flex; grid-column:2/-1; grid-row:3; align-items:center; gap:10px; margin:8px 0 0; padding:10px; box-shadow:none; }
  .token-access__icon { margin:0; }
  .token-access div { flex:1; }
  .token-access div>span { margin-top:1px; }
  .token-access__check { display:block; color:#b05b27; }
  .token-scene figcaption { gap:4px 10px; margin-top:12px; font-size:10px; }
  .token-scene figcaption>span+span::before { margin-right:8px; }
}
.token-placeholder { padding:80px var(--site-gutter,40px); background:var(--ivory,#fcfbf6); color:var(--ink-deep,#010c3d); }
.token-placeholder__inner { max-width:var(--site-content-width,1200px); margin:auto; }
.token-placeholder h2 { margin:0 0 36px; font-size:var(--product-heading-size,clamp(32px,4vw,56px)); line-height:1.12; letter-spacing:-.035em; font-weight:550; }
.token-placeholder__surface { display:grid; justify-items:center; align-content:center; min-height:240px; padding:32px; border:1px dashed #a7b8d4; border-radius:16px; background:#f2f5fc; text-align:center; }
.token-placeholder__surface svg { width:32px; height:32px; margin-bottom:20px; color:#416594; }
.token-placeholder__surface strong { font-size:20px; font-weight:550; }
.token-placeholder__surface p { margin:12px 0 0; color:#52627f; font-size:16px; line-height:1.6; }
.token-api { height:auto; }
.token-api .sms-api-workspace__content { height:auto; }
.token-api .sms-api-editor { min-height:0; }
.token-api .sms-api-editor__tabs { overflow-x:auto; flex-shrink:0; }
.token-api button.sms-api-editor__tab { flex:none; height:100%; padding:0 2px; border:0; border-bottom:2px solid transparent; background:none; color:inherit; font:inherit; cursor:pointer; }
.token-api button.sms-api-editor__tab--active { border-bottom-color:#7da7ff; color:#fff; }
.token-api button.sms-api-editor__tab:focus-visible { outline:2px solid #7da7ff; outline-offset:-5px; border-radius:4px; }
.token-api .sms-api-editor__lines { height:360px; }
.token-api .sms-api-editor__lines[hidden] { display:none; }
.token-api .sms-api-editor__lines:focus-visible { outline:2px solid #7da7ff; outline-offset:-4px; }
.token-api .sms-api-response { min-height:0; }
.token-api .sms-api-response h3 { margin:0 0 28px; font-size:24px; line-height:1.25; }
.token-api__points { display:grid; gap:26px; margin:0; padding-left:24px; }
.token-api__points li { padding-left:8px; }
.token-api__points li::marker { color:#1f5fe8; font-size:14px; }
.token-api__points h4 { margin:0 0 8px; font-size:17px; font-weight:550; }
.token-api__points p { margin:0; color:#52627f; font-size:14px; line-height:1.65; }
@media(max-width:760px) { .token-placeholder { padding-block:56px; } .token-placeholder h2 { margin-bottom:24px; } .token-placeholder__surface { min-height:210px; padding:28px 20px; } }
@media(max-width:760px) { .token-api .sms-api-editor__tabs { gap:18px; padding-inline:16px; } .token-api .sms-api-editor__lines { height:300px; } }

/* Model universe: shared site typography, with a single softly floating constellation. */
.token-matrix { padding:72px var(--site-gutter,40px) 88px; background:var(--ivory,#fcfbf6); color:var(--ink-deep,#010c3d); }
.token-matrix__inner { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:center; gap:32px; max-width:var(--site-content-width,1200px); margin:auto; }
.token-matrix__copy { position:relative; z-index:1; padding-block:16px; }
.token-matrix h2 { margin:0 0 24px; font-size:var(--product-heading-size,clamp(32px,4vw,56px)); line-height:1.14; letter-spacing:-.035em; font-weight:550; text-wrap:balance; }
.token-matrix__intro { max-width:440px; margin:0; font-size:16px; line-height:1.85; color:#52627f; }
.token-matrix__detail { max-width:440px; margin-top:40px; padding-top:26px; border-top:1px solid #d6ddec; }
.token-matrix__panels { display:grid; }
.token-matrix__panel { grid-area:1/1; min-height:140px; }
.token-matrix__panel[hidden] { display:block; visibility:hidden; pointer-events:none; }
.token-matrix__vendor { display:block; margin-bottom:8px; color:#52627f; font-size:13px; }
.token-matrix__panel h3 { margin:0 0 12px; font-size:26px; line-height:1.2; font-weight:550; letter-spacing:-.02em; }
.token-matrix__panel p { margin:0; max-width:400px; color:#52627f; font-size:16px; line-height:1.65; }
.token-matrix__navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.token-matrix__hint { display:inline-flex; align-items:center; gap:7px; min-width:0; padding:9px 11px; border-radius:10px; background:#edf2fa; color:#395682; font-size:12px; line-height:1.45; }
.token-matrix__navigation .token-matrix__hint svg { width:16px; height:16px; flex:none; }
.token-matrix__navigation>div { display:flex; flex-shrink:0; gap:8px; }
.token-matrix__navigation button { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid #cbd4e5; border-radius:50%; background:transparent; color:inherit; cursor:pointer; transition:background .2s,color .2s; }
.token-matrix__navigation button:hover { background:#eaf0ff; color:#1f5fe8; }
.token-matrix__navigation svg { width:20px; height:20px; }
.token-matrix__navigation svg[hidden] { display:none; }
.token-matrix__panel:not([hidden]) { animation:token-model-reveal .35s ease-out; }
@keyframes token-model-reveal { from { opacity:.35; } to { opacity:1; } }
.token-matrix__navigation [data-model-prev] svg { transform:rotate(180deg); }
.token-matrix :is(button,a):focus-visible { outline:2px solid #1f5fe8; outline-offset:5px; }
.token-matrix__universe { position:relative; isolation:isolate; width:88%; aspect-ratio:1; margin:0; justify-self:center; }
.token-matrix__universe::before { content:""; position:absolute; z-index:-1; inset:1% -2% -2%; background:radial-gradient(ellipse at 38% 42%,#dfebfc 0,transparent 65%),radial-gradient(ellipse at 72% 60%,#e1f2e9 0,transparent 58%); border-radius:50%; }
.token-matrix__orbit { position:absolute; pointer-events:none; left:12%; top:12%; width:78%; height:78%; border:1px solid rgb(108 141 182 / .15); border-radius:50%; }
.token-matrix__orbit--one { transform:rotate(-28deg) scaleX(.56); }
.token-matrix__orbit--two { transform:rotate(42deg) scaleX(.62); }
.token-matrix__orbit--three { transform:rotate(-18deg) scaleY(.55); }
.token-matrix__hub { position:absolute; left:51%; top:55%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:114px; height:114px; transform:translate(-50%,-50%); border-radius:50%; color:#fff; background:#1f5fe8; box-shadow:0 18px 32px -16px rgb(28 76 168 / .45); }
.token-matrix__hub svg { width:32px; height:32px; margin-bottom:3px; }
.token-matrix__hub strong { font-size:17px; letter-spacing:-.02em; font-weight:550; }
.token-matrix__hub>span { font-size:10px; color:#fff; }
.token-matrix__model { position:absolute; left:var(--x); top:var(--y); display:flex; flex-direction:column; align-items:center; gap:10px; width:88px; padding:0; border:0; background:none; color:inherit; cursor:pointer; transform:translate(-50%,-50%); -webkit-tap-highlight-color:transparent; }
.token-matrix__disc { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; background:#fff; box-shadow:0 12px 28px -14px rgb(41 66 108 / .32); animation:token-model-drift 6s ease-in-out var(--delay) infinite; transition:box-shadow .25s,background .25s; }
.token-matrix__disc img { display:block; width:38px; height:38px; object-fit:contain; }
.token-matrix__name { font-size:12px; line-height:18px; font-weight:550; white-space:nowrap; }
.token-matrix__model:hover .token-matrix__disc { background:#f6f9ff; box-shadow:0 16px 28px -12px rgb(41 66 108 / .38); }
.token-matrix__model[aria-pressed="true"] .token-matrix__disc { background:#edf3ff; box-shadow:0 14px 30px -14px rgb(41 66 108 / .4); }
.token-matrix__model[aria-pressed="true"] .token-matrix__name { color:#1f5fe8; }
.token-matrix__model:focus-visible { border-radius:12px; }
@keyframes token-model-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@media(min-width:1101px) { .token-matrix__model:nth-of-type(3n) .token-matrix__disc { width:60px; height:60px; } .token-matrix__model:nth-of-type(4n) .token-matrix__disc { width:78px; height:78px; } }
@media(max-width:1100px) and (min-width:1001px) { .token-matrix__inner { gap:16px; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } .token-matrix__disc { width:58px; height:58px; } .token-matrix__disc img { width:30px; height:30px; } .token-matrix__hub { width:100px; height:100px; } .token-matrix__hub svg { width:24px; height:24px; } .token-matrix__hub strong { font-size:14px; } .token-matrix__model { width:64px; gap:8px; } .token-matrix__name { font-size:11px; } }
@media(max-width:1000px) {
  .token-matrix { padding-block:56px 64px; }
  .token-matrix__inner { grid-template-columns:minmax(0,1fr); gap:8px; }
  .token-matrix__copy { display:contents; }
  .token-matrix h2 { grid-row:1; margin-bottom:12px; }
  .token-matrix__intro { grid-row:2; max-width:100%; font-size:15px; line-height:1.8; }
  .token-matrix__universe { grid-row:3; width:100%; max-width:440px; aspect-ratio:.78; justify-self:center; margin-block:12px 16px; }
  .token-matrix__detail { grid-row:4; max-width:none; margin-top:8px; padding-top:22px; }
  .token-matrix__panel { min-height:122px; }
  .token-matrix__disc { width:52px; height:52px; }
  .token-matrix__disc img { width:28px; height:28px; }
  .token-matrix__model { left:var(--mx); top:var(--my); width:56px; gap:7px; }
  .token-matrix__name { font-size:10px; line-height:16px; }
  .token-matrix__hub { left:57%; top:52%; width:88px; height:88px; gap:3px; }
  .token-matrix__hub svg { width:24px; height:24px; margin:0; }
  .token-matrix__hub strong { font-size:13px; }
  .token-matrix__hub>span { font-size:9px; }
}
@media(max-width:370px) { .token-matrix__disc { width:44px; height:44px; } .token-matrix__disc img { width:24px; height:24px; } .token-matrix__hub { width:76px; height:76px; } .token-matrix__model { gap:5px; } }
@media(prefers-reduced-motion:reduce) { .token-matrix__disc { animation:none; transition:none; } .token-matrix__panel:not([hidden]) { animation:none; } }


/* A quiet comparison surface with one continuous, emphasized product column. */
.token-comparison { padding:88px var(--site-gutter,40px); background:var(--ivory,#fcfbf6); color:var(--ink-deep,#010c3d); }
.token-comparison__inner { display:grid; gap:48px; max-width:var(--site-content-width,1200px); margin:auto; }
.token-comparison__intro { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.token-comparison h2 { margin:0 0 24px; font-size:var(--product-heading-size,clamp(32px,4vw,56px)); font-weight:550; line-height:1.14; letter-spacing:-.035em; white-space:pre-line; text-wrap:balance; }
.token-comparison__intro>p { max-width:48ch; margin:0 0 24px; color:#52627f; font-size:16px; line-height:1.8; }
.token-comparison__surface { --label-width:20%; --value-width:calc((100% - var(--label-width))/2); --comparison-gap:12px; --comparison-padding:24px; position:relative; isolation:isolate; margin-block:16px; }
.token-comparison__surface::before,.token-comparison__surface::after { content:""; position:absolute; z-index:-1; border-radius:16px; pointer-events:none; }
.token-comparison__surface::before { left:var(--label-width); width:var(--value-width); top:-16px; bottom:-16px; background:#010c3d; box-shadow:0 16px 28px -20px rgb(1 12 61 / .5); }
.token-comparison__surface::after { right:0; width:calc(var(--value-width) - var(--comparison-gap)); top:0; bottom:0; background:#f0f1ed; }
.token-comparison__table { width:100%; border-spacing:0; table-layout:fixed; text-align:left; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.token-comparison__caption { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.token-comparison__label-col { width:20%; }
.token-comparison__table th,.token-comparison__table td { padding:24px; vertical-align:top; font-weight:400; }
.token-comparison__table thead th { padding-block:30px; font-size:15px; font-weight:650; }
.token-comparison__table thead th span { display:block; margin-top:8px; font-size:12px; font-weight:400; color:#52627f; }
.token-comparison__table thead strong { font-size:24px; font-weight:650; letter-spacing:-.025em; }
.token-comparison__table tbody th { vertical-align:middle; color:#52627f; font-family:var(--font-display,"Geist Sans",sans-serif); font-size:14px; font-weight:500; }
.token-comparison__table thead th:first-child { font-family:var(--font-display,"Geist Sans",sans-serif); font-weight:550; }
.token-comparison__table tbody td { position:relative; border-top:1px solid transparent; }
.token-comparison__table tbody td::before { content:""; position:absolute; top:-1px; left:var(--comparison-padding); right:0; height:1px; background:#dde0d9; }
.token-comparison__table tbody td:last-child::before { left:calc(var(--comparison-gap) + var(--comparison-padding)); }
.token-comparison__table tbody td.token-comparison__featured::before { background:#29335c; }
.token-comparison__table tbody strong { display:flex; align-items:center; gap:8px; font-weight:650; }
.token-comparison__table p { margin:8px 0 0; color:#52627f; font-size:13px; line-height:1.65; }
.token-comparison__table .token-comparison__featured { color:#fff; }
.token-comparison__table tr>:last-child { padding-left:36px; }
.token-comparison__featured strong svg { width:18px; height:18px; flex:none; color:#b4c9ff; }
.token-comparison__table .token-comparison__featured :is(p,span) { color:#c5cee5; }
.token-comparison ::selection { background:#c1d1ff; color:#010c3d; }
@media(max-width:1100px) {
  .token-comparison { padding-block:64px; }
  .token-comparison__inner { grid-template-columns:minmax(0,1fr); gap:36px; }
  .token-comparison__intro { gap:32px; }
  .token-comparison h2 { white-space:normal; }
  .token-comparison__intro>p { max-width:65ch; }
  .token-comparison__label-col { width:16%; }
  .token-comparison__surface { --label-width:16%; }
}
@media(max-width:600px) {
  .token-comparison { padding-block:48px; }
  .token-comparison__inner { gap:28px; }
  .token-comparison__intro { grid-template-columns:minmax(0,1fr); gap:0; }
  .token-comparison h2 { margin-bottom:16px; }
  .token-comparison__intro>p { margin:0; font-size:15px; }
  .token-comparison__label-col { width:20%; }
  .token-comparison__surface { --label-width:20%; --comparison-gap:8px; --comparison-padding:12px; margin-block:12px; }
  .token-comparison__surface::before { top:-12px; bottom:-12px; }
  .token-comparison__table th,.token-comparison__table td { padding:20px 12px; }
  .token-comparison__table thead th { padding-block:24px; font-size:14px; }
  .token-comparison__table thead strong { font-size:20px; }
  .token-comparison__table thead th span { font-size:11px; }
  .token-comparison__table tbody th { padding-inline:10px; font-size:12px; }
  .token-comparison__table tr>:last-child { padding-left:20px; }
  .token-comparison__table tbody strong { align-items:flex-start; gap:5px; font-size:13px; line-height:1.5; }
  .token-comparison__featured strong svg { width:14px; height:18px; }
  .token-comparison__table p { font-size:12px; }
}


/* Separate the two complete API statements only when the column gets narrow. */
@media(min-width:761px){[data-product="token"] #sms-developer-title br{display:none}}