/* Try-it box. Leans on each site's own --ink/--line/--mut and .btn so it wears that site's colors. */
.ct{display:grid;gap:16px;max-width:720px}
.ct-pick label,.ct-stack label:not(.ct-check){display:block;font-weight:800;margin-bottom:6px}
.ct-select,.ct-input{width:100%;box-sizing:border-box;font:inherit;font-size:18px;padding:12px;border:2px solid var(--ink,#222);border-radius:6px;background:#fff;color:var(--ink,#222)}
.ct-select{font-weight:800;cursor:pointer}
.ct-tag{margin:8px 0 0;color:var(--mut,#555);font-style:italic}
.ct-chat{border:2px solid var(--ink,#222);border-radius:12px;background:#fff;padding:12px}
.ct-log{display:flex;flex-direction:column;gap:8px;min-height:240px;max-height:420px;overflow-y:auto;padding:4px}
.ct-b{margin:0;padding:10px 14px;border-radius:18px;max-width:85%;line-height:1.4;font-size:17px;overflow-wrap:anywhere}
.ct-chad{align-self:flex-start;background:#e9e9eb;color:#111;border-bottom-left-radius:4px}
.ct-me{align-self:flex-end;background:#0a58ca;color:#fff;border-bottom-right-radius:4px}
.ct-typing{color:#333}
.ct-say{display:flex;gap:8px;margin-top:10px}
.ct-say .ct-input{flex:1;min-width:0}
.ct-actions{display:flex;flex-wrap:wrap;gap:10px}
.ct-call{font-size:19px}
.ct-fine{margin:0;font-size:15px;color:var(--mut,#555)}
.ct-err{margin:4px 0 0;color:#a3121c;font-weight:700;min-height:0}
.ct-err:empty{display:none}
.ct-phone{border:2px dashed var(--line,#999);border-radius:10px;padding:14px;background:rgba(255,255,255,.6)}
.ct-stack{display:grid;gap:10px}
.ct-check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.ct-check input{width:22px;height:22px;flex:none;margin-top:2px}
.ct-done{margin:0;font-weight:800}
.ct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
@media (max-width:480px){.ct-actions .btn{width:100%;text-align:center;box-sizing:border-box}}

/* Page kit shared by the four sites: the phone-first template (2026-11-07). Desktop keeps each site's own grid. */
.ct-save{font-weight:800}
.ck-hint{display:none;margin:4px 0 0;font-size:15px;color:var(--mut,#555)}
@media (max-width:700px){
  .ck-swipe{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-16px;padding:4px 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .ck-swipe>*{flex:0 0 84%!important;max-width:84%!important;scroll-snap-align:center;margin:0!important}
  .ck-swipe img{max-height:440px;width:100%;object-fit:cover}
  .ck-hint{display:block}
}
.ck-swipe:focus-visible{outline:3px solid var(--ink,#222);outline-offset:4px}
details.ck-more{border-top:2px solid var(--line,#999);border-bottom:2px solid var(--line,#999)}
details.ck-more>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;min-height:48px;padding:12px 0}
details.ck-more>summary::-webkit-details-marker{display:none}
details.ck-more>summary::after{content:"+" / "";font:800 28px/1 system-ui,sans-serif;grid-column:2;grid-row:1 / span 2}
details.ck-more[open]>summary::after{content:"\2212" / ""}
details.ck-more>summary h2{margin:0}
details.ck-more>summary .ck-sum{grid-column:1;display:block;font-size:16px;font-weight:400;color:var(--mut,#555);margin-top:4px}
.cta [data-chad-hear]{cursor:pointer;font:inherit}
.faq summary{min-height:48px;display:flex;align-items:center;box-sizing:border-box}

/* Listen button on example cards */
.ck-listen{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:12px;padding:8px 16px;border:2px solid var(--ink,#222);border-radius:999px;background:transparent;color:var(--ink,#222);font:700 16px/1.1 system-ui,sans-serif;cursor:pointer}
.ck-listen:hover,.ck-listen.ck-playing{background:var(--ink,#222);color:var(--paper,#fff)}
figcaption .ck-listen{align-self:flex-start}