/* Learning Hub entry: what is coming, a register-interest action and a monitor walking through an early design with sample content. */
.pv-sec { padding-block: clamp(56px, 8vw, 110px); }
.pv { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pv-card { background: var(--ha-paper); color: var(--ha-ink); border-radius: 18px; padding: clamp(26px, 3vw, 38px); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.pv-mark { display: block; width: 44px; height: 44px; margin-bottom: 18px; }
body.ha-inner main .ip-sec.dark .pv-card :is(.pv-title, .pv-h2) { color: var(--ha-ink); }
.pv-title { margin: 0; font: 800 clamp(30px, 3vw, 40px)/1.05 var(--ha-font-sans); letter-spacing: -.035em; color: var(--ha-ink); }
.pv-sub { margin: 10px 0 22px; font: 400 17px/1.45 var(--ha-font-sans); color: var(--ha-grey, #6B6967); }
.pv-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font: 700 16px/1.35 var(--ha-font-sans); }
.pv-list li { position: relative; padding-left: 22px; }
.pv-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ha-bloom); }
.pv-beta { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(41,43,47,.12); display: grid; gap: 14px; justify-items: start; }
.pv-h2 { margin: 0; font: 800 22px/1.15 var(--ha-font-sans); letter-spacing: -.02em; color: var(--ha-ink); }

/* Monitor: Apple Studio Display, a black glass border in a thin aluminium edge on a tilt stand */
.pv-monitor { margin: 0; position: relative; }
.pv-frame { background: #121314; padding: clamp(7px, 1.25vw, 16px); border-radius: clamp(10px, 1.2vw, 16px); box-shadow: 0 0 0 2px #CDD0D4, 0 0 0 3px #9EA2A8, 0 26px 50px -18px rgba(0,0,0,.6); }
.pv-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; background: #f7f1ee; }
.pv-stand { position: relative; width: 19%; height: clamp(44px, 6.5vw, 92px); margin: 3px auto 0; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 35%), linear-gradient(90deg, #A3A7AD, #DDE0E3 22%, #F1F2F4 50%, #DDE0E3 78%, #A3A7AD); }
.pv-stand::after { content: ""; position: absolute; top: 100%; left: -3%; width: 106%; height: 7px; border-radius: 0 0 4px 4px; background: linear-gradient(#F3F4F5, #B4B8BD); box-shadow: 0 8px 14px -6px rgba(0,0,0,.55); }
/* Each view fades in and its page scrolls; the Portal's side rail sits above them all and never changes, except Apps lighting up on the Apps view */
.pv-view { position: absolute; inset: 0; opacity: 0; }
.pv-view[style*="--i:0"] { opacity: 1; }
.pv-shot { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.pv-rail { position: absolute; top: 0; left: 0; width: 17.92%; height: 100%; object-fit: cover; object-position: left top; }
.pv-rail-apps { opacity: 0; }
/* Captions share one grid cell, so the row holds the tallest and the Pause button never overlaps */
.pv-caps { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 44px; margin-top: 30px; }
.pv-cap { grid-area: 1 / 1; font: 700 clamp(17px, 1.6vw, 21px)/1.3 var(--ha-font-sans); color: var(--ha-paper); opacity: 0; }
.pv-cap[style*="--i:0"] { opacity: 1; }
.pv-pause { grid-area: 1 / 2; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid rgba(247,241,238,.35); background: transparent; color: var(--ha-paper); font: 700 14px var(--ha-font-sans); cursor: pointer; }
.pv-pause:focus-visible { outline: 3px solid var(--ha-bloom); outline-offset: 3px; }

/* Each screen eases down its page, then hands to the next: 21s for three screens */
@media (prefers-reduced-motion: no-preference) {
  .pv-view, .pv-cap, .pv-rail-apps { animation: pv-show 21s linear infinite; animation-delay: calc(var(--i) * 7s); opacity: 0; }
  .pv-view, .pv-rail-apps { animation-name: pv-hold; }
  .pv-shot { animation: pv-scroll 21s linear infinite; animation-delay: calc(var(--i) * 7s); }
  .pv-monitor.is-paused :is(.pv-view, .pv-shot, .pv-cap, .pv-rail-apps) { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .pv-pause { display: none; } }
@keyframes pv-scroll {
  0%, 10% { transform: translateY(0); }
  30%, 100% { transform: translateY(var(--y)); }
}
/* Screens overlap as they change, so the monitor never shows a blank frame */
@keyframes pv-hold {
  0% { opacity: 0; }
  3%, 37% { opacity: 1; }
  39%, 100% { opacity: 0; }
}
@keyframes pv-show {
  0% { opacity: 0; }
  3%, 30% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}
@media (max-width: 860px) {
  .pv { grid-template-columns: minmax(0, 1fr); }
  .pv-monitor { order: -1; }
}