/* =============================================================================
   YesBOS 2.0 — Platform page: "A Day With YesBOS"
   Reading Mode: a sticky dominant message on the left; the day unfolds on the
   right as you scroll. Builds on design-system.css. Same rhythm as the homepage.
   ============================================================================= */

/* --- Intro --- */
.pf-intro { padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.pf-intro__head { max-width: 40rem; }
.pf-intro h1 { margin-top: var(--sp-3); font-size: clamp(2.3rem, 1.7rem + 2.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.pf-intro .lead { margin-top: var(--sp-5); }
.pf-scrollcue { margin-top: var(--sp-7); display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); color: var(--text-soft); }
.pf-scrollcue svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { .pf-scrollcue svg { animation: cueBob 2s ease-in-out infinite; } }
@keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* --- The day: Reading Mode two-column --- */
.day { padding-bottom: clamp(4rem, 3rem + 5vw, 8rem); }
.day__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 1rem + 5vw, 5rem); }
@media (min-width: 900px) { .day__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }

/* Left anchor — the message that stays */
.day__anchor { }
@media (min-width: 900px) {
  .day__anchor { position: sticky; top: 104px; align-self: start; }
}
.day__anchor h2 { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.day__anchor h2 .soft { color: var(--text-soft); }
.day__anchor .lead { margin-top: var(--sp-4); max-width: 26rem; }

/* time-of-day progression — same visual language as the homepage stepper */
.day-clock { margin-top: var(--sp-7); list-style: none; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.day-clock::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.day-clock li { position: relative; display: flex; align-items: center; gap: var(--sp-4); z-index: 1; }
.day-clock .node { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); display: grid; place-items: center; transition: border-color .4s var(--ease); }
.day-clock .node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; transform: scale(.3); transition: background .4s var(--ease), transform .4s var(--ease); }
.day-clock .label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); transition: color .4s var(--ease); }
.day-clock li.is-on .node { border-color: var(--emerald); }
.day-clock li.is-on .node::after { background: var(--emerald); transform: scale(1); }
.day-clock li.is-on .label { color: var(--ink); }

/* Right stream — the beats of the day */
.day__stream { display: flex; flex-direction: column; gap: clamp(2.75rem, 2rem + 4vw, 5rem); }

.beat--statement .k { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--emerald); }
.beat--statement p { margin-top: var(--sp-3); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); text-wrap: balance; max-width: 22ch; }

/* Q&A beat: someone asks, YesBOS already knows */
.beat--qa .ask {
  font-size: var(--fs-h3); font-weight: 500; color: var(--text-muted);
  letter-spacing: -0.01em; line-height: 1.3;
}
/* the answer comes from a Digital Employee — like a teammate replying, not
   software dumping data. Compact, calm, kept under two lines. */
.beat--qa .answer {
  margin-top: var(--sp-3);
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs); padding: .7rem 1rem; max-width: 34rem;
}
.answer__who { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); }
.answer__who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.answer__body { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .6rem; }
.answer__lead { font-weight: 600; color: var(--forest); letter-spacing: -0.01em; }
.answer__detail { color: var(--text-muted); font-size: var(--fs-sm); }

/* the one "working" moment — YesBOS looking across connected information */
.answer__thinking { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-soft); font-size: var(--fs-sm); }
.answer__thinking .dots { display: inline-flex; gap: 3px; }
.answer__thinking .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .answer__thinking .dots i { animation: thinkDot 1.1s ease-in-out infinite; }
  .answer__thinking .dots i:nth-child(2) { animation-delay: .18s; }
  .answer__thinking .dots i:nth-child(3) { animation-delay: .36s; }
  @keyframes thinkDot { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
}
.answer__resolved { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; opacity: 0; transition: opacity .5s var(--ease); }
.beat--qa[data-thinking] .answer__resolved { display: none; }
.beat--qa[data-thinking].is-resolved .answer__thinking { display: none; }
.beat--qa[data-thinking].is-resolved .answer__resolved { display: flex; opacity: 1; }

/* the clock earns its place — a quiet note on the day's mood */
.day-clock__note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-soft); transition: opacity .4s var(--ease); }

/* the closing line of the day, and the loop that lingers */
.day-close { text-align: center; padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); }
.day-close__line { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); text-wrap: balance; max-width: 16ch; margin-inline: auto; }
.day-close__loop { margin-top: var(--sp-6); font-size: var(--fs-lead); color: var(--text-soft); }