/* ─────────────────────────────────────────────────────────────
   UNLOCKMYJOB — SOFT LAUNCH  |  responsive.css
   All @media breakpoints. No @keyframes here.
───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════
   MIN-WIDTH — large / ultra-wide screens
═══════════════════════════════════════════ */

@media (min-width: 1400px) {
  #NAV { padding: 0 72px; }
  #DOTS { right: 34px; }

  .slide-inner { max-width: 672px; }
  #s3 .slide-inner, #s4 .slide-inner, #s5 .slide-inner,
  #s6 .slide-inner, #s8 .slide-inner { flex: 0 1 672px; }

  .slide-art  { width: clamp(320px, 44vw, 420px); height: clamp(320px, 44vw, 420px); }

  .p-title    { font-size: 40px; }
  .p-list li  { font-size: 14px; width: 100% !important; }
  .p-badge    { font-size: 11.5px; }
  .pill       { font-size: 13px; }
  .p-tag-line { font-size: 14px; }
  .p-caption  { font-size: 13.5px; }
  .q-hint     { font-size: 14px; }
  select.wl-inp { font-size: 15px; }
}

@media (min-width: 1920px) {
  #NAV { padding: 0 96px; }

  .slide-inner { max-width: 744px; }
  #s3 .slide-inner, #s4 .slide-inner, #s5 .slide-inner,
  #s6 .slide-inner, #s8 .slide-inner { flex: 0 1 744px; }

  .slide-art  { width: clamp(400px, 44vw, 480px); height: clamp(400px, 44vw, 480px); }

  .p-title    { font-size: 45px; }
  .p-list li  { font-size: 15px; width: 100% !important; }
  .p-badge    { font-size: 12.5px; }
  .pill       { font-size: 14px; }
  .p-tag-line { font-size: 15px; }
  .p-caption  { font-size: 14px; }
  .q-hint     { font-size: 15px; }
  select.wl-inp { font-size: 16px; }
}

@media (min-width: 2560px) {
  .slide-inner { max-width: 860px; }
  #s3 .slide-inner, #s4 .slide-inner, #s5 .slide-inner,
  #s6 .slide-inner, #s8 .slide-inner { flex: 0 1 860px; }

  .slide-art  { width: clamp(480px, 40vw, 580px); height: clamp(480px, 40vw, 580px); }

  .p-title    { font-size: 52px; }
  .p-list li  { font-size: 17px; width: 100% !important; }
  .p-badge    { font-size: 14px; }
  .pill       { font-size: 15px; }
  .p-tag-line { font-size: 17px; }
  .p-caption  { font-size: 16px; }
  .q-hint     { font-size: 17px; }
  select.wl-inp { font-size: 17px; }
}

/* ═══════════════════════════════════════════
   MAX-WIDTH — tablet / mobile breakpoints
═══════════════════════════════════════════ */

/* ── 820px — large tablet ── */
@media (max-width: 820px) {
  #NAV     { padding: 0 20px; }
  #DOTS    { display: none; }
  #ARROWS  { right: 16px; bottom: 22px; }
  #CNT     { left: 16px; bottom: 10px; }

  .slide   { padding-right: 24px; }
  .slide-inner { max-width: 100%; }

  .p-badge { font-size: 9.5px; margin-bottom: 20px; }
  .p-title { font-size: clamp(24px,5vw,34px); margin-bottom: 14px; }
  .p-list  { gap: 2px; }
  .p-list li { font-size: 12px; padding: 8px 10px; width: 100% !important; }
  .p-caption { font-size: 11.5px; }

  /* Scrollable column layout on mobile — like the form slide */
  #s2, #s3, #s4, #s5, #s6, #s7, #s8 {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #s2::-webkit-scrollbar, #s3::-webkit-scrollbar, #s4::-webkit-scrollbar,
  #s5::-webkit-scrollbar, #s6::-webkit-scrollbar, #s7::-webkit-scrollbar,
  #s8::-webkit-scrollbar { display: none; }
  #s2 .slide-inner, #s3 .slide-inner, #s4 .slide-inner,
  #s5 .slide-inner, #s6 .slide-inner, #s7 .slide-inner,
  #s8 .slide-inner {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 clamp(16px, 4vw, 32px);
  }
  .slide-art {
    display: block;
    flex: 0 0 auto;
    width: clamp(168px, 62.4vw, 240px);
    height: clamp(168px, 62.4vw, 240px);
    margin: 16px auto 0;
    align-self: center;
  }

}

/* ── 760px ── */
@media (max-width: 760px) {
  .hero-inner {
    padding: clamp(76px,8vh,96px) clamp(18px,5vw,32px) 50px;
  }
  .he-q {
    font-size: clamp(24px,6.8vw,46px);
    letter-spacing: -.04em;
  }
  .hero-enter { max-width: 100%; }

  .final-h   { font-size: clamp(24px,6.5vw,30px); white-space: normal; }
  .final-sub { font-size: 13px; }

  .wl-form { padding: clamp(16px,4vw,22px); gap: 14px; border-radius: 14px; }
  .q-label { font-size: 15px; }

  .thank-you-title { font-size: clamp(40px,10vw,56px); }
  .thank-you-copy  { font-size: 15px; }
}

/* ── 640px — phone ── */
@media (max-width: 640px) {
  :root {
    --NAV-H: 54px;
    --FTR-H: 50px;
  }

  #NAV { padding: 0 14px; }
  .brand-logo { height: 32px; }

  .slide { padding-left: 16px; padding-right: 20px; padding-bottom: 52px; padding-top: calc(var(--NAV-H) + env(safe-area-inset-top, 0px) + 26px); }

  .p-title    { font-size: clamp(22px,5.9vw,31px); }
  .p-tag-line { font-size: 12px; margin-bottom: 8px; }
  .p-list     { gap: 1px; margin-bottom: 6px; }
  .p-list li  { font-size: 11.5px; padding: 7px 9px; }
  .p-badge    { font-size: 9px; margin-bottom: 20px; }
  .p-caption  { display: none; }
  .p-cta      { margin-top: 12px; padding: 10px 20px; }

  .he-q      { font-size: clamp(20px,7vw,34px); }
  .he-l3     { font-size: clamp(14px, .28em, 16px); }  /* floor body text on phone */
  .he-l1 {  font-size: .7em; letter-spacing: -.05em; white-space: nowrap;  }
  .hero-inner { padding: clamp(68px,7vh,82px) 16px 44px; }
  .hero-enter { padding: 10px 20px; font-size: 9px; width: auto; max-width: 200px; }

  .final-h   { font-size: clamp(22px,7vw,28px); }
  .final-sub { font-size: 12.5px; margin-bottom: 12px; }

  .wl-form { padding: 16px; gap: 12px; border-radius: 12px; }
  .q-label { font-size: 14.5px; }
  .q-hint  { font-size: 13px; }

  .wl-btn  { font-size: 13px; padding: 13px 28px; }
  .wl-note { font-size: 11px; }

  .thank-you-title   { font-size: clamp(34px,10vw,48px); letter-spacing: -2px; }
  .thank-you-copy    { font-size: 16px; }
  .ty-badge          { font-size: 11.5px; padding: 5px 12px; }

  .reveal-headline   { font-size: clamp(28px,7.5vw,40px); }
  .reveal-sub        { font-size: 12px; }
  .stamp             { font-size: 10.5px; }

  #ARROWS { gap: 5px; }
  .abtn   { width: 30px; height: 30px; font-size: 11px; }
}

/* ── 375px — smallest phone ── */
@media (max-width: 375px) {
  .he-q     { font-size: clamp(18px,6.5vw,28px); }
  .he-l3    { font-size: clamp(11px, .28em, 14px); }
  .he-l1 {  font-size: .65em; letter-spacing: -.05em; white-space: nowrap;  }
  .p-title  { font-size: clamp(18px,5.9vw,25px); }
  .final-h  { font-size: 20px; }
  .wl-form  { gap: 10px; padding: 14px; }
  .q-label  { font-size: 14px; }
  .thank-you-title { font-size: clamp(30px,9vw,40px); }
}

/* ── 360px — narrowest common phone (SE / mini / small Android) ── */
@media (max-width: 360px) {
  .he-q  { font-size: clamp(16px,6vw,24px); }
  .he-l1 { font-size: .65em; letter-spacing: -.05em; white-space: nowrap; }
}

/* ═══════════════════════════════════════════
   MAX-HEIGHT — landscape + short viewports
═══════════════════════════════════════════ */

@media (max-height: 600px) {
  .slide { padding-top: calc(var(--NAV-H) + 4px); padding-bottom: 44px; }

  .p-title     { font-size: clamp(20px,3.4vw,31px); margin-bottom: 10px; }
  .p-list      { gap: 1px; }
  .p-list li   { padding: 6px 8px; font-size: 11.5px; }
  .p-badge     { margin-bottom: 20px; }
  .p-cta       { padding: 10px 22px; margin-top: 10px; }

  /* Cap SVG art in landscape so it doesn't crowd the short viewport */
  .slide-art   { width: 180px; height: 180px; }

  .s10-content { padding-top: calc(var(--NAV-H) + 6px); }
  .final-h     { font-size: clamp(18px,4.5vw,26px); }
  .wl-form     { gap: 8px; padding: 12px 14px; }
  .q-label     { font-size: 13.5px; }
  .q-hint      { font-size: 12px; margin-bottom: 4px; }
  .wl-btn      { padding: 11px 24px; }
}

@media (max-height: 500px) {
  .hero-inner { min-height: unset; padding-top: 62px; padding-bottom: 30px; }
  .he-q { font-size: clamp(22px,5vw,34px); }

  .s10-content { padding-top: calc(var(--NAV-H) + 2px); }
  .wl-form { gap: 7px; }
}