/* PodcaCity - "איך מתחילים" (getting-started.php): the studio's first steps.
   The site's dark look (the landing page's cards, cyan / purple / pink).
   Mobile first - a phone in the studio is where it is read - widening to a
   reading column on a computer, where each step's text and the app's screen
   sit side by side. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: #080B0F;
  color: #F0F4F8;
  font-family: 'Heebo', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: rgba(0,229,255,0.25); }

.gs-app { min-height: 100vh; display: flex; flex-direction: column; }
.gs { width: 100%; max-width: 820px; margin: 0 auto; padding: 8px 16px 48px; flex: 1; }

/* ── The top: what this is, and the steps to jump to ─────────────────────── */
.gs-hero { padding: 20px 0 8px; }
.gs-hero__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #00E5FF; background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.25);
  border-radius: 999px; padding: 3px 10px;
}
.gs-hero__title {
  margin: 12px 0 6px; font-size: 32px; line-height: 1.15; font-weight: 900;
  background: linear-gradient(135deg,#00E5FF 0%,#8B2FFF 55%,#FF2D8C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gs-hero__sub { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: #8899AA; }

.gs-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-toc__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: #0D1117; border: 1px solid #1E2530;
  font-size: 13px; font-weight: 500; color: #C8D2DC; text-decoration: none;
}
.gs-toc__num {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,229,255,0.12); color: #00E5FF; font: 700 11px/1 'Space Mono', monospace;
}
@media (hover: hover) and (pointer: fine) {
  .gs-toc__item { transition: border-color .16s ease, color .16s ease; }
  .gs-toc__item:hover { border-color: rgba(0,229,255,0.45); color: #fff; }
}

/* ── A step ───────────────────────────────────────────────────────────────── */
.gs-steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: none; }
.gs-step {
  position: relative; overflow: hidden;
  background: #0D1117; border: 1px solid #1E2530; border-radius: 18px;
  padding: 16px; scroll-margin-top: 16px;
}
/* The thin light along the top edge the landing page's cards have, taking
   turns in the brand's three colours. */
.gs-step__sheen { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(0,229,255,0.4),transparent); }
.gs-step:nth-child(3n+2) .gs-step__sheen { background: linear-gradient(90deg,transparent,rgba(139,47,255,0.45),transparent); }
.gs-step:nth-child(3n) .gs-step__sheen   { background: linear-gradient(90deg,transparent,rgba(255,45,140,0.45),transparent); }

.gs-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gs-step__num {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg,#00E5FF,#8B2FFF); color: #fff;
  font: 700 16px/1 'Space Mono', monospace;
  box-shadow: 0 4px 18px rgba(0,229,255,0.2);
}
.gs-step__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.gs-tag {
  margin-inline-start: auto; flex: none;
  font-size: 11px; font-weight: 700; color: #FF2D8C;
  background: rgba(255,45,140,0.08); border: 1px solid rgba(255,45,140,0.3);
  border-radius: 999px; padding: 2px 9px;
}

.gs-step__photo { margin: 0 0 14px; border-radius: 12px; overflow: hidden; background: #131920; aspect-ratio: 1280 / 791; }
.gs-step__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gs-step__main { display: flex; flex-direction: column; gap: 16px; }
.gs-step__text p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.75; color: #C8D2DC; }
.gs-step__text p:last-child { margin-bottom: 0; }
.gs-step__text strong { color: #F0F4F8; font-weight: 700; }

/* A thing to remember - the end of the session, a hands-off part. */
.gs-note {
  position: relative; margin-top: 12px !important;
  padding: 10px 12px 10px 12px; padding-inline-start: 34px;
  background: rgba(255,184,0,0.06); border: 1px solid rgba(255,184,0,0.25); border-radius: 10px;
  font-size: 14px !important; color: #F3D27A !important;
}
.gs-note::before {
  content: '!'; position: absolute; inset-inline-start: 11px; top: 11px;
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: #F3D27A; color: #0D1117; font: 700 11px/1 'Heebo', sans-serif;
}

/* The app's screen, in a phone's frame. */
.gs-phone { margin: 0 auto; width: 210px; flex: none; text-align: center; }
.gs-phone img {
  display: block; width: 100%; height: auto;
  border-radius: 26px; border: 6px solid #1A212B; background: #080B0F;
  box-shadow: 0 0 0 1px #2A3340, 0 10px 36px rgba(0,0,0,0.5), 0 0 40px rgba(0,229,255,0.08);
}
.gs-phone__cap { margin-top: 8px; font-size: 12px; color: #8899AA; }

/* The last step has no room photo - the app is the step - so it leads. */
.gs-step--nophoto .gs-step__main { align-items: center; }

/* ── Before leaving ───────────────────────────────────────────────────────── */
.gs-end {
  margin-top: 26px; padding: 18px 16px;
  border-radius: 18px; border: 1px solid rgba(0,229,255,0.25);
  background: linear-gradient(160deg, rgba(0,229,255,0.07), rgba(139,47,255,0.05) 60%, rgba(255,45,140,0.05));
}
.gs-end__title { margin: 0 0 10px; font-size: 19px; font-weight: 700; }
.gs-end__list { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gs-end__list li { position: relative; padding-inline-start: 26px; font-size: 15px; color: #C8D2DC; }
.gs-end__list li::before {
  content: ''; position: absolute; inset-inline-start: 2px; top: 5px; width: 14px; height: 14px;
  border-radius: 4px; border: 1.5px solid #00E5FF;
}
.gs-end__help { margin: 0; font-size: 14px; color: #8899AA; }
.gs-end__help a { color: #00E5FF; font-weight: 700; text-decoration: none; }

/* ── A computer: the text beside the app's screen ─────────────────────────── */
@media (min-width: 760px) {
  .gs { padding: 16px 24px 64px; }
  .gs-hero { padding-top: 32px; }
  .gs-hero__title { font-size: 42px; }
  .gs-hero__sub { font-size: 16px; }
  .gs-step { padding: 22px; }
  .gs-step__title { font-size: 22px; }
  .gs-step--app .gs-step__main { flex-direction: row; align-items: flex-start; gap: 28px; }
  .gs-step--app .gs-step__text { flex: 1; }
  .gs-step--app .gs-phone { margin: 0; width: 220px; }
  .gs-step--nophoto .gs-step__main { flex-direction: row-reverse; justify-content: flex-end; }
}

/* ── Back to the studio (a session running now) ───────────────────────────── */
.gs-back {
  position: fixed; z-index: 50;
  left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 13px 22px; border-radius: 999px;
  background: linear-gradient(135deg,#00E5FF 0%,#8B2FFF 50%,#FF2D8C 100%);
  color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 28px rgba(0,229,255,0.3), 0 2px 10px rgba(0,0,0,0.5);
}
.gs-back__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: gsPulse 1.6s ease-in-out infinite; }
@keyframes gsPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* Room under it, so the page's end is not hidden behind the button. */
.has-back .gs-app { padding-bottom: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gs-back__dot { animation: none; }
}