/* Current native app captures. Keep the capture pixels and aspect ratios intact. */
.app-stage .stage-light { inset: 2% 1% 0; background: radial-gradient(ellipse at 38% 50%, #5bc3990b, transparent 56%), radial-gradient(ellipse at 74% 74%, #76c7e50b, transparent 55%); }
.feature-story .current-group-preview { width: min(440px, 100%); gap: 14px; filter: none; }
.current-group-preview .habit-title { font-family: Outfit, system-ui, sans-serif; font-size: 24px; color: var(--text); }
.native-group-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.native-member-view { display: block; aspect-ratio: 320 / 382; overflow: hidden; border-radius: 17% / 14.25%; }
.native-member-view img { display: block; width: 376.875%; max-width: none; height: auto; margin-left: var(--member-offset); transform: translateY(-19.68%); pointer-events: none; }
/* The Flooded garden uses the app’s artwork and resident layout, without pager controls. */
.native-habitat-view { position: relative; aspect-ratio: 1586 / 992; overflow: hidden; border-radius: 6.5% / 10.4%; background: center / cover no-repeat url("app-habitat-garden-20261101.webp"); }
.native-habitat-view .habitat-resident { position: absolute; display: block; max-width: none; object-fit: contain; pointer-events: none; }
/* The social feature is a cropped native post, not a shortened phone. */
.feature-story .current-post-view { aspect-ratio: 1110 / 1286; }
.current-post-view img { display: block; width: 108.64865%; max-width: none; height: auto; margin-left: -4.32432%; transform: translateY(var(--post-crop-y, -30.96873%)); }
@media (max-width: 620px) {
  .feature-story .current-group-preview { width: min(310px, 100%); gap: 11px; }
  .current-group-preview .habit-title { font-size: 21px; }
  .native-group-members { gap: 8px; }
}

/* Readable details from the current native Glass recommendation cards. */
.current-suggestions-preview { width: min(480px, 100%); margin: 0 auto; display: grid; gap: 14px; transform: translateY(calc((1 - var(--arrive))*24px)) rotate(3deg); }
.native-suggestion-view { display: block; aspect-ratio: 1110 / 348; overflow: hidden; border-radius: 6.5% / 20.7%; }
.native-suggestion-view img { display: block; width: 108.64865%; max-width: none; height: auto; margin-left: -4.32432%; transform: translateY(var(--suggestion-crop-y)); pointer-events: none; }
@media (max-width: 620px) { .current-suggestions-preview { gap: 12px; transform: translateY(calc((1 - var(--arrive))*18px)); } }
@media (prefers-reduced-motion: reduce) { .current-suggestions-preview { transform: none !important; } }
html[data-motion=off] .current-suggestions-preview { transform: none !important; }

/* Keep the native feature details legible without crowding the copy. */
@media (min-width: 851px) {
  .habit-story { grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr); column-gap: clamp(56px, 5vw, 90px); padding-block: 48px; }
  .feature-story.habit-story .current-group-preview { width: min(540px, 100%, calc((var(--feature-height) - 150px) * .98)); }
  .current-suggestions-preview { width: min(480px, 100%, calc((var(--feature-height) - 150px) * .98)); }
  .feature-story .share-window { width: min(380px, 100%, calc((var(--feature-height) - 145px) * .74)); }
}
@media (min-width: 621px) and (max-width: 850px) {
  .feature-story { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 30px clamp(30px, 5vw, 48px); min-height: 590px; max-height: 740px; }
  .feature-story .story-copy h3 { font-size: 38px; }
  .feature-story .story-copy p { font-size: 17px; margin-top: 18px; max-width: 460px; }
  .feature-story.habit-story .current-group-preview { width: min(100%, 440px, calc((var(--feature-height) - 285px) * .975)); gap: 10px; }
  .current-suggestions-preview { width: min(100%, 450px, calc((var(--feature-height) - 260px) * .95)); transform: none; }
  .feature-story .share-window { width: min(100%, 320px, calc((var(--feature-height) - 260px) * .76)); transform: none; }
}
@media (max-width: 620px) {
  .feature-story.habit-story .current-group-preview { width: calc(100% + 24px); max-width: 350px; align-self: center; margin-inline: 0; }
}
/* Keep the cards stacked on phones and tablets, including short Safari viewports.
   Size against the stable small viewport so browser toolbars cannot switch layouts. */
@media (max-width: 850px) {
  .feature-story {
    --feature-top: clamp(58px, calc(100svh - 600px), 92px);
    --feature-height: min(690px, calc(100svh - var(--feature-top) - 16px));
    position: sticky;
    top: var(--feature-top);
    height: var(--feature-height);
    min-height: 0;
    max-height: none;
    gap: clamp(20px, calc(20svh - 120px), 28px);
    padding-block: clamp(24px, calc(20svh - 114px), 30px);
  }
  .feature-story.habit-story .current-group-preview {
    width: min(100%, 440px, calc((var(--feature-height) - 275px) * .94));
    gap: 10px;
  }
  .feature-story .current-suggestions-preview { width: min(100%, 450px, calc(var(--feature-height) - 260px)); }
  .feature-story .share-window { width: min(100%, 320px, calc((var(--feature-height) - 240px) * .74)); }
}

@media (max-width: 620px) {
  .feature-story.habit-story .current-group-preview {
    width: min(calc(100% + 24px), 350px, calc((var(--feature-height) - 280px) * .96));
    max-width: none;
    gap: 10px;
  }
}

/* In phone landscape, place the visual beside the copy so it stays readable. */
@media (max-width: 850px) and (orientation: landscape) {
  .feature-story {
    --feature-top: clamp(20px, calc(100svh - 340px), 58px);
    --feature-height: calc(100svh - var(--feature-top) - 12px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(18px, 3vw, 32px);
    padding: 18px 24px;
  }
  .feature-story .story-copy h3 { font-size: clamp(26px, 6svh, 38px); }
  .feature-story .story-copy p { font-size: clamp(14px, 2.1vw, 17px); line-height: 1.4; margin-top: 12px; }
  .feature-story.habit-story .current-group-preview { width: min(100%, 350px, calc((var(--feature-height) - 65px) * .82)); max-width: none; }
  .feature-story .current-suggestions-preview { width: min(100%, 360px, calc(var(--feature-height) - 65px)); }
  .feature-story .share-window { width: min(100%, 300px, calc((var(--feature-height) - 60px) * .74)); }
}

/* At laptop widths keep both columns legible without crowding their visuals. */
@media (min-width: 851px) and (max-width: 1150px) {
  .feature-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(28px, 4vw, 48px); padding-inline: clamp(30px, 4vw, 48px); }
  .feature-story.habit-story { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .feature-story .story-copy { min-width: 0; }
  .feature-story .story-copy h3 { font-size: clamp(32px, 3.9vw, 45px); }
  .feature-story .story-copy p { font-size: clamp(16px, 1.65vw, 18px); }
}

/* Layered glass surfaces, inspired by the app's translucent cards. */
.feature-story { background: linear-gradient(135deg, rgba(43,48,46,.96), rgba(19,22,21,.97) 54%, rgba(28,34,31,.96)); border-color: rgba(255,255,255,.15); box-shadow: 0 26px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16), inset 1px 0 0 rgba(255,255,255,.04); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); }
.feature-story::after { background: linear-gradient(135deg, rgba(255,255,255,.065), transparent 33%, transparent 72%, rgba(139,203,169,.035)); }
:is([data-theme="light"], [data-theme="white"]) .feature-story { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(240,244,242,.96) 58%, rgba(230,238,234,.95)); border-color: rgba(63,83,71,.15); box-shadow: 0 20px 60px rgba(30,47,37,.1), inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.7); }
:is([data-theme="light"], [data-theme="white"]) .feature-story::after { background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 40%, transparent 75%, rgba(114,177,145,.045)); }