/* SeasonalQuant landing — responsive layers. Scoped under .sq-landing.
   Base styles (styles.css, sections.css, ...) are the 1440+ design. Figma frames:
     <= 1439px  "1280 px"  (7925:86242)
     <= 1279px  "768 px"   (7925:83904)
     <=  767px  "360 px"   (7874:38946)
   Each layer only overrides what differs from the layer above it. */

/* Elements that only exist on small screens */
.sq-landing__menu-btn, .sq-landing__menu, .sq-landing__pricing-dots, .sq-landing__cta-m, .sq-landing__chart-mobile { display: none; }
.sq-landing__header-actions { display: flex; align-items: center; gap: 16px; }

/* ============================ <= 1439px (1280 design) ============================ */
@media (max-width: 1439px) {
  /* hero: 1120 content, 1112 chart (centred, cropped by the hero if the viewport is narrower) */
  .sq-landing__hero-pattern--right { left: 798px; }
  .sq-landing__hero-inner { padding: 100px 0 40px; }
  .sq-landing__chart { flex: none; max-width: none; }

  .sq-landing__intro-text { width: 800px; max-width: 100%; }

  /* feature cards: 2 x 2 inside an 800px column, 24px gaps */
  .sq-landing__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 800px; }

  /* sectors */
  .sq-landing__blk-title { flex-basis: 340px; width: 340px; }
  .sq-landing__blk-shape { left: -152.38px; top: -20.81px; width: 706px; height: 811px; }

  /* footer card */
  .sq-landing__cta-deco { left: 381.49px; top: -352.35px; bottom: auto; width: 1351px; height: 1537px; }
  .sq-landing__cta-deco-rot { width: 1064px; height: 1319px; }
}

/* ============================ <= 1279px (768 design) ============================ */
@media (max-width: 1279px) {
  /* header: logo left, "Get Started" + menu button right, nav lives in the menu panel */
  .sq-landing__header { padding: 16px 32px; }
  .sq-landing__nav { display: none; }
  .sq-landing__button--sm { padding: 12px 20px; font-size: 16px; line-height: 24px; }
  .sq-landing__menu-btn {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 100px;
    background: #131216; cursor: pointer; transition: background-color .2s;
  }
  .sq-landing__menu-btn:hover { background: #1f1f23; }
  .sq-landing__menu-btn img { width: 24px; height: 24px; }
  .sq-landing__menu-ico-close { display: none; }
  .sq-landing__header.is-menu-open .sq-landing__menu-ico-open { display: none; }
  .sq-landing__header.is-menu-open .sq-landing__menu-ico-close { display: block; }
  .sq-landing__header.is-menu-open {
    background: var(--sq-bg); border-bottom-color: #1b1b1d;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html:has(.sq-landing__header.is-menu-open) { overflow: hidden; }
  /* full-screen menu under the header: links on top, "Log in" / "Get Started" pinned to the bottom */
  .sq-landing__menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: calc(100vh - 80px); height: calc(100dvh - 80px);
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--sq-bg);
    visibility: hidden; opacity: 0;
    transition: opacity .2s, visibility 0s linear .2s;
  }
  .sq-landing__header.is-menu-open .sq-landing__menu { visibility: visible; opacity: 1; transition-delay: 0s; }
  .sq-landing__menu-nav { display: flex; flex-direction: column; padding: 32px 32px 48px; overflow-y: auto; }
  .sq-landing__menu-nav a {
    padding: 24px 0; font: 400 24px/24px var(--sq-font-body); color: var(--sq-text-default); transition: color .2s;
  }
  .sq-landing__menu-nav a:hover { color: var(--sq-text-subtlest); }
  .sq-landing__menu-actions {
    display: flex; gap: 16px; padding: 32px 64px 64px; border-top: 1px solid rgba(255, 255, 255, .03);
  }
  .sq-landing__menu-actions .sq-landing__button { flex: 1 1 0; min-width: 0; width: auto; padding: 12px 24px; }

  /* hero */
  .sq-landing__hero { padding: 94px 32px 24px; }
  .sq-landing__hero-pattern--right { left: 542px; }
  .sq-landing__hero-copy { width: 100%; }

  /* intro */
  .sq-landing__intro { padding: 70px 32px; }
  .sq-landing__intro-text { width: 600px; font-size: 32px; line-height: 40px; }

  /* features */
  .sq-landing__features { padding: 70px 32px; }
  .sq-landing__cards { max-width: 704px; }
  .sq-landing__h2--nowrap { white-space: normal; }

  /* stats: 2 x 2 */
  .sq-landing__stats { padding: 70px 32px; }
  .sq-landing__stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 704px; }
  .sq-landing__stat { padding: 30px 32px; }
  .sq-landing__stat + .sq-landing__stat { box-shadow: none; }
  .sq-landing__stat:nth-child(even) { box-shadow: inset 1px 0 0 #1b1b1d; }
  .sq-landing__stat:nth-child(n+3) { box-shadow: inset 0 1px 0 #1b1b1d; }
  .sq-landing__stat:nth-child(4) { box-shadow: inset 1px 0 0 #1b1b1d, inset 0 1px 0 #1b1b1d; }

  /* sectors: title above the list */
  .sq-landing__blk { padding: 70px 32px; }
  .sq-landing__blk-card { max-width: 704px; padding: 80px 32px; border-radius: 64px; }
  .sq-landing__blk-inner { flex-direction: column; align-items: stretch; gap: 64px; }
  .sq-landing__blk-title { flex: none; width: 100%; max-width: 600px; margin: 0 auto; text-align: center; }
  .sq-landing__blk-list { flex: none; width: 100%; max-width: 640px; margin: 0 auto; }
  /* the stacked layouts have the glow in the top-left corner: approximated with a gradient */
  .sq-landing__blk-shape { display: none; }
  .sq-landing__blk-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 560px 340px at 0 0, rgba(62, 98, 232, .85) 0%, rgba(40, 62, 160, .5) 38%, rgba(24, 34, 90, .18) 68%, rgba(12, 11, 16, 0) 100%);
  }

  /* pricing: 2 columns, third card wraps under the first */
  .sq-landing__pricing { padding: 70px 32px; }
  .sq-landing__pricing-wrap { max-width: 704px; }
  .sq-landing__pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

  /* faq */
  .sq-landing__faq { padding: 70px 32px; }

  /* footer card: title + button, then the links, then the wordmark */
  .sq-landing__cta { padding: 20px; }
  .sq-landing__cta-card { padding: 80px 32px 40px; border-radius: 64px; }
  .sq-landing__cta-inner { gap: 80px; }
  .sq-landing__cta-top { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 80px; }
  .sq-landing__cta-nav { flex: none; justify-content: flex-start; flex-wrap: wrap; }
  .sq-landing__cta-bottom { gap: 40px; }
  .sq-landing__cta-deco { left: 260.79px; top: 256.98px; width: 839px; height: 954px; }
  .sq-landing__cta-deco-rot { width: 661px; height: 819px; }
  /* 768 artwork (cta-bg-768.svg, 1341 x 1698) = rot box + 58.2% left, 44.75% right, 70.83% top, 36.54% bottom */
  .sq-landing__cta-deco-img { left: -58.2%; top: -70.83%; width: 202.95%; height: 207.37%; }
}

/* ============================ <= 767px (360 design) ============================ */
@media (max-width: 767px) {
  .sq-landing__header { padding: 16px; }
  .sq-landing__logo, .sq-landing__logo img { width: 169px; height: 28px; }
  .sq-landing__header-actions > .sq-landing__button { display: none; }
  .sq-landing__menu-nav { padding: 32px 16px 48px; }
  .sq-landing__menu-nav a { padding: 20px 0; font-size: 18px; }
  .sq-landing__menu-actions { padding: 16px; }

  /* hero: left aligned copy, full-width stacked buttons, chart window cropped to the dot */
  .sq-landing__hero { height: auto; padding: 130px 16px 0; }
  .sq-landing__hero-pattern--right { display: none; }
  .sq-landing__hero-pattern--left { left: -222px; top: 7px; width: 571.06px; height: 558.75px; }
  .sq-landing__hero-inner { align-items: flex-start; gap: 16px; padding: 80px 0 40px; }
  .sq-landing__hero-copy { align-items: flex-start; text-align: left; }
  .sq-landing__hero-title { width: 100%; font-size: 48px; line-height: 56px; }
  .sq-landing__hero-text { width: 100%; }
  .sq-landing__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 32px; }
  .sq-landing__actions .sq-landing__button { width: 100%; }
  .sq-landing__chart { margin-left: calc(50% - 715px); } /* centred on the same point of the artwork that sits mid-window at 360 */
  /* the phone frame uses its own artwork: no entry/exit window, no labels */
  .sq-landing__chart > .sq-landing__chart-layer { display: none; }
  .sq-landing__chart-label { display: none; }
  .sq-landing__chart > .sq-landing__chart-mobile { display: block; left: -1px; top: -3px; width: 1116px; height: 353px; }

  .sq-landing__intro { padding: 70px 16px; justify-content: flex-start; }
  .sq-landing__intro-text { width: 100%; font-size: 28px; line-height: 36px; }

  .sq-landing__h2 { max-width: none; width: 100%; text-align: left; font-size: 32px; line-height: 40px; }

  .sq-landing__features { padding: 70px 16px; gap: 48px; }
  .sq-landing__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: none; }
  .sq-landing__card-visual { aspect-ratio: 328 / 222; }
  .sq-landing__card-body { padding: 28px 16px; }
  .sq-landing__card-title { font-size: 20px; line-height: 24px; }
  .sq-landing__card-text { font-size: 14px; line-height: 24px; }

  /* stats: one column, left aligned, separated by rules */
  .sq-landing__stats { padding: 70px 16px; gap: 48px; }
  .sq-landing__stat-row { display: flex; flex-direction: column; max-width: none; }
  .sq-landing__stat,
  .sq-landing__stat + .sq-landing__stat,
  .sq-landing__stat:nth-child(even),
  .sq-landing__stat:nth-child(n+3),
  .sq-landing__stat:nth-child(4) { box-shadow: inset 0 1px 0 #1b1b1d; }
  .sq-landing__stat { align-items: flex-start; text-align: left; padding: 16px 0; gap: 4px; }
  .sq-landing__stat dt { font-size: 56px; line-height: 64px; }
  .sq-landing__stat dd { font-size: 14px; line-height: 24px; }

  /* sectors */
  .sq-landing__blk { padding: 0 8px; }
  .sq-landing__blk-card { max-width: none; padding: 70px 16px; border-radius: 32px; }
  .sq-landing__blk-inner { gap: 48px; }
  .sq-landing__blk-title { max-width: none; margin: 0; text-align: left; font-size: 32px; line-height: 40px; }
  .sq-landing__blk-name { font-size: 32px; line-height: 40px; }
  .sq-landing__blk-head { gap: 16px; }
  .sq-landing__blk-chips { padding: 0 0 0 40px; }
  .sq-landing__blk-chip { padding: 8px 12px; }
  .sq-landing__blk-card::before { background: radial-gradient(ellipse 320px 260px at 0 0, rgba(62, 98, 232, .85) 0%, rgba(40, 62, 160, .5) 40%, rgba(24, 34, 90, .18) 70%, rgba(12, 11, 16, 0) 100%); }

  /* pricing: swipeable cards with dots */
  .sq-landing__pricing { padding: 70px 8px; }
  .sq-landing__pricing-wrap { gap: 32px; max-width: none; }
  .sq-landing__pricing-head { padding: 0 16px; }
  .sq-landing__pricing-title { font-size: 32px; line-height: 40px; }
  .sq-landing__pricing-sub { font-size: 14px; text-wrap: balance; }
  .sq-landing__pricing-body { gap: 32px; }
  .sq-landing__pricing-grid {
    display: flex; gap: 24px; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
  }
  .sq-landing__pricing-grid::-webkit-scrollbar { display: none; }
  .sq-landing__pricing-card { flex: 0 0 100%; scroll-snap-align: center; }
  .sq-landing__pricing-dots { display: flex; justify-content: center; gap: 8px; margin-top: -8px; }
  .sq-landing__pricing-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 100px; background: #26262b;
    cursor: pointer; transition: background-color .2s;
  }
  .sq-landing__pricing-dot.is-active { background: #9b9ba1; }

  /* faq */
  .sq-landing__faq { padding: 70px 16px 80px; gap: 32px; align-items: stretch; }
  .sq-landing__faq-item { padding: 24px 0; }
  .sq-landing__faq-qtext { font-size: 20px; line-height: 24px; }
  .sq-landing__faq-a { font-size: 14px; }

  /* footer card */
  .sq-landing__cta { padding: 8px; }
  .sq-landing__cta-card { padding: 80px 16px 16px; border-radius: 32px; }
  .sq-landing__cta-inner { gap: 56px; }
  .sq-landing__cta-top { gap: 0; }
  .sq-landing__cta-main { align-items: flex-start; gap: 24px; }
  .sq-landing__cta-title { font-size: 32px; line-height: 40px; }
  .sq-landing__cta-nav, .sq-landing__cta-bottom { display: none; }
  /* same glow as the tablet: that artwork keeps its offset from the card's bottom-right corner */
  .sq-landing__cta-deco { left: auto; top: auto; right: -371.8px; bottom: -518px; }
  .sq-landing__cta-m {
    display: flex; flex-direction: column; gap: 32px;
    padding-top: 57px; /* 1px dashed rule: 4px dash, 4px gap */
    background: repeating-linear-gradient(90deg, #3a3a40 0 4px, transparent 4px 8px) top left / 100% 1px no-repeat;
  }
  .sq-landing__cta-m-logo { display: block; width: 40px; height: 40px; }
  .sq-landing__cta-m-cols { display: flex; gap: 24px; font: 400 14px/24px var(--sq-font-body); }
  .sq-landing__cta-m-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .sq-landing__cta-m-title { margin: 0; font-weight: 600; color: var(--sq-text-default); }
  .sq-landing__cta-m-links { display: flex; flex-direction: column; gap: 8px; color: #8c8c8c; }
  .sq-landing__cta-m-links a { transition: color .2s; }
  .sq-landing__cta-m-links a:hover { color: #fff; }
  .sq-landing__cta-m-copy { margin: 0; font: 400 14px/24px var(--sq-font-body); color: #4d4d4d; }
}

@media (prefers-reduced-motion: reduce) {
  .sq-landing__menu { transition: none; }
}

/* Forecast and heat-map cards: centred horizontally on every width below the 1440+ base */
@media (max-width: 1439px) {
  .sq-landing__fpanel, .sq-landing__heatpanel { left: 50%; }
}