/* Pricing page.

   The card styles are a copy of the pricing block in Work.Routiness'
   account-settings.css, so both places look the same. Everything is scoped
   under .pricing-page because this site loads Bootstrap 4 and the ftco
   template, and the source rules use bare .btn / .pricing-* selectors that
   would otherwise collide.

   The palette is declared on the page container rather than :root for the same
   reason. --gray-400 and --gray-800 are referenced by the source rules but were
   never declared there, which left those gradients resolving to nothing; they
   are defined here. */

.pricing-page {
    --primary-color: #0d6efd;
    --success-color: #10b981;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
}

/* style.css sizes .hero-wrap-2 at 450px, which is meant for a full banner.
   Inner pages only need enough height to clear the absolutely positioned
   navbar; explore.min.css does the same for explore-dynamics. */
.pricing-hero.hero-wrap-2 {
    height: 200px;
}

.pricing-hero .slider-text {
    height: 290px;
}

.pricing-hero .overlay {
    background: none;
    background-color: #fff;
}

.pricing-page.ftco-section {
    padding-top: 0;
    padding-bottom: 60px;
    background-color: #fff;
    margin-top: 50px;
}

/* ==================== Grid ==================== */

.pricing-page .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.pricing-page .pricing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ==================== Card ==================== */

.pricing-page .pricing-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    padding: 1.75rem 1.25rem 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: default;
    /* Resting value for the hover lift below. Without it the property is `none`
       and there is nothing for the transition to interpolate from, so the card
       would jump. */
    translate: 0 0;
}

.pricing-page .pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gray-200), var(--gray-300));
    transition: all 0.3s ease;
}

/* A light resting shadow so the General Plans cards lift off the page without
   needing hover. Declared before the :hover rule on purpose: both selectors
   have the same specificity, so the later one wins and hover keeps its stronger
   shadow. The Professional cards are left alone - they already carry their own
   purple shadow at rest. */
.pricing-page .pricing-grid-general .pricing-card {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* The lift uses translate, not transform, and that is deliberate.
   The cards carry .ftco-animate, and the fadeInUp that reveals them runs with
   animation-fill-mode: both, so its last keyframe keeps owning transform for
   good. A property under animation control cannot be transitioned, so a hover
   written with transform snapped into place instead of easing, and needed
   !important just to apply at all. translate is a separate property that
   fadeInUp never touches, so it both wins the cascade normally and animates
   through the transition above, while staying compositor-friendly the way top
   or margin would not. */
.pricing-page .pricing-card:hover {
    translate: 0 -4px;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);
}

.pricing-page .pricing-card:hover::before {
    background: linear-gradient(90deg, var(--primary-color), #6366f1);
}

.pricing-page .pricing-card.featured-purple {
    border: 2px solid #8b5cf6;
    box-shadow: 0 4px 16px -4px rgba(139, 92, 246, 0.2);
}

.pricing-page .pricing-card.featured-purple::before {
    height: 4px;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.pricing-page .pricing-card.featured-purple:hover {
    box-shadow: 0 16px 32px -8px rgba(139, 92, 246, 0.25);
}

/* ==================== Badge ==================== */

.pricing-page .pricing-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.625rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
    z-index: 1;
}

.pricing-page .pricing-badge-purple {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25);
}

.pricing-page .pricing-badge-grey {
    background: #64748b;
    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.25);
}

/* ==================== Header row ==================== */

.pricing-page .pricing-header-row {
    display: flex;
    /* Icon pinned to the top of the row: the title block is two lines tall
       whether or not the description wraps, and centring left the icon floating
       against a one-line title. */
    align-items: flex-start;
    gap: 0.75rem;
}

.pricing-page .pricing-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.pricing-page .pricing-icon i {
    font-size: 1.35rem;
    color: var(--gray-600);
    transition: all 0.3s ease;
}

/* .pricing-icon-static opts a card out of the blue icon highlight on hover, so
   its icon keeps whatever colour it has at rest. Excluding the card here rather
   than repainting it on hover means each card keeps its own resting style. */
.pricing-page .pricing-card:not(.pricing-icon-static):hover .pricing-icon {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(99, 102, 241, 0.1));
}

.pricing-page .pricing-card:not(.pricing-icon-static):hover .pricing-icon i {
    color: var(--primary-color);
}

.pricing-page .pricing-icon-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(167, 139, 250, 0.15));
}

.pricing-page .pricing-icon-purple i {
    color: #8b5cf6;
}

.pricing-page .pricing-title {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.pricing-page .pricing-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.pricing-page .pricing-desc {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    /* Room for two lines whether or not the text needs them, so a description
       that wraps does not push its price and button below those of the cards
       next to it. 2 lines x line-height 1.3 = 2.6em. */
    min-height: 2.6em;
}

/* ==================== Price row ==================== */

.pricing-page .pricing-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin: 0 auto;
    margin-bottom: 5px;
    /* The Custom-priced cards render at 1.5rem instead of 2rem, which made their
       row shorter and lifted their button above the others. Fixing the row
       height keeps every Get Started button on the same line. */
    min-height: 3.625rem;
}

.pricing-page .pricing-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.03em;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.pricing-page .pricing-price .currency {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-500);
}

.pricing-page .pricing-price-purple {
    color: #8b5cf6;
}

.pricing-page .pricing-period {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 400;
}

/* ==================== Buttons ==================== */

.pricing-page .btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.pricing-page .btn-secondary {
    background: white;
    color: var(--primary-color);
    border: 1px solid var(--gray-300);
}

.pricing-page .btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
}

.pricing-page .btn-purple {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: white;
    border: none;
    font-family: inherit;
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.25);
}

.pricing-page .btn-purple:hover {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    color: white;
    transform: translateY(-1px);
    text-decoration: none;
}

.pricing-page .btn-w-100 {
    width: 100%;
    justify-content: center;
}

.pricing-page .pricing-card .btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* ==================== Divider + features ==================== */

.pricing-page .pricing-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
    margin: 1rem 0;
}

.pricing-page .pricing-features {
    text-align: left;
    flex-grow: 1;
}

.pricing-page .pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-weight: 400;
    line-height: 1.35;
}

.pricing-page .pricing-feature:last-child {
    margin-bottom: 0;
}

.pricing-page .pricing-feature i {
    color: var(--success-color);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.pricing-page .pricing-feature i.purple {
    color: #8b5cf6;
}

/* ==================== Section header ==================== */

.pricing-page .pricing-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0;
}

.pricing-page .pricing-section-header i {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.pricing-page .pricing-section-header.purple i {
    color: #8b5cf6;
}

.pricing-page .pricing-section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ==================== Custom plan ==================== */

.pricing-page .pricing-card.custom-plan {
    background: linear-gradient(135deg, var(--gray-50), white);
}

/* Enterprise and Healthcare carry no top bar at all, resting or hovered.
   Removing the pseudo-element covers both states at once, and it also wins over
   .featured-purple::before on the Healthcare card, which has both classes. */
.pricing-page .pricing-card.custom-plan::before,
.pricing-page .pricing-card.custom-plan:hover::before {
    display: none;
}

.pricing-page .pricing-card.custom-plan .pricing-price {
    font-size: 1.5rem;
    color: var(--gray-700);
}

/* ==================== Help card ==================== */

.pricing-page .pricing-card.pricing-card-help {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.03), rgba(99, 102, 241, 0.03));
    border: 2px dashed var(--primary-color);
    display: flex;
    flex-direction: column;
}

.pricing-page .pricing-card.pricing-card-help::before {
    display: none;
}

.pricing-page .pricing-card.pricing-card-help:hover {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(99, 102, 241, 0.06));
    border-color: #0b5ed7;
}

.pricing-page .pricing-card.pricing-card-help .pricing-header-row {
    margin-bottom: 0.75rem;
}

.pricing-page .pricing-card.pricing-card-help .pricing-icon {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(99, 102, 241, 0.12));
}

.pricing-page .pricing-card.pricing-card-help .pricing-icon i {
    color: var(--primary-color);
}

.pricing-page .pricing-help-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pricing-page .pricing-help-content p {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* ==================== Compare plans table ==================== */

.pricing-page .compare-hint {
    display: none;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* Only the table scrolls sideways, never the page. */
.pricing-page .compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pricing-page .compare-table {
    width: 100%;
    /* Below this the four plan columns become unreadable, so the container
       scrolls instead of the text crushing. */
    min-width: 620px;
    /* separate, not collapse: a sticky first column loses its borders under
       border-collapse, so borders are drawn per cell instead. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.pricing-page .compare-table th,
.pricing-page .compare-table td {
    padding: 0.7rem 0.85rem;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
}

.pricing-page .compare-table thead th {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 2;
}

.pricing-page .compare-table tbody th[scope="row"] {
    text-align: left;
    font-weight: 500;
    color: var(--gray-700);
    white-space: nowrap;
}

/* Feature name stays put while the plan columns scroll under it. */
.pricing-page .compare-table th[scope="row"],
.pricing-page .compare-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--gray-200);
}

.pricing-page .compare-table thead th:first-child {
    z-index: 3;
    text-align: left;
}

.pricing-page .compare-table .compare-group th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    background: var(--gray-50);
    padding-top: 0.9rem;
    padding-bottom: 0.5rem;
    position: static;
    box-shadow: none;
}

/* The group cell spans the whole row, so its label would scroll out of sight
   along with the plan columns. Pinning the inner span keeps it readable. */
.pricing-page .compare-table .compare-group th span {
    position: sticky;
    left: 0.85rem;
    display: inline-block;
}

.pricing-page .compare-table .compare-price td {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 1rem;
}

.pricing-page .compare-table .compare-price td span {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.pricing-page .compare-table tbody tr:last-child th,
.pricing-page .compare-table tbody tr:last-child td {
    border-bottom: none;
}

.pricing-page .compare-table .bx-check {
    color: var(--success-color);
    font-size: 1.15rem;
    vertical-align: middle;
}

.pricing-page .compare-table .compare-no {
    color: var(--gray-300);
    font-size: 1.15rem;
    vertical-align: middle;
}

.pricing-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 700px) {
    .pricing-page .compare-hint {
        display: flex;
    }

    .pricing-page .compare-table {
        font-size: 0.82rem;
    }

    .pricing-page .compare-table th,
    .pricing-page .compare-table td {
        padding: 0.6rem 0.6rem;
    }
}

/* ==================== Closing call to action ==================== */

/* style.css defines nothing for .ftco-join: its background, height and padding
   live only in explore.min.css, which this page does not load. Repeating the
   three declarations here is cleaner than pulling in that file, which also
   carries .hero-wrap-2 and .services-wrap-left rules that do not belong here.
   This stylesheet is only served on the pricing page, so the unscoped selector
   cannot leak anywhere else. */
/* explore.min.css pins this band to a fixed 250px with 100px of top padding,
   which only works when it holds a single button. Here it also carries a
   heading, so it is sized by its content instead. */
.ftco-join {
    background-color: #f9f9f9;
    padding: 72px 0;
}

.ftco-join .join-title {
    font-size: 30px;
    font-weight: 600;
    color: #1a2233;
    margin: 0 0 12px;
}

.ftco-join .join-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0 auto 28px;
    max-width: 520px;
}

@media (max-width: 767.98px) {
    .ftco-join {
        padding: 52px 0;
    }

    .ftco-join .join-title {
        font-size: 24px;
    }
}

/* ==================== Responsive ==================== */

@media (max-width: 992px) {
    .pricing-page .pricing-grid,
    .pricing-page .pricing-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pricing-page .pricing-grid,
    .pricing-page .pricing-grid-3 {
        grid-template-columns: 1fr;
    }
}