/* ─── Landing (signed-out home) ───
   Loaded after style.css, only by index.html. Same tokens as the hub, so
   light/dark and the account theme apply for free. Sections: nav, hero +
   demo, how it works, share story, connection map, your day, use cases,
   trust, apps, FAQ, final CTA.
   Motion lives in landing.js and is skipped under prefers-reduced-motion. */

.landing { max-width: 1120px; padding-top: 1.25rem; }

/* ─── NAV ─── */
.lp-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 0 2.5rem;
}
.lp-nav-brand { text-decoration: none; color: inherit; font-size: 1.25rem; }
.lp-nav-links { display: flex; gap: 1.25rem; margin-left: auto; }
.lp-nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.lp-nav-links a:hover { color: var(--text); }
.lp-nav-signin { text-decoration: none; font-size: 0.9rem; }
.lp-nav-demo { width: auto; padding: 0.5rem 1rem; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }

/* ─── HERO ─── */
.landing-top,
.landing-top:not(.auth-open) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: 3.5rem;
  align-items: center;
  min-height: min(calc(100vh - 10rem), 620px);
}
.landing-top.auth-open { grid-template-columns: minmax(0, 1fr) 380px; }
.landing-top.auth-open .lp-demo { display: none; }

.lp-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.25rem;
}
.landing-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 1.25rem; }
.landing-lead { max-width: 36rem; }
.lp-hero-note { color: var(--text-muted); font-size: 0.85rem; margin-top: 1rem; }

/* ─── DEMO (scripted HyperChat turn) ─── */
.lp-demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lp-demo-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.lp-demo-bar .card-icon { margin: 0; width: 32px; height: 32px; }
.lp-demo-name { font-weight: 600; font-size: 0.95rem; }
.lp-demo-tag {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.lp-demo-log {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
.lp-msg { border-radius: 14px; padding: 0.6rem 0.85rem; max-width: 92%; }
.lp-msg-user { justify-self: end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.lp-msg-ai { background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.lp-tool { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.8rem; }
.lp-tool-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-dot); flex-shrink: 0; }
.lp-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.75rem;
}
.lp-card .card-icon { margin: 0; width: 36px; height: 36px; flex-shrink: 0; }
.lp-card-body { display: grid; gap: 0.1rem; min-width: 0; }
.lp-card-app { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.lp-card-body strong { font-size: 0.86rem; font-weight: 600; }
.lp-card-meta { font-size: 0.78rem; color: var(--text-muted); }
.lp-card-state { margin-left: auto; flex-shrink: 0; font-size: 0.78rem; font-weight: 600; }
.lp-confirm { display: none; background: var(--primary); color: #fff; border-radius: var(--radius-sm); padding: 0.35rem 0.7rem; }
.lp-done { color: var(--success-text); }
.lp-done::before { content: "✓ "; }
.lp-demo-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  padding: 0.7rem 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.lp-demo-caption > span:first-child { flex: 1 1 14rem; min-width: 0; }
/* Caption actions (demo, story, day): two matching pills on one line,
   right-aligned; they drop under the caption text when space runs out.
   Resets the hub's .btn-link margin/width so both sit on the same baseline. */
.lp-demo-replay,
.lp-demo-try,
.lp-scene-replay {
  display: inline-flex; align-items: center; gap: 0.35rem;
  width: auto; margin: 0; padding: 0.32rem 0.75rem;
  font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lp-demo-replay,
.lp-scene-replay { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.lp-demo-replay::before,
.lp-scene-replay::before { content: "↻"; font-size: 0.95em; }
.lp-demo-replay:hover,
.lp-scene-replay:hover { text-decoration: none; border-color: var(--primary-border); color: var(--primary); }
.lp-demo-try { background: var(--primary-light); border: 1px solid var(--primary-border); color: var(--primary); }
.lp-demo-try:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.lp-demo-actions { display: flex; gap: 0.5rem; margin-left: auto; }
.lp-scene-replay { margin-left: auto; }
.lp-demo:not(.is-scripted) .lp-demo-replay { display: none; }

/* Scripted: every step keeps its room (no layout shift) until shown. */
.lp-demo.is-scripted [data-step] { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.lp-demo.is-scripted [data-step].is-shown { opacity: 1; transform: none; }
.lp-demo.is-scripted .lp-card:not(.is-done) .lp-confirm { display: inline-block; }
.lp-demo.is-scripted .lp-card:not(.is-done) .lp-done { display: none; }

/* Sharing scene: the recipe goes out, and lands on a friend's phone. */
.lp-demo { position: relative; }
.lp-shared { color: var(--primary); font-weight: 600; }
.lp-share-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.7rem; background: var(--primary-light); color: var(--primary); flex-shrink: 0; }
.lp-phone {
  width: 15rem; max-width: calc(100% - 2rem); margin: 0 1rem 1rem auto;
  background: var(--bg); border: 6px solid var(--text); border-radius: 26px;
  padding: 0.7rem 0.65rem 0.8rem; display: grid; gap: 0.5rem; font-size: 0.8rem;
  box-shadow: var(--shadow-lg);
}
.lp-phone-head { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.78rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.lp-phone-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--primary); color: #fff; font-size: 0.7rem; }
.lp-bubble { justify-self: start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 0.4rem 0.6rem; margin: 0; }
.lp-link-card { display: grid; gap: 0.15rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 10px; padding: 0.5rem 0.6rem; }
.lp-link-host { font-size: 0.66rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-link-card strong { font-size: 0.82rem; }
.lp-link-meta { font-size: 0.72rem; color: var(--text-muted); }
.lp-link-save { margin-top: 0.35rem; font-size: 0.74rem; font-weight: 600; }
.lp-save-btn { display: none; background: var(--primary); color: #fff; border-radius: var(--radius-sm); padding: 0.3rem 0.6rem; }
.lp-saved { color: var(--success-text); }
.lp-saved::before { content: "✓ "; }
.lp-phone-note { font-size: 0.68rem; color: var(--text-muted); text-align: center; }
/* Scripted: the conversation steps back and the phone slides in over it. */
.lp-demo.is-scripted .lp-demo-log { transition: opacity 0.45s ease, filter 0.45s ease; }
.lp-demo.is-scripted.is-phone .lp-demo-log { opacity: 0.22; filter: blur(1.5px); }
.lp-demo.is-scripted .lp-phone { position: absolute; left: 50%; bottom: 3.8rem; margin: 0; z-index: 1; }
.lp-demo.is-scripted .lp-phone[data-step] { transform: translate(-50%, 36px) rotate(5deg); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(.2,.8,.2,1); }
.lp-demo.is-scripted .lp-phone.is-shown { transform: translate(-50%, 0) rotate(-2deg); }
.lp-demo.is-scripted .lp-phone:not(.is-done) .lp-save-btn { display: inline-block; }
.lp-demo.is-scripted .lp-phone:not(.is-done) .lp-saved { display: none; }
/* Between loops the conversation fades out before replaying. */
.lp-demo.is-scripted.is-fading [data-step] { opacity: 0; transition-duration: 0.5s; }
@media (max-width: 520px) {
  .lp-demo.is-scripted .lp-phone { width: 13.5rem; }
}

/* ─── SECTIONS ─── */
.lp-section { margin-top: 6rem; scroll-margin-top: 1.5rem; }
.lp-section h2,
.lp-final h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}
.lp-section-lead { color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; max-width: 40rem; margin-bottom: 2rem; }

/* ─── HOW IT WORKS ─── */
.lp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lp-steps li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.5rem;
}
.lp-step-n {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}
.lp-steps h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; }
.lp-steps p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* ─── CONNECTION MAP ─── */
.lp-map {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.lp-map-svg { width: 100%; height: auto; display: block; }
.lp-edges line { stroke: var(--border); stroke-width: 2; transition: stroke 0.2s, opacity 0.2s; }
.lp-node rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; transition: stroke 0.2s; }
.lp-node text { fill: var(--text); font-size: 13px; font-weight: 600; text-anchor: middle; font-family: inherit; }
.lp-node { transition: opacity 0.2s; }
.lp-node-hub rect { fill: var(--primary); stroke: var(--primary); }
.lp-node-hub text { fill: #fff; font-size: 15px; }
.lp-map.is-focus .lp-edges line { opacity: 0.3; }
.lp-map.is-focus .lp-edges line.is-on { opacity: 1; stroke: var(--primary); stroke-width: 2.5; stroke-dasharray: 6 6; animation: lp-flow 0.9s linear infinite; }
.lp-map.is-focus .lp-node:not(.is-on) { opacity: 0.4; }
.lp-node.is-on rect { stroke: var(--primary); }
@keyframes lp-flow { to { stroke-dashoffset: -12; } }

.lp-links { list-style: none; display: grid; gap: 0.5rem; }
.lp-links button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lp-links button strong { color: var(--text); font-weight: 600; }
.lp-links button:hover,
.lp-links button.is-on { background: var(--primary-light); border-color: var(--primary-border); color: var(--text); }

/* ─── USE CASES ─── */
.lp-cases { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lp-case {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
}
.lp-case h3 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.lp-case-q { font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
.lp-case p:not(.lp-case-q):not(.lp-case-apps) { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
.lp-case-apps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.4rem; }
.lp-case-apps span {
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  color: var(--text-muted);
}

/* ─── TRUST ─── */
.lp-trust { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.lp-trust li { border-top: 2px solid var(--primary); padding-top: 1rem; }
.lp-trust h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem; }
.lp-trust p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
.landing-google { margin-top: 2.5rem; }
.landing-google > h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.9rem; }
.landing-google-item h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; }

/* ─── APPS ─── */
.landing-apps.lp-section { margin-top: 6rem; }
.lp-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem; margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--text-muted); }
.lp-uses a { padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; background: var(--surface); }
.lp-uses a:hover { border-color: var(--primary); color: var(--primary); }

.lp-network {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.lp-network .card-icon { margin: 0; flex-shrink: 0; }
.lp-network-text { display: grid; gap: 0.15rem; }
.lp-network-text strong { font-size: 0.95rem; font-weight: 600; }
.lp-network-text span { color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; }
.lp-network-go { margin-left: auto; color: var(--primary); font-size: 1.2rem; }
.lp-network:hover { border-color: var(--primary-border); background: var(--surface); }

/* ─── FAQ ─── */
.lp-faq { display: grid; gap: 0.6rem; max-width: 46rem; }
.lp-faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
}
.lp-faq summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.lp-faq p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-top: 0.6rem; }

/* ─── FINAL CTA ─── */
.lp-final {
  margin: 6rem 0 2rem;
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
}
.lp-final h2 { max-width: 34rem; margin: 0 auto 1.5rem; }
.lp-final .btn-primary { width: auto; display: inline-flex; padding: 0.8rem 1.5rem; text-decoration: none; }

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
  /* The section links + both buttons stop fitting here (ES is the longest) */
  .lp-nav-links { display: none; }
  .lp-nav-signin { margin-left: auto; }
  .landing-top,
  .landing-top:not(.auth-open),
  .landing-top.auth-open { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 2.5rem; }
  .lp-map { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lp-nav { padding-bottom: 1.5rem; }
  .lp-nav { gap: 0.6rem; }
  .lp-steps, .lp-cases, .lp-trust { grid-template-columns: minmax(0, 1fr); }
  .lp-section, .landing-apps.lp-section { margin-top: 4rem; }
  .lp-map { padding: 1rem; }
  .lp-final { margin-top: 4rem; padding: 2.25rem 1.25rem; }
}
@media (max-width: 520px) {
  /* Brand + sign in + demo on one line down to 380px */
  .lp-nav { gap: 0.35rem; }
  .lp-nav-brand { font-size: 1.1rem; }
  .lp-nav-signin { border-color: transparent; background: none; padding: 0.4rem 0.3rem; font-size: 0.8rem; }
  .lp-nav-demo { padding: 0.45rem 0.65rem; font-size: 0.82rem; }
}
/* The hero's demo button sits right below: the nav keeps Sign in. */
@media (max-width: 380px) {
  .lp-nav-demo { display: none; }
}
/* Below this the map's labels would shrink under 8px: the list carries it. */
@media (max-width: 560px) {
  .lp-map-svg { display: none; }
  .lp-map { padding: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-demo.is-scripted [data-step] { transition: none; }
  .lp-map.is-focus .lp-edges line.is-on { animation: none; stroke-dasharray: none; }
}

/* ─── APPS BY GOAL ─── */
/* Same goals as the dashboard (apps.json `goals`); goals with many apps
   take a full row, the rest sit side by side. */
.lp-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-flow: row dense; gap: 1.75rem 1rem; margin-top: 1.5rem; }
.lp-goal { display: flex; flex-direction: column; min-width: 0; }
.lp-goal .landing-group-title { margin: 0 0 0.6rem; font-size: 1.05rem; text-transform: none; letter-spacing: -0.01em; color: var(--text); }
.lp-goal .landing-app-grid { flex: 1; }
.lp-goal:has(.landing-app:nth-child(3)) { grid-column: 1 / -1; }

/* ─── SCENES (shared by the story and the day) ───
   Elements with data-k are revealed by landing.js (.is-shown) and flip
   from their "to do" to their "done" label (.is-done). Unscripted (no JS,
   reduced motion) everything shows its finished state. */
.lp-scene-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); }
.lp-scene-caption > span:first-child { flex: 1 1 14rem; min-width: 0; }
.lp-story:not(.is-scripted) .lp-scene-replay,
.lp-day:not(.is-scripted) .lp-scene-replay { display: none; }
.is-scripted [data-k] { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.8,.2,1); }
.is-scripted [data-k].is-shown { opacity: 1; transform: none; }
.is-scripted.is-fading [data-k] { opacity: 0; transition-duration: 0.5s; }
.lp-act { font-size: 0.74rem; font-weight: 600; }
.lp-act-todo { display: none; background: var(--primary); color: #fff; border-radius: var(--radius-sm); padding: 0.28rem 0.6rem; }
.lp-act-done { display: inline-block; color: var(--success-text); animation: lp-pop 0.35s ease; }
.lp-act-done::before { content: "✓ "; }
.is-scripted :not(.is-done) > .lp-act .lp-act-todo { display: inline-block; }
.is-scripted :not(.is-done) > .lp-act .lp-act-done { display: none; }
@keyframes lp-pop { from { transform: scale(0.85); opacity: 0.4; } }
.lp-toast {
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
  background: var(--primary-light); border: 1px solid var(--primary-border); color: var(--text);
  border-radius: 12px; padding: 0.5rem 0.7rem; font-size: 0.76rem; font-weight: 600; line-height: 1.35;
}
.lp-toast > span[aria-hidden] { color: #e2557a; font-size: 0.95rem; }
.lp-avatar {
  width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0;
  background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.lp-avatar-ana { background: #d2692f; }
.lp-avatar-luis { background: #23855f; }

/* ─── STORY (create → share → make your own → publish → it comes back) ─── */
.lp-story { margin: 0; }
.lp-people { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.25rem; }
.lp-people::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 20px; border-top: 2px dashed var(--border); }
.lp-person { position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; transition: opacity 0.3s; }
.lp-person .lp-avatar { box-shadow: 0 0 0 6px var(--bg); }
.lp-person .lp-avatar { width: 40px; height: 40px; font-size: 1rem; }
.lp-person-text { display: grid; line-height: 1.25; }
.lp-person-text strong { font-size: 0.95rem; }
.lp-person-text small { color: var(--text-muted); font-size: 0.78rem; }
.lp-token {
  position: absolute; top: -6px; left: 16.6%; z-index: 1; display: none;
  width: 30px; height: 30px; margin-left: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary); box-shadow: var(--shadow-lg);
  place-items: center; transition: left 0.9s cubic-bezier(.65,0,.35,1), opacity 0.3s;
}
.lp-token .card-icon { margin: 0; width: 20px; height: 20px; background: none; }
.lp-story.is-scripted .lp-token { display: grid; }
.lp-story[data-who="ana"] .lp-token { left: 50%; }
.lp-story[data-who="luis"] .lp-token { left: 83.3%; }
.lp-story.is-fading .lp-token { opacity: 0; }

.lp-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.lp-mini {
  display: grid; gap: 0.5rem; align-content: start; min-height: 21rem;
  background: var(--bg); border: 6px solid var(--text); border-radius: 26px;
  padding: 0.75rem 0.7rem 1rem; font-size: 0.8rem; box-shadow: var(--shadow-lg);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.lp-mini-head { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.82rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--border); }
.lp-mini-head .lp-avatar { width: 22px; height: 22px; font-size: 0.68rem; }
.lp-mcard { display: grid; gap: 0.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.55rem 0.65rem; }
.lp-mcard strong { font-size: 0.84rem; line-height: 1.3; }
.lp-mcard .lp-act { margin-top: 0.35rem; }
.lp-mcard-app { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.lp-mcard-meta { font-size: 0.72rem; color: var(--text-muted); }
.lp-mcard-link { border-left: 3px solid var(--primary); }
.lp-mcard-ai { border-color: var(--primary-border); }
.lp-mini .lp-bubble { margin: 0; }
.lp-bubble-me { justify-self: end; display: grid; gap: 0.1rem; background: var(--primary); color: #fff; border-color: var(--primary); border-radius: 12px 12px 4px 12px; }
.lp-bubble-me .lp-mcard-app { color: rgba(255, 255, 255, 0.78); }
.lp-feed-who { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.lp-feed-who .lp-avatar { width: 18px; height: 18px; font-size: 0.6rem; }

/* The person on stage is in focus; the others step back. */
.lp-story.is-scripted .lp-mini { opacity: 0.5; transform: scale(0.97); }
.lp-story.is-scripted .lp-person { opacity: 0.55; }
.lp-story[data-who="maria"] [data-phone="maria"],
.lp-story[data-who="ana"] [data-phone="ana"],
.lp-story[data-who="luis"] [data-phone="luis"],
.lp-story[data-who="maria"] .lp-person[data-who="maria"],
.lp-story[data-who="ana"] .lp-person[data-who="ana"],
.lp-story[data-who="luis"] .lp-person[data-who="luis"] { opacity: 1; transform: none; }

.lp-beats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.lp-beats li { border-top: 3px solid var(--border); padding-top: 0.9rem; transition: border-color 0.3s, opacity 0.3s; }
.lp-beats .lp-step-n { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; margin-bottom: 0.6rem; }
.lp-beats h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; }
.lp-beats p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
.lp-story.is-scripted .lp-beats li { opacity: 0.45; }
.lp-story[data-beat="1"] .lp-beats li:nth-child(1),
.lp-story[data-beat="2"] .lp-beats li:nth-child(2),
.lp-story[data-beat="3"] .lp-beats li:nth-child(3),
.lp-story[data-beat="4"] .lp-beats li:nth-child(4) { opacity: 1; border-color: var(--primary); }

/* ─── DAY (Today strip, balance, nudge, weekly email) ─── */
.lp-day { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem 2.5rem; align-items: center; margin: 0; }
.lp-day .lp-scene-caption { grid-column: 1 / -1; margin-top: 0; }
.lp-today {
  position: relative; display: grid; gap: 0.75rem; align-content: start; min-height: 21rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.1rem; box-shadow: var(--shadow-lg);
}
.lp-today-head { display: flex; align-items: center; justify-content: space-between; }
.lp-today-head strong { font-size: 1.05rem; }
.lp-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primary); background: var(--primary-light); border-radius: 999px; padding: 0.15rem 0.65rem; font-size: 0.85rem; }
.lp-today .lp-toast { font-size: 0.82rem; }
/* Scripted, the nudge arrives like a notification and pushes the tiles down. */
.lp-day.is-scripted .lp-toast { max-height: 5rem; overflow: hidden; transition: opacity 0.4s ease, transform 0.5s ease, max-height 0.5s ease, padding 0.5s ease, margin 0.5s ease; }
.lp-day.is-scripted .lp-toast:not(.is-shown) { max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: -0.75rem; }
.lp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; transition: opacity 0.4s, filter 0.4s; }
.lp-tile { display: grid; gap: 0.35rem; align-content: start; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.75rem; min-width: 0; }
.lp-tile-food { grid-row: span 2; border-color: var(--primary-border); }
.lp-tile-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.lp-tile-label .card-icon { margin: 0; width: 24px; height: 24px; }
.lp-big { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lp-big small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.lp-tile-note { font-size: 0.76rem; color: var(--primary); font-weight: 600; }
.lp-tile-text { font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-tile .lp-act { font-size: 0.85rem; }
.lp-tile .lp-act-todo { background: none; color: var(--text-muted); padding: 0; }
/* The training tile is a data-k only to carry .is-done: keep it visible. */
.lp-day.is-scripted .lp-tile[data-k] { opacity: 1; transform: none; }
.lp-email {
  display: grid; gap: 0.2rem; border: 1px solid var(--primary-border); border-left: 4px solid var(--primary);
  background: var(--bg); border-radius: var(--radius-md); padding: 0.75rem 0.9rem;
}
.lp-email strong { font-size: 0.9rem; }
.lp-email-tip { font-size: 0.82rem; color: var(--text-muted); }
.lp-email-cta { justify-self: start; margin-top: 0.35rem; font-size: 0.76rem; font-weight: 600; background: var(--primary); color: #fff; border-radius: var(--radius-sm); padding: 0.28rem 0.65rem; }
/* Scripted, Monday's email lands over the finished day. */
.lp-day.is-scripted .lp-email { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.25rem; box-shadow: var(--shadow-lg); }
.lp-day.is-scripted .lp-email:not(.is-shown) { transform: translateY(24px); }
.lp-day.is-email .lp-tiles { opacity: 0.3; filter: blur(1.5px); }

.lp-timeline { list-style: none; display: grid; gap: 0.3rem; position: relative; }
.lp-timeline::before { content: ""; position: absolute; left: 0.5rem; top: 1rem; bottom: 1rem; border-left: 2px solid var(--border); }
.lp-timeline li { position: relative; display: grid; gap: 0.1rem; padding: 0.55rem 0.7rem 0.55rem 2rem; border-radius: var(--radius-md); transition: background 0.3s, opacity 0.3s; }
.lp-timeline li::before { content: ""; position: absolute; left: 0.1rem; top: 0.8rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.lp-timeline time { font-size: 0.78rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.lp-timeline span { font-size: 0.92rem; line-height: 1.45; }
.lp-day.is-scripted .lp-timeline li { opacity: 0.45; }
.lp-day.is-scripted .lp-timeline li.is-past { opacity: 0.75; }
.lp-day.is-scripted .lp-timeline li.is-past::before,
.lp-day.is-scripted .lp-timeline li.is-now::before { background: var(--primary); border-color: var(--primary); }
.lp-day.is-scripted .lp-timeline li.is-now { opacity: 1; background: var(--primary-light); }
.lp-day.is-scripted .lp-timeline li.is-now::before { box-shadow: 0 0 0 4px var(--primary-border); }

/* ─── USE CASES: the question types itself, then the apps answer ─── */
.lp-type-rest,
.lp-case.is-waiting .lp-case-q { color: transparent; }
.lp-cases.is-scripted .lp-case > p:not(.lp-case-q):not(.lp-case-apps) { opacity: 0; transition: opacity 0.4s ease; }
.lp-cases.is-scripted .lp-case.is-answered > p { opacity: 1; }
.lp-cases.is-scripted .lp-case-apps span { transition: border-color 0.3s, color 0.3s, background 0.3s; transition-delay: calc(var(--i, 0) * 250ms); }
.lp-cases.is-scripted .lp-case.is-answered .lp-case-apps span { border-color: var(--primary-border); color: var(--primary); background: var(--primary-light); }

/* ─── MAP: data travelling between apps ─── */
.lp-packet { fill: var(--primary); opacity: 0; }

/* ─── REVEAL ON SCROLL ─── */
.lp-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.lp-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .lp-day { grid-template-columns: minmax(0, 1fr); }
  .lp-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone width: one phone and one beat at a time; the row of people
   carries who has the recipe now. */
@media (max-width: 760px) {
  .lp-minis { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .lp-mini { width: min(100%, 17rem); min-height: 0; }
  .lp-story.is-scripted .lp-minis { min-height: 19.5rem; }
  .lp-story.is-scripted .lp-mini { display: none; }
  .lp-story[data-who="maria"] .lp-mini[data-phone="maria"],
  .lp-story[data-who="ana"] .lp-mini[data-phone="ana"],
  .lp-story[data-who="luis"] .lp-mini[data-phone="luis"] { display: grid; }
  .lp-person-text small { font-size: 0.7rem; }
  .lp-beats { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .lp-story.is-scripted .lp-beats { min-height: 7.5rem; }
  .lp-story.is-scripted .lp-beats li { display: none; }
  .lp-story[data-beat="1"] .lp-beats li:nth-child(1),
  .lp-story[data-beat="2"] .lp-beats li:nth-child(2),
  .lp-story[data-beat="3"] .lp-beats li:nth-child(3),
  .lp-story[data-beat="4"] .lp-beats li:nth-child(4) { display: block; }
  .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-tile-food { grid-row: auto; grid-column: 1 / -1; }
  .lp-day.is-scripted .lp-email { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-act-done { animation: none; }
}