/* ============================================================
   TaskTag — Punch List Tracker Feature Page
   ============================================================ */

.plt-text-alert { color: var(--alert-red); }
.plt-br-desktop { display: inline; }
.plt-br-mobile { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.plt-hero {
    background: var(--white);
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
}
.plt-hero__container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 7rem 1.5rem 5rem;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.plt-hero__content { text-align: left; }
.plt-hero .rc-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--light-mint);
    border-radius: var(--radius-full);
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--secondary-green);
    margin-bottom: 1.5rem;
}
.plt-hero__title {
    font-size: 3.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}
.plt-hero__title .highlight { color: var(--secondary-green); }
.plt-hero__subtitle {
    font-size: 1.125rem;
    font-weight: var(--font-weight-light);
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 2rem;
}

/* Trust checklist — mirrors tm-hero .rc-hero__trust */
.plt-hero .rc-hero__trust {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 3rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.plt-hero .rc-hero__trust--mobile { display: none; }
.plt-hero .rc-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
}
.plt-hero .rc-hero__trust-item i,
.plt-hero .rc-hero__trust-item svg {
    color: var(--secondary-green);
    stroke: var(--secondary-green);
    flex-shrink: 0;
}
.plt-hero .rc-hero__trust-item span { color: var(--text-secondary); }
.plt-hero .rc-hero__trust-sep { color: var(--grey-06); }
.plt-hero .hero__actions { margin-bottom: 0; justify-content: flex-start; }

/* Hero visual: feature cards, zig-zag stack — matches case-studies/holdfast-construction cs-hero__cards pattern */
.plt-hero__visual { display: flex; align-items: center; justify-content: center; }
.plt-hero__cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 420px;
}
.plt-hero__card {
    background: var(--white);
    border: 1px solid var(--grey-03);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.plt-hero__card:nth-child(odd) { margin-right: 2rem; }
.plt-hero__card:nth-child(even) { margin-left: 2rem; }
.plt-hero__card--accent { box-shadow: 0 2px 12px rgba(24,168,125,0.18); }
.plt-hero__card-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background: var(--grey-02);
    color: var(--secondary-green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.plt-hero__card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.plt-hero__card-text strong {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}
.plt-hero__card-text span {
    font-size: 0.75rem;
    color: var(--grey-05);
    margin: 0;
    line-height: 1.2;
}

/* ============================================================
   METRICS INTRO (Trust Bar)
   ============================================================ */
.plt-metrics__intro {
    text-align: center;
    font-size: 1.375rem;
    color: var(--text-secondary);
    margin: 0 0 3rem;
}
.punch-list-tracker-page .cs-metric__value {
    font-size: 5rem;
    color: var(--secondary-green);
}

/* ============================================================
   SOUND FAMILIAR? (Problems)
   ============================================================ */
.plt-problems { padding: 8rem 0; background: var(--white); }
.plt-problems__container { max-width: var(--spacing-container); margin: 0 auto; padding: 0 1.5rem; }
.plt-problems__header { text-align: center; margin-bottom: 3rem; }
.plt-problems__title {
    font-size: 3.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 1rem;
}
.plt-problems__subtitle {
    font-size: 1.5rem;
    font-weight: var(--font-weight-light);
    color: var(--text-secondary);
    line-height: 1.6;
}
.plt-problems__grid { grid-template-columns: repeat(3, 1fr); }
.plt-problems__grid .plt-problems__card { grid-column: auto; }
.plt-problems__card .cs-story__problem-icon { background: rgba(255,68,68,0.09); color: var(--alert-red); }
.plt-problems__card--orange .cs-story__problem-icon { background: rgba(252,127,91,0.12); color: var(--orange); }

/* ============================================================
   KEY RESULTS
   ============================================================ */
.plt-results { padding: 8rem 0; background: var(--text-primary); }
.plt-results__container { max-width: var(--spacing-container); margin: 0 auto; padding: 0 1.5rem; }
.plt-results__header { text-align: center; margin-bottom: 3rem; }
.plt-results__title {
    font-size: 3.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--white);
    line-height: 1.2;
    margin: 0;
}
.plt-results__highlight { color: var(--brand-green); }
.plt-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.plt-results__card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.plt-results__value { font-size: 3rem; font-weight: var(--font-weight-bold); color: var(--brand-green); line-height: 1; margin-bottom: 0.75rem; }
.plt-results__desc { font-size: 0.875rem; color: rgba(255,255,255,0.6); margin: 0; }

/* ============================================================
   WORKFLOW — extend shared cs-wf__step with a light card look
   (no light-themed card variant exists yet in gps-time-tracking.css,
   only the dark cs-workflow--isc one, so we add it here rather than
   touching the shared file)
   ============================================================ */
.cs-wf__step {
    background: var(--white);
    border: 1px solid var(--grey-03);
    border-radius: 1rem;
    padding: 1.75rem;
}
.punch-list-tracker-page .cs-wf__grid--4 { grid-template-columns: repeat(2, 1fr); }
.plt-wf__num {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.plt-wf__num-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-md);
    background: var(--light-mint);
    color: var(--secondary-green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.plt-wf__num-text {
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--secondary-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.plt-wf__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    padding-top: 0.875rem;
    border-top: 1px solid var(--grey-03);
    margin-top: auto;
}
.plt-wf__tag i { color: var(--secondary-green); flex-shrink: 0; }

.plt-wf__cta-wrap { text-align: center; margin-top: 1rem; }
.plt-wf__cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--secondary-green); color: var(--white);
    font-size: 1rem; font-weight: var(--font-weight-semibold);
    padding: 1rem 2rem; border-radius: var(--radius-full);
    text-decoration: none; box-shadow: 0 4px 16px rgba(24,168,125,0.3);
    transition: transform 0.2s;
}
.plt-wf__cta:hover { transform: translateY(-2px); }

/* ============================================================
   FEATURE SET
   ============================================================ */
.plt-features { padding: 8rem 0; background: var(--grey-02); }
.plt-features__container { max-width: var(--spacing-container); margin: 0 auto; padding: 0 1.5rem; }
.plt-features__header { text-align: center; margin-bottom: 3rem; }
.plt-features__title {
    font-size: 3.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 1rem;
}
.plt-features__subtitle {
    font-size: 1.5rem;
    font-weight: var(--font-weight-light);
    color: var(--text-secondary);
    line-height: 1.5;
}
.plt-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.plt-features__card {
    background: var(--white);
    border: 1px solid var(--grey-03);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}
.plt-features__card--dark {
    background: var(--text-primary);
    border-color: rgba(255,255,255,0.08);
}
.plt-features__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--light-mint); color: var(--secondary-green);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
}
.plt-features__icon--dark { background: rgba(24,168,125,0.15); color: var(--brand-green); }
.plt-features__card-title { font-size: 1.1875rem; font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: 1rem; }
.plt-features__card--dark .plt-features__card-title { color: var(--white); }
.plt-features__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.plt-features__list li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.plt-features__card--dark .plt-features__list li { color: rgba(255,255,255,0.65); }
.plt-features__list li::before {
    content: '✓';
    color: var(--secondary-green);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}
.plt-features__card--dark .plt-features__list li::before { color: var(--brand-green); }

/* ============================================================
   THE OLD WAY VS. THE RIGHT WAY
   ============================================================ */
.plt-comparison { padding: 8rem 0; background: var(--white); }
.plt-comparison__container { max-width: var(--spacing-container); margin: 0 auto; padding: 0 1.5rem; }
.plt-comparison__header { text-align: center; margin-bottom: 3rem; }
.plt-comparison__title { font-size: 3.5rem; font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1.2; margin: 0 0 1rem; }
.plt-comparison__subtitle { font-size: 1.5rem; font-weight: var(--font-weight-light); color: var(--text-secondary); line-height: 1.6; }
.plt-comparison__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 3rem; }
.plt-comparison__card { background: var(--white); border: 1px solid var(--grey-03); border-radius: 20px; padding: 2rem; display: flex; flex-direction: column; box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
.plt-comparison__card--featured { background: var(--text-primary); border-color: rgba(255,255,255,0.1); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.plt-comparison__eyebrow { display: block; font-size: 0.75rem; font-weight: var(--font-weight-medium); color: var(--text-quaternary); margin-bottom: 0.75rem; }
.plt-comparison__card--featured .plt-comparison__eyebrow { color: rgba(255,255,255,0.35); }
.plt-comparison__brand-row { display: flex; align-items: center; gap: 0.75rem; }
.plt-comparison__brand-name { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1.2; }
.plt-comparison__card--featured .plt-comparison__brand-name { color: var(--white); }
.plt-comparison__divider { border: none; border-top: 1px solid var(--grey-03); margin: 1.25rem 0; }
.plt-comparison__divider--green { border-top-color: rgba(24,168,125,0.3); }
.plt-comparison__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; flex-grow: 1; }
.plt-comparison__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.plt-comparison__item-icon { width: 28px; height: 28px; min-width: 28px; border-radius: 7px; background: var(--light-pink); color: var(--alert-red); display: flex; align-items: center; justify-content: center; margin-top: 1px; flex-shrink: 0; }
.plt-comparison__item-icon--green { background: rgba(24,168,125,0.12); color: var(--secondary-green); }
.plt-comparison__item-title { font-size: 0.9375rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0 0 2px; }
.plt-comparison__card--featured .plt-comparison__item-title { color: var(--white); }
.plt-comparison__item-desc { font-size: 0.8125rem; font-weight: var(--font-weight-light); color: var(--text-secondary); line-height: 1.5; margin: 0; }
.plt-comparison__card--featured .plt-comparison__item-desc { color: rgba(255,255,255,0.6); }
.plt-comparison__tag { display: block; text-align: center; font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--alert-red); padding-top: 1.25rem; margin-top: 1.5rem; border-top: 1px solid var(--grey-03); }
.plt-comparison__tag--green { color: var(--brand-green); border-top-color: rgba(255,255,255,0.1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .plt-br-mobile { display: inline; }
    .plt-br-desktop { display: none; }
    .plt-hero__container { grid-template-columns: 1fr; padding: 6rem 1.5rem 4rem; }
    .plt-hero__content { text-align: center; }
    .plt-hero__card { box-shadow: none; }
    .plt-hero .hero__actions { justify-content: center; }
    .plt-hero .rc-hero__trust { justify-content: center; }
    .plt-hero .rc-hero__trust--mobile { justify-content: center; }
    .plt-hero__title { font-size: 2.5rem; }
    .plt-hero__subtitle { font-size: 1.125rem; }

    .plt-problems__title,
    .plt-results__title,
    .plt-features__title,
    .plt-comparison__title { font-size: 2.5rem; }
    .plt-problems__subtitle,
    .plt-features__subtitle,
    .plt-comparison__subtitle { font-size: 1.25rem; }

    .plt-problems__grid { grid-template-columns: repeat(2, 1fr); }
    .plt-results__grid { grid-template-columns: 1fr; }
    .punch-list-tracker-page .cs-wf__grid--4 { grid-template-columns: repeat(2, 1fr); }
    .plt-features__grid { grid-template-columns: repeat(2, 1fr); }
    .plt-comparison__grid { grid-template-columns: 1fr; }

    .plt-problems,
    .plt-results,
    .plt-features,
    .plt-comparison { padding: 5rem 0; }
}

@media (max-width: 768px) {
    .plt-hero__title { font-size: 2rem; }
    .plt-hero__subtitle { font-size: 1rem; }
    .plt-hero { margin-top: 5rem; }

    .plt-problems__title,
    .plt-results__title,
    .plt-features__title,
    .plt-comparison__title { font-size: 2rem; }
    .plt-problems__subtitle,
    .plt-features__subtitle,
    .plt-comparison__subtitle { font-size: 1.125rem; }

    .plt-problems__grid { grid-template-columns: 1fr; }
    .punch-list-tracker-page .cs-wf__grid--4 { grid-template-columns: 1fr; }
    .plt-features__grid { grid-template-columns: 1fr; }
    .plt-metrics__intro { font-size: 1.125rem; margin-bottom: 2rem; }
    .punch-list-tracker-page .cs-metric__value { font-size: 4.5rem; }
    .plt-results__value { font-size: 2.5rem; }
    .punch-list-tracker-page .cs-resources__grid { grid-template-columns: repeat(2, 1fr); }

    .plt-problems,
    .plt-results,
    .plt-features,
    .plt-comparison { padding: 4rem 0; }
}

@media (max-width: 480px) {
    .plt-hero__title { font-size: 1.75rem; }
    .plt-hero .rc-hero__trust--desktop { display: none; }
    .plt-hero .rc-hero__trust--mobile {
        display: flex;
        gap: 0.5rem;
        font-size: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .plt-hero .cs-hero__btn-primary { width: 100%; justify-content: center; }
    .plt-hero__card:nth-child(odd) { margin-right: 0; }
    .plt-hero__card:nth-child(even) { margin-left: 0; }
    .plt-metrics__intro { text-align: left; }
    .punch-list-tracker-page .cs-resources__grid { grid-template-columns: 1fr; }

    .plt-problems__title,
    .plt-results__title,
    .plt-features__title,
    .plt-comparison__title { font-size: 1.75rem; }
    .plt-problems__subtitle,
    .plt-features__subtitle,
    .plt-comparison__subtitle { font-size: 1rem; }

    .plt-results__value { font-size: 2.25rem; }
    .punch-list-tracker-page .cs-metric__value { font-size: 4rem; }
    .plt-comparison__card { padding: 1.5rem; }
    .plt-features__card { padding: 1.5rem; }
    .cs-wf__step { padding: 1.5rem; }

    .plt-problems,
    .plt-results,
    .plt-features,
    .plt-comparison { padding: 3rem 0; }
}