:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #111a33; background: #f8f5f0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.handoff-shell { width: min(100% - 32px, 620px); margin: 0 auto; padding: 32px 0 56px; }
.brand { display: inline-block; color: inherit; font-size: 1.5rem; font-weight: 900; letter-spacing: -.04em; text-decoration: none; margin-bottom: 28px; }
.handoff-card { overflow: hidden; padding: 28px; border: 1px solid #e6ded5; border-radius: 24px; background: #fff; box-shadow: 0 16px 48px rgba(17,26,51,.08); }
#experience-image { width: calc(100% + 56px); max-height: 280px; object-fit: cover; margin: -28px -28px 24px; }
.eyebrow { color: #ef6257; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 8px 0 12px; font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1.05; }
p { line-height: 1.55; }
dl { margin: 22px 0; }
dl div { padding: 10px 0; border-top: 1px solid #eee8e1; }
dt { color: #697083; font-size: .78rem; }
dd { margin: 3px 0 0; font-weight: 700; }
.actions { display: grid; gap: 12px; margin-top: 24px; text-align: center; }
.actions a { min-height: 48px; display: grid; place-items: center; border-radius: 14px; font-weight: 750; text-decoration: none; }
.primary { color: white; background: #ef6257; }
.secondary { color: #111a33; border: 1px solid #ccd0da; }
#ios-status { margin: 0; color: #697083; font-size: .88rem; }
@media (max-width: 420px) { .handoff-card { padding: 22px; } #experience-image { width: calc(100% + 44px); margin: -22px -22px 20px; } }