/* =============================================
   RESPONSIVE — All Mobile Overrides
   ============================================= */

/* ---- Max 1100px ---- */
@media (max-width: 1100px) {
}

/* ---- Max 1024px ---- */
@media (max-width: 1024px) {
  .fg2 { grid-template-columns: 1fr 1fr }
  .proc-grid { grid-template-columns: 1fr }
  .pcta-in { flex-direction: column; text-align: center }
  .pcta-r { flex-direction: column }
}

/* ---- Max 900px ---- */
@media (max-width: 900px) {
  /* Nav */
  .nl {
    display: none !important;
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    background: var(--cream);
    flex-direction: column;
    padding: 16px;
    gap: 4px;
    border-bottom: 1px solid rgba(200, 164, 78, .15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
    z-index: 999;
  }
  .nl.mo { display: flex !important }
  .nl a { padding: 12px 16px; font-size: 15px; width: 100% }
  .nl .sep { display: none }
  .nl .cta { text-align: center; margin-top: 4px; border-radius: 10px; padding: 14px !important }
  .bur { display: flex; align-items: center }
  nav { padding: 10px 16px; top: 30px }
  nav.sc { padding: 8px 16px }
  .logo-i { width: 30px; height: 30px; font-size: 15px }
  .logo-t { font-size: 17px }
  .fchat { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 13px }

  /* Sections */
  .urgency-grid { grid-template-columns: repeat(2, 1fr) }
  .aidet-grid { grid-template-columns: 1fr 1fr }
  .turnitin-in { grid-template-columns: 1fr; gap: 32px }
  .pcalc-row { grid-template-columns: 1fr 1fr }
  .niches-grid { grid-template-columns: 1fr }
}

/* ---- Max 768px ---- */
@media (max-width: 768px) {
  /* Trust bar */
  .tbar { padding: 20px 16px; overflow: hidden }
  .tlogos { gap: 24px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; justify-content: flex-start }
  .tlogos::-webkit-scrollbar { display: none }
  .tl { height: 22px; flex-shrink: 0 }
  .tl-dartmouth { height: 30px; max-width: 110px }

  /* Forms */
  .frow { grid-template-columns: 1fr }
  .fs, .fi { font-size: 15px; min-height: 46px }
  .fta { font-size: 15px; height: 60px }
  .fsub { font-size: 15px; min-height: 52px }

  /* Media bar */
  .media-bar { padding: 16px }
  .media-logos { gap: 20px }
  .media-logo { font-size: 14px }
  .media-bar-in { gap: 16px; flex-direction: column }

  /* Writers */
  .writers { padding: 48px 16px }
  .writers-arrow { width: 36px; height: 36px }
  .writers-arrow-left { left: -8px }
  .writers-arrow-right { right: -8px }
  .writers-scroll-container { margin: 0 8px }
  .wcard { width: 220px; padding: 16px; border-radius: 12px }
  .wavatar { width: 40px; height: 40px; font-size: 18px }
  .wname { font-size: 13px }
  .wdeg { font-size: 10px }
  .wstars { font-size: 11px; margin-bottom: 6px }
  .wrating { font-size: 11px }
  .worders { font-size: 10px }
  .wtag { font-size: 9px; padding: 2px 6px }
  .whire { padding: 7px; font-size: 11px }
  .writers-dots { margin-top: 20px; gap: 6px }
  .writers-dot { width: 6px; height: 6px }
  .writers-dot.active { width: 22px }

  /* Reviews */
  .rev-section { padding: 48px 16px }
  .rev-platforms { gap: 10px }
  .rev-plat { padding: 5px 10px }
  .rev-plat:last-child { margin: 0 auto }
  .rev-card { width: 260px; padding: 18px; min-height: 170px }
  .rev-text { font-size: 13px }

  /* Turnitin */
  .turnitin { padding: 48px 16px }
  .turnitin-seal { display: none }
  .turnitin-filigree { display: none }
  .turnitin-trust { gap: 12px; justify-content: center }
  .tm-score-row { gap: 8px }
  .tm-stamp { width: 48px; height: 48px }

  /* Compare */
  .cmp { padding: 48px 16px }
  .cmp-d { font-size: 13px; margin-bottom: 24px }
  .ct { border-radius: 10px }
  .ct thead th { padding: 8px 6px; font-size: 10px; text-align: center }
  .ct thead th:first-child { text-align: left }
  .ct tbody td { padding: 9px 6px; font-size: 11px; line-height: 1.35 }
  .ct .ca, .ct .cs { width: auto; min-width: 0 }
  .cn { font-size: 12px }
  .csub { display: none }
  .vb, .vg { font-size: 10px }
  .vb .x { font-size: 12px }

  /* Features */
  .wh { padding: 48px 16px }
  .whd { font-size: 13px; margin-bottom: 28px }
  .fg2 { grid-template-columns: 1fr 1fr; gap: 10px }
  .fc { padding: 14px 12px; border-radius: 10px }
  .fic { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 8px }
  .fic svg { width: 16px; height: 16px }
  .fc h3 { font-size: 14px; margin-bottom: 3px }
  .fc p { font-size: 11px; line-height: 1.45 }

  /* Social proof */
  .spbar { padding: 16px 12px }
  .spbar-in { grid-template-columns: repeat(2, 1fr); gap: 8px }
  .spnum { padding: 8px 6px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .06) }
  .spnum:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .06) }
  .spnum:nth-last-child(-n+2) { border-bottom: none }
  .spnum-val { font-size: 24px; margin-bottom: 2px }
  .spnum-label { font-size: 10px }

  /* Pricing */
  .pri { padding: 40px 16px }
  .pri h2 { margin-bottom: 6px }
  .prd { margin-bottom: 20px; font-size: 13px }

  /* Calculator compact */
  .pcalc { padding: 16px; margin-bottom: 16px; border-radius: 12px }
  .pcalc-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px }
  .pcalc-label { font-size: 10px; margin-bottom: 4px }
  .pcalc-select { padding: 9px 12px; font-size: 12px; border-radius: 8px; max-width: 100%; width: 100%; box-sizing: border-box }
  .pcalc-row > div { min-width: 0; overflow: hidden }
  .pcalc-result { flex-direction: column; gap: 10px; text-align: center; padding: 12px 14px; border-radius: 8px }
  .pcalc-price { font-size: 28px }
  .pcalc-from { font-size: 12px }
  .pcalc-note { font-size: 10px }
  .pcalc-cta { width: 100%; padding: 10px 20px; font-size: 13px }

  /* Pricing cards — horizontal scroll */
  .pcs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent);
  }
  .pcs::-webkit-scrollbar { display: none }
  .pc {
    flex: 0 0 75%;
    min-width: 0;
    scroll-snap-align: center;
    padding: 20px 16px;
    border-radius: 12px;
  }
  .pc h3 { font-size: 10px; margin-bottom: 10px }
  .pi { padding: 7px 0 }
  .pi .pl, .pi .pa { font-size: 12px }

  /* Subjects */
  .subj { padding: 40px 0 }
  .subj-head { padding: 0 16px; margin-bottom: 20px }
  .st2 { padding: 8px 16px; font-size: 12px }

  /* Process */
  .proc { padding: 32px 16px }
  .proc-header { margin-bottom: 24px }
  .proc-laurel, .proc-crest { display: none }
  .proc-grid { gap: 24px }
  .steps2 { padding: 12px 12px }
  .stp { padding: 8px 0; gap: 12px }
  .stp-n { width: 30px; height: 30px; font-size: 11px }
  .stp-icon { width: 24px; height: 24px; margin-bottom: 2px }
  .stp-icon svg { width: 12px; height: 12px }
  .stp-b h4 { font-size: 15px; margin-bottom: 2px }
  .stp-b p { font-size: 12px; line-height: 1.4 }
  .metrics { gap: 8px }
  .metric-card { padding: 14px }
  .metric-card .mc-val { font-size: 28px }
  .mc-ring { width: 64px; height: 64px }
  .mc-ring svg { width: 64px; height: 64px }
  .mc-ring .ring-val { font-size: 18px }

  /* FAQ */
  .faq-home { padding: 48px 16px }
  .fqq { font-size: 13px; padding: 14px 16px }

  /* CTA */
  .pcta { padding: 40px 16px }

  /* About */
  .abh { padding: 100px 16px 40px }
  .abh-in { grid-template-columns: 1fr; gap: 28px }
  .abh h1 { font-size: 28px }
  .abh-f { padding: 22px 16px }
  .abh-corner { display: none }
  .abh-badges { gap: 8px }
  .abh-badge { font-size: 10px; padding: 6px 10px }
  .ab-stats-in { grid-template-columns: 1fr 1fr }
  .ab-stat { padding: 20px 14px }
  .ab-stat-val { font-size: 20px }
  .ab-mission { padding: 48px 16px }
  .ab-mission-values { grid-template-columns: 1fr }
  .faq-about { padding: 48px 16px }

  /* Contact */
  .cth { padding: 100px 16px 40px }
  .cth-in { grid-template-columns: 1fr; gap: 28px }
  .cth h1 { font-size: 28px }
  .cth-corner { display: none }
  .cth-promise { padding: 12px 14px }
  .cms { grid-template-columns: 1fr }
  .cm { display: flex; align-items: center; gap: 10px; text-align: left; padding: 14px }
  .cm::before { display: none }
  .cm svg { margin-bottom: 0 }
  .cth-trust { gap: 10px }
  .cfc { padding: 22px 16px }
  .map-section { padding: 40px 16px }
  .map-section-in { grid-template-columns: 1fr; gap: 24px }

  /* Footer */
  footer { padding: 32px 16px 16px }
  .ft { flex-direction: column; gap: 28px; align-items: center; text-align: center }
  .fb2 { display: flex; flex-direction: column; align-items: center }
  .fb2 .logo { justify-content: center }
  .ftg { text-align: center; max-width: 280px }
  .flg { flex-wrap: wrap; gap: 32px; justify-content: center }
  .fcl { text-align: center }
  .fbot { flex-direction: column; gap: 6px; align-items: center; text-align: center }

  /* Niches & Blog */
  .niches { padding: 48px 16px }
  .niche-card { padding: 24px 20px }
  .blog-prev { padding: 48px 16px }
  .blog-card { flex-direction: row }
  .blog-thumb { width: 100px; min-height: 100px }
  .blog-thumb-icon { font-size: 28px }
  .blog-body { padding: 14px 16px }
  .blog-title { font-size: 15px }
  .blog-excerpt { font-size: 12px; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

  /* Referral */
  .referral { padding: 32px 16px }
  .referral-in { flex-direction: column; text-align: center; padding: 28px 20px }
  .referral-cta { width: 100% }

  /* Live feed */
  .live-feed { bottom: 80px; left: 12px; right: 12px; max-width: none }
  .live-toast { padding: 10px 14px }

  /* Hero */
  .hero { padding: 100px 20px 40px; min-height: auto; align-items: flex-start }
  .hero::before { display: none }
  .hg { grid-template-columns: 1fr; gap: 32px }
  .up { font-size: 10px; padding: 6px 12px; margin-bottom: 18px }
  .hero h1 { font-size: 30px; margin-bottom: 16px; line-height: 1.2; opacity: 1; animation: none }
  .hero h1 br { display: none }
  .hsub { font-size: 15px; line-height: 1.7; margin-bottom: 22px; opacity: 1; animation: none }
  .mqc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    background: var(--em);
    color: var(--wh);
    border-radius: 12px;
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(13, 107, 78, .25);
  }
  .sp { flex-direction: row; gap: 10px; margin-bottom: 20px; opacity: 1; animation: none }
  .av { width: 28px; height: 28px; margin-left: -7px; font-size: 12px; border-width: 2px }
  .pt2 { font-size: 13px; line-height: 1.4 }
  .pt2 .st { font-size: 11px }
  .tr { display: none !important; margin: 0; padding: 0; height: 0; overflow: hidden }
  .hms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(200, 164, 78, .08);
    margin-top: 6px;
  }
  .hm-s { text-align: center }
  .hm-s strong { display: block; font-family: var(--fd); font-size: 20px; color: var(--em); line-height: 1.3 }
  .hm-s span { font-size: 10px; color: var(--mu); font-weight: 500 }
  .hfw { display: none }
  .hmf {
    display: block;
    margin-top: 24px;
    background: var(--wh);
    border-radius: 16px;
    padding: 22px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .06), 0 0 0 1px rgba(200, 164, 78, .08);
  }
  .hmf-head {
    text-align: center;
    margin-bottom: 18px;
  }
  .hmf-head h3 {
    font-family: var(--fd);
    font-size: 18px;
    font-weight: 700;
    color: var(--ch);
    margin: 0 0 4px;
  }
  .hmf-head p {
    font-size: 13px;
    color: var(--mu);
    margin: 0;
    font-weight: 400;
  }
  .hmf .frow { grid-template-columns: 1fr 1fr }
  .hmf .fg { margin-bottom: 10px; min-width: 0 }
  .hmf .fl { font-size: 11px; margin-bottom: 4px }
  .hmf .fs, .hmf .fi { font-size: 14px; min-height: 44px; max-width: 100%; width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box }
  .hmf .fg { overflow: hidden }

  /* Custom mobile dropdown for assignment types */
  .hmf .fg:has(.mobile-select-wrap) { overflow: visible }
  .mobile-select-wrap { position: relative }
  .mobile-select-wrap .fs { display: none }
  .mobile-select-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    padding-right: 30px;
    background: var(--ivory);
    border: 1.5px solid rgba(26, 26, 26, .07);
    border-radius: 9px;
    font-family: var(--fb);
    font-size: 14px;
    color: var(--ch);
    min-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all .3s;
  }
  .mobile-select-trigger.open {
    border-color: var(--em);
    background-color: var(--wh);
    box-shadow: 0 0 0 3px var(--em-s);
  }
  .mobile-select-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--wh);
    border: 1.5px solid rgba(26, 26, 26, .07);
    border-radius: 9px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    -webkit-overflow-scrolling: touch;
  }
  .mobile-select-list.open { display: block }
  .mobile-select-item {
    padding: 11px 12px;
    font-family: var(--fb);
    font-size: 14px;
    color: var(--ch);
    background: var(--wh);
    cursor: pointer;
    border-bottom: 1px solid rgba(26, 26, 26, .05);
  }
  .mobile-select-item:last-child { border-bottom: none }
  .mobile-select-item:active { background: rgba(26, 26, 26, .04) }
  .mobile-select-item.selected { background: #6c757d; color: #fff }

  .hmf .fta { font-size: 14px; height: 56px }
  .hmf .fsub { font-size: 14px; min-height: 50px; margin-top: 2px }
  .hmf .fmi { margin-top: 10px }
  .hmf .fmi span { font-size: 11px }
  .fg { margin-bottom: 10px }
  .fl { font-size: 11px; margin-bottom: 4px }

}

/* ---- Max 640px ---- */
@media (max-width: 640px) {
  .pb { font-size: 10px; gap: 4px; padding: 7px 10px }
  .hm { display: none }
  nav { top: 28px }
  .nl { top: 100% }
}

/* ---- Max 600px ---- */
@media (max-width: 600px) {
  .aidet { padding: 48px 16px }
  .aidet-head { margin-bottom: 24px }
  .aidet-head p { font-size: 13px }
  .aidet-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px }
  .aicard { padding: 16px; border-radius: 12px }
  .aicard-logo { gap: 8px; margin-bottom: 12px }
  .aicard-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 14px }
  .aicard-name { font-size: 13px }
  .aicard-type { font-size: 10px }
  .aicard-result { margin-bottom: 10px }
  .aicard-badge { padding: 4px 9px; font-size: 11px; border-radius: 6px }
  .aicard-badge svg { width: 12px; height: 12px }
  .aicard-score { font-size: 26px; margin-bottom: 2px }
  .aicard-label { font-size: 11px; margin-bottom: 10px }
  .aicard-bar { height: 6px }
  .aicard-note { font-size: 10px; margin-top: 8px }
  .aicard-blog-link { font-size: 10px; padding: 4px 10px; margin-top: 8px }
  .aidet-bottom { flex-direction: column; text-align: center; padding: 20px 16px }
  .urgency { padding: 40px 16px }
  .urgency-grid { grid-template-columns: 1fr 1fr; gap: 10px }
  .ucard { padding: 18px 14px }
}

/* ---- Max 480px ---- */
@media (max-width: 480px) {
  .tbar { padding: 16px 12px; overflow: hidden }
  .tlogos { gap: 20px }
  .tl { height: 18px }
  .tl-dartmouth { height: 26px; max-width: 100px }
  .writers-arrow { display: none }
  .writers-scroll-container { margin: 0 }
  .writers-track-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .writers-track-wrap::-webkit-scrollbar { display: none }
  .writers-track { transition: none; padding: 8px 0 }
  .wcard { width: 240px }
  .writers-head { margin-bottom: 24px }
  .writers-head-l h2 { font-size: 24px }
  .writers-head-l p { font-size: 12px }
  .writers-online { font-size: 11px }
  .exit-box { padding: 28px 20px }
  .exit-box h2 { font-size: 22px }
  .exit-input-row { flex-direction: column }

  /* Compare table — tight screens */
  .cmp { padding: 36px 10px }
  .ct thead th { padding: 7px 4px; font-size: 9px }
  .ct tbody td { padding: 7px 4px; font-size: 10px }
  .cn { font-size: 11px }
  .vb, .vg { font-size: 9px }

  /* Pricing — extra compact on small screens */
  .pri { padding: 32px 12px }
  .pcalc { padding: 14px; margin-bottom: 14px }
  .pc { flex: 0 0 80% }
}

/* ---- Max 380px ---- */
@media (max-width: 380px) {
  .hero { padding: 94px 16px 32px }
  .hero h1 { font-size: 26px; line-height: 1.2; margin-bottom: 14px }
  .hsub { font-size: 14px; line-height: 1.65; margin-bottom: 18px }
  .mqc { font-size: 14px; padding: 14px }
  .hm-s strong { font-size: 18px }
  .hm-s span { font-size: 9px }
  .pb { font-size: 9px }
  .hmf { padding: 18px 14px; margin-top: 20px }
  .hmf-head { margin-bottom: 14px }
  .hmf-head h3 { font-size: 16px }
  .hmf-head p { font-size: 12px }
  .hmf .frow { grid-template-columns: 1fr }
}
