/* Three big beats: school email, aurion receives it, reminders are arranged. */
.hero-demo-title { font-family:var(--sans); font-size:clamp(22px,3.8cqw,28px); line-height:1.22; font-weight:500; letter-spacing:-.035em; color:var(--ink); margin:0 0 18px; }
.phone-to-reminders .hero-house-photo { transition:opacity .6s ease,transform .65s cubic-bezier(.2,.7,.3,1); }
.hero-phone-scene { position:absolute; inset:0; z-index:1; overflow:hidden; opacity:0; transform:translateX(-9%) scale(.96); transition:opacity .6s ease,transform .65s cubic-bezier(.2,.7,.3,1); }
.hero-phone-photo { position:absolute; left:-60.4%; top:calc(7% - 32.8cqw); width:222%; height:auto; max-width:none; }
.hero-phone-surface { position:absolute; left:14.1%; width:71.7%; top:calc(7% + 6cqw); bottom:0; background:#f6f4ee; }
.hero-phone-mailbar { position:absolute; left:18%; top:calc(7% + 7cqw); width:64%; display:flex; justify-content:space-between; font:14px Arial,sans-serif; color:#3f6f9b; }
.hero-phone-mailbar>span:last-child { color:#817568; font-size:12px; }
.phone-to-reminders .hero-email { z-index:3; transition:top .65s cubic-bezier(.2,.7,.3,1),left .65s cubic-bezier(.2,.7,.3,1),width .65s cubic-bezier(.2,.7,.3,1),padding .65s,background .5s,border-color .5s,box-shadow .5s,opacity .35s,transform .6s; }
.phone-to-reminders .hero-email-subject,.phone-to-reminders .hero-email-excerpt { transition:font-size .65s,line-height .65s,margin .65s; }
.phone-to-reminders .hero-source-action,.phone-to-reminders .hero-source-due { transition:background-color .5s; }
.hero-source-label { display:flex; align-items:center; gap:6px; margin-top:7px; padding-top:8px; border-top:1px solid #e9e3d9; color:#754a34; font-size:10px; line-height:1.3; }
.hero-source-label img { flex-shrink:0; }
.phone-to-reminders .hero-stage>.hub-ui { transition:opacity .6s; }
.phone-to-reminders .hub-reminder { transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1); }
.phone-to-reminders[data-phase="reading"] .hero-house-photo { opacity:0; transform:scale(1.08); }
.phone-to-reminders[data-phase="reading"] .hero-stage>.hub-ui { opacity:0; }
.phone-to-reminders[data-phase="reading"] .hero-phone-scene { opacity:1; transform:none; }
.phone-to-reminders[data-phase="reading"] .hero-email { left:18%; top:calc(7% + 14cqw); width:64%; max-width:none; padding:0; border-color:transparent; box-shadow:none; background:transparent; opacity:1; transform:none; }
.phone-to-reminders[data-phase="reading"] .hero-email-meta { font-size:clamp(12px,2.4cqw,16px); }
.phone-to-reminders[data-phase="reading"] .hero-email-avatar { display:grid; width:29px; height:29px; }
.phone-to-reminders[data-phase="reading"] .hero-email-subject { font-size:clamp(17px,3.4cqw,24px); line-height:1.22; margin-top:16px; }
.phone-to-reminders[data-phase="reading"] .hero-email-excerpt { font-size:clamp(17px,3.1cqw,22px); line-height:1.6; margin-top:20px; }
.phone-to-reminders[data-phase="reading"] .hero-source-action,
.phone-to-reminders[data-phase="reading"] .hero-source-due { font-weight:600; }
.phone-to-reminders[data-phase="reading"] .hero-source-label { display:none; }
.phone-to-reminders:is([data-phase="reading"],[data-phase="received"]) .hub-reminder { opacity:0; transform:translateY(12px); }
.phone-to-reminders:is([data-phase="reading"],[data-phase="received"]) .hub-auto-label { opacity:0; }
.phone-to-reminders:is([data-phase="received"],[data-phase="first"],[data-phase="done"]) .hero-source-action { background:#e7ecdf; }
.phone-to-reminders:is([data-phase="received"],[data-phase="first"],[data-phase="done"]) .hero-source-due { background:#f1e6d5; }
/* The first beat is readable immediately, including on replay. */
.phone-to-reminders[data-phase="reading"] * { transition:none!important; }
@media(max-width:760px) {
  .hero-demo-title { font-size:22px; margin-bottom:14px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-excerpt { font-size:18px; line-height:1.5; }
}
@media(max-width:360px) {
  .hero-demo-title { font-size:20px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-excerpt { font-size:17px; margin-top:17px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-subject { margin-top:13px; }
}

/* A teacher's email: full context in the phone, a compact source beside the hub. */
.hero-phone-surface { background:#fffefa; }
.hero-phone-mailbar { padding-bottom:9px; border-bottom:1px solid #e6e3de; }
.hero-phone-mailbar>span:last-child { font-size:20px; line-height:12px; }
.hero-email-timestamp,.hero-mail-context,.hero-mail-full { display:none; }
.hero-mail-short { display:inline; }
.phone-to-reminders[data-phase="reading"] .hero-email { top:calc(7% + 7cqw + 34px); }
.phone-to-reminders[data-phase="reading"] .hero-email-meta { font-size:clamp(12px,2.3cqw,16px); }
.phone-to-reminders[data-phase="reading"] .hero-email-meta div>span { display:block; font-size:clamp(10px,1.8cqw,12px); margin-top:2px; }
.phone-to-reminders[data-phase="reading"] .hero-email-avatar { width:30px; height:30px; font-size:11px; }
.phone-to-reminders[data-phase="reading"] .hero-email-day { display:none; }
.phone-to-reminders[data-phase="reading"] .hero-email-timestamp { display:block; font-size:clamp(10px,1.7cqw,12px); line-height:1.3; color:#76726b; margin-top:7px; }
.phone-to-reminders[data-phase="reading"] .hero-email-subject { font-size:clamp(16px,2.8cqw,21px); line-height:1.22; margin:15px 0 14px; }
.phone-to-reminders[data-phase="reading"] .hero-mail-context { display:block; font-size:clamp(12px,2.3cqw,16px); line-height:1.5; color:#45433f; margin:0 0 9px; }
.phone-to-reminders[data-phase="reading"] .hero-email-excerpt { font-size:clamp(14px,2.5cqw,17px); line-height:1.5; margin:0 0 12px; color:#2d2c29; }
.phone-to-reminders[data-phase="reading"] .hero-mail-full { display:inline; }
.phone-to-reminders[data-phase="reading"] .hero-mail-short { display:none; }
.phone-to-reminders[data-phase="reading"] .hero-mail-signoff { margin-top:10px; margin-bottom:0; }
@media(max-width:760px) {
  .phone-to-reminders[data-phase="reading"] .hero-email-subject { margin:12px 0 11px; font-size:17px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-excerpt { font-size:15px; line-height:1.42; margin-bottom:10px; }
  .phone-to-reminders[data-phase="reading"] .hero-mail-context { font-size:13px; line-height:1.4; margin-bottom:8px; }
  .phone-to-reminders[data-phase="reading"] .hero-mail-signoff { margin-top:8px; }
}
@media(max-width:360px) {
  .phone-to-reminders[data-phase="reading"] .hero-email-avatar { width:24px; height:24px; font-size:9px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-meta { font-size:11px; gap:6px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-meta div>span { font-size:10px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-timestamp { font-size:9px; margin-top:5px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-subject { font-size:16px; margin:7px 0 7px; }
  .phone-to-reminders[data-phase="reading"] .hero-email-excerpt { font-size:14px; line-height:1.35; margin-bottom:9px; }
  .phone-to-reminders[data-phase="reading"] .hero-mail-context { font-size:12px; line-height:1.3; margin-bottom:7px; }
  .phone-to-reminders[data-phase="reading"] .hero-mail-signoff { margin-top:7px; }
  .phone-to-reminders[data-phase="reading"] .hero-mail-signoff br { display:none; }
}