.ct { box-sizing: border-box; max-width: 40rem; margin: 0; padding: var(--sp-5) 0; color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-0); line-height: var(--lh-body); }
.ct *, .ct *::before, .ct *::after { box-sizing: border-box; }
.ct-title { margin: 0 0 var(--sp-2); font-size: var(--fs-3); line-height: var(--lh-tight); }
.ct-sub { margin: 0 0 var(--sp-4); color: var(--c-text-muted); }
.ct-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.ct-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 48px; min-width: 44px; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); border: 2px solid var(--c-accent); font: inherit; font-weight: var(--fw-semibold); text-decoration: none; text-align: center; }
.ct-wa { background: var(--c-accent); color: var(--c-on-accent); }
.ct-wa:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.ct-mail { background: var(--c-bg); color: var(--c-accent); }
.ct-mail:hover { background: var(--c-accent-soft); }
.ct-btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.ct-note { margin: var(--sp-4) 0 0; color: var(--c-text-muted); font-size: var(--fs-n1); max-width: var(--measure); }
@media (min-width: 40rem) { .ct-actions { flex-direction: row; } .ct-btn { flex: 1 1 0; } }
/* Site fix (Session 7): at 768px and wider both labels stay on one line; below that they may wrap. */
@media (min-width: 48rem) { .ct-btn { flex: 1 1 auto; white-space: nowrap; min-width: 14rem; } }
@media (prefers-reduced-motion: no-preference) { .ct-btn { transition: background var(--dur-1) var(--ease); } }
/* Site fix (Session 7): the block is left-aligned with the section heading above it (was centred, inset at 768px and wider). */