/* ============================================================
   CYGM SD card viewer tour — the tour's own sheet, inside the site chrome.

   The tour is unchanged in substance: same screenshots, same script. What
   went is the duplication — its private palette, its own nav, hero, footer
   and the global resets that fought the shared sheets. Everything left is
   confined to .tour-app, the wrapper each section puts around its content,
   so no rule here can reach the header, the menu or the footer.

   The lightbox dialog sits inside .tour-app too. showModal() promotes it to
   the top layer but leaves it where it is in the DOM, so the scope holds.

   The tour's own privacy strip was .band, which is a site class; it is
   .tour-band here so the two can never meet.
   ============================================================ */

.tour-app {
  /* The site tokens, under the names the tour already uses. A change to the
     shared palette carries here; there is no second set of colours. */
  --bg-primary:      var(--c-ground, #0a0e17);
  --bg-secondary:    var(--c-band, #0f1420);
  --bg-tertiary:     var(--c-panel, #151b2b);
  --bg-card:         var(--c-card, #141a2a);
  --bg-card-hover:   var(--color-surface-hover, #1a2236);

  --text-primary:    var(--color-text, #e8ecf4);
  --text-secondary:  var(--color-text-muted, #8b95a8);
  --text-muted:      var(--color-text-faint, #74839d);

  --accent:             var(--c-accent, #00d4ff);
  --accent-dim:         var(--c-accent-dim, #00a8cc);
  --accent-glow:        var(--color-glow, rgba(0, 212, 255, 0.15));
  --accent-glow-strong: var(--color-glow-strong, rgba(0, 212, 255, 0.3));

  --glucose-green:  var(--c-green, #22c55e);
  --glucose-yellow: var(--c-yellow, #eab308);
  --glucose-red:    var(--c-red, #ef4444);

  --border-subtle: var(--color-border, rgba(255, 255, 255, 0.08));
  --border-accent: var(--color-border-strong, rgba(0, 212, 255, 0.2));

  /* Flat, like every other surface on the site: the plates become hairline
     panels. The pills keep their shape because they ask for 100px directly. */
  --radius: 0;
  --radius-sm: 0;
  --radius-xs: 0;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Zone colours stay literal: they are data, read off a chart, and have to
     stay distinguishable from each other rather than track a brand. */
  --z-vlow: #dc2626;
  --z-low: #f59e0b;
  --z-range: #22c55e;
  --z-high: #eab308;
  --z-vhigh: #f97316;

  color: var(--text-primary);
}

/* ============================================================
   CYGM SD card viewer — screenshot tour
   Tokens, fonts and card style mirror the main site and the
   viewer itself so this page reads as part of cygm.me.
   ============================================================ */

/* A soft wash behind the top of the page. Gradients only, so it costs
   nothing extra to load. */

.tour-app .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tour-app .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================
   NAV
   ============================================ */

/* ============================================
   TYPE
   ============================================ */
.tour-app .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tour-app .eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
  flex: 0 0 auto;
}

.tour-app h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.05rem, 5.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
  max-width: 20ch;
}

.tour-app h1 .hl {
  color: var(--accent);
}

.tour-app .lede {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 62ch;
  line-height: 1.75;
}

.tour-app .section-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.7rem;
}

.tour-app .section-sub {
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 66ch;
}

.tour-app .block {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.tour-app .block-tight {
  padding: clamp(2rem, 4.5vw, 3rem) 0;
}

/* ============================================
   BUTTONS / CHIPS
   ============================================ */
.tour-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.3s var(--ease-spring), background 0.25s, border-color 0.25s, box-shadow 0.25s;
  min-height: 46px;
}

.tour-app .btn:hover {
  text-decoration: none;
}

.tour-app .btn svg {
  width: 18px; height: 18px; flex-shrink: 0;
}

.tour-app .btn-primary {
  background: var(--accent); color: #06121a;
}

.tour-app .btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-glow-strong);
}

.tour-app .btn-secondary {
  border-color: var(--border-subtle); background: rgba(255,255,255,0.02); color: var(--text-primary);
}

.tour-app .btn-secondary:hover {
  border-color: var(--text-muted); background: rgba(255,255,255,0.06);
}

.tour-app .btn-row {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem;
}

.tour-app .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
  list-style: none;
}

.tour-app .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  background: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.tour-app .chip svg {
  width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto;
}

.tour-app .privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
  border-radius: 100px;
  font-size: 0.875rem;
  color: #b7f0cd;
}

.tour-app .privacy-badge svg {
  width: 16px; height: 16px; flex-shrink: 0; stroke: var(--glucose-green); fill: none;
}

/* ============================================
   CARDS
   ============================================ */
.tour-app .card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.75rem);
}

.tour-app .card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tour-app .card h3 svg {
  width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto;
}

.tour-app .card p {
  font-size: 0.9rem; color: var(--text-secondary);
}

.tour-app .card p + p {
  margin-top: 0.65rem;
}

.tour-app .card ol,
.tour-app .card ul {
  margin: 0.4rem 0 0 1.15rem; font-size: 0.9rem; color: var(--text-secondary);
}

.tour-app .card li {
  margin-bottom: 0.35rem;
}

.tour-app .card-note {
  font-size: 0.8125rem; color: var(--text-muted);
}

/* ============================================
   HERO
   ============================================ */
.tour-app .hero {
  padding: clamp(2.5rem, 7vw, 4.25rem) 0 0;
}

.tour-app .hero-note {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 60ch;
}

.tour-app .hero-note strong {
  color: var(--text-secondary); font-weight: 600;
}

/* Browser chrome around the hero shot. Pure CSS, no images. */
.tour-app .browser {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.tour-app .browser-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border-subtle);
}

.tour-app .browser-dots {
  display: flex; gap: 0.4rem; flex: 0 0 auto;
}

.tour-app .browser-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: block;
}

.tour-app .browser-url {
  flex: 1 1 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  padding: 0.28rem 0.85rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-app .browser-url span {
  color: var(--text-secondary);
}

.tour-app .browser .shot {
  border: 0; border-radius: 0;
}

.tour-app .browser .shot:hover {
  transform: none; box-shadow: none;
}

/* ============================================
   SHOTS (click to enlarge)
   ============================================ */
.tour-app .shot {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  transition: border-color 0.25s, transform 0.35s var(--ease-out), box-shadow 0.3s;
  color: inherit;
  font: inherit;
}

.tour-app .shot img {
  display: block;
  width: 100%;
  height: auto;
}

.tour-app .shot:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}

.tour-app .shot::after {
  content: 'Click to enlarge';
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(10, 14, 23, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
  pointer-events: none;
}

.tour-app .shot:hover::after,
.tour-app .shot:focus-visible::after {
  opacity: 1; transform: translateY(0);
}

.tour-app .shot-caption {
  margin-top: 0.65rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: baseline;
}

.tour-app .shot-caption a {
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ============================================
   STEPS — alternating text / image
   ============================================ */
.tour-app .steps {
  display: grid; gap: clamp(3rem, 7vw, 5rem);
}

.tour-app .step {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}

.tour-app .step.flip .step-copy {
  order: 2;
}

.tour-app .step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.tour-app .step-num b {
  display: grid;
  place-items: center;
  min-width: 26px; height: 22px;
  padding: 0 0.45rem;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  background: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex: 0 0 auto;
}

.tour-app .step-copy h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.tour-app .step-copy p {
  color: var(--text-secondary); font-size: 0.9875rem;
}

.tour-app .step-copy p + p {
  margin-top: 0.8rem;
}

.tour-app .step-copy .chip-row {
  margin-top: 1.2rem;
}

/* ============================================
   SCROLL FRAMES for the tall full-page shots
   ============================================ */
.tour-app .frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.tour-app .frame {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1rem;
}

.tour-app .frame h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.tour-app .frame .card-note {
  margin-bottom: 0.85rem; display: block;
}

.tour-app .frame-window {
  height: clamp(360px, 52vh, 560px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

.tour-app .frame-window::-webkit-scrollbar {
  width: 10px;
}

.tour-app .frame-window::-webkit-scrollbar-track {
  background: transparent;
}

.tour-app .frame-window::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.tour-app .frame-window img {
  display: block; width: 100%; height: auto;
}

.tour-app .frame-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.tour-app .scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.tour-app .scroll-hint svg {
  width: 13px; height: 13px;
}

/* ============================================
   FEATURE GRID (the close-ups)
   ============================================ */
/* Two fixed columns rather than auto-fit: the full-width cards span the row,
   and auto-fit's third column would otherwise be left empty beside them. */
.tour-app .feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.tour-app .feature {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 1rem 1rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 0.25s, background 0.25s;
}

.tour-app .feature:hover {
  border-color: rgba(255,255,255,0.12); background: var(--bg-card-hover);
}

.tour-app .feature-body {
  padding: 0 0.35rem;
}

.tour-app .feature h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}

.tour-app .feature p {
  font-size: 0.9rem; color: var(--text-secondary);
}

.tour-app .feature p + p {
  margin-top: 0.55rem;
}

.tour-app .feature .shot-caption {
  margin-top: 0.55rem;
}

.tour-app .feature-wide {
  grid-column: 1 / -1;
}

.tour-app .feature-wide .feature-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.tour-app .feature-wide.flip .feature-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

.tour-app .feature-wide.flip .feature-inner .shot {
  order: 2;
}

.tour-app .stat-name-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
  list-style: none;
}

.tour-app .stat-name-list li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.025);
  border-radius: var(--radius-xs);
  padding: 0.2rem 0.5rem;
}

/* ============================================
   ZONE LEGEND
   ============================================ */
.tour-app .zone-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
  list-style: none;
}

.tour-app .zone-legend li {
  border: 1px solid var(--tint-border, var(--border-subtle));
  background: var(--tint-bg, rgba(255,255,255,0.02));
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}

.tour-app .zone-legend .name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tint, var(--text-primary));
}

.tour-app .zone-legend .meta {
  font-size: 0.78rem; color: var(--text-muted);
}

/* ============================================
   PHONE
   ============================================ */
.tour-app .phone-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}

.tour-app .phone {
  width: 300px;
  max-width: 100%;
  justify-self: center;
  border-radius: 40px;
  padding: 12px;
  background: linear-gradient(160deg, #232a3a, #10151f 60%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}

.tour-app .phone::before {
  content: '';
  position: absolute;
  top: 21px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 6px;
  border-radius: 100px;
  background: rgba(0,0,0,0.7);
  z-index: 2;
}

.tour-app .phone-screen {
  height: 580px;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 30px;
  background: var(--bg-primary);
  scrollbar-width: none;
  /* Keeps the shot clear of the notch drawn over the top of the frame. */
  padding-top: 22px;
}

.tour-app .phone-screen::-webkit-scrollbar {
  width: 0; height: 0;
}

.tour-app .phone-screen img {
  display: block; width: 100%; height: auto;
}

.tour-app .phone-cap {
  text-align: center; margin-top: 0.85rem;
}

/* ============================================
   PRIVACY BAND + FINAL CTA
   ============================================ */
.tour-app .tour-band {
  border: 1px solid rgba(34, 197, 94, 0.22);
  background: linear-gradient(180deg, rgba(34,197,94,0.07), rgba(34,197,94,0.02));
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.5rem;
}

.tour-app .tour-band h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
  grid-column: 1 / -1;
}

.tour-app .band-item .name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #b7f0cd;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.tour-app .band-item .name svg {
  width: 15px; height: 15px; stroke: var(--glucose-green); fill: none; flex: 0 0 auto;
}

.tour-app .band-item p {
  font-size: 0.875rem; color: var(--text-secondary);
}

.tour-app .cta {
  text-align: center;
  border: 1px solid var(--border-accent);
  background:
  radial-gradient(700px 260px at 50% -30%, rgba(0,212,255,0.14), transparent 70%),
  var(--bg-card);
  border-radius: var(--radius);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem);
}

.tour-app .cta h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0.8rem;
}

.tour-app .cta p {
  color: var(--text-secondary); max-width: 56ch; margin: 0 auto;
}

.tour-app .cta .btn-row {
  justify-content: center;
}

.tour-app .cta .card-note {
  margin-top: 1.4rem;
}

/* ============================================
   ROUTES (two ways in)
   ============================================ */
.tour-app .route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.tour-app dialog.lightbox {
  border: 0;
  padding: 0;
  /* The reset above zeroes every margin, which also kills the auto margins a
  modal dialog centres itself with. Put them back. */
  margin: auto;
  background: transparent;
  color: var(--text-primary);
  max-width: 96vw;
  max-height: 96vh;
  overflow: visible;
}

.tour-app dialog.lightbox::backdrop {
  background: rgba(4, 7, 12, 0.9);
}

.tour-app .lightbox-inner {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.85rem;
  max-width: 96vw;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}

.tour-app .lightbox-inner img {
  display: block;
  max-width: min(1500px, 92vw);
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.tour-app .lightbox-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.7rem;
  padding: 0.15rem 0.15rem 0;
}

.tour-app .lightbox-head .t {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.tour-app .lightbox-head .d {
  font-size: 0.8125rem; color: var(--text-muted);
}

.tour-app .icon-btn {
  margin-left: auto;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.tour-app .icon-btn:hover {
  background: rgba(255,255,255,0.09); border-color: var(--text-muted);
}

.tour-app .lightbox-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  padding: 0 0.15rem 0.15rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ============================================
   FOOTER
   ============================================ */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .tour-app .step {
    grid-template-columns: 1fr;
  }

  .tour-app .step.flip .step-copy {
    order: 0;
  }

  .tour-app .feature-grid {
    grid-template-columns: 1fr;
  }

  .tour-app .feature-wide .feature-inner,
.tour-app .feature-wide.flip .feature-inner {
    grid-template-columns: 1fr;
  }

  .tour-app .feature-wide.flip .feature-inner .shot {
    order: 0;
  }

  .tour-app .phone-block {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .tour-app h1 {
    max-width: none;
  }

  .tour-app .frame-window {
    height: 380px;
  }

  .tour-app .phone-screen {
    height: 480px;
  }

  .tour-app .shot::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .tour-app .btn-row .btn {
    width: 100%;
  }

  .tour-app .browser-url {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-app .shot:hover {
    transform: none;
  }
}

/* ============================================
   FLATTENING
   The plates the tour drew as raised cards are hairline panels here, the
   same as every other panel on the site. Radius is already zero through the
   token map above; these are the shadows and lifts it could not reach.
   ============================================ */
.tour-app .card,
.tour-app .feature,
.tour-app .frame,
.tour-app .browser,
.tour-app .cta,
.tour-app .tour-band {
  box-shadow: none;
}

.tour-app .btn-primary:hover,
.tour-app .shot:hover {
  transform: none;
  box-shadow: none;
}

/* The phone frame asks for 300px. A grid track sizes to its content minimum
   unless told otherwise, so on a 320px screen that 300 plus the container
   padding was four pixels wider than the screen. */
.tour-app .phone-block > * {
  min-width: 0;
}

.tour-app .phone {
  width: min(300px, 100%);
}

/* Long screenshots and the phone frame are the only things wider than the
   column; each scrolls inside itself rather than pushing the page sideways. */
.tour-app .frame-window,
.tour-app .phone-screen,
.tour-app .shot img {
  max-width: 100%;
}

@media print {
  .tour-app dialog { display: none !important; }
  .tour-app .frame-window,
  .tour-app .phone-screen { height: auto; overflow: visible; }
}