img {
  max-width: 100%;
}
.copy,
.demo,
.hero-copy,
.hero-stage {
  min-width: 0;
}

/* ---------- Large desktop tuning (1051-1280) ---------- */
@media (min-width: 1051px) and (max-width: 1280px) {
  .ai-service {
    width: 162px;
    padding: 12px;
  }
  .ai-service span {
    font-size: 0.72rem;
  }
  .library-input {
    font-size: 9px;
    padding: 8px 10px;
  }
}

/* ---------- Tablet & below: stack everything (<=1180) ---------- */
@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 40px;
    padding: 110px clamp(20px, 5vw, 60px) 60px;
  }
  .hero-copy {
    max-width: 100%;
  }
  .hero-stage {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    height: 560px;
    min-height: 0;
  }

  .chapter,
  .chapter:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    gap: 36px;
    padding: 90px clamp(20px, 5vw, 60px);
  }
  .chapter:nth-child(even) .copy,
  .chapter:nth-child(even) .demo {
    order: initial;
  }
  .copy {
    max-width: 100%;
  }
  .chapter h3 {
    font-size: clamp(36px, 7vw, 64px);
  }
  .demo {
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
    min-height: 740px;
  }
  .timeline-rail {
    display: none;
  }
}

/* ---------- Mobile (<=760) ---------- */
@media (max-width: 760px) {
  /* Hero */
  .hero {
    padding: 96px 16px 48px;
    gap: 32px;
  }
  h1 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
    line-height: 0.96;
  }
  .hero p {
    font-size: 16px;
    margin-bottom: 26px;
  }
  .hero-actions {
    gap: 10px;
  }
  .hero-cta-note {
    width: 100%;
    max-width: none;
  }

  .hero-stage {
    height: auto;
    min-height: 0;
    border-radius: 22px;
    padding: 16px 14px 14px;
  }
  .hero-stage:after {
    display: none;
  }
  .ai-system {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ai-system svg,
  .library-input,
  .ai-signal {
    display: none;
  }
  .ai-core {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 132px;
    height: 132px;
    margin: 36px auto;
  }
  .ai-core:before {
    inset: -14px;
  }
  .ai-core:after {
    inset: -28px;
  }
  .ai-service {
    position: static;
    width: auto;
    min-height: 0;
    padding: 12px;
  }
  .ai-service span {
    display: block;
    font-size: 0.74rem;
  }
  .ai-service b {
    font-size: 0.92rem;
  }
  .svc1,
  .svc2,
  .svc3,
  .svc4 {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }
  .stage-chapters {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 14px;
    grid-template-columns: 1fr 1fr;
  }
  .stage-chapter b {
    font-size: 13px;
  }
  .stage-chapter span {
    font-size: 11px;
  }

  /* Chapters */
  .chapter,
  .chapter:nth-child(even) {
    padding: 64px 16px;
    gap: 28px;
  }
  .chapter h3 {
    font-size: clamp(32px, 10vw, 46px);
    letter-spacing: -0.045em;
  }
  .chapter p {
    font-size: 15px;
    line-height: 1.65;
  }
  .date {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .pill {
    font-size: 10px;
  }

  /* Demo shell becomes flowing, auto height */
  .demo {
    min-height: 0;
    border-radius: 22px;
    padding: 56px 12px 14px;
  }
  .demo:after {
    display: none;
  }
  .demo-head {
    left: 14px;
    right: 14px;
    top: 16px;
  }
  .demo-head span {
    font-size: 9px;
    letter-spacing: 0.12em;
    line-height: 1.4;
  }
  .news-field,
  .fy-stage,
  .ts-stage {
    position: relative;
    inset: auto;
    display: block;
  }
  .news-product,
  .fy-product,
  .ts-product {
    height: auto;
    padding: 10px;
    border-radius: 18px;
  }

  /* --- News tagging --- */
  .news-appicons {
    display: none;
  }
  .news-searchbar {
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
  }
  .news-shell {
    grid-template-columns: 1fr;
    height: auto;
  }
  .tag-assistant {
    min-height: 0;
  }
  .headline-list {
    max-height: none;
    overflow: visible;
  }
  .news-tab {
    padding: 10px 14px;
    font-size: 12px;
    min-height: 38px;
  }
  .feed-title {
    font-size: 17px;
  }
  .feed-kicker,
  .feed-count {
    font-size: 10px;
  }
  .headline-main strong {
    font-size: 13px;
  }
  .headline-meta {
    font-size: 11px;
  }
  .ai-route-pill {
    font-size: 10px;
  }
  .feed-foot {
    font-size: 10px;
    flex-wrap: wrap;
  }
  .assistant-head b {
    font-size: 15px;
  }
  .assistant-head span,
  .assistant-badge {
    font-size: 11px;
  }
  .tag-focuscard small {
    font-size: 10px;
  }
  .tag-focuscard b {
    font-size: 13px;
  }
  .tag-focuscard span {
    font-size: 11.5px;
  }
  .pipe-step {
    font-size: 10px;
  }
  .tag-chip {
    font-size: 11px;
  }
  .route-box {
    grid-template-columns: 1fr 1fr;
  }
  .route-cell label {
    font-size: 9px;
  }
  .route-cell b {
    font-size: 12px;
  }
  .route-cell span,
  .log-line,
  .assist-foot {
    font-size: 10.5px;
  }

  /* --- For You --- */
  .fy-toolbar {
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
  }
  .fy-ai-state {
    font-size: 10.5px;
  }
  .fy-title {
    font-size: 15px;
  }
  .fy-title span {
    font-size: 10px;
  }
  .fy-shell {
    grid-template-columns: 1fr;
    height: auto;
  }
  .fy-engine {
    min-height: 0;
  }
  .fy-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fy-card,
  .fy-card:nth-child(3) {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .fy-cover {
    height: auto;
    min-height: 92px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
  }
  .fy-match {
    font-size: 10px;
  }
  .fy-type {
    font-size: 9.5px;
  }
  .fy-card strong {
    font-size: 13px;
    min-height: 0;
  }
  .fy-source {
    font-size: 11px;
  }
  .fy-section-head b {
    font-size: 13px;
  }
  .fy-section-head span {
    font-size: 9.5px;
  }
  .fy-feedback-mini {
    opacity: 1;
  }
  .fy-engine-head b {
    font-size: 14px;
  }
  .fy-engine-head span,
  .fy-signal label,
  .fy-why small,
  .fy-score-copy small {
    font-size: 9.5px;
  }
  .fy-signal b {
    font-size: 12px;
  }
  .fy-why b {
    font-size: 12.5px;
  }
  .fy-why p {
    font-size: 11.5px !important;
  }
  .fy-reason {
    font-size: 10.5px;
    padding: 6px 9px;
  }
  .fy-score-ring {
    width: 52px;
    height: 52px;
  }
  .fy-score-ring b {
    font-size: 11px;
  }
  .fy-score-copy b {
    font-size: 12px;
  }
  .fy-feedback button {
    font-size: 11px;
    padding: 11px 8px;
    min-height: 40px;
  }
  .fy-learn {
    font-size: 10.5px;
    min-height: 28px;
  }

  /* --- Top Stories --- */
  .ts-toolbar {
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ts-title {
    font-size: 15px;
  }
  .ts-title span {
    font-size: 10px;
  }
  .ts-live {
    font-size: 10.5px;
    white-space: normal;
  }
  .ts-contexts {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .ts-contexts::-webkit-scrollbar {
    display: none;
  }
  .ts-context {
    font-size: 11.5px;
    padding: 9px 13px;
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 38px;
  }
  .ts-shell {
    grid-template-columns: 1fr;
    height: auto;
  }
  .ts-panel-head b {
    font-size: 12.5px;
  }
  .ts-panel-head span {
    font-size: 9.5px;
  }
  .ts-sources {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    max-height: none;
  }
  .ts-source {
    grid-template-columns: 24px 1fr;
    padding: 7px;
  }
  .ts-source em {
    display: none;
  }
  .ts-source b {
    font-size: 10.5px;
  }
  .ts-source small {
    font-size: 9px;
  }
  .ts-source-stream {
    grid-column: 1 / -1;
    font-size: 10.5px;
  }
  .ts-engine {
    min-height: 0;
  }
  .ts-query small {
    font-size: 9px;
  }
  .ts-query b {
    font-size: 12px;
  }
  .ts-vector-core {
    width: 104px;
    height: 104px;
  }
  .ts-core-label {
    width: 92px;
    max-width: 92px;
  }
  .ts-core-label b {
    font-size: 10.5px;
  }
  .ts-core-label span {
    font-size: 7.5px;
  }
  .ts-step {
    font-size: 9.5px;
  }
  .ts-step i {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  .ts-results-list {
    overflow: visible;
  }
  .ts-story {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }
  .ts-score b {
    font-size: 12px;
  }
  .ts-score small {
    font-size: 8px;
  }
  .ts-story-copy small {
    font-size: 9px;
  }
  .ts-story-copy b {
    font-size: 12.5px;
  }
  .ts-story-copy span {
    font-size: 10.5px;
    white-space: normal;
  }
  .ts-rank {
    font-size: 11px;
  }
  .ts-engine-log {
    font-size: 10.5px;
  }
  .ts-statusbar {
    font-size: 9.5px;
    flex-wrap: wrap;
  }

  /* --- AI Search --- */
  .search-demo {
    position: relative;
    inset: auto;
    padding: 0;
  }
  .search-shell {
    padding: 14px;
    border-radius: 16px;
    align-items: flex-start;
  }
  .search-glyph {
    flex: 0 0 20px;
    margin-top: 2px;
  }
  .typed {
    font-size: 14px;
    min-height: 63px;
    line-height: 1.5;
  }
  .intent-row {
    margin: 14px 0 16px;
  }
  .intent {
    font-size: 11px;
  }
  .result-grid {
    grid-template-columns: 1fr;
  }
  .result,
  .result:nth-child(n + 3) {
    display: block;
    min-height: 0;
    padding: 14px;
  }
  .result b {
    font-size: 14px;
  }
  .result span {
    font-size: 11.5px;
  }
  .rtype {
    font-size: 10px;
  }

  /* Closing */
  .closing {
    min-height: auto;
    padding: 90px 18px;
  }
  .closing h2 {
    font-size: clamp(36px, 10.5vw, 54px);
    letter-spacing: -0.05em;
  }
  .closing p {
    font-size: 16px;
  }
  .closing-orbit {
    width: 140vw;
    height: 140vw;
  }
}

/* ---------- Small phones (<=420) ---------- */
@media (max-width: 420px) {
  .ai-system {
    grid-template-columns: 1fr;
  }
  .stage-chapters {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .route-box {
    grid-template-columns: 1fr;
  }
  .ts-sources {
    grid-template-columns: 1fr;
  }
  .ai-route-pill {
    display: none;
  }
  .headline-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .fy-card,
  .fy-card:nth-child(3) {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .fy-signals {
    grid-template-columns: 1fr 1fr;
  }
  .cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Touch devices: no sticky hover lift ---------- */
@media (hover: none) {
  .stage-chapter:hover,
  .ai-service:hover,
  .fy-card:hover {
    transform: none;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}