/* базовое ограничение фото на этой странице */
.sg-photo {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
}

/* ===========================
   SECTION 1: JOURNAL HERO
   =========================== */

.sg-jhero {
  padding-block: 4.8rem 4.6rem;
}

.sg-jhero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-jhero__copy {
  position: relative;
  padding: 1.8rem 1.9rem 2rem;
  border-radius: 2rem;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 20px 45px rgba(147, 180, 219, 0.5);
}

.sg-jhero__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-jhero__title {
  margin: 0 0 1rem;
  font-size: 1.7rem;
  line-height: 1.2;
}

.sg-jhero__lead {
  margin: 0 0 1rem;
  font-size: 0.96rem;
  color: var(--sg-text-soft);
}

.sg-jhero__points {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

.sg-jhero__points li + li {
  margin-top: 0.35rem;
}

/* media stack */

.sg-jhero__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
}

.sg-jhero__card {
  margin: 0;
  padding: 0.46rem 0.46rem 0.65rem;
  border-radius: 1.8rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 14px 32px rgba(144, 177, 217, 0.5);
  transition:
    transform var(--sg-transition-med),
    box-shadow var(--sg-transition-med),
    border-color var(--sg-transition-med);
}

.sg-jhero__card--open {
  margin-bottom: 0.9rem;
  transform-origin: 12% 0%;
}

.sg-jhero__card--handwritten {
  transform-origin: 80% 100%;
}

.sg-jhero__image {
  border-radius: 1.5rem;
}

.sg-jhero__caption {
  margin: 0.4rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

.sg-jhero__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 38px rgba(144, 177, 217, 0.72),
    0 0 20px rgba(15, 169, 197, 0.18);
  border-color: rgba(139, 197, 241, 0.98);
}

/* ===========================
   SECTION 2: JOURNAL LAYOUTS
   =========================== */

.sg-layouts {
  padding-block: 4.6rem;
}

.sg-layouts__header {
  max-width: 42rem;
  margin: 0 auto 2rem;
}

.sg-layouts__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-layouts__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-layouts__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-layouts__grid {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.sg-layouts__card {
  margin: 0;
  padding: 0.85rem 0.9rem 1.05rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(184, 210, 241, 0.95);
  box-shadow: 0 14px 32px rgba(144, 177, 217, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sg-layouts__figure {
  margin: 0;
}

.sg-layouts__image {
  border-radius: 1.2rem;
}

.sg-layouts__card-title {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.98rem;
}

.sg-layouts__card-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

/* ===========================
   SECTION 3: ENTRY TYPES
   =========================== */

.sg-entrytypes {
  padding-block: 4.6rem 4.8rem;
}

.sg-entrytypes__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-entrytypes__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(237, 247, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-entrytypes__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-entrytypes__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-entrytypes__text {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-entrytypes__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sg-entrytypes__chip {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: rgba(221, 234, 250, 0.95);
  border: 1px solid rgba(184, 210, 241, 0.95);
  color: var(--sg-text-muted);
}

/* media column */

.sg-entrytypes__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
}

.sg-entrytypes__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
  transition:
    transform var(--sg-transition-med),
    box-shadow var(--sg-transition-med),
    border-color var(--sg-transition-med);
}

.sg-entrytypes__card--icons {
  margin-bottom: 0.8rem;
  transform-origin: 10% 0%;
}

.sg-entrytypes__card--sketch {
  transform-origin: 80% 100%;
}

.sg-entrytypes__image {
  border-radius: 1.3rem;
}

.sg-entrytypes__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

.sg-entrytypes__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 32px rgba(144, 177, 217, 0.7),
    0 0 20px rgba(15, 169, 197, 0.18);
  border-color: rgba(139, 197, 241, 0.98);
}

/* ===========================
   RESPONSIVE (SECTIONS 1–3)
   =========================== */

@media (max-width: 960px) {
  .sg-jhero__layout,
  .sg-entrytypes__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (max-width: 840px) {
  .sg-jhero__layout,
  .sg-entrytypes__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sg-jhero__media,
  .sg-entrytypes__media {
    margin-top: 1.2rem;
    justify-self: flex-start;
  }

  .sg-layouts__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .sg-jhero__copy,
  .sg-entrytypes__copy {
    padding: 1.4rem 1.3rem 1.6rem;
    border-radius: 1.8rem;
  }

  .sg-layouts__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .sg-jhero__media,
  .sg-entrytypes__media {
    max-width: 300px;
  }
}
/* ===========================
   SECTION 4: BEFORE & AFTER
   =========================== */

.sg-beforeafter {
  padding-block: 4.6rem;
}

.sg-beforeafter__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-beforeafter__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-beforeafter__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-beforeafter__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-beforeafter__text {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-beforeafter__rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sg-beforeafter__row {
  padding: 0.6rem 0.75rem;
  border-radius: 1.3rem;
  background: linear-gradient(
    145deg,
    rgba(244, 249, 255, 0.98),
    rgba(230, 241, 253, 0.98)
  );
  border: 1px solid rgba(184, 210, 241, 0.95);
}

.sg-beforeafter__row-title {
  margin: 0 0 0.2rem;
  font-size: 0.94rem;
}

.sg-beforeafter__row-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--sg-text-soft);
}

/* media side */

.sg-beforeafter__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
}

.sg-beforeafter__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
  transition:
    transform var(--sg-transition-med),
    box-shadow var(--sg-transition-med),
    border-color var(--sg-transition-med);
}

.sg-beforeafter__card--kitchen {
  margin-bottom: 0.8rem;
  transform-origin: 10% 0%;
}

.sg-beforeafter__card--evening {
  transform-origin: 80% 100%;
}

.sg-beforeafter__image {
  border-radius: 1.3rem;
}

.sg-beforeafter__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

.sg-beforeafter__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 32px rgba(144, 177, 217, 0.7),
    0 0 20px rgba(15, 169, 197, 0.18);
  border-color: rgba(139, 197, 241, 0.98);
}

/* ===========================
   SECTION 5: PROMPT CARDS
   =========================== */

.sg-prompts {
  padding-block: 4.6rem;
}

.sg-prompts__header {
  max-width: 42rem;
  margin: 0 auto 2rem;
}

.sg-prompts__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-prompts__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-prompts__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-prompts__grid {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.sg-prompts__card {
  margin: 0;
  padding: 0.85rem 0.9rem 1rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(184, 210, 241, 0.95);
  box-shadow: 0 14px 32px rgba(144, 177, 217, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sg-prompts__figure {
  margin: 0;
}

.sg-prompts__image {
  border-radius: 1.2rem;
}

.sg-prompts__card-title {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.98rem;
}

.sg-prompts__card-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

/* ===========================
   SECTION 6: WEEK STRIP
   =========================== */

.sg-weekstrip {
  padding-block: 4.6rem 4.8rem;
}

.sg-weekstrip__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-weekstrip__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(237, 247, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-weekstrip__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-weekstrip__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-weekstrip__text {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-weekstrip__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

.sg-weekstrip__list li + li {
  margin-top: 0.35rem;
}

/* media column */

.sg-weekstrip__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.sg-weekstrip__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
  transition:
    transform var(--sg-transition-med),
    box-shadow var(--sg-transition-med),
    border-color var(--sg-transition-med);
}

.sg-weekstrip__image {
  border-radius: 1.3rem;
}

.sg-weekstrip__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

.sg-weekstrip__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 32px rgba(144, 177, 217, 0.7),
    0 0 20px rgba(15, 169, 197, 0.18);
  border-color: rgba(139, 197, 241, 0.98);
}

/* ===========================
   RESPONSIVE: SECTIONS 4–6
   =========================== */

@media (max-width: 960px) {
  .sg-beforeafter__layout,
  .sg-weekstrip__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (max-width: 840px) {
  .sg-beforeafter__layout,
  .sg-weekstrip__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sg-beforeafter__media,
  .sg-weekstrip__media {
    margin-top: 1.2rem;
    justify-self: flex-start;
  }

  .sg-prompts__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .sg-beforeafter__copy,
  .sg-weekstrip__copy {
    padding: 1.4rem 1.3rem 1.6rem;
    border-radius: 1.8rem;
  }

  .sg-prompts__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .sg-beforeafter__media,
  .sg-weekstrip__media {
    max-width: 300px;
  }
}
/* ===========================
   SECTION 7: SNAPSHOT LANE
   =========================== */

.sg-snapshots {
  padding-block: 4.6rem;
}

.sg-snapshots__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sg-snapshots__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-snapshots__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-snapshots__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-snapshots__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

/* media side */

.sg-snapshots__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
}

.sg-snapshots__card {
  margin: 0;
  padding: 0.4rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
}

.sg-snapshots__card--wide {
  margin-bottom: 0.9rem;
}

.sg-snapshots__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.sg-snapshots__image {
  border-radius: 1.3rem;
}

.sg-snapshots__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

/* ===========================
   SECTION 8: POCKET STORAGE
   =========================== */

.sg-pocket {
  padding-block: 4.6rem;
}

.sg-pocket__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-pocket__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(237, 247, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-pocket__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-pocket__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-pocket__text {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-pocket__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

.sg-pocket__list li + li {
  margin-top: 0.35rem;
}

/* media */

.sg-pocket__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
}

.sg-pocket__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
}

.sg-pocket__card--inside {
  margin-bottom: 0.8rem;
}

.sg-pocket__image {
  border-radius: 1.3rem;
}

.sg-pocket__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

/* ===========================
   SECTION 9: MARKERS BAND
   =========================== */

.sg-markers {
  padding-block: 4.6rem 4.8rem;
}

.sg-markers__header {
  max-width: 42rem;
  margin: 0 auto 2rem;
}

.sg-markers__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-markers__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-markers__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

/* strip */

.sg-markers__strip {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.sg-markers__item {
  margin: 0;
  padding: 0.85rem 0.9rem 1.05rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(184, 210, 241, 0.95);
  box-shadow: 0 14px 32px rgba(144, 177, 217, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sg-markers__figure {
  margin: 0;
}

.sg-markers__image {
  border-radius: 1.2rem;
}

.sg-markers__item-title {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.98rem;
}

.sg-markers__item-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

/* ===========================
   RESPONSIVE: SECTIONS 7–9
   =========================== */

@media (max-width: 960px) {
  .sg-snapshots__layout,
  .sg-pocket__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (max-width: 840px) {
  .sg-snapshots__layout,
  .sg-pocket__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sg-snapshots__media,
  .sg-pocket__media {
    margin-top: 1.2rem;
    justify-self: flex-start;
  }

  .sg-markers__strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .sg-snapshots__copy,
  .sg-pocket__copy {
    padding: 1.4rem 1.3rem 1.6rem;
    border-radius: 1.8rem;
  }

  .sg-markers__strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .sg-snapshots__media,
  .sg-pocket__media {
    max-width: 300px;
  }
}
/* ===========================
   SECTION 10: QUICK LINES
   =========================== */

.sg-quicklines {
  padding-block: 4.6rem;
}

.sg-quicklines__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-quicklines__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-quicklines__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-quicklines__title {
  margin: 0 0 0.8rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-quicklines__text {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

/* pills */

.sg-quicklines__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sg-quicklines__pill {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: rgba(221, 234, 250, 0.95);
  border: 1px solid rgba(184, 210, 241, 0.95);
  color: var(--sg-text-muted);
}

/* media */

.sg-quicklines__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.sg-quicklines__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
  transition:
    transform var(--sg-transition-med),
    box-shadow var(--sg-transition-med),
    border-color var(--sg-transition-med);
}

.sg-quicklines__image {
  border-radius: 1.3rem;
}

.sg-quicklines__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

.sg-quicklines__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 32px rgba(144, 177, 217, 0.7),
    0 0 20px rgba(15, 169, 197, 0.18);
  border-color: rgba(139, 197, 241, 0.98);
}

/* ===========================
   SECTION 11: SHARED PAGES
   =========================== */

.sg-sharing {
  padding-block: 4.6rem;
}

.sg-sharing__header {
  max-width: 40rem;
  margin: 0 auto 1.8rem;
  text-align: left;
}

.sg-sharing__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-sharing__title {
  margin: 0 0 0.8rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-sharing__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

/* grid */

.sg-sharing__grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.sg-sharing__card {
  margin: 0;
  padding: 0.85rem 0.9rem 1.05rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(184, 210, 241, 0.95);
  box-shadow: 0 14px 32px rgba(144, 177, 217, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sg-sharing__figure {
  margin: 0;
}

.sg-sharing__image {
  border-radius: 1.2rem;
}

.sg-sharing__card-title {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.98rem;
}

.sg-sharing__card-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

/* ===========================
   SECTION 12: COLOUR KEYS
   =========================== */

.sg-colours {
  padding-block: 4.6rem 4.8rem;
}

.sg-colours__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-colours__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(237, 247, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-colours__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-colours__title {
  margin: 0 0 0.8rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-colours__text {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-colours__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

.sg-colours__list li + li {
  margin-top: 0.3rem;
}

/* media */

.sg-colours__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.sg-colours__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
}

.sg-colours__image {
  border-radius: 1.3rem;
}

.sg-colours__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

/* ===========================
   RESPONSIVE: SECTIONS 10–12
   =========================== */

@media (max-width: 960px) {
  .sg-quicklines__layout,
  .sg-colours__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (max-width: 840px) {
  .sg-quicklines__layout,
  .sg-colours__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sg-quicklines__media,
  .sg-colours__media {
    margin-top: 1.2rem;
    justify-self: flex-start;
  }

  .sg-sharing__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .sg-quicklines__copy,
  .sg-colours__copy {
    padding: 1.4rem 1.3rem 1.6rem;
    border-radius: 1.8rem;
  }
}

@media (max-width: 420px) {
  .sg-quicklines__media,
  .sg-colours__media {
    max-width: 300px;
  }
}
/* ===========================
   SECTION 13: MARGIN SIGNS
   =========================== */

.sg-margins {
  padding-block: 4.6rem;
}

.sg-margins__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-margins__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px dashed rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-margins__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-margins__title {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-margins__text {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-margins__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

.sg-margins__list li + li {
  margin-top: 0.32rem;
}

/* media */

.sg-margins__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.sg-margins__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
  transition:
    transform var(--sg-transition-med),
    box-shadow var(--sg-transition-med),
    border-color var(--sg-transition-med);
}

.sg-margins__image {
  border-radius: 1.3rem;
}

.sg-margins__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

.sg-margins__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 32px rgba(144, 177, 217, 0.7),
    0 0 20px rgba(15, 169, 197, 0.18);
  border-color: rgba(139, 197, 241, 0.98);
}

/* ===========================
   SECTION 14: NIGHT WINDOW
   =========================== */

.sg-night {
  padding-block: 4.6rem;
}

.sg-night__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: 3rem;
  align-items: center;
}

.sg-night__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.sg-night__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: radial-gradient(
    circle at 20% 0%,
    rgba(62, 118, 186, 0.35),
    rgba(14, 53, 99, 0.85)
  );
  border: 1px solid rgba(116, 160, 210, 0.9);
  box-shadow: 0 16px 34px rgba(16, 33, 63, 0.8);
}

.sg-night__image {
  border-radius: 1.3rem;
  filter: saturate(1.05);
}

.sg-night__caption {
  margin: 0.38rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(228, 239, 255, 0.9);
}

.sg-night__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-night__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-night__title {
  margin: 0 0 0.8rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-night__text {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-night__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

.sg-night__list li + li {
  margin-top: 0.3rem;
}

/* ===========================
   SECTION 15: LABELS & TAGS
   =========================== */

.sg-tags {
  padding-block: 4.6rem 4.8rem;
}

.sg-tags__wrap {
  border-radius: 2.2rem;
  padding: 1.8rem 1.9rem 2.1rem;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 20px 45px rgba(147, 180, 219, 0.5);
}

.sg-tags__intro {
  max-width: 38rem;
  margin-bottom: 1.6rem;
}

.sg-tags__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-tags__title {
  margin: 0 0 0.8rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-tags__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

/* strip */

.sg-tags__strip {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.sg-tags__item {
  margin: 0;
  padding: 0.85rem 0.9rem 1.05rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(184, 210, 241, 0.95);
  box-shadow: 0 14px 32px rgba(144, 177, 217, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sg-tags__figure {
  margin: 0;
}

.sg-tags__image {
  border-radius: 1.2rem;
}

.sg-tags__item-title {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.98rem;
}

.sg-tags__item-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

/* ===========================
   RESPONSIVE: SECTIONS 13–15
   =========================== */

@media (max-width: 960px) {
  .sg-margins__layout,
  .sg-night__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 840px) {
  .sg-margins__layout,
  .sg-night__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sg-margins__media,
  .sg-night__media {
    margin-top: 1.2rem;
    justify-self: flex-start;
  }

  .sg-tags__strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .sg-margins__copy,
  .sg-night__copy,
  .sg-tags__wrap {
    padding: 1.4rem 1.3rem 1.6rem;
    border-radius: 1.8rem;
  }

  .sg-tags__strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .sg-margins__media,
  .sg-night__media {
    max-width: 300px;
  }
}
/* ===========================
   SECTION 16: SEASON INDEX
   =========================== */

.sg-index {
  padding-block: 4.6rem;
}

.sg-index__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sg-index__copy {
  position: relative;
  padding: 1.6rem 1.8rem 1.9rem;
  border-radius: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 18px 40px rgba(147, 180, 219, 0.5);
}

.sg-index__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-index__title {
  margin: 0 0 0.8rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-index__text {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-index__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

.sg-index__list li + li {
  margin-top: 0.3rem;
}

/* media */

.sg-index__media {
  position: relative;
  max-width: 360px;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.sg-index__card {
  margin: 0;
  padding: 0.42rem 0.42rem 0.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(179, 208, 241, 0.95);
  box-shadow: 0 12px 28px rgba(144, 177, 217, 0.5);
}

.sg-index__image {
  border-radius: 1.3rem;
}

.sg-index__caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}

/* ===========================
   SECTION 17: OFF-SEASON SHELF
   =========================== */

.sg-offseason {
  padding-block: 4.6rem 4.8rem;
}

.sg-offseason__wrap {
  border-radius: 2.2rem;
  padding: 1.8rem 1.9rem 2.1rem;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 246, 255, 0.98)
  );
  border: 1px solid rgba(181, 209, 241, 0.95);
  box-shadow: 0 20px 45px rgba(147, 180, 219, 0.5);
}

.sg-offseason__copy {
  max-width: 40rem;
  margin-bottom: 1.6rem;
}

.sg-offseason__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
  margin: 0 0 0.7rem;
}

.sg-offseason__title {
  margin: 0 0 0.8rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sg-offseason__text {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  color: var(--sg-text-soft);
}

.sg-offseason__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

.sg-offseason__list li + li {
  margin-top: 0.3rem;
}

/* strip */

.sg-offseason__strip {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.sg-offseason__item {
  margin: 0;
  padding: 0.85rem 0.9rem 1.05rem;
  border-radius: 1.6rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(235, 245, 255, 0.98)
  );
  border: 1px solid rgba(184, 210, 241, 0.95);
  box-shadow: 0 14px 32px rgba(144, 177, 217, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sg-offseason__figure {
  margin: 0;
}

.sg-offseason__image {
  border-radius: 1.2rem;
}

.sg-offseason__item-title {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.98rem;
}

.sg-offseason__item-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sg-text-soft);
}

/* ===========================
   RESPONSIVE: SECTIONS 16–17
   =========================== */

@media (max-width: 960px) {
  .sg-index__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (max-width: 840px) {
  .sg-index__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sg-index__media {
    margin-top: 1.2rem;
    justify-self: flex-start;
  }

  .sg-offseason__strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .sg-index__copy,
  .sg-offseason__wrap {
    padding: 1.4rem 1.3rem 1.6rem;
    border-radius: 1.8rem;
  }
}