/* Isolated conversion option. Approved media and shared components stay intact. */
.recommended-home .studio-copy > p { max-width: 440px; }
.recommended-home .story-card-action a { font-weight: 400; }
.recommended-home .home-stories { padding-block: 104px 88px; }
.recommended-home .stories-reading-age {
  margin: 28px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.js .recommended-home .drawing-film { height: 280svh; }
.recommended-home .scene-bottom { column-gap: 24px; }
.recommended-home .skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  text-underline-offset: 4px;
}
.recommended-home .skip-link:hover { color: var(--ink); text-decoration: underline; }
.recommended-home #wonder-words { background: var(--feature-paper); padding-block: 96px; }
.recommended-home #wonder-words .feature-inner {
  display: grid;
  grid-template-columns: .8fr 1.3fr;
  align-items: center;
  column-gap: 56px;
}
.recommended-home .feature-intro {
  display: block;
  grid-row: 1 / 3;
  max-width: none;
  margin: 0;
}
.recommended-home .feature-eyebrow { margin: 0 0 20px; }
.recommended-home .feature-intro h2 {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(38px, 3.7vw, 52px);
  letter-spacing: -.045em;
}
.recommended-home .feature-dek { margin: 24px 0 0; font-size: 18px; max-width: 360px; }
.recommended-home .wonder-takeaway { grid-column: 2; color: var(--feature-muted); font-size: 14px; line-height: 1.5; text-align: left; margin: 20px 0 0; }
.recommended-home .jules-integrations {
  position: absolute;
  left: 24px;
  bottom: 28px;
  z-index: 3;
  max-width: min(440px, calc(50% - 180px));
  margin: 0;
  pointer-events: none;
  color: var(--studio-white);
  font-size: 12pt;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
}
.recommended-home .jules-integrations span { white-space: nowrap; }
.recommended-home .jules-progress {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  z-index: 4;
  pointer-events: none;
  background: color-mix(in srgb, var(--studio-white) 24%, transparent);
}
.recommended-home .jules-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--studio-white);
  transform: scaleX(0);
  transform-origin: left;
}
.recommended-home :is(#stories, #wonder-words, #questions) { scroll-margin-top: 100px; }

@media (max-width: 1000px) {
  .recommended-home .studio-copy { bottom: calc(var(--preview-prompt-height, 140px) + var(--preview-prompt-bottom, 20px) + 28px); }
  .recommended-home .jules-integrations { right: 24px; max-width: none; bottom: calc(var(--film-controls-bottom, 12px) + 60px); }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .recommended-home #wonder-words .feature-inner { grid-template-columns: 1fr 1.3fr; column-gap: 32px; }
  .recommended-home .feature-intro h2 { font-size: 38px; }
  .recommended-home .feature-dek { font-size: 17px; }
}
@media (max-width: 700px) {
  .recommended-home .home-stories { padding-block: 72px 56px; }
  .recommended-home .stories-reading-age { text-align: left; font-size: 13px; padding-right: 12px; margin-top: 20px; }
  .js .recommended-home .drawing-film { height: 240svh; }
  /* Keep composer clearance while pinned. The next section reuses the final
     80px of that empty clearance as the scene scrolls away. */
  .js .recommended-home .scene-pin {
    grid-template-rows: auto auto 80px;
    height: min(100svh, var(--scene-natural-height, 100svh));
    padding-bottom: 104px;
  }
  .js .recommended-home .drawing-film + .st-personalization { margin-top: -80px; }
  .recommended-home .scene-bottom { gap: 8px; flex-wrap: wrap; justify-content: space-between; }
  .recommended-home .scene-bottom .scene-instruction { flex-basis: 100%; }
  .recommended-home .skip-link { margin: 0; font-size: 12px; }
  .recommended-home #wonder-words { padding-block: 72px 56px; }
  .recommended-home #wonder-words .feature-inner { display: block; }
  .recommended-home .feature-intro { display: block; margin-bottom: 28px; }
  .recommended-home .feature-eyebrow { margin-bottom: 16px; }
  .recommended-home .feature-intro h2 { font-size: clamp(34px, 8.2vw, 42px); }
  .recommended-home .feature-dek { font-size: 17px; margin: 20px 0 0; max-width: 360px; }
  .recommended-home .wonder-takeaway { font-size: 14px; margin-top: 20px; text-align: left; }
  .recommended-home .jules-integrations { left: 20px; right: 20px; }
}
@media (max-width: 700px) and (max-height: 720px) {
  .recommended-home .studio-copy h1 { font-size: clamp(30px, 8.5vw, 38px); }
  .recommended-home .studio-copy > p { font-size: 13px; line-height: 1.45; margin-top: 14px; }
  .recommended-home .studio-copy { bottom: calc(var(--preview-prompt-height, 140px) + var(--preview-prompt-bottom, 14px) + 20px); }
}
@media (max-width: 360px) {
  .recommended-home .st_app_nav_logo { flex: none; width: 28px; height: 28px; }
  .recommended-home .st_app_nav_logo_full { display: none; }
  .recommended-home .st_app_nav_logo_mark { display: block; width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .recommended-home .drawing-film { height: auto; }
  .js .recommended-home .scene-pin { height: auto; padding-bottom: 24px; }
  .js .recommended-home .drawing-film + .st-personalization { margin-top: 0; }
  .recommended-home .skip-link { display: none; }
}

/* Keep the integration label beside its controls on phones, not above them. */
@media(max-width:700px){
 .recommended-home .jules-integrations{left:20px;right:120px;bottom:calc(var(--film-controls-bottom,12px) + 6px);max-width:240px;text-align:left;font-size:12px;line-height:1.4;}
 .recommended-home .jules-integrations span{white-space:normal;}
 .recommended-home .jules-integrations span:last-child{display:block;}
}

@media(max-width:359px){.recommended-home .jules-integrations{font-size:10px;left:16px;right:112px;}}