/* hey habits — how it works page specific styles */

/* ---- day-in-the-life timeline ---- */
.day { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.day__phone { position: sticky; top: 96px; justify-self: center; width: 300px; border-radius: 40px; border: 11px solid #1b1714; background: var(--bg-app); box-shadow: var(--shadow-lg); overflow: hidden; }
.day__bar { height: 30px; display: flex; align-items: center; justify-content: center; }
.day__bar i { width: 92px; height: 6px; border-radius: 99px; background: var(--ink-200); display: block; }
.day__body { padding: 4px 16px 22px; }
.ns { position: relative; overflow: hidden; border-radius: 22px; color: var(--text-on-brand); background: linear-gradient(160deg, var(--clay-600), var(--clay-700)); padding: 18px; box-shadow: var(--shadow-brand); }
.ns::after { content: ""; position: absolute; top: -60px; right: -34px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,248,244,.32), transparent 70%); }
.ns__eb { position: relative; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; display: flex; align-items: center; gap: 6px; }
.ns__id { position: relative; font-family: var(--font-serif); font-size: 18px; line-height: 1.3; font-weight: 500; margin: 10px 0 16px; }
.ns__id em { font-style: italic; }
.ns__pr { position: relative; height: 5px; border-radius: 99px; background: rgba(255,248,244,.22); overflow: hidden; }
.ns__pr i { position: absolute; inset: 0 38% 0 0; border-radius: 99px; background: rgba(255,248,244,.92); }
.ns__meta { position: relative; display: flex; justify-content: space-between; margin-top: 9px; font-size: 10.5px; opacity: .9; }
.row { display: flex; align-items: center; gap: 11px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin-top: 12px; box-shadow: var(--shadow-sm); }
.row__ic { width: 36px; height: 36px; border-radius: 11px; background: var(--brand-soft); display: grid; place-items: center; font-size: 17px; flex: none; }
.row__t { font-weight: 600; font-size: 14px; color: var(--text-strong); }
.row__w { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.row__w b { color: var(--brand); font-weight: 600; }
.row__ck { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.row__ck.on { background: var(--growth); color: #fff; }
.affirm { font-family: var(--font-serif); font-style: italic; font-size: 14.5px; line-height: 1.4; color: var(--text-strong); background: linear-gradient(160deg, var(--spark-soft), var(--brand-soft)); border: 1px solid var(--border-brand); border-radius: 18px; padding: 14px 16px; margin-top: 12px; }

/* ---- timeline ---- */
.tl { display: flex; flex-direction: column; gap: 22px; }
.tl__item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; }
.tl__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 800; color: var(--clay-700); box-shadow: var(--shadow-xs); }
.tl__when { font-size: var(--text-caption); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.tl__t { margin: 4px 0 5px; font-size: var(--text-subhead); font-weight: 700; color: var(--text-strong); }
.tl__p { margin: 0; font-size: var(--text-body); line-height: 1.6; color: var(--text-muted); }

@media (max-width: 860px) { .day { grid-template-columns: 1fr; } .day__phone { position: static; order: -1; } }