/* "How to use this" guide as horizontal slides — layers on customers.css
 * (tokens, fonts, buttons). The trail at the bottom is the customer page's
 * trail: done stops green, the current one orange. */

body.gd-page { height: 100vh; height: 100dvh; overflow: hidden; }
body.gd-page .topbar { position: relative; }

.gd-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.gd-progress__fill { height: 100%; width: 0; background: var(--signal); transition: width .3s ease; }

/* ---- the deck ---- */
.gd-deck { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.gd-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.gd-slide { flex: 0 0 100%; height: 100%; min-width: 0; }
.gd-slide__inner {
  height: 100%; overflow-y: auto; box-sizing: border-box;
  width: min(1180px, 100%); margin: 0 auto; padding: clamp(24px, 4vh, 48px) 32px 32px;
}

.gd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: center; }
.gd-cols--wide-fig { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); align-items: start; margin-top: 18px; }
.gd-cols--phone { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
.gd-stack { display: flex; flex-direction: column; }
.gd-narrow { width: min(900px, 100%); display: flex; flex-direction: column; justify-content: center; }
.gd-text { min-width: 0; }

/* ---- type ---- */
.gd-title { margin: 0; font-family: var(--cu-display); font-size: clamp(32px, 4.4vw, 50px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.gd-intro { margin: 14px 0 32px; font-size: 19px; line-height: 1.55; color: var(--slate); max-width: 62ch; }
.gd-slide h2 { margin: 0 0 14px; font-family: var(--cu-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.15; }
.gd-slide h3 { margin: 22px 0 8px; font-family: var(--cu-display); font-size: 19px; font-weight: 600; }
.gd-slide p, .gd-slide li, .gd-slide dd { font-size: 17px; line-height: 1.6; color: #25352d; }
.gd-slide p { margin: 0 0 12px; max-width: 68ch; }
.gd-lead { font-size: 19px !important; color: var(--slate) !important; }

.gd-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gd-step-head h2 { margin: 0 !important; }
.gd-step-num { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--ant); color: var(--white); font-family: var(--cu-display); font-weight: 600; font-size: 18px; }
.gd-done { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--white); border: 1.5px solid #86d3a3; max-width: none !important; }
.gd-done strong { color: var(--ant-deep); }

/* numbered steps: the trail's dots */
.gd-steps { list-style: none; counter-reset: step; margin: 16px 0; padding: 0; display: grid; gap: 14px; }
.gd-steps li { counter-increment: step; position: relative; padding-left: 48px; min-height: 32px; }
.gd-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); border: 2.5px solid var(--ant); color: var(--ant-deep);
  font-family: var(--cu-display); font-weight: 600; font-size: 14px;
}
.gd-steps--big li { font-size: 20px; }
.gd-list { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.gd-list__tip { list-style: none; margin-left: -22px; padding: 12px 14px; border-radius: 12px; background: #e6f6ec; color: #134e2e !important; }

/* ---- pictures ---- */
.gd-fig { margin: 0; min-width: 0; }
.gd-fig img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 260px); object-fit: contain; object-position: left top; border-radius: 14px; border: 1.5px solid var(--moss); background: var(--white); }
.gd-fig figcaption { margin-top: 8px; font-size: 14px; color: var(--slate); }
.gd-figs { display: grid; gap: 22px; min-width: 0; }
.gd-figs .gd-fig img { max-height: calc((100dvh - 320px) / 2); }
.gd-fig--phone { justify-self: center; text-align: center; }
.gd-fig--phone img { width: auto; max-width: 100%; max-height: calc(100dvh - 240px); margin: 0 auto; border: none; background: none; }

.gd-tip { padding: 12px 16px; border-radius: 12px; background: #e6f6ec; color: #134e2e !important; }
.gd-box { margin-top: 20px; padding: 16px 20px; border-radius: 16px; background: var(--white); border: 1.5px solid var(--moss); }
.gd-box h3 { margin-top: 0 !important; }
.gd-box ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.gd-box li { font-size: 16px !important; }
.gd-box--never { border-color: #f5b4a0; background: #fff6f2; }
.gd-box--never h3 { color: #9a3412; }

.gd-table { width: 100%; margin: 12px 0 4px; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1.5px solid var(--moss); border-radius: 16px; overflow: hidden; }
.gd-table th, .gd-table td { padding: 12px 16px; text-align: left; vertical-align: top; font-size: 16px; line-height: 1.5; }
.gd-table th { font-weight: 700; background: var(--paper); border-bottom: 1.5px solid var(--moss); }
.gd-table td + td, .gd-table th + th { border-left: 1px solid var(--moss); }
.gd-table tr + tr td { border-top: 1px solid var(--moss); }
.gd-table td:first-child { font-weight: 600; }

.gd-faq { margin: 8px 0 0; display: grid; gap: 4px; }
.gd-faq dt { margin-top: 14px; font-weight: 700; font-size: 17px; }
.gd-faq dd { margin: 0; }

/* ---- cover: the five steps ---- */
.gd-slide--cover .gd-slide__inner { display: flex; flex-direction: column; justify-content: center; }
.gd-glance__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gd-stop { position: relative; }
.gd-stop + .gd-stop::before { content: ""; position: absolute; top: 33px; right: calc(100% - 6px); width: 18px; height: 3px; border-radius: 3px; background: var(--ant); z-index: 1; }
.gd-stop__link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 16px; background: var(--white); border: 1.5px solid var(--moss); border-radius: 16px; color: inherit; text-decoration: none; transition: border-color .15s; }
.gd-stop__link:hover { border-color: var(--ant); }
.gd-stop__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--ant); color: var(--ant-deep); font-family: var(--cu-display); font-weight: 600; font-size: 14px; background: var(--white); }
.gd-stop__title { margin-top: 6px; font-family: var(--cu-display); font-size: 16px; font-weight: 600; line-height: 1.25; }
.gd-stop__do { font-size: 14.5px; line-height: 1.45; color: #25352d; }
.gd-stop__done { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--moss); font-size: 13.5px; line-height: 1.45; color: var(--slate); }
.gd-stop__done-label { display: block; font-weight: 700; color: var(--ant-deep); }

/* ---- bottom bar ---- */
.gd-nav { flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--white); border-top: 1.5px solid var(--moss); }
.gd-nav .cu-btn:disabled { opacity: .35; cursor: default; }
.gd-counter { font-size: 14px; font-weight: 600; color: var(--slate); white-space: nowrap; min-width: 52px; text-align: right; }
.gd-trail { list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: center; }
.gd-trail li { display: flex; align-items: center; }
.gd-trail li + li::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--moss); }
.gd-trail button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: none; border-radius: 999px; background: none; cursor: pointer; font: 600 13px var(--cu-font); color: var(--slate); }
.gd-trail button:hover { background: var(--paper); color: var(--leaf); }
.gd-trail__dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid #bfd2c4; background: var(--white); font-family: var(--cu-display); font-size: 11px; color: var(--slate); }
.gd-trail__name { display: none; white-space: nowrap; }
.gd-trail .is-done .gd-trail__dot { background: var(--ant); border-color: var(--ant); color: var(--white); }
.gd-trail .is-current .gd-trail__dot { border-color: var(--signal); background: #ffe3cc; color: #c24e00; }
.gd-trail .is-current .gd-trail__name { display: inline; color: var(--leaf); }

.gd-hint { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--leaf); color: var(--white); font-size: 13.5px; transition: opacity .4s; pointer-events: none; }
.gd-hint.is-gone { opacity: 0; }

@media (max-width: 1000px) {
  .gd-cols, .gd-cols--wide-fig, .gd-cols--phone { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .gd-glance__list { grid-template-columns: 1fr; gap: 10px; }
  .gd-stop + .gd-stop::before { top: auto; bottom: 100%; right: auto; left: 31px; width: 3px; height: 10px; }
  .gd-stop__link { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; row-gap: 4px; }
  .gd-stop__num { grid-row: span 3; }
  .gd-slide--cover .gd-slide__inner { justify-content: flex-start; }
  .gd-fig img, .gd-figs .gd-fig img { max-height: none; }
  .gd-fig--phone img { max-height: 70dvh; }
  .gd-narrow { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .gd-slide__inner { padding: 22px 16px 28px; }
  .gd-nav { gap: 8px; padding: 8px 12px; }
  .gd-nav .cu-btn span { display: none; }
  .gd-trail li + li::before { width: 8px; }
  .gd-trail .is-current .gd-trail__name { display: none; }
  .gd-counter { display: none; }
  .gd-table thead { display: none; }
  .gd-table, .gd-table tbody, .gd-table tr, .gd-table td { display: block; }
  .gd-table td + td { border-left: none; }
  .gd-table tr + tr td:first-child { border-top: 1.5px solid var(--moss); }
}
@media (prefers-reduced-motion: reduce) {
  .gd-track, .gd-progress__fill { transition: none; }
}

/* the cover intro keeps its own spacing (".gd-slide p" would otherwise win) */
.gd-slide .gd-intro { margin: 14px 0 32px; }

/* shorter laptop screens: tighter type so slides fit without scrolling */
@media (max-height: 800px) and (min-width: 1001px) {
  .gd-slide__inner { padding-top: 20px; padding-bottom: 16px; }
  .gd-slide h2 { font-size: 28px; }
  .gd-slide h3 { margin-top: 14px; font-size: 17px; }
  .gd-slide p, .gd-slide li, .gd-slide dd { font-size: 15.5px; line-height: 1.5; }
  .gd-lead { font-size: 16.5px !important; }
  .gd-steps { gap: 8px; margin: 12px 0; }
  .gd-done { padding: 8px 14px; }
  .gd-box { margin-top: 12px; padding: 12px 16px; }
  .gd-box li { font-size: 14.5px !important; }
  .gd-list { gap: 8px; }
  .gd-table th, .gd-table td { padding: 8px 14px; font-size: 15px; }
  .gd-fig img { max-height: calc(100dvh - 220px); }
  .gd-figs { gap: 12px; }
  .gd-figs .gd-fig img { max-height: calc((100dvh - 250px) / 2); }
  .gd-fig--phone img { max-height: calc(100dvh - 200px); }
  .gd-slide .gd-intro { margin-bottom: 20px; font-size: 17px; }
  .gd-stop__link { padding: 14px; }
}

/* phones: previous / next as icons, a compact trail */
@media (max-width: 640px) {
  .gd-nav .cu-btn { padding: 8px 10px; }
  .gd-trail { flex: 1; justify-content: center; }
  .gd-trail button { padding: 4px 2px; }
  .gd-trail__dot { width: 20px; height: 20px; border-width: 2px; font-size: 10px; }
  .gd-trail li + li::before { width: 6px; }
  .gd-hint { bottom: 64px; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
}