/* ==========================================================================
   Shared by /cape-hub and /coworking
   ========================================================================== */

/* Extra scroll-reveal variants used by these pages (site.js adds .is-in) */
.js [data-reveal="up"] { transform: translateY(40px); }
.js [data-reveal="rise"] { transform: perspective(1200px) translateY(80px); }
.js [data-reveal="glow-l"] { transform: translateX(-32px); }
.js [data-reveal="glow-r"] { transform: translateX(32px); }

/* Teal-tinted feature tag with a 24px icon (Framer: 20/153% Lato on desktop) */
.ctags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; width: 100%; overflow: clip; }
.ctag { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 8px; background: var(--mint); white-space: nowrap; }
.ctag__icon { flex: none; width: 24px; height: 24px; fill: #343a40; }
.ctag p { font: 400 20px/1.53 var(--f-body); color: #343a40; }

/* Lime check in the AI hardware list */
.check { flex: none; width: 27px; height: 27px; fill: none; stroke: #d5ed71; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Outline button variants seen on these pages */
.btn--green { background: transparent; padding: 10px 15px; font-size: 14px; line-height: 19.6px; color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green-dark); }
.btn--line { background: transparent; padding: 12px 20px; font-size: 14px; line-height: 19.6px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-2); }

@media (max-width: 1199.98px) {
  .ctag p { font-size: 17px; }
}
@media (max-width: 809.98px) {
  .ctag p { font-size: 15px; }
}

/* <strong> inside already-bold Framer text stays 700 (browser default "bolder" would give 900) */
main strong { font-weight: 700; }