/* Faithful visual recreation of the current CoHabitat home screen. */
.hero-art { justify-content: flex-end; }
.phone-real { right: 108px; }
.real-home-screen { background: #FFF4E8; color: #2A3A2E; padding: 17px 14px 0; }
.real-header { display: flex; justify-content: space-between; align-items: flex-start; }
.real-header p { color: rgba(31,26,23,.48); font: 700 7px/1.3 monospace; letter-spacing: .55px; margin: 4px 0 7px; }
.real-header h2 { color: #2A3A2E; font: 800 24px/.93 Georgia, serif; letter-spacing: -.7px; margin: 0; }
.real-header h2 em { color: #FF6B4A; font-weight: 400; }
.real-header h2 b { color: #2A3A2E; }
.real-header .avatar { width: 29px; height: 29px; background: #FFD4C5; color: #E8482A; font-size: 11px; }
.real-day-card { position: relative; overflow: hidden; background: #2A3A2E; color: #FFF4E8; border-radius: 17px; padding: 16px 13px 11px; margin-top: 16px; min-height: 155px; box-shadow: 0 9px 15px rgba(42,58,46,.23); }
.real-orb { position: absolute; width: 135px; height: 135px; border-radius: 50%; background: #FF6B4A; opacity: .16; top: -45px; right: -37px; }
.day-main { position: relative; }
.day-main small, .day-date small, .real-money small { font: 700 7px/1.2 monospace; letter-spacing: 1px; }
.day-main small { color: rgba(255,244,232,.62); display: block; margin-bottom: 5px; }
.day-main strong { display: block; font: 800 21px/1.02 Georgia,serif; letter-spacing: -.35px; }
.day-date { position: absolute; right: 13px; top: 15px; z-index: 1; width: 51px; height: 51px; background: #FF6B4A; border-radius: 15px; display: grid; place-content: center; text-align: center; box-shadow: 0 6px 10px rgba(255,107,74,.33); }
.day-date b { font: 800 22px/19px Georgia,serif; }.day-date small { color: rgba(255,255,255,.84); }
.day-stats { position: absolute; left: 13px; right: 13px; bottom: 11px; display: flex; gap: 7px; }
.day-stats span { flex: 1; padding: 7px 8px; border-radius: 10px; background: rgba(255,244,232,.1); font-size: 8px; color: rgba(255,244,232,.72); }
.day-stats b { display: block; color: #fff; font: 800 15px/1.1 Georgia,serif; }
.real-assistant { display: flex; align-items: center; gap: 8px; padding: 10px; margin-top: 11px; border: 1.5px solid #FFD4C5; border-radius: 13px; background: #FFFBF5; }
.real-assistant > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #FFD4C5; color: #E8482A; font-size: 14px; }
.real-assistant div { flex: 1; }.real-assistant b, .real-assistant small { display: block; }.real-assistant b { font-size: 9px; }.real-assistant small { margin-top: 1px; color: rgba(31,26,23,.6); font-size: 7px; }.real-assistant i { font-style: normal; color: #FF6B4A; font-size: 15px; }
.real-section { display: flex; align-items: center; justify-content: space-between; margin: 14px 1px 7px; }.real-section h3 { margin: 0; color: #2A3A2E; font: 800 16px Georgia,serif; }.real-section > span { color: #FF6B4A; font-size: 8px; font-weight: 800; }
.real-task-cards { display: flex; gap: 6px; }.real-task-cards article { width: 91px; min-height: 92px; padding: 9px; background: #FFFBF5; border: 1px solid rgba(42,58,46,.1); border-radius: 13px; box-shadow: 0 2px 5px rgba(31,26,23,.05); }.real-task-cards b { color: #2A3A2E; display: block; font-size: 8px; line-height: 1.25; margin: 8px 0 6px; }.task-tile { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: #FFF0CC; font-size: 13px; }.task-tile-green { background: #2A3A2E; color: #FFF4E8; }.real-task-cards small { color: rgba(31,26,23,.6); font-size: 7px; }.real-task-cards small i { display: inline-grid; place-items: center; width: 12px; height: 12px; background: #FFD4C5; color: #E8482A; border-radius: 50%; font-size: 6px; font-style: normal; }.real-task-cards small i.green-avatar { background: #E3EBE4; color: #2A3A2E; }.real-task-cards .new-task { width: 55px; display: grid; place-content: center; justify-items: center; gap: 3px; color: rgba(31,26,23,.45); border: 1.5px dashed rgba(31,26,23,.2); background: transparent; box-shadow: none; }.new-task strong { font-size: 18px; line-height: 1; }.new-task span { font-size: 7px; font-weight: 700; }
.money-heading { margin-top: 13px; }.real-money { display: flex; gap: 6px; }.real-money > div { flex: 1; padding: 8px 9px; border-radius: 11px; background: #FFF0CC; }.real-money > div:first-child { background: #FFFBF5; border: 1px solid rgba(42,58,46,.1); }.real-money small, .real-money b, .real-money span { display: block; }.real-money small { color: rgba(31,26,23,.48); }.real-money b { color: #2A3A2E; font: 800 17px Georgia,serif; margin: 2px 0; }.real-money span { color: #8a6a1a; font-size: 7px; }.real-money > div:first-child span { color: rgba(31,26,23,.6); }
.real-tabs { display: flex; justify-content: space-around; align-items: end; color: #2A3A2E; font-size: 13px; padding: 10px 8px 7px; margin: 9px -14px 0; background: #FFFBF5; }.real-tabs b { display: grid; place-items: center; width: 25px; height: 25px; margin-top: -14px; border-radius: 50%; background: #FF6B4A; color: #fff; font-size: 17px; }
@media (max-width: 800px) { .phone-real { right: 21%; } }
@media (max-width: 420px) { .phone-real { right: 13%; } }