/* Image layout exploration. Product colors follow design-tokens.css. */
body {
  background: var(--dc-color-canvas);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
.home-persona { display: flex; align-items: center; gap: 10px; }
.home-persona > img { width: 43px; height: 43px; border-radius: 15px; object-fit: cover; background: var(--dc-color-subtle); border: 1px solid var(--dc-color-shadow); }
.plan-card { border-radius: 22px; overflow: hidden; background: var(--dc-color-ink); color: var(--dc-color-surface); box-shadow: 0 9px 25px var(--dc-color-shadow-strong); }
.plan-photo { position: relative; min-height: 178px; box-sizing: border-box; }
.plan-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 51%; }
.plan-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,var(--dc-color-image-shade),var(--dc-color-image-middle) 65%,var(--dc-color-image-light)),linear-gradient(0deg,var(--dc-color-ink),transparent 45%); }
.plan-photo-content { position: relative; z-index: 1; padding: 17px 20px 15px; }
.plan-eyebrow { margin-top: 22px; font-size: 9px; color: var(--dc-color-inverse-secondary); letter-spacing: 2px; font-weight: 600; }
.plan-byline { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--dc-color-inverse-secondary); font-size: 10px; }
.plan-byline img { width: 21px; height: 21px; object-fit: cover; border-radius: 50%; border: 1px solid var(--dc-color-inverse-outline); }
.plan-body { padding: 0 20px 18px; }
.coach-avatar { position: relative; flex-shrink: 0; }
.coach-avatar > img { width: 52px; height: 52px; border-radius: 18px; object-fit: cover; background: var(--dc-color-subtle); box-shadow: 0 0 0 3px var(--dc-color-surface); }
.coach-avatar > span { position: absolute; bottom: -2px; right: -2px; padding: 2px 4px; color: var(--dc-color-surface); background: var(--dc-color-brand); font-size: 8px; font-weight: 800; border: 2px solid var(--dc-color-page); border-radius: 6px; }
.coach-profile { display: flex; margin: 14px 20px 0; min-height: 142px; border-radius: 18px; overflow: hidden; background: var(--dc-color-brand-soft); }
.coach-profile-copy { position: relative; z-index: 1; flex: 1; padding: 19px 0 18px 17px; }
.coach-profile-copy .eyebrow { font-size: 9px; color: var(--dc-color-text-secondary); letter-spacing: 1.8px; font-weight: 700; }
.coach-profile-copy h2 { margin: 8px 0; font-size: 22px; line-height: 1.35; letter-spacing: -.7px; color: var(--dc-color-ink); }
.coach-profile-copy p { margin: 0; font-size: 10px; color: var(--dc-color-text-secondary); white-space: nowrap; }
.coach-profile-picture { width: 126px; flex-shrink: 0; position: relative; }
.coach-profile-picture > img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 49% 46%; }
.coach-profile-picture::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,var(--dc-color-brand-soft),transparent 24%); }
.chat-avatar { width: 29px; height: 29px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--dc-color-subtle); margin-top: 3px; }
.activity-visual { height: 138px; position: relative; overflow: hidden; background: var(--dc-color-brand-tint); }
.activity-visual img { width: 100%; height: 100%; object-fit: cover; }
.activity-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,var(--dc-color-image-overlay),transparent 55%); }
.activity-visual > span { position: absolute; bottom: 12px; left: 14px; right: 14px; z-index: 1; color: var(--dc-color-surface); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; white-space: nowrap; }
.home-event-image { width: 62px; height: 62px; border-radius: 12px; flex-shrink: 0; object-fit: cover; }
.activity-detail-photo { height: 224px; margin-top: 0; position: relative; overflow: hidden; background: var(--dc-color-brand-tint); }
.activity-detail-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.activity-detail-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,var(--dc-color-page-overlay),transparent 38%,var(--dc-color-image-overlay)); pointer-events: none; }
.activity-detail-photo > div { z-index: 2; }
.activity-detail-photo > span { position: absolute; bottom: 16px; left: 20px; z-index: 2; color: var(--dc-color-surface); font-size: 10px; letter-spacing: 2px; font-weight: 600; }
.audiobook-cover { position: relative; width: 72px; height: 98px; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: var(--dc-color-brand-strong); box-shadow: 2px 4px 10px var(--dc-color-shadow); }
.audiobook-cover img { width: 56px; height: 56px; border-radius: 50%; position: absolute; right: -6px; bottom: -5px; }
.audiobook-cover > span { position: absolute; top: 10px; left: 9px; z-index: 1; color: var(--dc-color-inverse-secondary); font-size: 13px; line-height: 1.35; font-weight: 700; letter-spacing: 1px; }
.audio-art { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 16px; box-shadow: 0 0 0 7px var(--dc-color-inverse-soft),0 0 0 8px var(--dc-color-inverse-surface); object-fit: cover; }
.road-story { margin-top: 16px; border-radius: 18px; padding: 14px; background: var(--dc-color-brand-soft); display: flex; gap: 14px; align-items: center; }
.road-story > img { width: 82px; height: 82px; border-radius: 10px; object-fit: cover; }
.road-story small { display: block; color: var(--dc-color-text-secondary); font-size: 10px; letter-spacing: 1px; margin-bottom: 6px; }
.road-story strong { display: block; color: var(--dc-color-ink); font-size: 17px; line-height: 1.4; }
.road-story p { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--dc-color-text-secondary); }
.coach-console-persona { display: flex; align-items: center; gap: 11px; }
.coach-console-persona img { width: 48px; height: 48px; border-radius: 16px; object-fit: cover; object-position: 50% 29%; }
.shoe-visual { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }