/*
========================================================
 KYNTRACT MOBILE UX DENSITY SYSTEM
 Mobile browsers only.
 No content is removed or permanently hidden.
 Desktop/tablet presentation remains unchanged.
========================================================
*/

@media (max-width: 760px) {

  html {
    scroll-padding-top: 76px;
  }

  body {
    overflow-x: hidden;
  }

  main,
  .content,
  .admin-content,
  .wrap,
  .k-workspace-main {
    min-width: 0;
  }


  /* ====================================================
     1. PUBLIC WEBSITE — REMOVE EXCESS VERTICAL SPACE
     ==================================================== */

  .wrap {
    padding: 34px 16px !important;
  }

  main h1,
  main h2,
  main h3 {
    margin-top: 8px;
    margin-bottom: 10px;
  }

  main p {
    margin-top: 7px;
    margin-bottom: 9px;
  }

  main section {
    scroll-margin-top: 76px;
  }

  main section + section {
    margin-top: 0;
  }


  /* ====================================================
     2. MARKETING CARD RAILS
     Keep every card but avoid endless one-card-per-row
     mobile stacking.
     ==================================================== */

  .feature-grid,
  .features-grid,
  .solution-grid,
  .solutions-grid,
  .platform-grid,
  .proof-grid,
  .resource-grid,
  .resources-grid,
  .pricing-grid,
  .plan-grid {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 7px;
  }

  .feature-grid > *,
  .features-grid > *,
  .solution-grid > *,
  .solutions-grid > *,
  .platform-grid > *,
  .proof-grid > *,
  .resource-grid > *,
  .resources-grid > *,
  .pricing-grid > *,
  .plan-grid > * {
    flex: 0 0 min(84vw, 360px) !important;
    width: min(84vw, 360px);
    scroll-snap-align: start;
  }


  /* ====================================================
     3. HOMEPAGE SIGNAL / VALUE CONTENT
     Desktop-style information density on phone.
     ==================================================== */

  .signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .signal-item {
    min-width: 0;
    padding: 14px !important;
  }

  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .value {
    min-width: 0;
    padding: 14px !important;
  }


  /* ====================================================
     4. AUTHENTICATED WORKSPACE
     ==================================================== */

  .k-workspace-main .content {
    padding: 14px !important;
  }

  .k-workspace-main .card {
    padding: 14px !important;
    margin-bottom: 10px !important;
    border-radius: 13px;
  }

  .k-workspace-main .split {
    gap: 10px !important;
  }

  .k-workspace-main .grid:has(> .kpi),
  .k-workspace-main .grid3:has(> .kpi) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .k-workspace-main .kpi {
    min-width: 0;
    padding: 13px !important;
  }

  .k-workspace-main .kpi .value {
    font-size: 23px !important;
    line-height: 1.1;
  }


  /* ====================================================
     5. FORMS
     Compact rhythm without shrinking readable fonts.
     ==================================================== */

  .k-workspace-main .form-grid {
    gap: 10px !important;
  }

  .k-workspace-main form {
    row-gap: 10px;
  }

  .k-workspace-main input,
  .k-workspace-main select,
  .k-workspace-main textarea {
    margin-top: 4px;
  }


  /* ====================================================
     6. FINANCE & BILLING — COMPACT MOBILE WORKSPACE
     ==================================================== */

  .billing-head {
    padding: 14px !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
  }

  .billing-head h2 {
    margin-bottom: 3px !important;
  }

  .billing-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    max-width: 100%;
  }

  .billing-actions > * {
    flex: 0 0 auto;
  }

  .b-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .b-kpi {
    min-height: 0 !important;
    padding: 14px !important;
  }

  .b-kpi .k-value {
    font-size: 24px !important;
    margin-top: 5px !important;
  }

  .b-filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
    margin-bottom: 12px !important;
  }

  .b-filter-tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .business-switcher {
    margin-bottom: 12px !important;
  }

  .business-chip {
    min-width: 165px !important;
    padding: 9px 11px !important;
  }

  .settings-section {
    border-radius: 13px !important;
  }

  .settings-section-title {
    padding: 13px 14px !important;
    gap: 10px !important;
  }

  .settings-section-body {
    padding: 14px !important;
    gap: 10px !important;
  }

  .items-section,
  .invoice-box,
  .invoice-notes,
  .invoice-summary {
    padding: 14px !important;
  }

  .composer-bar {
    min-height: 56px !important;
    padding: 10px 12px !important;
  }

  .b-table-wrap,
  .scroll,
  .line-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }


  /* ====================================================
     7. SUBSCRIPTION / PLAN CARDS
     Plans become a swipe rail rather than several huge
     vertically stacked cards.
     ==================================================== */

  .sub-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    padding: 3px 2px 9px;
  }

  .sub-plan {
    flex: 0 0 min(86vw, 370px);
    width: min(86vw, 370px);
    scroll-snap-align: start;
    margin: 0 !important;
  }

  .sub-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .sub-usage-item {
    padding: 11px !important;
  }

  .sub-lifecycle {
    padding: 14px !important;
  }

  .sub-billing-grid {
    gap: 10px !important;
  }


  /* ====================================================
     8. PLATFORM / ADMIN
     ==================================================== */

  .admin-content {
    padding: 14px !important;
  }

  .admin-main .card {
    padding: 14px !important;
    margin-bottom: 10px !important;
  }

  .admin-main .grid:has(> .kpi),
  .admin-main .grid3:has(> .kpi) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .admin-main .kpi .value {
    font-size: 23px !important;
  }

  .admin-main .split {
    gap: 10px !important;
  }


  /* ====================================================
     9. LOGIN / OTP / RECOVERY PANELS
     ==================================================== */

  body:has(> main.panel),
  body:has(.panel) {
    padding: 12px !important;
  }

  .panel {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }

  .panel h1 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  .panel .muted {
    margin-top: 6px;
    margin-bottom: 14px;
  }


  /* ====================================================
     10. SIGNUP
     ==================================================== */

  .signup-story h1 {
    font-size: 40px !important;
    line-height: 1.05 !important;
    margin: 10px 0 14px !important;
  }

  .signup-story > p {
    line-height: 1.6 !important;
  }

  .signup-mark {
    width: 86px !important;
    height: 86px !important;
    margin-bottom: 18px !important;
  }

  .trial-benefits {
    gap: 10px !important;
    margin: 20px 0 !important;
  }

  .trial-benefit {
    gap: 10px !important;
  }

  .plan-summary {
    padding: 13px 14px !important;
  }


  /* ====================================================
     11. TABLE UX
     Never squeeze tables into unreadable mobile columns.
     ==================================================== */

  .scroll,
  .b-table-wrap,
  .line-scroll {
    max-width: 100%;
    overflow-x: auto !important;
  }

  table {
    max-width: none;
  }


  /* ====================================================
     12. BUTTON GROUPS
     Avoid vertical towers of actions.
     ==================================================== */

  .actions {
    gap: 7px !important;
  }

  .actions:has(> .btn:nth-child(3)),
  .actions:has(> button:nth-child(3)) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .actions > .btn,
  .actions > button {
    flex: 0 0 auto;
  }


  /* ====================================================
     13. VERY SMALL PHONES
     ==================================================== */

  @media (max-width: 360px) {

    .values,
    .signal-grid {
      grid-template-columns: 1fr !important;
    }

    .b-kpis,
    .k-workspace-main .grid:has(> .kpi),
    .k-workspace-main .grid3:has(> .kpi),
    .admin-main .grid:has(> .kpi),
    .admin-main .grid3:has(> .kpi) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

  }

}


/* ========================================================
   PRINT SAFETY
   Mobile UX must never alter invoices/PDF/printed output.
   ======================================================== */

@media print {
  /* Intentionally empty. Existing print system wins. */
}

/* KYNTRACT REAL HOMEPAGE MOBILE MANAGEMENT GRID */

@media (max-width: 700px) {

  /*
  ================================================
  SECTION RHYTHM
  ================================================
  */

  .product-story,
  .capability-section,
  .workflow-section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .story-head,
  .capability-head,
  .workflow-head {
    margin-bottom: 20px !important;
  }


  /*
  ================================================
  CAPABILITY MANAGEMENT GRID

  Contracts
  Deployment
  Workforce
  Attendance
  Production
  Payroll
  Billing
  etc.
  ================================================
  */

  .capability-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;

    overflow: visible !important;
  }

  .capability-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 232px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 15px 13px !important;

    border-radius: 17px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    overflow: hidden;
  }

  .capability-card .capability-index {
    font-size: 10.5px !important;
    line-height: 1.2 !important;

    letter-spacing: .07em !important;

    margin: 0 0 11px !important;
  }

  .capability-card h2,
  .capability-card h3,
  .capability-card h4 {
    font-size: clamp(18px, 4.9vw, 21px) !important;
    line-height: 1.07 !important;

    letter-spacing: -.025em !important;

    margin: 0 0 9px !important;

    text-wrap: balance;
  }

  .capability-card p {
    font-size: 13.5px !important;
    line-height: 1.4 !important;

    margin: 0 0 10px !important;

    max-width: none !important;
  }

  .capability-card .capability-arrow {
    margin-top: auto !important;

    padding-top: 5px !important;

    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }


  /*
  ================================================
  PRODUCT STORY MANAGEMENT GRID

  Requirement
  Deployment
  Execution
  etc.
  ================================================
  */

  .story-grid {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;
  }

  .story-card {
    position: relative !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 250px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 16px 14px !important;

    border-radius: 18px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    overflow: hidden !important;
  }

  .story-card .story-number {
    font-size: 10.5px !important;
    line-height: 1.2 !important;

    letter-spacing: .07em !important;

    margin: 0 0 12px !important;
  }

  .story-card h2,
  .story-card h3,
  .story-card h4 {
    font-size: clamp(19px, 5vw, 22px) !important;
    line-height: 1.06 !important;

    letter-spacing: -.025em !important;

    margin: 0 0 10px !important;

    text-wrap: balance;
  }

  .story-card p {
    position: relative;
    z-index: 2;

    font-size: 13.5px !important;
    line-height: 1.42 !important;

    margin: 0 0 11px !important;

    max-width: none !important;
  }

  .story-card .story-link {
    position: relative;
    z-index: 3;

    margin-top: auto !important;

    padding-top: 6px !important;

    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }


  /*
  Keep decorative card visuals,
  but stop them occupying half a phone screen.
  */

  .story-card .story-visual {
    position: absolute !important;

    right: -28px !important;
    bottom: -20px !important;

    width: 72% !important;
    max-width: 145px !important;

    opacity: .30;

    pointer-events: none;
  }

  .story-card .story-bars {
    transform: scale(.76);
    transform-origin: right bottom;
  }


  /*
  ================================================
  WORKFLOW MANAGEMENT GRID
  ================================================
  */

  .workflow-line {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;

    overflow: visible !important;
  }

  .workflow-step {
    min-width: 0 !important;

    min-height: 190px !important;

    padding: 14px 13px !important;

    border-radius: 16px !important;

    display: flex !important;
    flex-direction: column !important;
  }

  .workflow-step h3,
  .workflow-step h4 {
    font-size: 18px !important;
    line-height: 1.08 !important;

    margin: 8px 0 !important;
  }

  .workflow-step p {
    font-size: 13.5px !important;
    line-height: 1.4 !important;

    margin-bottom: 0 !important;
  }


  /*
  ================================================
  PREVENT DESKTOP CARD DIMENSIONS FROM RETURNING
  ================================================
  */

  .capability-grid > *,
  .story-grid > *,
  .workflow-line > * {
    flex: initial !important;

    width: auto !important;
    max-width: none !important;

    scroll-snap-align: none !important;
  }


  /*
  ================================================
  SMALLER MOBILE WIDTH
  ================================================
  */

  @media (max-width: 390px) {

    .capability-grid,
    .story-grid,
    .workflow-line {
      gap: 8px !important;
    }

    .capability-card {
      min-height: 226px !important;

      padding: 14px 12px !important;
    }

    .story-card {
      min-height: 242px !important;

      padding: 14px 12px !important;
    }

    .workflow-step {
      min-height: 184px !important;

      padding: 13px 11px !important;
    }

    .capability-card p,
    .story-card p,
    .workflow-step p {
      font-size: 13px !important;
    }

    .capability-card h2,
    .capability-card h3,
    .story-card h2,
    .story-card h3 {
      font-size: 18px !important;
    }

  }

}

/* END KYNTRACT REAL HOMEPAGE MOBILE MANAGEMENT GRID */