/* ============================================================
   GPS Time Tracking Feature Page
   Responsive pattern mirrors case-study.css + isc-building-materials.css
   ============================================================ */

/* Desktop-only line break */
.gps-br-desktop { display: inline; }

/* Metric label — secondary green */
.gps-page .cs-metric__label { color: var(--secondary-green); }

/* ============================================================
   HERO
   ============================================================ */
.gps-hero {
    background: #fff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
}

.gps-hero__container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

/* ---------- Badge pills ---------- */
.gps-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.gps-hero__badge {
    backdrop-filter: blur(2px);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

/* ---------- Typography ---------- */
.gps-hero__title {
    font-size: 3.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}

.gps-hero__title-accent { color: var(--secondary-green); }

.gps-hero__subtitle {
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 2rem;
}

/* ---------- CTAs ---------- */
.gps-hero__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.gps-hero__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--secondary-green);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(24,168,125,0.3);
    transition: background 0.2s, box-shadow 0.2s;
}

.gps-hero__btn-primary:hover {
    background: var(--secondary-green-border);
    box-shadow: 0 6px 20px rgba(24,168,125,0.4);
}

/* ---------- Proof items ---------- */
.gps-hero__proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 1.5rem;
    margin-top: 1.5rem;
}

.gps-hero__proof-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 1.125rem;
    font-weight: 300;
}

/* ---------- Hero visual (right side) ---------- */
.gps-hero__visual {
    width: 100%;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    position: relative;
}

/* ---------- Float card ---------- */
.gps-float-card {
    position: absolute;
    background: #fff;
    border: 1px solid var(--grey-03);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: none;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gps-float-card__icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--light-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gps-float-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gps-float-card__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.gps-float-card__sub {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 300;
    white-space: nowrap;
}

.gps-float-card--tr {
    top: 32px;
    right: 0;
    animation: gps-card-float 3s ease-in-out infinite;
}

@keyframes gps-card-float {
    0%, 100% { transform: translateY(0);   }
    50%       { transform: translateY(-8px); }
}

/* ---------- Chat wrap — mirrors .isc-hero__chat-wrap ---------- */
.gps-hero__chat-wrap {
    width: 100%;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
}

.gps-hero__chat-wrap .f4__wrapper {
    min-height: 560px;
    align-items: flex-end;
}

.gps-hero__chat-wrap .f4__ui {
    max-width: none;
    min-height: 560px;
    border-color: var(--grey-03);
    box-shadow: none;
}

/* ============================================================
   TESTIMONIAL — logo avatar override
   ============================================================ */
.gps-page .cs-quote__avatar {
    background: var(--grey-02);
    object-fit: contain;
    padding: 12px;
    box-shadow: none;
    border: 2px solid var(--grey-03);
}

/* ============================================================
   WORKFLOW — cs-wf__* base styles + cs-workflow--isc dark theme
   (mirrors isc-building-materials.css — not loaded on this page)
   ============================================================ */
.cs-wf__grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.cs-wf__grid--2 { grid-template-columns: repeat(2, 1fr); }
.cs-wf__grid--3 { grid-template-columns: repeat(3, 1fr); }
.cs-wf__grid--4 { grid-template-columns: repeat(4, 1fr); }

.cs-wf__step {
    display: flex;
    flex-direction: column;
}

.cs-wf__step-top {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
}

.cs-wf__icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: var(--secondary-green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(24, 168, 125, 0.25);
}

.cs-wf__connector {
    display: none;
}

.cs-wf__step-title {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.cs-wf__num { color: var(--text-primary); }

.cs-wf__step-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 0.875rem;
    flex: 1;
}

/* Dark-mode ISC variant */
.cs-workflow--isc {
    background: var(--text-primary);
}

.cs-workflow--isc .cs-section__title  { color: var(--white); }
.cs-workflow--isc .cs-section__subtitle { color: #9ca3af; }

.cs-workflow--isc .cs-wf__step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1.75rem;
}

.cs-workflow--isc .cs-wf__icon {
    background: rgba(24, 168, 125, 0.15);
    color: var(--secondary-green);
    box-shadow: none;
}

.cs-workflow--isc .cs-wf__connector {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

.cs-workflow--isc .cs-wf__step-title { color: var(--white); }
.cs-workflow--isc .cs-wf__step-desc  { color: #9ca3af; margin-bottom: 0; }
.cs-workflow--isc .cs-wf__num        { color: var(--white); }

.cs-wf__guide-min {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--brand-green);
    margin: 0 0 0.375rem;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .cs-wf__grid--4 { grid-template-columns: repeat(2, 1fr); }
    .cs-wf__grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .cs-wf__grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .cs-wf__grid--4 { grid-template-columns: 1fr; }
    .cs-wf__grid--3 { grid-template-columns: 1fr; }
    .cs-wf__connector { display: none; }
}

/* Stop Fighting section — 3 columns flat (override bento) */
.gps-page .cs-story__problems {
    grid-template-columns: repeat(3, 1fr);
}
.gps-page .cs-story__problem-card {
    grid-column: span 1 !important;
}

@media (max-width: 768px) {
    .gps-page .cs-story__problems { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .gps-page .cs-story__problems { grid-template-columns: 1fr; }
}

/* ============================================================
   METRICS — 3-column variant
   ============================================================ */
.cs-metrics__grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .cs-metrics__grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .cs-metrics__grid--3 { grid-template-columns: 1fr; gap: 0; text-align: left; }
}

/* ============================================================
   METRICS (old GPS classes — kept for safety)
   ============================================================ */
.gps-metrics {
    background: var(--grey-02);
    padding: 8rem 0;
}

.gps-metrics__container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.gps-metrics__header {
    text-align: center;
    margin-bottom: 3rem;
}

.gps-metrics__title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.gps-metrics__subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
}

.gps-metrics__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.gps-metric-card {
    background: #fff;
    border: 1px solid var(--grey-03);
    border-radius: 20px;
    padding: 2rem;
}

.gps-metric-card__icon {
    width: 52px;
    height: 52px;
    background: var(--light-mint);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-green);
    margin-bottom: 1.25rem;
}

.gps-metric-card__value {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.gps-metric-card__value span { color: var(--secondary-green); }

.gps-metric-card__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
}

.gps-metric-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   FEATURES GRID
   ============================================================ */
.gps-features {
    background: #fff;
    padding: 8rem 0;
}

.gps-features__container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* 2-column grid using pd-features__card */
.gps-pd-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

/* Reuse pd-features card styles (card, icon, title, desc, list) */
.pd-features__card {
    background: var(--white);
    border: 1px solid var(--grey-03);
    border-radius: 16px;
    padding: 1.25rem;
}

.pd-features__icon {
    width: 44px;
    height: 44px;
    background: var(--grey-02);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-green);
    margin-bottom: 1rem;
}

.pd-features__card-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.pd-features__card-desc {
    font-size: 0.875rem;
    color: var(--grey-05);
    line-height: 1.65;
    margin-bottom: 0.875rem;
}

.pd-features__card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pd-features__card-list li {
    font-size: 0.875rem;
    color: var(--grey-05);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pd-features__card-list li::before {
    content: '✓';
    font-size: 0.8rem;
    color: var(--secondary-green);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .gps-pd-grid { grid-template-columns: 1fr; }
}

.gps-section__header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.gps-section__title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.gps-section__subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
}

.gps-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.gps-feature-card {
    background: var(--grey-02);
    border: 1px solid var(--grey-03);
    border-radius: 20px;
    padding: 1.75rem;
    transition: box-shadow 0.2s, transform 0.2s;
}

.gps-feature-card:hover {
    box-shadow: 0 8px 24px rgba(24,168,125,0.1);
    transform: translateY(-2px);
}

.gps-feature-card__icon {
    width: 48px;
    height: 48px;
    background: var(--light-mint);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-green);
    margin-bottom: 1.25rem;
}

.gps-feature-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.625rem;
}

.gps-feature-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   BEFORE / AFTER COMPARISON
   ============================================================ */
.gps-compare {
    background: var(--grey-02);
    padding: 8rem 0;
}

.gps-compare__container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.gps-compare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

.gps-compare__panel {
    border-radius: 20px;
    padding: 2.5rem;
    overflow: hidden;
    position: relative;
}

.gps-compare__panel--before {
    background: #fff;
    border: 2px solid #fca5a5;
}

.gps-compare__panel--after {
    background: linear-gradient(135deg, #f0fdf8 0%, #e8f6f2 100%);
    border: 2px solid var(--secondary-green);
    box-shadow: 0 4px 24px rgba(24,168,125,0.12);
}

.gps-compare__panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.gps-compare__panel-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gps-compare__panel--before .gps-compare__panel-icon {
    background: #fee2e2;
    color: #ef4444;
}

.gps-compare__panel--after .gps-compare__panel-icon {
    background: var(--secondary-green);
    color: #fff;
}

.gps-compare__panel-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.gps-compare__list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gps-compare__item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.gps-compare__item-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gps-compare__panel--before .gps-compare__item-dot { background: #fee2e2; color: #ef4444; }
.gps-compare__panel--after  .gps-compare__item-dot { background: var(--secondary-green); color: #fff; }

.gps-compare__item-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
    letter-spacing: 0.01em;
}

.gps-compare__item-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.55;
    margin: 0;
}

.gps-compare__cta {
    text-align: center;
    margin-top: 3rem;
}

.gps-compare__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--secondary-green);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(24,168,125,0.3);
    transition: background 0.2s, box-shadow 0.2s;
}

.gps-compare__cta-btn:hover {
    background: var(--secondary-green-border);
    box-shadow: 0 6px 20px rgba(24,168,125,0.4);
}

/* ============================================================
   RESOURCES
   ============================================================ */
.gps-resources {
    background: #fff;
    padding: 8rem 0;
}

.gps-resources__container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.gps-resources__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.gps-resource-card {
    background: var(--grey-02);
    border: 1px solid var(--grey-03);
    border-radius: 20px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.gps-resource-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
    transform: translateY(-2px);
}

.gps-resource-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 300;
}

.gps-resource-card__meta-icon {
    width: 36px;
    height: 36px;
    background: var(--light-mint);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-green);
    flex-shrink: 0;
}

.gps-resource-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.gps-resource-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.gps-resource-card__link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--secondary-green);
    margin-top: 0.25rem;
}

/* ============================================================
   RESPONSIVE — ≤1024px  (Large Tablet / iPad Landscape)
   Mirrors case-study.css @media (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    /* ----- Section spacing ----- */
    .gps-features { padding: 5rem 0; }

    /* cs-* sections already get 5rem from case-study.css */

    /* ----- Hero ----- */
    .gps-hero { min-height: auto; }

    .gps-hero__container {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
        text-align: center;
    }

    .gps-hero__ctas  { justify-content: center; }

    /* Proof items → chips, centered at ≤1024px */
    .gps-hero__proof {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        margin: 1.5rem auto 0;
    }
    .gps-hero__proof-item {
        font-size: 0.875rem;
        background: var(--light-mint);
        border: 1px solid var(--light-mint);
        border-radius: 100px;
        padding: 5px 14px;
        gap: 6px;
        color: var(--secondary-green);
        font-weight: 300;
    }
    .gps-hero__proof-item i,
    .gps-hero__proof-item svg { display: none; }

    /* Hide animation on tablet — same as ISC */
    .gps-hero__visual  { display: none; }
    .gps-float-card    { display: none; }

    /* ----- Section typography ----- */
    .gps-section__title  { font-size: 2.5rem; }
    .gps-section__subtitle { font-size: 1.25rem; }
    .gps-section__header { margin-bottom: 2.5rem; }

    /* ----- Metrics grid: 1 col on tablet ----- */
    .cs-metrics__grid--3 { grid-template-columns: 1fr; }

    /* ----- Features (pd-grid): stay 2 col ----- */
    /* .gps-pd-grid already 2 col — no change */

    /* ----- Guides grid ----- */
    .cs-wf__grid--2 { grid-template-columns: 1fr; }
    .cs-wf__grid--3 { grid-template-columns: repeat(2, 1fr); }
    .cs-wf__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — ≤768px  (Tablet Portrait)
   Mirrors case-study.css @media (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ----- Section spacing ----- */
    .gps-features { padding: 4rem 0; }

    /* ----- Container horizontal padding ----- */
    .gps-features__container { padding-left: 1rem; padding-right: 1rem; }
    .gps-hero__container     { padding-left: 1rem; padding-right: 1rem; padding-top: 4rem; padding-bottom: 4rem; }

    /* ----- Section typography ----- */
    .gps-section__title    { font-size: 2rem; }
    .gps-section__subtitle { font-size: 1.125rem; }
    .gps-section__header   { margin-bottom: 2rem; }

    /* ----- Hero ----- */
    .gps-hero__title        { font-size: 2rem; }
    .gps-hero__subtitle     { font-size: 1.125rem; }
    .gps-hero__btn-primary  { font-size: 1rem; padding: 0.875rem 1.75rem; }


    /* ----- pd-grid: 2→1 col ----- */
    .gps-pd-grid { grid-template-columns: 1fr; }

    /* ----- Stop Fighting: 3→2 col already via scoped rule ----- */

    /* ----- Hide desktop line breaks ----- */
    .gps-br-desktop { display: none; }
}

/* ============================================================
   RESPONSIVE — ≤480px  (Mobile)
   Mirrors case-study.css @media (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {

    /* ----- Section spacing ----- */
    .gps-features { padding: 3rem 0; }

    /* ----- Container horizontal padding ----- */
    .gps-features__container { padding-left: 1rem; padding-right: 1rem; }
    .gps-hero__container     { padding-left: 1rem; padding-right: 1rem; padding-top: 4rem; padding-bottom: 3rem; }

    /* ----- Section typography ----- */
    .gps-section__title    { font-size: 1.75rem; }
    .gps-section__subtitle { font-size: 1rem; }
    .gps-section__header   { margin-bottom: 1.75rem; }

    /* ----- Hero ----- */
    .gps-hero__title       { font-size: 1.75rem; }
    .gps-hero__subtitle    { font-size: 1rem; }
    .gps-hero__proof-item { font-size: 0.9375rem; }
    .gps-hero__btn-primary { width: 100%; justify-content: center; font-size: 1rem; }

    /* ----- Metrics ----- */
    .cs-metrics__grid--3 { gap: 0; text-align: left; }

    /* ----- Guides grid ----- */
    .cs-wf__grid--3 { grid-template-columns: 1fr; }
    .cs-wf__grid--4 { grid-template-columns: 1fr; }
}