/* ══════════════════════════════════════════════════════════════
   PRODUCT TOUR (tour-*)
   Four tabbed scenes recreating the real booking system screens
   (client/events/detail, checkin, client gallery). All text is static
   HTML; tour.js only toggles classes and ARIA state. Load after
   compact.css. First used on /corporate-headshots/.
   ══════════════════════════════════════════════════════════════ */

.tour {
  --t-ink: #0a0b0d;
  --t-bg: #f0f2f5;
  --t-line: #e5e7eb;
  --t-text2: rgba(10,11,13,.66);
  --t-text3: rgba(10,11,13,.56);
  --t-ok: #1f7a53;
  --t-ready: #2f6f9e;
  --t-ease: cubic-bezier(.22,.9,.32,1);
  --t-stage: 492px;
  --t-scene-fs: 13px;
  overflow: hidden;
}
.tour .sec-sub { font-size: .9375rem; line-height: 1.6; margin-bottom: 1.25rem; }

.tour-grid { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 3.25rem; align-items: center; }
.tour-intro .sec-h { font-size: 2.25rem; }

/* ── TABS ── */
.tour-tabs { display: grid; gap: .3rem; }
.tour-tab {
  position: relative; display: grid; grid-template-columns: 2.1rem 1fr; align-items: center;
  min-height: 52px; padding: .7rem 1rem .7rem .9rem; overflow: hidden;
  background: transparent; border: 0; border-radius: var(--r-sm); text-align: left; cursor: pointer;
  font: inherit; color: var(--gray); transition: background .2s, color .2s;
}
.tour-tab:hover { background: var(--gray-light); color: var(--cx-ink); }
.tour-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-tab-num { font-family: var(--ff-head); font-size: .95rem; font-weight: 800; color: #9aa1ad; transition: color .2s; }
.tour-tab-title { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tour-tab.is-active { background: var(--cx-blue-tint); color: var(--cx-ink); }
.tour-tab.is-active .tour-tab-num { color: var(--blue); }
.tour-tab::before { content: ""; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 3px; border-radius: 3px; background: var(--blue); transform: scaleY(0); transition: transform .3s var(--t-ease); }
.tour-tab.is-active::before { transform: none; }
/* Auto-advance timer: when this bar finishes, tour.js moves to the next scene */
.tour-tab-bar { position: absolute; left: .9rem; right: 1rem; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; opacity: .55; }
.tour.is-auto .tour-tab.is-active .tour-tab-bar { animation: tour-fill 4.5s linear forwards; }
.tour.is-auto:hover .tour-tab-bar, .tour.is-auto:focus-within .tour-tab-bar, .tour.is-off .tour-tab-bar { animation-play-state: paused !important; }

/* ── STAGE ── */
.tour-stage { position: relative; height: var(--t-stage); }
.tour-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--t-ease), visibility 0s .45s;
}
.tour-panel.is-active { opacity: 1; visibility: visible; transition: opacity .45s var(--t-ease); }
.tour-cap { flex: none; min-height: 3.2em; margin-bottom: 1rem; font-size: .9375rem; line-height: 1.6; color: var(--gray); max-width: 640px; }
.tour-scene { position: relative; flex: 1; min-height: 0; font-size: var(--t-scene-fs); line-height: 1.35; color: var(--t-ink); }
/* Soft offset plate behind the devices for depth */
.tour-scene::before { content: ""; position: absolute; inset: 1.4em -0.9em -0.9em 1.4em; border-radius: 18px; background: linear-gradient(135deg, rgba(23,89,255,.10), rgba(23,89,255,.03)); }
.tour-scene b { font-weight: 700; }
.tour-scene s, .tour-scene em { text-decoration: none; font-style: normal; }

/* Browser frame */
.tour-browser { position: absolute; inset: 0 .9em .9em 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--t-line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.tour-chrome { flex: none; display: flex; align-items: center; gap: .4em; height: 2.4em; padding: 0 .9em; background: #f7f8fa; border-bottom: 1px solid var(--t-line); }
.tour-chrome i { width: .7em; height: .7em; border-radius: 50%; background: #dcdfe4; }
.tour-chrome span { flex: 0 1 30em; min-width: 0; margin-left: .8em; padding: .2em .9em; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--t-line); font-size: .8em; color: var(--t-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 1.15em 1.3em; background: var(--t-bg); }

/* Phone frame */
.tour-phone { position: absolute; z-index: 2; top: 0; bottom: 0; left: 5%; aspect-ratio: 9 / 18.4; padding: .5em; border-radius: 2.3em; background: #141210; box-shadow: 0 18px 50px rgba(10,11,13,.28), 0 3px 10px rgba(10,11,13,.18); transform: rotate(-2deg); }
.tour-phone::before { content: ""; position: absolute; z-index: 3; top: 1.05em; left: 50%; width: 4.2em; height: 1.05em; margin-left: -2.1em; border-radius: var(--r-pill); background: #141210; }
.tour-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 1.85em; background: var(--t-bg); padding: 2.9em .85em .9em; }

/* Duo scenes: phone in front, smaller organizer window behind */
.tour-browser--mini { inset: 9% .9em 9% 27%; }
.tour-browser--mini .tour-screen { padding-left: 4.2em; }

/* ── SHARED SCREEN PIECES ── */
.tour-ev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: .9em; }
.tour-ev-title { display: block; font-family: var(--ff-head); font-size: 1.25em; line-height: 1.2; }
.tour-ev-meta { display: block; margin-top: .2em; font-size: .82em; color: var(--t-text2); }
.tour-pill { flex: none; font-size: .64em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .3em .7em; border-radius: var(--r-pill); }
.tour-pill--ok { color: var(--t-ok); border: 1px solid rgba(31,122,83,.35); }
.tour-card { background: #fff; border: 1px solid var(--t-line); border-radius: .9em; padding: .9em 1em; }
.tour-label { font-size: .66em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-text3); margin-bottom: .8em; }
.tour-label--sec { margin: 1em 0 .3em; color: var(--t-text2); }
.tour-btn { display: inline-block; padding: .55em 1.25em; border-radius: var(--r-pill); background: var(--blue); color: #fff; font-size: .82em; font-weight: 600; white-space: nowrap; }
.tour-btn--ghost { background: transparent; color: var(--t-text2); border: 1.5px solid var(--t-line); padding: .4em 1em; }

.tour-table { font-size: .86em; }
.tour-tr { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: .6em; padding: .55em .15em; border-bottom: 1px solid var(--t-line); }
.tour-tr:last-child { border-bottom: 0; }
.tour-tr > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-th { padding-top: 0; font-size: .74em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t-text3); }
.tour-table--3 .tour-tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .75fr); }
.tour-name { font-weight: 600; }
.tour-dim { color: var(--t-text3); }
.tour-flip { display: grid; }
.tour-flip > s, .tour-flip > em { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tour-flip > s { opacity: 0; }
.tour-pend, .tour-dl-p { color: var(--blue); font-weight: 600; }
.tour-invite .tour-flip > s { color: var(--blue); font-weight: 600; }
.tour-invite .tour-flip > em { color: var(--t-ok); font-weight: 600; }
.tour-dl-y { color: var(--t-ok); font-weight: 600; }

/* Gallery status badges, as on the event page */
.tour-gs { display: inline-block; padding: .2em .5em; border: 1px solid var(--t-line); border-radius: 3px; font-size: .74em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-text3); }
.tour-gs--ready { color: var(--t-ready); border-color: rgba(47,111,158,.35); }
.tour-gs--sent { color: var(--blue); border-color: rgba(23,89,255,.35); }
.tour-gs--done { color: var(--t-ok); border-color: rgba(31,122,83,.35); }

.tour-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; margin: .7em 0 .9em; }
.tour-stat { display: flex; flex-direction: column; gap: .15em; padding: .55em .75em; background: #fff; border: 1px solid #f1f3f5; border-radius: .8em; box-shadow: 0 1px 2px rgba(10,11,13,.05); }
.tour-num { display: grid; font-family: var(--ff-head); font-size: 1.35em; font-weight: 700; line-height: 1.1; }
.tour-num > s, .tour-num > em { grid-area: 1 / 1; }
.tour-num > s { opacity: 0; }
.tour-stat-l { font-size: .6em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t-text3); }

/* ── SCENE 1: invite ── */
.tour-invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: .9em; align-items: start; }
.tour-col { display: grid; gap: .9em; }
.tour-field-l { font-size: .64em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-text3); margin-bottom: .45em; }
.tour-textarea { display: grid; gap: .2em; padding: .55em .7em; border: 1px solid var(--t-line); border-radius: .6em; font-size: .84em; }
.tour-paste { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-send { display: flex; align-items: center; flex-wrap: wrap; gap: .4em .8em; margin-top: .8em; }
.tour-sent { font-size: .78em; color: var(--t-text2); }
.tour-link { display: flex; align-items: center; gap: .5em; }
.tour-link > span:first-child { flex: 1; min-width: 0; padding: .5em .7em; border: 1px solid var(--t-line); border-radius: .6em; background: var(--t-bg); font-size: .76em; color: var(--t-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── SCENE 2: check-in ── */
.tour-ci-logo { text-align: center; margin-bottom: 1em; }
.tour-ci-logo b { display: block; font-family: var(--ff-head); font-size: .98em; }
.tour-ci-logo b span { color: var(--blue); }
.tour-ci-logo > span { display: block; margin-top: .35em; font-size: .56em; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--t-text3); }
.tour-ci-box { padding: 1em .85em; background: #fff; border: 1px solid var(--t-line); border-radius: 1em; }
.tour-ci-h { display: block; margin-bottom: .75em; text-align: center; font-family: var(--ff-head); font-size: 1.15em; }
.tour-ci-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.tour-ci-f { margin-bottom: .65em; min-width: 0; }
.tour-ci-f > span { display: block; margin-bottom: .3em; font-size: .54em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t-text3); }
.tour-ci-f > i { display: block; padding: .5em .6em; border: 1px solid var(--t-line); border-radius: .55em; font-style: normal; font-size: .76em; white-space: nowrap; overflow: hidden; }
.tour-type { display: inline-block; vertical-align: bottom; }
.tour-ci-btn { display: block; margin-top: .9em; padding: .85em .5em; border-radius: var(--r-pill); background: var(--blue); color: #fff; text-align: center; font-size: .64em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tour-ci-done { position: absolute; left: .85em; right: .85em; top: 5.1em; bottom: .9em; display: flex; flex-direction: column; gap: .65em; background: var(--t-bg); }
.tour-ci-ok { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: 1.6em 1em 1.4em; background: #fff; border: 1px solid var(--t-line); border-radius: 1em; text-align: center; }
.tour-ci-app { padding: .75em .85em; border: 1px solid rgba(23,89,255,.2); border-radius: .7em; background: rgba(23,89,255,.06); font-size: .7em; line-height: 1.45; color: var(--t-text2); }
.tour-ci-app b { display: block; margin-bottom: .15em; color: var(--t-ink); }
.tour-ci-check { display: flex; align-items: center; justify-content: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.15em; font-weight: 700; }
.tour-ci-ok b { font-family: var(--ff-head); font-size: 1.05em; }
.tour-ci-ok > span:last-child { font-size: .76em; color: var(--t-text2); line-height: 1.45; }

/* ── SCENE 3: tracking ── */
.tour-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: .9em; align-items: stretch; }
.tour-stats--4 { margin: 0; }
.tour-prog .tour-label { margin-bottom: .5em; }
.tour-bar-l { display: flex; justify-content: space-between; margin-top: .45em; font-size: .78em; color: var(--t-text2); }
.tour-bar { height: .45em; margin-top: .35em; border-radius: var(--r-pill); background: var(--t-line); overflow: hidden; }
.tour-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--blue); transform-origin: left; }

/* ── SCENE 4: gallery + download all ── */
.tour-att-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: .8em 0 .5em; }
.tour-att-head .tour-label { margin: 0; color: var(--t-text2); }
.tour-tbtn { display: inline-block; padding: .45em 1em; border: 1.5px solid var(--blue); border-radius: var(--r-pill); color: var(--blue); font-size: .76em; font-weight: 600; white-space: nowrap; }
.tour-toast { position: absolute; right: 1em; bottom: 1em; display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em; border-radius: var(--r-pill); background: #141210; color: #fff; font-size: .78em; font-weight: 500; box-shadow: var(--shadow-md); }
.tour-toast::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #3fbf86; }
.tour-gal { padding-top: 2.7em; }
.tour-gal-h { display: block; font-family: var(--ff-head); font-size: 1.1em; padding: 0 .1em; }
.tour-gal-tabs { display: flex; gap: .2em; margin: .55em 0 .7em; border-bottom: 1px solid var(--t-line); }
.tour-gal-tabs span { padding: .55em .5em; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .56em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t-text3); white-space: nowrap; }
.tour-gal-tabs .is-on { color: var(--blue); border-bottom-color: var(--blue); }
/* Organizer side: every team member's retouched final, one look */
.tour-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.tour-team img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; border-radius: .5em; background: #dfe3e8; }
/* Employee side: their single final in the Final Delivery tab */
.tour-final { position: relative; }
.tour-final img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: .7em; background: #dfe3e8; }
.tour-final-tag { position: absolute; left: .5em; bottom: .5em; padding: .35em .6em; border-radius: var(--r-pill); background: rgba(255,255,255,.94); color: var(--t-ok); font-size: .62em; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.tour-final-dl { display: block; margin-top: .7em; padding: .75em .5em; border-radius: var(--r-pill); background: var(--blue); color: #fff; text-align: center; font-size: .64em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ── MOTION (only once the section is live, never with reduced motion) ──
   Default styles above are each scene's final state, so reduced motion and
   no-JS visitors see a complete static frame. */
@keyframes tour-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tour-in { from { opacity: 0; transform: translateY(.7em); } }
@keyframes tour-fade { from { opacity: 0; } }
@keyframes tour-gone { from { opacity: 1; } to { opacity: 0; } }
@keyframes tour-up { from { opacity: 0; transform: translateY(.45em); } }
@keyframes tour-grow { from { transform: scaleX(0); } }
@keyframes tour-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tour-pop { from { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.08); } }
@keyframes tour-tile { from { opacity: 0; transform: translateY(.6em) scale(.94); } }
@keyframes tour-press {
  0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(23,89,255,0); }
  35% { transform: scale(.93); box-shadow: 0 0 0 .45em rgba(23,89,255,.22); }
}
@keyframes tour-press-fill {
  0%, 100% { transform: none; background: transparent; color: var(--blue); box-shadow: 0 0 0 0 rgba(23,89,255,0); }
  35%, 70% { background: var(--blue); color: #fff; box-shadow: 0 0 0 .45em rgba(23,89,255,.2); }
  35% { transform: scale(.94); }
}

@media (prefers-reduced-motion: no-preference) {
  .tour.is-live .is-active .tour-paste { animation: tour-in .6s var(--t-ease) both; }
  .tour.is-live .is-active .tour-paste:nth-child(2) { animation-delay: .09s; }
  .tour.is-live .is-active .tour-paste:nth-child(3) { animation-delay: .18s; }
  .tour.is-live .is-active .tour-paste:nth-child(4) { animation-delay: .27s; }
  .tour.is-live .is-active .tour-paste:nth-child(5) { animation-delay: .36s; }
  .tour.is-live .is-active .tour-paste:nth-child(6) { animation-delay: .45s; }
  .tour.is-live #tour-panel-1.is-active .tour-press { animation: tour-press .7s 1s var(--t-ease) both; }
  .tour.is-live .is-active .tour-sent { animation: tour-fade .6s 1.3s var(--t-ease) both; }
  .tour.is-live .is-active .tour-in { animation: tour-in .6s 1.25s var(--t-ease) both; }
  .tour.is-live .is-active .tour-in:nth-child(3) { animation-delay: 1.35s; }
  .tour.is-live .is-active .tour-in:nth-child(4) { animation-delay: 1.45s; }
  .tour.is-live .is-active .tour-in:nth-child(5) { animation-delay: 1.55s; }
  .tour.is-live .is-active .tour-in:nth-child(6) { animation-delay: 1.65s; }
  .tour.is-live .is-active .tour-in:nth-child(7) { animation-delay: 1.75s; }
  .tour.is-live #tour-panel-1.is-active .tour-flip > s { animation: tour-gone .7s 2s var(--t-ease) both; }
  .tour.is-live #tour-panel-1.is-active .tour-flip > em { animation: tour-up .7s 2s var(--t-ease) both; }
  .tour.is-live #tour-panel-1.is-active .tour-in:nth-child(3) .tour-flip > * { animation-delay: 2.3s; }
  .tour.is-live #tour-panel-1.is-active .tour-in:nth-child(4) .tour-flip > * { animation-delay: 2.6s; }
  .tour.is-live #tour-panel-1.is-active .tour-in:nth-child(6) .tour-flip > * { animation-delay: 2.9s; }

  .tour.is-live #tour-panel-2.is-active .tour-type { animation: tour-type .5s .2s steps(4, end) both; }
  .tour.is-live #tour-panel-2.is-active .tour-ci-f:nth-child(2) .tour-type { animation: tour-type .5s .65s steps(5, end) both; }
  .tour.is-live #tour-panel-2.is-active .tour-ci-box > .tour-ci-f .tour-type { animation: tour-type .9s 1.05s steps(17, end) both; }
  .tour.is-live #tour-panel-2.is-active .tour-press { animation: tour-press .6s 1.95s var(--t-ease) both; }
  .tour.is-live #tour-panel-2.is-active .tour-ci-done { animation: tour-in .6s 2.35s var(--t-ease) both; }
  .tour.is-live #tour-panel-2.is-active .tour-ci-check { animation: tour-pop .7s 2.55s var(--t-ease) both; }
  .tour.is-live #tour-panel-2.is-active .tour-num > s { animation: tour-gone .6s 2.6s var(--t-ease) both; }
  .tour.is-live #tour-panel-2.is-active .tour-num > em { animation: tour-up .6s 2.6s var(--t-ease) both; }
  .tour.is-live #tour-panel-2.is-active .tour-new { animation: tour-in .7s 2.7s var(--t-ease) both; }

  .tour.is-live #tour-panel-3.is-active .tour-bar i { animation: tour-grow 1.2s .2s var(--t-ease) both; }
  .tour.is-live #tour-panel-3.is-active .tour-bar ~ .tour-bar i { animation-delay: .4s; }
  .tour.is-live #tour-panel-3.is-active .tour-new { animation: tour-in .7s 1.1s var(--t-ease) both; }
  .tour.is-live #tour-panel-3.is-active .tour-stat:nth-child(-n+2) .tour-num > s { animation: tour-gone .6s 1.1s var(--t-ease) both; }
  .tour.is-live #tour-panel-3.is-active .tour-stat:nth-child(-n+2) .tour-num > em { animation: tour-up .6s 1.1s var(--t-ease) both; }
  .tour.is-live #tour-panel-3.is-active .tour-flip > s { animation: tour-gone .7s 1.8s var(--t-ease) both; }
  .tour.is-live #tour-panel-3.is-active .tour-flip > em { animation: tour-up .7s 1.8s var(--t-ease) both; }
  .tour.is-live #tour-panel-3.is-active .tour-tr:nth-child(4) .tour-flip > * { animation-delay: 2.5s; }
  .tour.is-live #tour-panel-3.is-active .tour-stat:nth-child(4) .tour-num > s { animation: tour-gone .6s 2.5s var(--t-ease) both; }
  .tour.is-live #tour-panel-3.is-active .tour-stat:nth-child(4) .tour-num > em { animation: tour-up .6s 2.5s var(--t-ease) both; }

  .tour.is-live #tour-panel-4.is-active .tour-team img { animation: tour-tile .6s .1s var(--t-ease) both; }
  .tour.is-live #tour-panel-4.is-active .tour-team img:nth-child(2) { animation-delay: .2s; }
  .tour.is-live #tour-panel-4.is-active .tour-team img:nth-child(3) { animation-delay: .3s; }
  .tour.is-live #tour-panel-4.is-active .tour-team img:nth-child(4) { animation-delay: .4s; }
  .tour.is-live #tour-panel-4.is-active .tour-team img:nth-child(5) { animation-delay: .5s; }
  .tour.is-live #tour-panel-4.is-active .tour-team img:nth-child(6) { animation-delay: .6s; }
  .tour.is-live #tour-panel-4.is-active .tour-final { animation: tour-tile .7s .3s var(--t-ease) both; }
  .tour.is-live #tour-panel-4.is-active .tour-final-tag { animation: tour-pop .6s 1s var(--t-ease) both; }
  .tour.is-live #tour-panel-4.is-active .tour-press { animation: tour-press-fill .9s 1.5s var(--t-ease) both; }
  .tour.is-live #tour-panel-4.is-active .tour-toast { animation: tour-in .6s 2.1s var(--t-ease) both; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .tour-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .tour-intro .sec-h { font-size: clamp(1.75rem, 3vw, 2.25rem); }
  .tour-tabs { grid-template-columns: repeat(4, 1fr); }
  .tour-tab { grid-template-columns: 1fr; align-content: start; gap: .2rem; }
}

@media (max-width: 768px) {
  .tour { --t-stage: 352px; --t-scene-fs: 10px; }
  .tour.cx-sec { padding-top: 2rem; padding-bottom: 2rem; }
  .tour .sec-sub { font-size: .875rem; line-height: 1.55; margin-bottom: 1rem; }
  .tour-intro .sec-h { font-size: 1.75rem; }
  .tour-grid { gap: .75rem; }
  .tour-tabs { grid-template-columns: 1fr 1fr; gap: .35rem; }
  .tour-tab { grid-template-columns: 1.6rem 1fr; gap: 0; align-items: start; min-height: 52px; padding: .55rem .6rem .55rem .55rem; border: 1px solid var(--gray-mid); }
  .tour-tab.is-active { border-color: rgba(23,89,255,.35); }
  .tour-tab::before { display: none; }
  .tour-tab-num { font-size: .8rem; line-height: 1.45; }
  .tour-tab-title { font-size: .8125rem; line-height: 1.35; }
  .tour-tab-bar { left: .55rem; right: .6rem; }
  .tour-cap { min-height: 4.65em; margin-bottom: .6rem; font-size: .875rem; line-height: 1.55; }
  .tour-scene::before { inset: 1.2em -.6em -.6em 1.2em; }
  .tour-browser { right: .6em; bottom: .6em; }
  .tour-dsk { display: none !important; }
  .tour-screen { padding: 1em; }
  .tour-ev-meta { display: none; }
  .tour-invite { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: .7em; }
  .tour-invite .tour-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .tour-card { padding: .8em .8em; }
  .tour-track { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tour-stats--4 { grid-template-columns: 1fr; }
  .tour-table--3 .tour-tr { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .7fr); }
  .tour-phone { left: 1%; }
  .tour-browser--mini { inset: 7% .6em 7% 30%; }
  .tour-browser--mini .tour-screen { padding-left: 5.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-panel, .tour-panel.is-active, .tour-tab, .tour-tab::before, .tour-tab-num { transition: none; }
}