/* Animated actual browser captures, framed with the existing brand artwork. */
html { scrollbar-gutter: stable; }
#how.product-tour { background: #ece7df url('/assets/img/brand-surface-light.webp') center / cover; padding-block: 82px; }
.tour-heading { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 36px; }
#how .tour-heading .section-head { margin-bottom: 0; }
.tour-heading .section-head > p:last-child { margin-bottom: 0; }
.tour-heading > button { flex: none; gap: 10px; }
.tour-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: center; gap: 35px; scroll-margin-top: 105px; }
.tour-steps { display: grid; gap: 5px; }
.tour-mobile-description { display: none; }
.tour-step { display: flex; text-align: left; gap: 16px; width: 100%; padding: 22px 14px 22px 0; border: 0; border-bottom: 1px solid #b9afa04f; color: #5d625f; background: transparent; border-radius: 0; position: relative; transition: background-color 180ms, border-color 180ms; }
.tour-step:last-child { border-bottom: 0; }
.tour-step strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 650; letter-spacing: -.025em; }
.tour-number { font-size: 11px; line-height: 23px; color: #71685b; font-variant-numeric: tabular-nums; }
.tour-detail { display: block; font-size: 12px; line-height: 1.8; margin-top: 9px; color: #6d6d68; }
.tour-step[aria-selected=true] { color: #222831; }
.tour-step[aria-selected=true] .tour-number { color: #9b5c36; }
.tour-step[aria-selected=true]::before { content: ''; position: absolute; width: 3px; background: #b57950; border-radius: 3px; left: -15px; top: 25px; bottom: 26px; }
.tour-step[aria-selected=true] .tour-detail { color: #454d55; }
.tour-step:hover:not(:disabled) { background: #ffffff35; border-bottom-color: #a89884; }
.tour-showcase { padding: 16px 16px 0; min-width: 0; border: 1px solid #5b5149; border-radius: 19px; background: #151922 url('/assets/img/brand-dark.webp') center / cover; box-shadow: 0 18px 40px #25221f16; }
.tour-player-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin-top: -6px; color: #ece9e5; font-size: 12px; font-weight: 600; }
.tour-writing-options { display: flex; align-items: center; padding: 3px; border-radius: 7px; background: #090e1666; gap: 3px; flex: none; }
.tour-writing-options button { padding: 5px 9px; border: 0; border-radius: 5px; background: transparent; color: #bbc4ce; font: inherit; font-size: 11px; }
.tour-writing-options button[aria-pressed=true] { color: #fff; background: #435062; }
.tour-writing-options button:hover { color: #fff; }
.tour-screen { border-radius: 9px; overflow: hidden; background: #eff0f3; position: relative; isolation: isolate; --tour-card-height: 480; }
.tour-scene { position: relative; width: 100%; }
.tour-panel { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-items: start; padding: 16px; }
.tour-panel[hidden] { display: none; }
.tour-layer { position: relative; min-width: 0; overflow: hidden; }
.tour-page { width: 100%; aspect-ratio: 800 / 760; border-radius: 7px; }
.tour-card { width: min(352px,100%); aspect-ratio: 352 / var(--tour-card-height); justify-self: center; order: -1; overflow: visible; }
.tour-layer > img { display: block; width: 100%; height: auto; }
.tour-card > img { border-radius: 17px; box-shadow: 0 8px 24px #17192326; }
.tour-screen[data-layout="wide"] .tour-panel { grid-template-columns: minmax(0,1fr) 352px; }
.tour-screen[data-layout="wide"] .tour-card { order: 0; }
.tour-reveal { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.tour-orbs,.tour-large-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tour-orbs { transform-origin: 0 0; }
.tour-orb-anchor { position: absolute; }
.tour-orb-anchor > .qn-orb { position: absolute; top: 0; left: 0; transform: scale(var(--tour-capture-scale, 1)); transform-origin: 0 0; }
.tour-orb-anchor .qn-orb *, .tour-orb-anchor .qn-orb *::before, .tour-orb-anchor .qn-orb *::after { animation-play-state: paused !important; animation-delay: var(--tour-orb-time, 0ms) !important; }

.tour-cursor { position: absolute; z-index: 3; width: 20px; pointer-events: none; filter: drop-shadow(0 1px 2px #17202b40); }
.tour-cursor svg { display: block; width: 100%; height: auto; transform-origin: 10% 5%; }
.tour-cursor i { position: absolute; width: 200%; aspect-ratio: 1; border: 1px solid #64748b; border-radius: 50%; left: -86%; top: -60%; opacity: 0; }
.tour-progress { position: absolute; inset: auto 0 0; z-index: 3; height: 2px; pointer-events: none; background: #20252c0a; }
.tour-progress span { display: block; height: 100%; background: #8b98a7; transform: scaleX(0); transform-origin: left; }

.tour-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; font-size: 12px; color: #dfd7ce; }
.tour-status { display: flex; align-items: center; gap: 9px; font-weight: 550; }
.tour-status i { width: 7px; height: 7px; border-radius: 50%; background: #97a3b4; flex: none; }
.tour-status[data-busy] i { width: 12px; height: 12px; border: 1.5px solid #8999ad45; border-top-color: #a5b6cb; background: none; }
.tour-status[data-complete] i { background: #70b595; }
.tour-caption-actions { display: flex; align-items: center; gap: 7px; }
.tour-replay { justify-content: center; width: 34px; padding: 0; }
.tour-replay span { font-size: 19px; line-height: 1; }
.tour-enlarge { color: #f7eee5; background: #121722b3; border: 1px solid #b7a59755; border-radius: 6px; font-size: 11px; padding: 7px 11px; min-height: 34px; display: flex; align-items: center; gap: 9px; }
.tour-enlarge:hover:not(:disabled) { border-color: #daa47f; background: #262a33; }
.tour-enlarge:active:not(:disabled) { background: #30343c; }
.tour-footnote { margin: 16px 0 0 283px; font-size: 11px; color: #5c6269; }
.tour-dialog { padding: 0; width: min(1280px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 40px); color: #f8f3ed; background: #131820; border: 1px solid #6f6256; border-radius: 16px; box-shadow: 0 24px 90px #0008; overflow: hidden; }
.tour-dialog::backdrop { background: #080c14de; backdrop-filter: blur(7px); }
.tour-dialog[open] { display: flex; flex-direction: column; }
.tour-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; }
.tour-dialog-bar p { font-size: 14px; font-weight: 600; margin: 0; }
.tour-dialog .btn-secondary { --secondary-rest: #ffffff08; --secondary-hover: #ffffff14; --secondary-active: #ffffff20; --secondary-ink: #f8f3ed; --secondary-border: #ffffff45; --secondary-border-hover: #ffffff70; }
.tour-dialog-view { overflow: auto; min-height: 0; overscroll-behavior: contain; background: #edeae5; }
.tour-dialog-view img { width: 1200px; max-width: none; height: auto; }
.tour-large-scene { position: relative; width: 1200px; height: 760px; }
.tour-large-reveal { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tour-dialog-hint { padding: 10px 20px; margin: 0; font-size: 11px; color: #bfc3cd; }
body.tour-modal-open { overflow: hidden; }
@media (max-width:1100px) {
  .tour-layout { grid-template-columns: 215px minmax(0, 1fr); gap: 26px; }
  .tour-step { gap: 10px; }
  .tour-step strong { font-size: 15px; }
  .tour-footnote { margin-left: 241px; }
}
@media (max-width:1100px) {
  #how.product-tour { padding-block: 65px; }
  .tour-heading { align-items: flex-start; }
  .tour-layout { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .tour-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .tour-step { padding: 0 0 14px; border-bottom: 2px solid #c5bbae; flex-direction: column; gap: 5px; }
  .tour-step:last-child { border-bottom: 2px solid #c5bbae; }
  .tour-step[aria-selected=true] { border-bottom-color: #a26741; }
  .tour-step[aria-selected=true]::before { display: none; }
  .tour-detail { font-size: 11px; }
  .tour-footnote { margin-left: 0; }
}
@media (max-width:540px) {
  #how.product-tour { padding-block: 52px; }
  .tour-heading { flex-direction: column; gap: 20px; margin-bottom: 29px; }
  .tour-heading > button { min-height: 42px; padding-block: 10px; }
  .tour-steps { gap: 12px; }
  .tour-step { gap: 3px; }
  .tour-step strong { font-size: 12px; line-height: 1.55; }
  .tour-detail { display: none; }
  .tour-mobile-description { display: block; margin: -2px 0 0; min-height: 63px; font-size: 12px; line-height: 1.75; color: #535a60; }
  .tour-layout { gap: 17px; }
  .tour-showcase { border-radius: 12px; padding: 8px 8px 0; }
  .tour-player-header { min-height: 52px; margin-top: 0; font-size: 11px; gap: 7px; }
  .tour-writing-options button { min-width: 44px; min-height: 44px; font-size: 11px; padding: 6px; }
  .tour-screen { border-radius: 5px; }
  .tour-panel { padding: 10px; gap: 16px; }
  .tour-caption { min-height: 58px; font-size: 11px; gap: 10px; flex-direction: column; align-items: stretch; padding-block: 12px; }
  .tour-caption-actions { justify-content: flex-end; }
  .tour-status { gap: 7px; max-width: none; line-height: 1.5; }
  .tour-enlarge { min-height: 44px; font-size: 10px; padding-inline: 9px; }
  .tour-replay { width: 44px; }
  .tour-footnote { font-size: 10px; line-height: 1.8; }
  .tour-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  .tour-dialog-bar { padding: 12px; }
  .tour-dialog-hint { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tour-step { transition: none; } .tour-cursor { display: none; } }