/* Crux V5. Mobile experience layer.
 * A coherent phone-first refinement over the approved desktop system. Every
 * rule here lives inside a max-width media query, so DESKTOP IS UNTOUCHED.
 * Loaded LAST on marketing pages. Goals: tighter vertical rhythm, calmer
 * pacing, compact cards, progressive disclosure for long lists, and a clear
 * conversion path on a phone. No new dependencies, no framework.
 * Breakpoints: 48rem (768) tablet-down, 30rem (480) phone, 20rem (320) small.
 */

/* Mobile-only price-comparison strip: hidden on desktop, shown on phones. */
.ptiers-glance { display: none; }

/* ============================================================= */
/* Phone and small tablet (<= 768px)                              */
/* ============================================================= */
@media (max-width: 48rem) {

  /* ---- Section rhythm: calmer, more deliberate pacing ---- */
  .home .sec { padding-block: 2.4rem; }
  .home .hero.sec { padding-top: 1.6rem; padding-bottom: 2.2rem; }
  .home .hero + .sec { padding-top: 2.2rem; }
  .home .close.sec { padding-block: 2.6rem; }
  .home .sec__head { margin-bottom: 0.25rem; }
  .home .sec__lead { margin-top: 0.7rem; }

  /* Non-home marketing pages (solutions/about/contact) share the calmer rhythm */
  body:not(.home) main .sec,
  body:not(.home) main > section { padding-block: 2.4rem; }

  /* ---- Typography: readable, not oversized ---- */
  .home .hero__title,
  .home h1.display { font-size: clamp(1.9rem, 8.4vw, 2.35rem); line-height: 1.08; }
  .home .close .display,
  .home h2.display { font-size: clamp(1.7rem, 7.6vw, 2.1rem); line-height: 1.1; max-width: none; }
  .home h2.sec__title { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.12; }
  .home .hero__lede { font-size: 1.02rem; line-height: 1.5; max-width: none; }
  .home .sec__lead { font-size: 1rem; line-height: 1.5; }
  .home .kicker { font-size: 0.66rem; }

  /* ---- Hero: tighter, faster to purpose ---- */
  .home .hero__demo-note { margin-top: 0.7rem; font-size: 0.82rem; }
  .home .hero__trust { margin-top: 1.1rem; gap: 0.5rem 1rem; }
  .home .hero__media { margin-top: 1.6rem; }
  .home .actions { margin-top: 1.4rem; gap: 0.6rem; }

  /* ---- Buttons: comfortable phone tap targets, full width primary path ---- */
  .home .actions .btn { width: 100%; min-height: 3rem; font-size: 1rem; }
  .home .actions .reassure { width: 100%; text-align: center; margin-top: 0.1rem; }
  .home .hero__trust { justify-items: start; }

  /* ---- Cards / panels: trimmer padding, less bordered-box fatigue ---- */
  .home .lane { padding: 0.85rem 0.9rem 1rem; }
  .home .register__row { padding-block: 0.7rem; }
  .home .compare__col { padding: 1.15rem 1.15rem 1.25rem; }
  .home .qbflow__side { padding: 1.1rem 1.15rem; }
  .home .system__cell { padding: 1.1rem 1.15rem; }
  .home .evalitem { padding: 1.1rem 1.15rem; }
  .home .rolepanel { padding: 1.1rem; }

  /* ---- Human / team: compact rows, all content kept visible ---- */
  .home .team { gap: 0.7rem; margin-top: 1.1rem; }
  .home .team__card { padding: 1rem 1.1rem; gap: 0.3rem; border-top-width: 2px; }
  .home .team__outcome { font-size: 0.97rem; line-height: 1.45; }
  .home .team__from { font-size: 0.72rem; }
  .home .team__sum { margin-top: 1.1rem; font-size: 1rem; padding-left: 0.85rem; }

  /* ---- Operational estimator: clear output hierarchy, touch friendly ---- */
  .home .roi__grid { gap: 1.1rem; }
  .home .roi__inputs { gap: 1.15rem; }
  .home .roi__field input[type="range"] { height: 1.9rem; }
  .home .roi__out { padding: 1.05rem 1.1rem; }
  .home .roi__metric { padding: 0.5rem 0; }
  .home .roi__v { font-size: 1.65rem; }
  .home .roi__metric--soft .roi__v { font-size: 1.2rem; }
  .home .roi__formula { font-size: 0.72rem; }

  /* ---- Wider-platform capabilities: accessible accordion on phones ---- */
  .home .capbreadth { gap: 0.7rem; margin-top: 1.1rem; }
  .home details.capgroup { padding: 0; }
  .home details.capgroup > summary.capgroup__label {
    cursor: pointer; margin: 0; padding: 0.9rem 1.05rem; min-height: 3rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.78rem;
  }
  .home details.capgroup > summary.capgroup__label::after {
    content: "+"; font-family: var(--font-body); font-size: 1.35rem; line-height: 1; color: var(--ink-muted); font-weight: 400;
  }
  .home details.capgroup[open] > summary.capgroup__label::after { content: "\2212"; }
  .home details.capgroup > .capgroup__list { padding: 0 1.05rem 1.05rem; }

  /* ---- Pricing: tighter cards + at-a-glance price comparison strip ---- */
  .home .ptiers { gap: 0.9rem; margin-top: 1.2rem; }
  .home .ptier { padding: 1.4rem 1.3rem; }
  .home .ptier__list { margin: 0.9rem 0 1.2rem; gap: 0.45rem; }
  .home .ponboard { padding: 1.3rem 1.4rem; }
  .home .getcrux { gap: 0.8rem; margin-top: 1.3rem; }
  .home .getcrux__step { padding: 1.1rem 1.2rem; }
  .home .qfit { gap: 0.9rem; margin-top: 1.3rem; }
  .ptiers-glance {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 1.2rem;
  }
  .ptiers-glance__item {
    display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; text-align: center;
    background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong);
    border-radius: var(--radius-sm); padding: 0.7rem 0.5rem;
  }
  .ptiers-glance__item--feat { border-top-color: var(--yellow); box-shadow: 0 4px 14px rgba(20,26,60,0.08); }
  .ptiers-glance__name { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
  .ptiers-glance__price { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--ink); display: block; }
  .ptiers-glance__unit { font-family: var(--font-mono); font-size: 0.58rem; color: var(--ink-muted); display: block; }
  /* The strip follows the billing control. Both periods are in the markup, so
     with scripting off the strip reads "$1,075 / month" and "$11,825 billed
     annually" one under the other, same as the cards do. */
  .ptiers-glance__pane { display: block; }
  .ptiers-glance__pane + .ptiers-glance__pane { margin-top: 0.3rem; }
  [data-billing-enhanced] .ptiers-glance__pane[data-billing-pane="annual"] { display: none; }
  [data-billing-enhanced][data-billing-mode="annual"] .ptiers-glance__pane[data-billing-pane="annual"] { display: block; }
  [data-billing-enhanced][data-billing-mode="annual"] .ptiers-glance__pane[data-billing-pane="monthly"] { display: none; }
  [data-billing-enhanced] .ptiers-glance__pane + .ptiers-glance__pane { margin-top: 0; }

  /* ---- Mobile menu: Book a Demo primary, Experience Crux secondary ---- */
  .mobilenav .mobilenav__exp {
    margin-top: 0.65rem; background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.34);
  }
  .mobilenav .mobilenav__exp:hover, .mobilenav .mobilenav__exp:focus-visible { border-color: var(--yellow-500); color: var(--yellow-500); }
  .mobilenav__cta { margin-bottom: 0; }

  /* ---- Footer: compact, scannable, not a second page ---- */
  .footer { padding-block: 2.2rem 1.6rem; }
  .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.1rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__heading { font-size: 0.72rem; margin-bottom: 0.5rem; }
  .footer__links { gap: 0.15rem; }
  .footer__links a { padding-block: 0.35rem; display: inline-block; }
  .footer__legal { margin-top: 1.4rem; }
}

/* ============================================================= */
/* Phone (<= 480px)                                               */
/* ============================================================= */
@media (max-width: 30rem) {
  .home .sec { padding-block: 2.1rem; }
  .home .hero__media { margin-top: 1.3rem; }
  .home .container,
  body:not(.home) .container { padding-inline: 1.15rem; }
}

/* ============================================================= */
/* Small phone (<= 340px)                                         */
/* ============================================================= */
@media (max-width: 21.25rem) {
  .home .hero__title, .home h1.display { font-size: 1.72rem; }
  .home .footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================= */
/* MOBILE INTERACTION FLOW                                        */
/* Control and its result must sit together on a phone.          */
/* Pattern A: compact stage rail + result directly beneath.      */
/* Pattern B: compact role segmented control + panel beneath.    */
/* Pattern C: control with the live result adjacent.             */
/* All desktop layouts are untouched (max-width only).           */
/* ============================================================= */
@media (max-width: 48rem) {

  /* ---- PATTERN A: homepage workflow demo ---- */
  /* Order: rail, progress, transport controls, then the result frame. */
  .home .demo { display: flex; flex-direction: column; }
  .home .demo__hint { order: 0; }
  .home .demo[data-enhanced] .demo__tracker { order: 1; }
  .home .demo[data-enhanced] .demo__progress { order: 2; }
  .home .demo[data-enhanced] .demo__controls { order: 3; margin-top: 0.9rem; }
  .home .demo__frame { order: 4; margin-top: 0.9rem; }
  /* Compact horizontally scrollable stage rail (the page never scrolls sideways) */
  .home .demo[data-enhanced] .demo__tracker {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 0.4rem; border: 0; background: transparent; border-radius: 0; padding: 0 0 0.4rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .home .demo__step {
    flex: 0 0 auto; width: auto; min-width: 8rem; scroll-snap-align: start;
    border: 1px solid var(--rule); border-top: 3px solid transparent; border-radius: 8px;
    padding: 0.5rem 0.75rem 0.55rem; background: var(--card);
  }
  .home .demo__step.is-active { border-color: var(--rule-strong); border-top-color: var(--yellow); box-shadow: 0 4px 12px rgba(20, 26, 60, 0.08); }
  /* Result panel first inside the frame, context (queue, trail) after. */
  .home .demo__frame { display: flex; flex-direction: column; }
  .home .demo__stage { order: 1; }
  .home .demo__queue { order: 2; }
  .home .demo__trailwrap { order: 3; }

  /* ---- PATTERN A: platform + budget-vs-actual workflow rail ---- */
  .home .wf[data-enhanced] .wf__rail {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem;
    padding-bottom: 0.4rem; scroll-snap-type: x proximity;
  }
  .home .wf__step { flex: 0 0 auto; scroll-snap-align: start; }

  /* ---- PATTERN A: job-cost level explorer (show only the active level) ---- */
  /* High specificity to beat the shared [data-selector][data-enhanced] .segbar base. */
  .home .hierx[data-selector][data-enhanced] .hierbar {
    display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0.35rem;
    padding: 0.3rem; scroll-snap-type: x proximity;
  }
  .home .hierx[data-selector][data-enhanced] .hierbar .segbtn { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
  .home .hierx .hlev { display: none; }
  .home .hierx .hlev.is-active { display: block; }
  .home .hierx .hier { margin-top: 0.9rem; }

  /* ---- PATTERN B: role selector as a compact segmented control ---- */
  .home .roles[data-enhanced] .roles__tabs {
    flex-wrap: nowrap; gap: 0.3rem; margin-bottom: 1rem; border-bottom: 0;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; padding: 0.25rem;
  }
  .home .sec--dark .roles[data-enhanced] .roles__tabs { background: rgba(255, 255, 255, 0.06); border-color: var(--line-dark); }
  .home .roles__tab {
    flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.8rem; line-height: 1.15;
    padding: 0.55rem 0.35rem; border-radius: 7px; border-bottom: 0;
  }
  .home .roles__tab[aria-selected="true"] { background: var(--card); border-bottom: 0; box-shadow: 0 2px 8px rgba(20, 26, 60, 0.1); color: var(--ink); }
  .home .roles[data-enhanced] .roles__tab[aria-selected="true"] { background: var(--card); }
  .home .rolepanel + .rolepanel { margin-top: 0; }

  /* ---- PATTERN C: live financial result sits above its controls ---- */
  .home .budgetlab__out { order: -1; margin-bottom: 0.9rem; }
  .home .roi__out { order: -1; }

  /* ---- PATTERN A: pricing tier selector (glance strip drives one card) ---- */
  .home .ptiers-glance__item[aria-current="true"] {
    border-color: var(--blue); box-shadow: 0 4px 14px rgba(20, 26, 60, 0.14);
  }
  .home .ptiers.is-selecting .ptier { display: none; }
  .home .ptiers.is-selecting .ptier.is-shown { display: flex; }
}