/* The tour (rules W22 to W26): real captures of the reader and the creator studio, each
   in the visitor's own light or dark, with a little motion that stops on request. */

.brand-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); border-radius: 999px; padding: 0.15rem 0.55rem; margin-left: 0.15rem; }

/* The opening: both sides of ai1y, side by side, each leading to its own details. */
.tour-hero {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 4.5rem);
  background:
    radial-gradient(55rem 28rem at 90% -10%, color-mix(in srgb, var(--mark) 26%, transparent), transparent 60%),
    radial-gradient(40rem 26rem at -10% 110%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 60%);
}
.tour-intro { max-width: 50rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.tour-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); text-wrap: balance; }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.side { display: flex; flex-direction: column; gap: 1.25rem; color: inherit; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: clamp(1rem, 2.4vw, 1.5rem); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.side:hover { transform: translateY(-3px); }
.side-ink { background: #141b2d; border-color: #273149; color: #e9ecf3; }
.side-copy { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; }
.side-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.side-text { color: var(--muted); }
.side-ink .side-text { color: #b9c0d0; }
.side-go { font-weight: 700; color: var(--teal); margin-top: 0.4rem; }
.side-ink .side-go { color: var(--mark); }
.side-shot { margin: 0; border-radius: 10px; overflow: hidden; }
.side-shot img { display: block; width: 100%; height: auto; }
.flip-frame { margin: 0; flex: 1; display: flex; align-items: center; }
.flip-window { width: 100%; aspect-ratio: var(--ratio); overflow: hidden; border-radius: 10px; }
.flip-strip { display: block; width: 100%; height: auto; transform: translateY(calc(var(--frame, 3) * -100% / var(--frames))); }
.hero-toggle { margin-top: 1.25rem; }

.motion-toggle { flex: none; font: inherit; font-weight: 650; font-size: 0.9rem; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 1rem; cursor: pointer; }

/* Sections */
.tour-band { padding: clamp(3.5rem, 8vw, 5.5rem) 0; scroll-margin-top: 4rem; }
.tour-head { max-width: 44rem; margin-bottom: 2rem; }
.tour-head p:not(.kicker) { color: var(--muted); font-size: 1.1rem; }
.band-ink .tour-head p:not(.kicker) { color: #b9c0d0; }

/* A carousel: tabs to go straight to a screen, and the screens taking turns. */
.carousel-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tab-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tab-list [role="tab"] { font: inherit; font-weight: 650; font-size: 0.95rem; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1.05rem; cursor: pointer; }
.tab-list [role="tab"][aria-selected="true"] { background: var(--mark); color: var(--mark-ink); border-color: var(--mark); }
.carousel-nav { display: flex; align-items: center; gap: 0.5rem; }
.step { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--text); background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.step svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.step[hidden] { display: none; }
.tab-progress { height: 3px; margin: 1rem 0 1.5rem; border-radius: 3px; background: var(--line); overflow: hidden; }
.tab-progress span { display: block; height: 100%; width: 0; background: var(--mark); }
.carousel[data-state="running"] .tab-progress span { animation: tab-fill var(--dwell, 5s) linear forwards; }
@keyframes tab-fill { to { width: 100%; } }
.panel-cap { font-size: 1.15rem; max-width: 46rem; margin: 0 0 1.25rem; }
.band-ink .tab-list [role="tab"]:not([aria-selected="true"]), .band-ink .step, .band-ink .motion-toggle { color: #e9ecf3; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.band-ink .tab-progress { background: rgba(255, 255, 255, 0.1); }
.band-ink .panel-cap { color: #e9ecf3; }
.band-ink .shot { border-color: rgba(255, 255, 255, 0.12); }
/* With JavaScript, only the chosen screen shows; without it, all of them do. */
.carousel.ready .panel:not(.shown) { display: none; }
.carousel.ready .panel.shown { animation: panel-in 0.45s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.carousel:not(.ready) .panel + .panel { margin-top: 3rem; }
.shot-narrow { max-width: 840px; }

/* A laptop picture with a phone in front of it. */
.duo { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 15rem); align-items: end; gap: 0; padding-bottom: 2rem; }
.duo .shot-wide { grid-column: 1 / 2; grid-row: 1; margin-right: -4rem; }
.duo .shot-phone { grid-column: 2 / 3; grid-row: 1; margin-bottom: -2rem; position: relative; z-index: 1; }

/* Two phones side by side. */
.phones { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 3rem); }
.phones .shot-phone { width: min(19rem, 44%); }

/* Light against dark: the light picture is cut back as the handle moves. */
.compare { position: relative; --at: 50%; }
.compare-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--at)) 0 0); }
.compare-top img { height: 100%; }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--at); width: 3px; margin-left: -1.5px; background: var(--accent); pointer-events: none; }
.compare-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-lg); }
.compare-range { position: absolute; inset: 0; display: block; }
.compare-range input { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; margin: 0; background: transparent; cursor: ew-resize; }
.compare-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 2.6rem; height: 100vh; background: transparent; }
.compare-range input::-moz-range-thumb { width: 2.6rem; height: 100vh; background: transparent; border: 0; }
.compare-range input:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.open-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.open-copy p { color: var(--muted); font-size: 1.1rem; }

@media (max-width: 860px) {
  .sides, .open-grid { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr minmax(0, 10rem); }
  .duo .shot-wide { margin-right: -3rem; }
}
@media (max-width: 560px) {
  .brand-tag { display: none; }
  /* The tabs scroll sideways in their own row, not the page. */
  .tab-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; width: calc(100% + 32px); }
  .tab-list [role="tab"] { flex: none; }
  .carousel-nav { width: 100%; justify-content: flex-end; }
  .duo { grid-template-columns: 1fr; padding-bottom: 0; }
  .duo .shot-wide { margin-right: 0; }
  .duo .shot-phone { grid-column: 1; grid-row: 2; width: 62%; justify-self: center; margin: 1.5rem 0 0; }
  .phones .shot-phone { width: 48%; }
  .shot-phone { border-width: 5px; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
  .side:hover { transform: none; }
  .carousel.ready .panel.shown { animation: none; }
}