/* GSAP controls motion; CSS defines stable reading and interaction states. */
.motion-line { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.motion-line > span { display: block; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 501; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.index-arrow { flex: 0 0 auto; }
.nav-link.is-current { color: var(--accent); background: var(--accent-soft); }
.hf-frame { transition: none; }
.hf-stage { overflow: hidden; min-height: 320px; }
.hf-segment { padding-block: 4px; background-clip: content-box; cursor: pointer; height: 12px; }
.hf-segment-fill { height: 4px; transform-origin: left center; transition: none; }
.hf-frame-tags { min-width: 0; }
.hf-frame-tag-btn { min-height: 36px; }
.hf-time-ticker { min-width: 92px; text-align: right; }
.video-example { min-height: 180px; }
.video-example .example-label { color: var(--fg); }
.theme-morph-toggle { transition: background-color .15s; }
.check-box-square { background: transparent !important; border: 0 !important; color: var(--muted); width: 28px; height: 28px; }
.check-box-square svg { opacity: 1 !important; transform: none !important; width: 24px; height: 24px; color: inherit; }
.check-item.is-checked .check-box-square { color: var(--accent); }
.readiness-progress-fill, .sim-progress-fill { transform-origin: left center; transition: none; }
.readiness-gauge-val { font-size: 28px; font-variant-numeric: tabular-nums; }
.faq-morph { color: var(--accent); flex-shrink: 0; }
.faq-panel { transition: none; max-height: none; overflow: hidden; padding: 0 !important; }
.faq-content { padding: 0 0 22px; }
.sim-view { transition: none; }
.sim-upload-zone { min-height: 140px; }
.sim-doc-row { font-size: 14px; }
.btn, .guide-index a { touch-action: manipulation; }
@media (min-width: 769px) {
 .guide-index a { position: relative; }
 .guide-index a::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
 .guide-index a:hover::after, .guide-index a:focus-visible::after { transform: scaleX(1); }
}
@media (max-width: 768px) {
 .nav-links.is-open { animation: none !important; }
 .mobile-step-nav { position: sticky; top: 72px; z-index: 10; background: var(--bg); padding-block: 14px; border-bottom: 1px solid var(--border); }
 .journey-step.is-active { animation: none !important; }
 .hf-stage { min-height: 470px; }
 .hf-frame { min-height: 470px; align-content: start; }
 .hf-controls-bar { position: sticky; bottom: 8px; z-index: 5; border-top: 1px solid var(--border); }
 .hf-frame-visual { min-height: 170px; }
 .hf-playback-btns { width: 100%; justify-content: space-between; }
 .hf-ctrl-btn { min-width: 48px; min-height: 48px; }
 .hf-ctrl-btn--play { min-width: 64px; }
 .mobile-step-actions { gap: 10px; }
 .mobile-step-actions .btn { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .guide-index a::after { transition: none; } }
html { scroll-behavior: auto; }
.site-header { background: var(--bg) !important; }
@media (max-width: 768px) { .hf-segment { height: 44px; padding-block: 20px; } .hf-topbar { padding-top: 4px; } }
.scene-morphicon { color: var(--accent); margin-bottom: 18px; }
@media (max-width: 768px) { .scene-morphicon { width: 28px; height: 28px; margin-bottom: 12px; } }

/* Intrinsic scene sizing keeps the summary compact through scene changes. */
.hyperframe-player .hf-stage{display:grid;place-items:stretch;min-height:0;height:auto;transition:none}
.hyperframe-player .hf-frame{position:relative;inset:auto;grid-area:1 / 1;min-height:0;height:auto;align-self:stretch;align-items:center;padding:32px 28px}
.hyperframe-player .hf-controls-bar{position:static;bottom:auto}
@media(max-width:768px){
 .hyperframe-player .hf-frame{display:grid !important;grid-template-columns:1fr;align-content:start;gap:20px;padding:22px 20px;min-height:0}
 .hyperframe-player .hf-frame-visual{min-height:0}
 .hyperframe-player .video-example{min-height:0;padding-top:18px}
}
/* Hide the page scrollbar while retaining native wheel, touch and key scrolling. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}

/* Authored summary composition; colors and type remain the existing system. */
#video-guia .hyperframe-player{max-width:1000px;background:var(--bg);border-radius:12px;overflow:hidden}
#video-guia .hf-topbar{padding:20px 28px 16px;border-bottom:0}
#video-guia .hf-stage{min-height:0}
#video-guia .hf-frame{padding:20px 36px 32px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;min-height:310px;align-items:center}
#video-guia .hf-frame-copy{gap:0;min-width:0}
#video-guia .hf-frame-title{font-size:clamp(27px,2.5vw,34px);line-height:1.15;letter-spacing:-.03em;margin:0 0 18px;max-width:20ch}
#video-guia .hf-frame-desc{font-size:16px;line-height:1.65;margin:0;max-width:40ch}
#video-guia .hf-frame-tip{display:flex;align-items:flex-start;gap:8px;margin-top:24px;font-size:12px;line-height:1.6;color:var(--muted)}
#video-guia .hf-frame-tip svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--accent)}
#video-guia .hf-frame-visual{min-width:0;min-height:0;align-self:stretch;display:flex;align-items:center}
.summary-demo{position:relative;width:100%;padding:24px;background:var(--surface);border-radius:10px;font-size:13px;line-height:1.5;color:var(--fg)}
.summary-demo>.scene-morphicon{width:24px;height:24px;margin:0 0 12px;display:block}.summary-demo-heading{font-weight:600;font-size:14px;margin-bottom:16px}.summary-demo strong{font-weight:500}.summary-demo p{margin:8px 0 0;color:var(--muted);font-size:12px}.summary-demo-foot{font-size:11px;color:var(--muted);line-height:1.6;margin-top:16px}
.summary-mail>span,.summary-process>span{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}.summary-mail>strong,.summary-process>strong{font-size:15px;display:block;line-height:1.4}
.summary-demo-action{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;margin-top:18px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600}.summary-demo-action svg{width:16px;height:16px;flex-shrink:0}
.summary-demo-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:12px;color:var(--accent)}
.summary-selects{display:grid;gap:12px}.summary-selects>div>span{font-size:11px;color:var(--muted);display:block;margin-bottom:4px}.summary-selects strong{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:6px;padding:9px 12px;background:var(--bg);font-size:12px;color:var(--muted)}
.summary-question{position:relative;padding-left:24px;margin-top:18px}.summary-question strong{font-size:12px}.summary-radio{position:absolute;left:0;top:4px;width:13px;height:13px;border:1px solid var(--accent);border-radius:50%}.summary-radio:after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.summary-upload{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 8px;border:1px dashed var(--border);border-radius:6px}.summary-upload .scene-morphicon{width:26px;height:26px;margin:0}.summary-upload strong{font-size:13px;max-width:22ch}.summary-upload>span{font-size:11px;color:var(--muted)}
.summary-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-right:8px}.summary-payment>strong{font-size:14px}.summary-tracking{display:flex;align-items:flex-start;gap:6px}.summary-tracking>.summary-status-dot{margin-top:6px}.summary-tracking strong{font-size:13px}
#video-guia .hf-controls-bar{display:flex;align-items:center;position:static;border-top:1px solid var(--border);padding:12px 24px;gap:20px;background:var(--bg)}
#video-guia .hf-frame-tags{gap:4px;flex:1;justify-content:flex-end;flex-wrap:wrap}
#video-guia .hf-frame-tag-btn{background:transparent;color:var(--muted);border:0;border-radius:6px;font-size:11px;padding:8px;min-height:36px}
#video-guia .hf-frame-tag-btn.is-active{background:var(--accent-soft);color:var(--accent);font-weight:600}
#video-guia .hf-playback-btns{gap:6px}#video-guia .hf-ctrl-btn{width:36px;height:36px;border:0;background:var(--surface);border-radius:6px}#video-guia .hf-ctrl-btn--play{background:var(--accent);color:var(--accent-ink)}
@media(max-width:768px){
 #video-guia .hf-topbar{padding:8px 20px 12px}#video-guia .hf-segment{height:32px;padding-block:14px}
 #video-guia .hf-frame{display:grid!important;grid-template-columns:1fr;gap:20px;padding:12px 20px 24px;min-height:0}
 #video-guia .hf-frame-title{font-size:27px;margin-bottom:12px;max-width:none}#video-guia .hf-frame-desc{font-size:14px;line-height:1.6}#video-guia .hf-frame-tip{font-size:11px;margin-top:14px}
 #video-guia .summary-demo{padding:18px 20px}#video-guia .summary-demo>.scene-morphicon{position:absolute;right:20px;top:18px;width:20px;height:20px;margin:0}#video-guia .summary-demo-heading{padding-right:32px;font-size:13px;margin-bottom:14px}
 #video-guia .summary-demo-action{margin-top:14px}#video-guia .summary-demo-foot{margin-top:12px}#video-guia .summary-upload{padding:12px 8px}
 #video-guia .hf-controls-bar{padding:12px 20px;gap:12px}#video-guia .hf-playback-btns{width:100%;justify-content:space-between}#video-guia .hf-ctrl-btn{min-width:44px;min-height:44px}#video-guia .hf-frame-tags{display:none}
}

/* Keep legacy visual span rules out of the new instructional illustrations. */
#video-guia .summary-demo .summary-demo-action{display:flex;color:var(--accent-ink);font-size:12px;line-height:1.5;font-weight:600}
#video-guia .summary-demo .summary-demo-action svg{display:block;color:inherit;margin:0}
#video-guia .summary-demo .summary-demo-heading{color:var(--fg);font-weight:600;font-size:14px}
#video-guia .summary-demo .summary-status-dot{display:inline-block;width:8px;height:8px;margin-right:8px}
#video-guia .summary-demo .summary-radio{position:absolute;display:block;width:13px;height:13px;margin:0}
#video-guia .summary-demo .summary-demo-links span{display:inline;color:var(--accent);font-size:12px;margin:0}
#video-guia .summary-demo .summary-selects strong>span{display:inline;margin:0;font-size:14px}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(forced-colors:active){a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid Highlight!important}.btn,.screen-step,.check-box-square{border:1px solid ButtonText}}