/* Topo editor guide — sits on top of alpintopo-welcome.css, which already
   carries the nav, the band, the CTA and the footer. */

/* The landing page stylesheet clips horizontal overflow with overflow-x:hidden,
   which turns html and body into scroll containers and quietly breaks every
   position:sticky below them. Clip does the same job without that side effect. */
html {
  overflow-x: clip;
}

.guide-page {
  background: var(--off-white);
  overflow-x: clip;
}

/* ── HERO ───────────────────────────────────────────── */
.guide-hero {
  position: relative;
  overflow: hidden;
  background: var(--blue-deep);
  color: var(--white);
  padding: 11rem 3.5rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 4rem;
}

.guide-hero-topo { position: absolute; inset: 0; pointer-events: none; }
.guide-hero-topo svg { width: 100%; height: 100%; }
.gtl { fill: none; stroke: #ffd060; stroke-width: 0.8; opacity: 0.18; }

.guide-hero-content {
  position: relative;
  max-width: 39rem;
  padding-bottom: 6rem;
}

.guide-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1.4rem;
}

.guide-eyebrow--dark { color: var(--blue-bright); }

.guide-hero-title {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.guide-hero-title .accent { color: var(--blue-light); }

.guide-hero-sub {
  margin-top: 1.4rem;
  font-size: 1.02rem;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}

.guide-hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.guide-btn-primary,
.guide-btn-ghost,
.guide-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.9rem;
  border-radius: 4px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}

.guide-btn-primary { background: var(--blue-bright); color: var(--white); }
.guide-btn-primary:hover { background: var(--blue-light); transform: translateY(-1px); }

.guide-btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
}
.guide-btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }

.guide-btn-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.guide-btn-outline:hover { background: rgba(255, 255, 255, 0.1); }

/* The finished topo peeks in from the bottom, so the promise of the page is
   visible before a single word is read. */
.guide-hero-shot {
  position: relative;
  align-self: end;
  transform: translateY(3rem);
  animation: guideRise 1s cubic-bezier(.2, .7, .3, 1) .15s both;
}

.guide-hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  box-shadow: 0 -10px 70px rgba(0, 0, 0, 0.45);
}

@keyframes guideRise {
  from { opacity: 0; transform: translateY(6rem); }
  to   { opacity: 1; transform: translateY(3rem); }
}

/* The marquee slides underneath the label instead of across it. */
.guide-page .band-label {
  position: relative;
  z-index: 1;
  background: var(--blue-deep);
  padding-right: 1.5rem;
}

/* The bar floats over a near-black hero until it picks up its frosted
   background, so its controls have to be light until then. */
.guide-page nav:not(.scrolled) .nav-link,
.guide-page nav:not(.scrolled) .nav-menu-toggle {
  color: rgba(255, 255, 255, 0.85);
}

.guide-page nav:not(.scrolled) .nav-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ── SECTION HEADS ──────────────────────────────────── */
.guide-section-head { max-width: 46rem; margin: 0 auto 3.5rem; text-align: center; }

.guide-section-title {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--blue-deep);
}

.guide-section-sub {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 300;
  color: var(--slate);
}

/* ── VALUE POINTS ───────────────────────────────────── */
.guide-values { padding: 7rem 3.5rem 5rem; }

.guide-value-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
  max-width: 1280px;
  margin: 0 auto;
}

.guide-value {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2rem 1.5rem 1.8rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease,
              opacity .6s ease;
}

/* Wipes in on hover, the same gesture the landing page uses on its cards. */
.guide-value::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-bright), var(--blue-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.guide-value:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 144, 10, 0.35);
  box-shadow: 0 18px 44px rgba(120, 70, 8, 0.13);
}

.guide-value:hover::before { transform: scaleX(1); }

.guide-value-num {
  position: absolute;
  top: 1.6rem;
  right: 1.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--mist);
}

.guide-value-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.4rem;
  border-radius: 13px;
  background: var(--blue-pale);
  color: var(--blue-bright);
  transition: background .3s ease, color .3s ease;
}

.guide-value-icon svg { width: 24px; height: 24px; }

.guide-value:hover .guide-value-icon {
  background: var(--blue-bright);
  color: var(--white);
}

.guide-value-title {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-deep);
  margin-bottom: 0.8rem;
}

.guide-value-lead {
  font-size: 0.88rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--blue-deep);
  margin-bottom: 0.55rem;
}

.guide-value-text {
  font-size: 0.85rem;
  line-height: 1.65;
  font-weight: 300;
  color: var(--slate);
}

/* A second way in, before the walkthrough asks for more reading time. */
.guide-values-cta {
  display: flex;
  justify-content: center;
  margin-top: 3.2rem;
}

/* ── WALKTHROUGH ────────────────────────────────────── */
.guide-walk { padding: 3rem 3.5rem 6rem; }

.guide-walk-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 4rem;
  align-items: start;
}

/* The screenshot stays put while the steps scroll past it, so the same wall is
   redrawn step by step instead of eight unrelated pictures. */
.guide-walk-media {
  position: sticky;
  top: 6.5rem;
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* The aspect ratio belongs to the drawing itself, so the progress bar adds
   height below it instead of eating into the picture. */
.guide-walk-frame {
  position: relative;
  aspect-ratio: 16 / 9;
}

.guide-walk-shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}

.guide-walk-shot.is-active { opacity: 1; transform: scale(1); }

.guide-walk-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 14px 50px rgba(26, 18, 8, 0.12);
}

.guide-walk-steps { order: 1; }

.guide-walk-step {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0;
  border-left: 2px solid var(--line);
  padding-left: 2rem;
  opacity: 0.38;
  transition: opacity .4s ease, border-color .4s ease;
}

.guide-walk-step.is-active { opacity: 1; border-color: var(--blue-bright); }

.guide-walk-step-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: 0.9rem;
}

.guide-walk-step-title {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blue-deep);
  margin-bottom: 0.9rem;
}

.guide-walk-step-text {
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 300;
  color: var(--slate);
}

.guide-walk-progress {
  display: flex;
  gap: 0.4rem;
}

.guide-walk-pip {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  transition: background .4s ease;
}

.guide-walk-pip.is-active { background: var(--blue-bright); }

/* ── WIDE SHOT ──────────────────────────────────────── */
.guide-explainer { padding: 2rem 3.5rem 7rem; }

.guide-wide-shot {
  max-width: 1100px;
  margin: 0 auto;
}

.guide-wide-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 14px 50px rgba(26, 18, 8, 0.12);
}

.guide-result { padding: 2rem 3.5rem 7rem; }

/* The finished topo is a portrait A4 page, so it gets the width of a sheet
   rather than the width of a screenshot. */
.guide-sheet {
  max-width: 640px;
  margin: 0 auto;
}

.guide-sheet img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(26, 18, 8, 0.16);
}

/* ── CTA ────────────────────────────────────────────── */
.guide-cta .cta-actions,
.guide-cta-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* ── REVEAL ─────────────────────────────────────────── */
.guide-page .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.guide-page .reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .guide-page .reveal,
  .guide-walk-shot,
  .guide-walk-step,
  .guide-hero-shot {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1240px) {
  .guide-value-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .guide-value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .guide-hero {
    grid-template-columns: 1fr;
    padding: 9rem 2rem 0;
    gap: 2.5rem;
  }

  .guide-hero-content { padding-bottom: 0; max-width: none; }
  .guide-hero-shot { transform: translateY(2rem); animation: none; }
  .guide-value-grid { grid-template-columns: repeat(3, 1fr); }
  .guide-walk-inner { grid-template-columns: 1fr; gap: 0; }

  /* On a narrow screen the drawing sticks to the top and the steps run
     underneath it. */
  /* The steps scroll underneath the drawing here, so everything that belongs
     to it — including the progress bar — has to sit inside its background.
     Otherwise the orange rail of the step below shows through beside it.
     The dark ground ties the band back to the hero and lifts the screenshot
     off the page. */
  .guide-walk-media {
    order: 1;
    position: sticky;
    top: 4.5rem;
    z-index: 5;
    background: var(--blue-deep);
    padding: 0.9rem;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(26, 18, 8, 0.18);
  }

  .guide-walk-media .guide-walk-shot img {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
  }

  .guide-walk-media .guide-walk-pip { background: rgba(255, 255, 255, 0.22); }
  .guide-walk-media .guide-walk-pip.is-active { background: var(--blue-light); }



  .guide-walk-steps { order: 2; }
  .guide-walk-step { min-height: 0; padding: 2.2rem 0; }
}

@media (max-width: 768px) {
  .guide-hero { padding: 8rem 1.5rem 0; }
  /* The hand-placed line break leaves an orphan once the title wraps anyway. */
  .guide-hero-title br { display: none; }
  .guide-hero-actions { flex-direction: column; align-items: stretch; }
  .guide-btn-primary, .guide-btn-ghost, .guide-btn-outline { width: 100%; }
  .guide-values { padding: 4.5rem 1.5rem 3rem; }
  .guide-value-grid { grid-template-columns: 1fr; }
  .guide-values-cta { margin-top: 2.2rem; }
  .guide-values-cta .guide-btn-primary { width: 100%; }
  .guide-walk { padding: 2rem 1.5rem 4rem; }

  /* Edge to edge on a phone, like the header band above it. */
  .guide-walk-media {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0.9rem 1.5rem;
    border-radius: 0;
  }
  .guide-walk-step { padding-left: 1.2rem; }
  .guide-explainer { padding: 1rem 1.5rem 4.5rem; }
  .guide-result { padding: 1rem 1.5rem 4.5rem; }
  .guide-cta-actions { width: 100%; flex-direction: column; }
  .guide-cta-actions .btn-white { text-align: center; }
}