.extend-page {
  background:
    radial-gradient(circle at 78% 10%, rgba(15,99,246,.08), transparent 24rem),
    radial-gradient(circle at 12% 24%, rgba(34,78,132,.16), transparent 28rem),
    #040506;
}

.extend-page main { overflow: hidden; }

.extend-shell {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.extend-kicker {
  margin: 0;
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.extend-kicker span { margin-inline: 7px; color: var(--soft); }

.extend-opening,
.extend-section,
.extend-close {
  scroll-margin-top: 92px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.extend-opening {
  padding: 88px clamp(20px, 5.5vw, 78px) clamp(22px, 2.4vw, 34px);
  background:
    radial-gradient(circle at 72% 28%, rgba(15,99,246,.07), transparent 23rem),
    linear-gradient(180deg, rgba(9,18,32,.7), rgba(4,5,6,.98) 72%);
}

.extend-section {
  padding: clamp(26px, 3vw, 40px) clamp(20px, 5.5vw, 78px);
}

.extend-close {
  padding: clamp(34px, 3.8vw, 52px) clamp(20px, 5.5vw, 78px);
  background:
    radial-gradient(circle at 18% 34%, rgba(15,99,246,.1), transparent 23rem),
    #040506;
}

.extend-opening h1,
.extend-section h2,
.extend-close h2 {
  margin: 0;
  font-family: var(--condensed);
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
  text-wrap: balance;
}

.extend-opening h1 {
  max-width: 680px;
  margin-top: 12px;
  font-size: clamp(28px, 2.45vw, 42px);
}

.extend-opening h1 span,
.extend-section h2 span,
.extend-close h2 span {
  display: block;
  color: var(--orange);
}

.extend-section h2,
.extend-close h2 {
  margin-top: 8px;
  font-size: clamp(23px, 1.75vw, 32px);
}

.opening-simple {
  max-width: 760px;
}

.opening-simple p:not(.extend-kicker) {
  max-width: 620px;
  margin: 12px 0 0;
  color: #d7dee8;
  font-size: clamp(15px, .95vw, 17px);
  line-height: 1.42;
}

.control-grid,
.moments-heading,
.conversation-grid,
.parent-role,
.habit-grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(380px, .78fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

.control-grid > div:first-child p,
.moments-heading p,
.parent-role p,
.habit-grid p,
.simple-close p {
  margin: 0;
  color: #d7dee8;
  font-size: clamp(15px, .96vw, 17px);
  line-height: 1.48;
}

.conversation-list article,
.habit-flow article {
  padding: 14px;
  border: 1px solid rgba(98,141,192,.22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20,38,62,.88), rgba(7,13,22,.96));
}

.conversation-list span,
.habit-flow span {
  display: block;
  color: var(--yellow);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.conversation-list p,
.habit-flow p {
  margin: 8px 0 0;
  color: #edf3fb;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.conversation-list b,
.habit-flow b { color: var(--yellow); }

.habit-flow i {
  align-self: center;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(15,99,246,.35), rgba(45,134,255,.86));
}

.habit-flow i::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-left: auto;
  transform: translateY(-3px) rotate(45deg);
  border-top: 2px solid var(--yellow);
  border-right: 2px solid var(--yellow);
}

.curiosity-takeaway {
  margin: 18px auto 0;
  padding-top: 10px;
  border-top: 2px solid var(--orange);
  color: white;
  font-family: var(--condensed);
  font-size: clamp(20px, 1.45vw, 26px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.control-section,
.conversation-section {
  background:
    radial-gradient(circle at 12% 40%, rgba(32,73,124,.16), transparent 25rem),
    #05080d;
}

.control-grid small {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(45,134,255,.25);
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(45,134,255,.065);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.control-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.control-cards article {
  min-height: 94px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(16,32,54,.72);
}

.control-cards b,
.moment-column h3 {
  color: white;
  font-family: var(--condensed);
  font-size: 20px;
  line-height: .95;
  text-transform: uppercase;
}

.control-cards b::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 3px;
  background: var(--orange);
}

.control-cards span {
  display: block;
  margin-top: 8px;
  color: #dce4ee;
  font-size: 13px;
  font-weight: 740;
  line-height: 1.36;
}

.moments-section { background: linear-gradient(180deg, #050607, #08101b); }

.moments-map {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(210px, .42fr) 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}

.moment-column {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(98,141,192,.24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(24,43,69,.86), rgba(8,14,24,.96));
}

.moment-column h3 {
  margin: 0 0 4px;
  color: var(--yellow);
}

.moment-column span {
  padding: 8px 10px;
  border-radius: 999px;
  color: #edf3fb;
  background: rgba(255,255,255,.065);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.control-question {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
}

.control-question::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(15,99,246,.75), rgba(45,134,255,.78), rgba(15,99,246,.75));
}

.control-question span {
  position: relative;
  z-index: 1;
  max-width: 210px;
  padding: 18px 20px;
  border: 1px solid rgba(45,134,255,.38);
  border-radius: 50%;
  color: var(--yellow);
  background: #06101c;
  font-family: var(--condensed);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 900;
  line-height: .95;
  text-align: center;
  text-transform: uppercase;
}

.travel-statement {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 2px solid var(--orange);
}

.travel-statement strong,
.travel-statement span,
.final-thought p,
.final-thought strong {
  display: block;
  color: white;
  font-family: var(--condensed);
  font-size: clamp(20px, 1.45vw, 26px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.travel-statement span,
.final-thought strong { color: var(--orange); }

.travel-statement p {
  max-width: 720px;
  margin: 10px 0 0;
  color: #d7dee8;
  font-size: 15px;
  line-height: 1.48;
}

.conversation-grid { align-items: start; }

.conversation-list {
  display: grid;
  gap: 10px;
}

.conversation-list article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: start;
}

.conversation-list article p { margin: 0; }

.parent-role {
  margin-top: 22px;
  align-items: center;
}

.notice-path {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(45,134,255,.22);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(10,22,38,.78);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.notice-path i {
  flex: 1;
  height: 2px;
  min-width: 18px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(15,99,246,.25), rgba(45,134,255,.78));
}

.habit-flow {
  display: grid;
  grid-template-columns: 1fr 34px 1fr 34px 1fr;
  gap: 10px;
  align-items: stretch;
}

.habit-section {
  background:
    radial-gradient(circle at 72% 42%, rgba(45,134,255,.08), transparent 22rem),
    linear-gradient(180deg, #050607, #08101b);
}

.habit-grid {
  padding: clamp(16px, 1.9vw, 24px);
  border: 1px solid rgba(45,134,255,.22);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(18,34,56,.76), rgba(6,12,20,.95));
}

.final-thought {
  margin-top: 0;
  padding-top: 10px;
  border-top: 2px solid var(--orange);
}

.simple-close {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, .56fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  margin-top: 24px;
}

.simple-close h2 {
  max-width: 620px;
  font-size: clamp(24px, 1.95vw, 34px);
}

.simple-close nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.simple-close a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: white;
  background: rgba(255,255,255,.055);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.simple-close a:hover,
.simple-close a:focus-visible {
  border-color: rgba(45,134,255,.48);
  color: var(--yellow);
}

@media (max-width: 980px) {
  .control-grid,
  .moments-heading,
  .conversation-grid,
  .parent-role,
  .habit-grid,
  .simple-close {
    grid-template-columns: 1fr;
  }

  .extend-opening { padding-top: 96px; }
  .extend-opening h1 { font-size: clamp(28px, 8vw, 40px); }
  .extend-section h2, .extend-close h2 { font-size: clamp(26px, 7.2vw, 34px); }
  .habit-flow {
    grid-template-columns: 1fr;
  }

  .habit-flow i {
    width: 2px;
    height: 18px;
    justify-self: center;
  }

  .habit-flow i::after {
    margin-left: -3px;
    transform: translateY(10px) rotate(135deg);
  }

  .moments-map {
    grid-template-columns: 1fr;
  }

  .control-question {
    min-height: 112px;
  }

  .control-question::before {
    left: 50%;
    right: auto;
    top: -18px;
    bottom: -18px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(15,99,246,.7), rgba(45,134,255,.78), rgba(15,99,246,.7));
  }
}

@media (max-width: 680px) {
  .extend-opening,
  .extend-section,
  .extend-close {
    padding-inline: 18px;
  }

  .control-cards {
    grid-template-columns: 1fr;
  }

  .conversation-list article {
    grid-template-columns: 1fr;
  }

  .notice-path {
    align-items: stretch;
    flex-direction: column;
    border-radius: 20px;
  }

  .notice-path i {
    width: 2px;
    height: 18px;
    min-width: 0;
    flex: none;
  }
}