/* Homepage "System stack" (partials/home-system.php), Figma 94:142. */
.sy { background: #faf8f3; padding: 100px 16px 96px; }
.sy-in { max-width: 1272px; margin: 0 auto; }
.sy-copy { display: grid; gap: 14px; max-width: 780px; }
.sy-lead { max-width: 640px; }
.sy-h { margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.17; letter-spacing: -0.96px; color: #0a111a; }
.sy-lead { margin: 0; font-family: var(--sans); font-size: 18px; line-height: 27px; color: #5c6370; }

.sy-list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 24px; }
.sy-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 40px;
  height: 560px; padding: 20px 20px 20px 48px; border-radius: 28px; background: #fff;
}
.sy-card--flip { grid-template-columns: 520px minmax(0, 1fr); padding: 20px 48px 20px 20px; }
.sy-card--flip .sy-photo { order: -1; }
.sy-text { display: flex; flex-direction: column; justify-content: space-between; padding-top: 28px; min-width: 0; font-family: var(--sans); }
.sy-top { display: grid; gap: 18px; }
.sy-k { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.sy-k b { font-weight: 500; font-size: 13px; line-height: 18px; color: #06b6d4; }
.sy-k span { font-size: 12px; line-height: 16px; letter-spacing: 0.96px; text-transform: uppercase; color: #8c949e; }
.sy-t { margin: 0; font-weight: 400; font-size: clamp(28px, 2.65vw, 40px); line-height: 1.2; letter-spacing: -0.8px; color: #0a111a; }
.sy-p { margin: 0; max-width: 500px; font-size: 17px; line-height: 26px; color: #5c6370; }

.sy-photo { position: relative; overflow: hidden; border-radius: 20px; background: #e9e6df; }
.sy-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* frosted panels on the photos */
.sy-glass {
  position: absolute; color: #fff; font-family: var(--sans);
  background: rgba(136, 135, 130, 0.2); border: 1px solid rgba(188, 173, 155, 0.3); border-radius: 16px;
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
}
.sy-glass p { margin: 0; }
.sy-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 30px; background: rgba(255, 255, 255, 0.12); font-size: 14px; line-height: 27px; font-weight: 400; white-space: nowrap; }
.sy-pill img { display: block; }

.sy-glass--ask { left: 12px; right: 12px; bottom: 26px; min-height: 182px; padding: 24px 24px 16px; display: flex; flex-direction: column; justify-content: space-between; }
.sy-ask { font-weight: 300; font-size: 20px; line-height: 24px; }
.sy-ask-bar { display: flex; align-items: center; gap: 15px; }
.sy-ask-bar span { margin-left: 26px; font-weight: 500; font-size: 21px; line-height: 32px; opacity: 0.4; }

.sy-stack { position: absolute; left: 19px; right: 19px; bottom: 24px; display: grid; gap: 8px; }
.sy-stack .sy-glass { position: relative; }
.sy-glass--chat { padding: 18px 24px 16px; display: grid; gap: 24px; }
.sy-chat { font-weight: 300; font-size: 18px; line-height: 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sy-chat-row { display: flex; align-items: center; justify-content: space-between; }
.sy-chat-row .sy-pill { font-weight: 300; font-size: 16px; }
.sy-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px 10px 24px; border-radius: 56px; background: rgba(136, 135, 130, 0.1); font-weight: 300; font-size: 18px; line-height: 30px; }
.sy-input i { display: inline-flex; padding: 8px; border-radius: 40px; background: #fff; }

.sy-glass--ehr, .sy-glass--agent { left: 20px; right: 21px; bottom: 26px; padding: 16px 24px 24px; display: grid; gap: 10px; background: rgba(136, 135, 130, 0.06); border-color: rgba(255, 255, 255, 0.2); }
.sy-ehr-head { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 14px; line-height: 27px; }
.sy-ehr-head span:nth-child(2) { flex: 1; }
.sy-epic { display: inline-flex; padding: 8px; border-radius: 8px; background: #fff; }
.sy-epic img { display: block; width: 50px; height: 19px; object-fit: cover; }
.sy-ehr-row { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.sy-ehr-row p { flex: 1; display: grid; }
.sy-when { font-size: 16px; line-height: 20px; }
.sy-when i { font-style: normal; font-weight: 300; font-size: 24px; color: #d4d2cb; margin: 0 6px; vertical-align: -2px; }
.sy-who { font-weight: 300; font-size: 16px; line-height: 20px; opacity: 0.6; }
.sy-ehr-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sy-ehr-foot > div { display: grid; gap: 7px; }
.sy-ehr-t { font-weight: 500; font-size: 14px; line-height: 17px; margin-bottom: 3px !important; }
.sy-tick { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 16px; }
.sy-tick { color: rgba(255, 255, 255, 0.6); }
.sy-ok { display: inline-flex; padding: 4px; border-radius: 40px; background: #76cd4d; }
.sy-ok img { display: block; width: 8px; height: 8px; }
.sy-tick--lg { font-size: 15px; color: rgba(255, 255, 255, 0.85); padding: 4px 0; }
.sy-agent-ico { width: 34px; height: 34px; border-radius: 8px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sy-agent-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-weight: 500; font-size: 14px; }

@media (max-width: 1100px) {
  .sy-card, .sy-card--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 20px 20px 20px 32px; }
  .sy-card--flip { padding: 20px 32px 20px 20px; }
}
@media (max-width: 860px) {
  .sy { padding: 64px 16px 72px; }
  .sy-h br, .sy-t br { display: none; }
  .sy-list { margin-top: 36px; }
  .sy-card, .sy-card--flip { grid-template-columns: 1fr; height: auto; gap: 20px; padding: 16px; }
  .sy-card .sy-photo, .sy-card--flip .sy-photo { order: -1; height: 440px; }
  .sy-text { padding: 4px 8px 12px; gap: 16px; }
  .sy-glass--ask, .sy-glass--ehr, .sy-glass--agent, .sy-stack { left: 10px; right: 10px; bottom: 12px; }
  .sy-ask, .sy-chat, .sy-input { font-size: 15px; line-height: 20px; }
  .sy-ehr-head { gap: 8px; font-size: 12px; }
  .sy-ehr-row .sy-pill, .sy-ehr-foot .sy-pill { display: none; }
}

/* ===== v2: more contrast and air, checkerboard, animated visuals ===== */
#how-it-works.sy, .sy { background: #f7f5f0; padding: 120px 16px 120px; }
.sy-group {
  margin: 64px 0 20px; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0.96px;
  text-transform: uppercase; color: #8c949e; display: flex; align-items: center; gap: 12px;
}
.sy-group::after { content: ''; flex: 1; height: 1px; background: rgba(10, 17, 26, 0.1); }
.sy-list { margin-top: 0; gap: 32px; }
.sy-card { height: 600px; padding: 24px 24px 24px 56px; gap: 56px; box-shadow: 0 1px 0 rgba(10, 17, 26, 0.04), 0 24px 48px -32px rgba(10, 17, 26, 0.18); }
.sy-card--flip { padding: 24px 56px 24px 24px; }
.sy-text { padding-top: 36px; padding-bottom: 12px; }

/* old animated visuals (from the pre-Oct-16 How it works) fill the photo slot */
.sy-photo .hiw-img-wrap {
  position: absolute; inset: 0; max-width: none; width: 100%; height: 100%; flex: none;
  aspect-ratio: auto; min-height: 0; padding: 0; border: 0; background: none; border-radius: 20px; overflow: hidden;
}
.sy-photo .hiw-img-wrap > .hiw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sy-photo .hiw-story-frames { inset: 0; }
.sy-photo .hiw-glass { left: 20px; right: 20px; bottom: 24px; }
.sy-photo .hiw-story--followup .hiw-story-card { left: 20px; right: 20px; bottom: 24px; }
.sy-photo .hiw-badge-logo { top: 20px; left: 20px; }
.sy-agent { position: absolute; inset: 0; }

/* reveal on scroll (js/home-system.js adds .is-js, then .is-in per card) */
.sy.is-js .sy-card { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sy.is-js .sy-card.is-in { opacity: 1; transform: none; }
.sy.is-js .sy-card .sy-top, .sy.is-js .sy-card .sy-p { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s; }
.sy.is-js .sy-card .sy-p { transition-delay: 0.4s; }
.sy.is-js .sy-card.is-in .sy-top, .sy.is-js .sy-card.is-in .sy-p { opacity: 1; transform: none; }
/* step 06: the agent's checks tick in one by one */
.sy.is-js .sy-agent .sy-tick, .sy.is-js .sy-agent .sy-agent-done { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; transition-delay: calc(0.8s + var(--n) * 0.6s); }
.sy.is-js .sy-card.is-in .sy-agent .sy-tick, .sy.is-js .sy-card.is-in .sy-agent .sy-agent-done { opacity: 1; transform: none; }
.sy.is-js .sy-agent .sy-ok { transform: scale(0); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: calc(1s + var(--n) * 0.6s); }
.sy.is-js .sy-card.is-in .sy-agent .sy-ok { transform: none; }
@media (prefers-reduced-motion: reduce) { .sy .sy-card, .sy .sy-card * { transition: none !important; opacity: 1 !important; transform: none !important; } }

@media (max-width: 860px) {
  .sy { padding: 72px 16px; }
  .sy-card, .sy-card--flip { height: auto; padding: 16px; gap: 20px; }
  .sy-group { margin-top: 40px; }
  .sy-photo .hiw-glass, .sy-photo .hiw-story--followup .hiw-story-card { left: 12px; right: 12px; bottom: 12px; }
}
.sy-agent .sy-glass--agent { background: rgba(24, 26, 28, 0.42); border-color: rgba(255, 255, 255, 0.18); }
/* safety net: if a throttled page stalls the transition, land the final state */
.sy.is-js .sy-card.is-done, .sy.is-js .sy-card.is-done .sy-top, .sy.is-js .sy-card.is-done .sy-p { transition: none; opacity: 1; transform: none; }

/* ===== Figma 2:1440 match ===== */
#how-it-works.sy, .sy { background: #f9f8f5 !important; padding: 80px 16px 100px; }
.sy-copy { max-width: none; justify-items: center; text-align: center; gap: 16px; }
.sy-h { font-weight: 300; font-size: clamp(36px, 3.8vw, 64px); line-height: 1.17; letter-spacing: -1px; }
.sy-lead { max-width: 872px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.17; color: #64748b; }
.sy-list { margin-top: 80px; gap: 80px; }
.sy-card { box-shadow: none !important; height: 560px; padding: 20px 20px 20px 48px; gap: 40px; border-radius: 28px; }
.sy-card--flip { padding: 20px 48px 20px 20px; }
.sy-t { font-weight: 300; font-size: clamp(28px, 2.65vw, 40px); line-height: 1.2; letter-spacing: -0.8px; }
.sy-p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.35; }
.sy-text { padding: 28px 0 24px; }
@media (max-width: 860px) { .sy-card, .sy-card--flip { height: auto; padding: 16px; } .sy-list { margin-top: 40px; gap: 24px; } }
/* Follow-up card: the photo frames fill the whole slot, the SMS thread sits on top */
.sy-photo .hiw-story-frames { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.sy-photo .hiw-story-frames .hiw-story-img { width: 100%; height: 100%; object-fit: cover; }
.sy-photo .hiw-story--followup .hiw-sms-thread { position: absolute !important; left: 20px; right: 20px; bottom: 24px; top: auto !important; margin: 0 !important; width: auto !important; }
@media (max-width: 860px) { .sy-photo .hiw-story--followup .hiw-sms-thread { left: 12px; right: 12px; bottom: 12px; } }