/* =============================================================
   Tablet + phone (<= 1024px): the desktop composition is recomposed into one column.
   1rem = 10px on a 390px phone, growing to 11px max on tablets.
   ============================================================= */
@media (max-width: 1024px) {
  html { font-size: clamp(9px, calc(100vw / 39), 11px); }
  body { font-size: 1.5rem; }
  .btn--xl { width: 100%; height: 5.8rem; border-radius: 2rem; font-size: 1.6rem; }
  .btn--md { width: 21rem; height: 5.4rem; font-size: 1.5rem; border-radius: 2.7rem; }
  .h-center { font-size: 3.4rem; line-height: 3.8rem; }
  .h-light, .h-light--xl { font-size: 3.4rem; line-height: 3.8rem; }
  .h-dark { font-size: 3.6rem; line-height: 4rem; }

  /* sections flow; nothing absolutely placed */
  .hero_copy, .trusted, .trusted_label, .marquee, .feature_copy, .plans, .toggle, .clients_copy, .roster, .tiles, .support_copy,
  .steps, .services_cta, .clip, .subscribe_copy, .subscribe_form, .footer_brand, .footer_cols, .footer_copy, .plan_badge, .plan_price,
  .plan_name, .plan_list, .plan_btn, .tile svg, .tile h3, .tile p, .tile_link, .pager button { position: static; }
  section, .footer, .pager { height: auto !important; }
  .section_hero, .section_services, .section_feature, .section_pricing, .section_support, .section_clients, .footer { padding: 6rem 2rem; }
  .section_hero > *, .section_services > *, .section_feature > *, .section_pricing > *, .section_support > *, .section_clients > *, .footer > * { max-width: 72rem; margin-inline: auto; }

  /* nav: CTA + Menu only */
  .nav_component { height: 7rem; }
  .nav_inner { left: 2rem; right: 2rem; top: 1.4rem; height: 4.2rem; }
  .nav_list, .nav_login { display: none; }
  .nav_cta { width: auto; padding: 0 1.6rem; height: 4.2rem; }
  .nav_cta-wrap { display: flex; gap: .8rem; margin-left: auto; }
  .nav_menu-button { position: static; visibility: visible; opacity: 1; height: 4.2rem; }
  .nav-menu_content { padding: 1.4rem 2rem 3rem; }
  .nav-menu_link { font-size: min(5.4rem, 8svh); }
  .nav-menu_number { width: 5.4rem; font-size: 1.2rem; }
  .nav-menu_foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }

  /* hero */
  .section_hero { padding-top: 11rem; }
  .hero_title { width: auto; font-size: 4.4rem; line-height: 4.8rem; }
  .hero_text { width: auto; margin-top: 2rem; font-size: 1.6rem; line-height: 2.4rem; }
  .hero_actions { flex-direction: column; gap: 1.2rem; margin-top: 2.8rem; }
  .hero_visual { position: relative; height: 59rem; margin-top: 4rem; } /* phone mockup is 58.1rem tall */
  .board { left: 50%; top: 2rem; width: 62rem; height: 50rem; margin-left: -12rem; }
  .phone_float { left: 50%; top: 0; margin-left: -14.3rem; }
  .trusted { margin-top: 5rem; padding-top: 1rem; text-align: center; }
  .trusted_label { margin-bottom: 2.4rem; font-size: 1.3rem; }
  .logo { width: auto; height: 5.2rem; font-size: 2rem; }
  .logo--caps { font-size: 1.8rem; }
  .logo_mark { width: 2rem; height: 2rem; }

  /* services */
  .services_head .h-center { width: auto; }
  .services_lead, .section_services .services_lead { width: auto; margin-top: 1.6rem; font-size: 1.5rem; line-height: 2.2rem; }
  .steps { flex-direction: column; gap: 1.6rem; margin-top: 3.6rem; }
  .step { width: 100%; height: auto; padding: 3rem 2.4rem 3.4rem; }
  .step_icon { width: 8rem; height: 8rem; }
  .step_icon svg { width: 4.2rem; height: 4.2rem; }
  .step h3 { margin-top: 2.4rem; font-size: 2.2rem; }
  .step p { width: auto; margin-top: 1.2rem; font-size: 1.4rem; line-height: 2rem; }
  .services_cta { margin-top: 3.6rem; }

  /* features */
  .section_feature { display: flex; flex-direction: column; gap: 4rem; }
  .section_feature--a { flex-direction: column-reverse; }
  .section_feature .feature_copy, .section_feature .h-light { width: auto; }
  .feature_text, .section_feature--b .feature_text { width: auto; margin-top: 1.8rem; font-size: 1.5rem; line-height: 2.4rem; }
  .feature_copy .btn, .section_feature--b .feature_copy .btn { margin-top: 2.8rem; }
  .feature_link, .section_feature--b .feature_link { margin-top: 2.4rem; }
  .clip--green, .clip--yellow { width: 100%; height: auto; padding: 1.6rem 0 1.6rem 1.6rem; }
  .clip_panel--chart { height: 30rem; padding: 2rem 0 0 2rem; }
  .clip_title { font-size: 2rem; }
  .clip_chart { left: 7rem; top: 8rem; width: 26rem; }
  .clip_row { height: 8rem; margin-top: 1.4rem; font-size: 1rem; }
  .clip_row .day { margin-right: 1.4rem; width: 5.2rem; height: 5.4rem; }
  .clip_cell, .clip_cell--a { width: 10rem; }
  .clip_cell--a::after { left: 8.4rem; }
  .clip_cell strong { font-size: 1.6rem; }
  .clip_panel--seg { height: auto; padding: 1.8rem 1.8rem 2rem; }
  .seg li span { left: auto; right: 1.4rem; top: auto !important; }
  .seg li span::after { display: none; }
  .clip_duo { overflow: hidden; }
  .clip_panel--gauge { width: 24rem; height: auto; padding: 2rem 1.6rem; }
  .gauge--lg { width: 17rem; }
  .clip_panel--proj { width: 22rem; height: auto; }

  /* pricing */
  .pricing_head { padding-top: 0; }
  .pricing_title { width: auto; font-size: 3.4rem; line-height: 3.8rem; }
  .pricing_lead { width: auto; margin-top: 1.6rem; font-size: 1.4rem; line-height: 2rem; }
  .plans { display: grid; gap: 2rem; margin-top: 3.2rem; }
  .plan { width: auto; height: auto; padding: 2.6rem; display: grid; gap: 1.2rem; }
  .plan::before { display: none; }
  .plan_badge { width: max-content; height: 3.8rem; font-size: 1.5rem; border-radius: 1.2rem; padding: 0 1.2rem; }
  .plan_amount { font-size: 5.4rem; line-height: 6rem; }
  .plan_name { font-size: 1.8rem; }
  .plan_list { font-size: 1.5rem; gap: .6rem; margin: 1rem 0; }
  .plan_btn { height: 5.6rem; font-size: 1.6rem; margin-top: 1rem; }

  /* support */
  .section_support .h-dark { width: auto; }
  .support_lead { width: auto; margin-top: 1.8rem; font-size: 1.4rem; line-height: 2rem; }
  .checks { margin-top: 2.6rem; gap: 1.6rem; font-size: 1.6rem; }
  .checks li { margin-left: 0; }
  .tiles { margin-top: 3.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .tile { height: auto; min-height: 24rem; padding: 2rem; border-radius: 2.2rem; display: flex; flex-direction: column; }
  .tile svg { width: 4.6rem; height: 4.6rem; }
  .tile h3 { margin-top: 1.8rem; font-size: 2rem; line-height: 2.4rem; }
  .tile p { width: auto; margin-top: 1rem; font-size: 1.3rem; line-height: 1.8rem; }
  .tile_link { margin-top: auto; padding-top: 1.6rem; font-size: 1.3rem; }

  /* clients */
  .section_clients { display: flex; flex-direction: column-reverse; gap: 3rem; }
  .clients_copy .h-light { width: auto; }
  .clients_lead { width: auto; margin-top: 1.6rem; font-size: 1.4rem; line-height: 2rem; }
  .roster { width: 100%; height: auto; padding: 1.6rem; gap: 1.2rem; border-radius: 2.8rem; }
  .member { height: auto; padding: 1.8rem; grid-template-columns: 5.2rem 1fr; column-gap: 1.4rem; border-radius: 2.2rem; }
  .avatar--lg { width: 5.2rem; height: 5.2rem; font-size: 1.6rem; }
  .member h3 { font-size: 1.8rem; line-height: 2.2rem; }
  .member_role, .member_tasks { font-size: 1.4rem; line-height: 1.9rem; }
  .member_tasks { margin-top: 1.4rem; }
  .pager { display: flex; justify-content: center; align-items: center; gap: 1.2rem; padding: 4rem 0; }

  /* subscribe */
  .section_subscribe { height: auto !important; margin: 0 2rem 6rem; padding: 3rem 2.2rem 4.6rem; }
  .subscribe_copy h2 { font-size: 2.6rem; line-height: 3.2rem; }
  .subscribe_copy p { width: auto; margin: 1rem 0 0; font-size: 1.3rem; line-height: 1.8rem; }
  .subscribe_form { left: auto; top: auto; width: auto; height: 5.8rem; margin-top: 2.2rem; position: relative; border-radius: 1.8rem; }
  .subscribe_form input { padding: 0 13rem 0 1.6rem; font-size: 1.4rem; }
  .subscribe_form button { position: absolute; top: 0; width: 12.4rem; height: 100%; padding: 0 1.4rem; font-size: 1.3rem; border-radius: 1.8rem; }
  .subscribe_status { position: absolute; left: 0; }

  /* footer */
  .footer { padding-bottom: 4rem; }
  .footer_h { width: auto; font-size: 2.8rem; line-height: 3.4rem; }
  .footer_s { margin-top: 1.4rem; font-size: 1.3rem; }
  .footer_cols { margin-top: 3.6rem; grid-template-columns: 1fr 1fr; gap: 2rem 2rem; }
  .footer_cols li { height: 4.4rem; font-size: 1.6rem; }
  .footer_copy { margin-top: 2.4rem; }
}

/* Tablet: two-up cards and plans where there is room */
@media (min-width: 640px) and (max-width: 1024px) {
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: 1fr 1fr; }
  .footer_cols { grid-template-columns: repeat(4, 1fr); }
  .section_clients { flex-direction: row; align-items: center; }
  .section_clients > * { flex: 1; }
}

/* Phones: the phone mockup stands alone (the dashboard behind it only adds clutter at this size) */
@media (max-width: 639px) {
  .board { display: none; }
  .hero_visual { height: 59rem; }
}
@media (min-width: 640px) and (max-width: 1024px) {
}

/* ---------- v3 sections on tablet + phone ---------- */
@media (max-width: 1024px) {
  .hero_pill { height: 3.4rem; margin-bottom: 2.4rem; font-size: 1.3rem; }
  .hero_glow { display: none; }
  .marquee { margin-top: 0; }
  .logo { width: 16rem; flex: none; }
  .eyebrow { height: 3rem; margin-bottom: 1.8rem; font-size: 1.25rem; }
  .section_services { padding-top: 6rem; }

  .section_stats { padding: 4rem 2rem 2rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 2.8rem 2.2rem; }
  .stat:nth-child(3) { box-shadow: inset 0 1px 0 #2e2e2e; }
  .stat:nth-child(4) { box-shadow: inset 1px 0 0 #2e2e2e, inset 0 1px 0 #2e2e2e; }
  .stat_value { font-size: 4.4rem; }
  .stat_label { margin-top: 1rem; font-size: 1.35rem; line-height: 1.9rem; }

  .section_integrations { padding: 6rem 2rem; }
  .section_integrations .h-center, .section_integrations .services_lead { width: auto; }
  .section_integrations .services_lead { font-size: 1.5rem; line-height: 2.2rem; }
  .hub { width: auto; height: auto; max-width: 56rem; margin-top: 4rem; display: flex; flex-direction: column; align-items: center; gap: 3rem; }
  .hub_lines { display: none; }
  .hub_core { position: relative; left: auto; top: auto; margin: 1.6rem 0 0; width: 11rem; height: 11rem; border-radius: 2.8rem; order: -1; }
  .hub_apps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; width: 100%; }
  .hub_app { position: static; width: auto; height: 5.6rem; flex-direction: row !important; font-size: 1.5rem; }

  .plan_tag { right: 2.4rem; top: -1.5rem; height: 3rem; font-size: 1.3rem; }
  .toggle { position: relative; top: auto; margin-top: 3rem; }
  .toggle_opt { height: 4.2rem; padding: 0 1.8rem; font-size: 1.4rem; }

  .section_faq { display: block; padding: 2rem 2rem 6rem; }
  .h-dark--md { font-size: 3.6rem; line-height: 4rem; }
  .faq_lead { width: auto; font-size: 1.5rem; line-height: 2.2rem; }
  .faq_card { margin: 3rem 0 3.6rem; padding: 2.4rem; }
  .faq_card p { font-size: 1.5rem; line-height: 2.2rem; }
  .faq_q { padding: 2rem 0; font-size: 1.7rem; line-height: 2.3rem; }
  .faq_q i { width: 3rem; height: 3rem; }
  .faq_a p { font-size: 1.5rem; line-height: 2.2rem; padding-bottom: 2rem; }
  .faq_list { order: 2; }
}
@media (max-width: 520px) {
  .toggle_opt em { display: none; }
  .toggle_opt { padding: 0 2.4rem; }
}

/* ---------- v4 additions on tablet + phone ---------- */
@media (max-width: 1024px) {
  .section_statement { padding: 7rem 2rem 3rem; }
  .statement { font-size: 3.2rem; line-height: 3.8rem; text-align: left; }
  .board_live { right: 2.4rem; top: 2.4rem; }
  .footer { height: auto !important; padding-bottom: 14rem; }
  .footer_copy { top: auto; }
  .footer_mark { left: 2rem; right: 2rem; bottom: -.8rem; font-size: 7vw; }
}

/* ---------- Brand on tablet + phone ---------- */
@media (max-width: 1024px) {
  .nav_brand { left: 2rem; top: 1.4rem; height: 4.2rem; }
  .brand_mark { width: 3.4rem; height: 3.4rem; }
  .brand_word { font-size: 2.1rem; }
  .footer_logo { margin-bottom: 2.4rem; }
  .footer_logo .brand_mark { width: 3.6rem; height: 3.6rem; }
  .footer_logo .brand_word { font-size: 2.4rem; }
}
@media (max-width: 380px) { .brand_word { font-size: 1.9rem; } .nav_cta { padding: 0 1.2rem; } }