/* Visual guides: platform map & student journey — curvy paths, soft shapes */

.guide-page {
  --guide-curve: cubic-bezier(0.4, 0, 0.2, 1);
  --guide-glow: rgba(116, 125, 239, 0.18);
}

.guide-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(3rem, 8vw, 5rem);
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(116, 125, 239, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 10%, rgba(223, 105, 81, 0.14), transparent 50%),
    radial-gradient(ellipse 60% 40% at 70% 80%, rgba(121, 185, 60, 0.12), transparent 45%),
    linear-gradient(165deg, var(--prod-section) 0%, var(--prod-white) 48%, var(--prod-section) 100%);
  border-bottom: 1px solid var(--prod-border);
}

.guide-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.guide-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prod-indigo);
  margin-bottom: 0.75rem;
}

.guide-hero__title {
  font-weight: 800;
  font-size: clamp(1.85rem, 4.5vw, 2.65rem);
  line-height: 1.15;
  color: var(--prod-text);
  margin-bottom: 0.75rem;
}

.guide-hero__lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--prod-text-muted);
  max-width: 36rem;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}

.guide-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  align-items: center;
}

.guide-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.45;
  pointer-events: none;
}

.guide-hero__blob--1 {
  width: min(320px, 50vw);
  height: min(320px, 50vw);
  background: var(--prod-purple);
  top: -8%;
  right: -5%;
}

.guide-hero__blob--2 {
  width: min(260px, 40vw);
  height: min(260px, 40vw);
  background: var(--prod-coral);
  bottom: 5%;
  left: -8%;
}

.guide-wave {
  display: block;
  width: 100%;
  height: clamp(48px, 8vw, 72px);
  margin-top: -1px;
  color: var(--prod-white);
}

.guide-section {
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.guide-section__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.guide-section__title {
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin-bottom: 0.5rem;
  color: var(--prod-text);
}

.guide-section__sub {
  color: var(--prod-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Curvy connector between sections (decorative SVG) */
.guide-curve-divider {
  width: 100%;
  max-width: 520px;
  margin: 2rem auto;
  height: 40px;
  color: var(--prod-border);
}

.guide-curve-divider path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

/* Role cards */
.guide-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.guide-role-card {
  position: relative;
  border-radius: 1.15rem;
  padding: 1.35rem 1.35rem 1.25rem;
  background: var(--prod-white);
  border: 1px solid var(--prod-border);
  box-shadow: 0 8px 28px rgba(47, 40, 30, 0.06);
  transition: transform 0.25s var(--guide-curve), box-shadow 0.25s var(--guide-curve);
  height: 100%;
}

.guide-role-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(47, 40, 30, 0.09);
}

.guide-role-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
}

.guide-role-card__icon--admin {
  background: linear-gradient(135deg, rgba(98, 55, 255, 0.15), rgba(116, 125, 239, 0.12));
  color: var(--prod-indigo);
}

.guide-role-card__icon--teacher {
  background: linear-gradient(135deg, rgba(116, 125, 239, 0.18), rgba(86, 117, 146, 0.1));
  color: var(--prod-purple);
}

.guide-role-card__icon--student {
  background: linear-gradient(135deg, rgba(121, 185, 60, 0.2), rgba(116, 125, 239, 0.08));
  color: var(--prod-green);
}

.guide-role-card__title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.guide-role-card__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--prod-text-muted);
  line-height: 1.55;
}

.guide-role-card__list li {
  margin-bottom: 0.35rem;
}

/* Horizontal flow loop */
.guide-loop {
  position: relative;
  padding: 1.5rem 0 2rem;
}

.guide-loop__svg {
  width: 100%;
  height: auto;
  max-height: 120px;
  margin-bottom: 0.5rem;
  color: var(--prod-purple);
}

.guide-loop__svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.guide-loop__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  text-align: center;
}

.guide-loop__step {
  padding: 0.65rem 0.5rem;
  border-radius: 0.85rem;
  background: var(--prod-section);
  border: 1px solid var(--prod-border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--prod-text);
}

.guide-loop__step small {
  display: block;
  font-weight: 400;
  color: var(--prod-text-muted);
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

/* Feature mosaic */
.guide-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
}

.guide-mosaic__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: var(--prod-white);
  border: 1px solid var(--prod-border);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--prod-text-muted);
}

.guide-mosaic__item i {
  font-size: 1.15rem;
  color: var(--prod-purple);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.guide-mosaic__item strong {
  display: block;
  color: var(--prod-text);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* ——— Student journey ——— */

.guide-student-hero {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
  border-radius: 0 0 1.5rem 1.5rem;
  background:
    radial-gradient(ellipse 100% 80% at 50% -20%, var(--guide-glow), transparent 55%),
    linear-gradient(145deg, #f5f7fc 0%, var(--prod-white) 55%, #eef6f0 100%);
  border: 1px solid var(--prod-border);
  border-top: none;
  margin: -1px -1px 2rem -1px;
}

@media (min-width: 992px) {
  .guide-student-hero {
    border-radius: 0 0 2rem 2rem;
    margin: -1px -2rem 2.5rem -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.guide-student-hero__title {
  font-weight: 800;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.guide-student-hero__lead {
  color: var(--prod-text-muted);
  max-width: 38rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}

/* Vertical flow with curvy spine */
.guide-student-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
  max-width: 820px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .guide-student-flow {
    grid-template-columns: 72px 1fr;
    gap: 0 1.75rem;
  }
}

.guide-student-flow__track {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  min-height: 200px;
}

.guide-student-flow__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.guide-student-flow__svg .guide-spine {
  fill: none;
  stroke: url(#guideSpineGradient);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-student-flow__svg .guide-spine-dot {
  fill: var(--prod-white);
  stroke: var(--prod-purple);
  stroke-width: 2.5;
}

.guide-step-card {
  position: relative;
  margin-bottom: 1.75rem;
  padding: 1.15rem 1.25rem 1.2rem 1.35rem;
  border-radius: 1.1rem;
  background: var(--prod-white);
  border: 1px solid var(--prod-border);
  box-shadow: 0 6px 22px rgba(47, 40, 30, 0.05);
}

.guide-step-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--prod-purple), var(--prod-green));
  opacity: 0.85;
}

.guide-step-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 1rem;
  padding-left: 0.35rem;
}

.guide-step-card__num {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--prod-purple), var(--prod-indigo));
  color: var(--prod-white);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(116, 125, 239, 0.35);
}

.guide-step-card__body {
  flex: 1;
  min-width: 0;
}

.guide-step-card__title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.guide-step-card__title i {
  color: var(--prod-purple);
  font-size: 1.1rem;
}

.guide-step-card__text {
  font-size: 0.9rem;
  color: var(--prod-text-muted);
  line-height: 1.6;
  margin-bottom: 0.65rem;
}

.guide-step-card__cta {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Ideas strip */
.guide-ideas {
  margin-top: 2.5rem;
  padding: 1.75rem 1.25rem 1.85rem;
  border-radius: 1.25rem;
  background:
    linear-gradient(135deg, rgba(116, 125, 239, 0.08) 0%, transparent 45%),
    linear-gradient(225deg, rgba(121, 185, 60, 0.07) 0%, transparent 40%),
    var(--prod-section);
  border: 1px dashed var(--prod-border);
}

.guide-ideas__title {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.guide-ideas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.guide-idea-chip {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: var(--prod-white);
  border: 1px solid var(--prod-border);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--prod-text-muted);
}

.guide-idea-chip__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: rgba(255, 153, 0, 0.15);
  color: var(--prod-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guide-breadcrumb {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.guide-breadcrumb a {
  color: var(--prod-text-muted);
  text-decoration: none;
}

.guide-breadcrumb a:hover {
  color: var(--prod-purple);
  text-decoration: underline;
}