/* Canonical: Studio/Website/src/styles/site-family.css.
   Sync the Apps copy with: node Studio/sync-website-family.mjs --write */
.ui-arrow { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; vertical-align: middle; }
.button-dark, .nav-contact { display: inline-flex; align-items: center; }
.project, .app-card { padding: 28px; }
.app-card h3 { font-size: 24px; }
.app-card-body p { font-size: 15px; }
.closing-section { padding-block: 80px; }
.closing-section p { margin-bottom: 18px; }
.closing-section h2 { font-size: clamp(50px, 7.5vw, 96px); }
.closing-cta { min-width: 0; max-width: 100%; }
.closing-cta .lead-capture-box { border-top: 0; }
.closing-email { display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 30px); max-width: 100%; min-height: 56px; font-size: clamp(22px, 3vw, 38px); letter-spacing: -.025em; color: var(--paper); border-bottom: 1.5px solid rgba(245, 244, 239, .55); padding-block: 8px 12px; transition: border-color .2s ease; }
.closing-email-address { min-width: 0; overflow-wrap: anywhere; }
.closing-email-arrow { display: block; flex: 0 0 44px; width: 44px; height: 44px; transition: opacity .15s ease; }
.closing-email-arrow svg { display: block; margin: 4px; width: 36px; height: 36px; transition: transform .12s ease; }
.closing-email:focus-visible { outline-color: var(--paper); border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .closing-email:hover { border-color: var(--paper); }
  .closing-email:hover .closing-email-arrow { animation: closing-arrow-flip .5s cubic-bezier(.16, 1, .3, 1); }
}
.closing-email:focus-visible .closing-email-arrow { animation: closing-arrow-flip .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes closing-arrow-flip { from { transform: perspective(240px) rotateY(0deg); } to { transform: perspective(240px) rotateY(360deg); } }
.closing-email:active { border-color: var(--paper); }
.closing-email:active .closing-email-arrow { opacity: .7; }
.closing-email:active .closing-email-arrow svg { transform: scale(.92); }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .closing-email-arrow { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .closing-email-arrow svg { transform: none !important; } }


@media (max-width: 700px) {
  .project-list, .apps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .project, .app-card { padding: 20px; border-radius: 16px; }
  .project-header, .app-card-header { gap: 14px; margin-bottom: 18px; align-items: center; }
  .project-image, .app-card .icon-link { width: 52px; height: 52px; border-radius: 12px; }
  .project h3, .app-card h3 { font-size: clamp(18px, 5vw, 22px); line-height: 1.2; overflow-wrap: anywhere; }
  .project-meta, .app-card .platform { font-size: 11px; line-height: 1.5; }
  .project-copy > p, .app-card-body p { font-size: 15px; line-height: 1.65; }
  .project-card-footer, .app-card-footer { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 22px; padding-top: 0; border-top: 0; }
  .app-card-footer .app-tagline { font-size: 11px; line-height: 1.6; }
  .project-visit, .card-cta { width: 100%; min-height: 44px; justify-content: space-between; padding: 10px 16px; font-size: 13px; }
  .closing-section { padding-block: 52px; border-radius: 24px 24px 0 0; }
  .closing-section > div { display: block; }
  .closing-section h2 { margin-bottom: 32px; }
  .newsletter-pill, .newsletter-popup { display: none !important; }
}
@media (hover: none) {
  .project:hover, .app-card:hover { transform: none; border-color: #d7d6cf; }
  .project:hover .project-visit, .app-card:hover .card-cta { background: var(--badge); color: var(--ink); }
  .project:hover .visit-arrow { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .closing-email-arrow { animation: none !important; }
}