:root { /* Defines scoped NediQR pricing page design variables. */
    --nq-pricing-navy: #20275a; /* Stores the main NediQR navy color. */
    --nq-pricing-navy-dark: #11183d; /* Stores the deep navy color for strong surfaces. */
    --nq-pricing-gold: #ee9d1b; /* Stores the NediQR gold accent color. */
    --nq-pricing-blue: #c3e0e9; /* Stores the soft tech blue accent color. */
    --nq-pricing-cream: #f9f6f0; /* Stores the warm cream page color. */
    --nq-pricing-green: #225923; /* Stores the success green color. */
    --nq-pricing-text: #182033; /* Stores the main pricing text color. */
    --nq-pricing-muted: #617089; /* Stores the muted pricing text color. */
    --nq-pricing-border: #dce6f2; /* Stores the soft border color. */
    --nq-pricing-card-shadow: 0 22px 50px rgba(17, 24, 61, 0.10); /* Stores premium card shadow. */
    --nq-pricing-card-shadow-hover: 0 28px 70px rgba(17, 24, 61, 0.16); /* Stores premium hover shadow. */
} /* Ends scoped NediQR pricing page design variables. */

.nq-pricing-page { /* Styles the Pricing page root wrapper. */
    background: var(--nq-pricing-cream); /* Applies the homepage-style cream page background. */
} /* Ends Pricing page root wrapper styling. */

.nq-pricing-hero-card { /* Styles the Pricing hero preview card. */
    max-width: 420px; /* Keeps the hero pricing card balanced. */
} /* Ends Pricing hero preview card styling. */

.nq-pricing-toggle { /* Styles the monthly and yearly toggle wrapper. */
    display: inline-flex; /* Keeps the toggle buttons in one row. */
    align-items: center; /* Vertically centers the toggle buttons. */
    gap: 8px; /* Adds spacing between toggle buttons. */
    padding: 6px; /* Adds inner spacing around toggle buttons. */
    border: 1px solid rgba(220, 230, 242, 0.95); /* Adds a soft border around the toggle. */
    border-radius: 999px; /* Makes the toggle pill-shaped. */
    background: #ffffff; /* Applies a clean white toggle background. */
    box-shadow: 0 14px 34px rgba(17, 24, 61, 0.08); /* Adds a soft premium toggle shadow. */
} /* Ends monthly and yearly toggle wrapper styling. */

.nq-pricing-toggle .nq-btn { /* Styles the pricing toggle buttons only. */
    min-height: 40px; /* Keeps toggle buttons comfortably clickable. */
    padding: 0 18px; /* Adds horizontal button padding. */
    border-radius: 999px; /* Makes toggle buttons pill-shaped. */
    font-size: 13px; /* Sets compact toggle text size. */
    font-weight: 900; /* Makes toggle text strong. */
} /* Ends pricing toggle button styling. */

.nq-pricing-save-note { /* Styles the yearly savings note. */
    margin: 18px 0 26px; /* Adds spacing around the savings note. */
    color: var(--nq-pricing-muted); /* Applies muted text color. */
    font-size: 15px; /* Sets readable note size. */
    font-weight: 700; /* Makes the note clear. */
    line-height: 1.6; /* Improves note readability. */
} /* Ends yearly savings note styling. */

.nq-pricing-plan-grid { /* Styles the pricing plan card grid. */
    display: grid; /* Creates the pricing card grid. */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Shows three pricing cards per row on desktop. */
    gap: 28px; /* Adds premium spacing between pricing cards. */
    align-items: stretch; /* Makes all pricing cards stretch evenly. */
} /* Ends pricing plan card grid styling. */

.nq-pricing-plan-card { /* Styles every pricing plan card. */
    position: relative; /* Allows decorative accents inside the card. */
    display: flex; /* Allows internal vertical layout control. */
    flex-direction: column; /* Stacks pricing card content vertically. */
    min-height: 410px; /* Gives every card a premium equal-height feel. */
    padding: 34px 34px 30px; /* Adds generous card spacing. */
    border: 1px solid rgba(220, 230, 242, 0.96); /* Adds a soft card border. */
    border-top-width: 5px; /* Creates a premium top accent line. */
    border-radius: 28px; /* Applies large card rounding. */
    background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%); /* Applies a subtle premium card gradient. */
    box-shadow: var(--nq-pricing-card-shadow); /* Adds a premium card shadow. */
    overflow: hidden; /* Clips decorative gradients inside the card. */
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; /* Adds smooth card interaction. */
} /* Ends every pricing plan card styling. */

.nq-pricing-plan-card::before { /* Adds a soft decorative glow to every card. */
    content: ""; /* Creates the decorative glow element. */
    position: absolute; /* Positions the glow inside the card. */
    inset: auto -70px -90px auto; /* Places the glow near the bottom-right corner. */
    width: 210px; /* Sets glow width. */
    height: 210px; /* Sets glow height. */
    border-radius: 999px; /* Makes the glow circular. */
    background: rgba(195, 224, 233, 0.32); /* Applies soft blue glow color. */
    pointer-events: none; /* Prevents the glow from blocking clicks. */
} /* Ends decorative card glow styling. */

.nq-pricing-plan-card:hover { /* Styles pricing cards on hover. */
    transform: translateY(-5px); /* Lifts the card slightly on hover. */
    box-shadow: var(--nq-pricing-card-shadow-hover); /* Applies stronger premium shadow on hover. */
} /* Ends pricing card hover styling. */

.nq-pricing-plan-card > * { /* Targets direct card children. */
    position: relative; /* Keeps card content above decorative glow. */
    z-index: 1; /* Places content above decorative elements. */
} /* Ends direct card child positioning. */

.nq-pricing-plan-card .nq-plan-card__label { /* Styles plan label pills in pricing cards. */
    display: inline-flex; /* Keeps labels compact. */
    width: fit-content; /* Makes label width match content. */
    align-items: center; /* Vertically centers label text. */
    min-height: 34px; /* Gives labels a premium pill height. */
    margin: 0 0 22px; /* Adds spacing below plan labels. */
    padding: 0 16px; /* Adds horizontal label padding. */
    border: 1px solid rgba(32, 39, 90, 0.16); /* Adds subtle label border. */
    border-radius: 999px; /* Makes labels pill-shaped. */
    background: rgba(32, 39, 90, 0.05); /* Adds a soft navy label background. */
    color: var(--nq-pricing-navy); /* Applies navy label text. */
    font-size: 13px; /* Sets label text size. */
    font-weight: 900; /* Makes label text bold. */
    letter-spacing: 0.03em; /* Adds premium label spacing. */
    text-transform: uppercase; /* Converts label text to uppercase. */
} /* Ends plan label pill styling. */

.nq-pricing-plan-card h3 { /* Styles pricing amounts and custom price titles. */
    margin: 0 0 16px; /* Adds spacing below price heading. */
    color: var(--nq-pricing-navy); /* Applies deep navy price color. */
    font-size: clamp(32px, 3vw, 42px); /* Makes price text large and responsive. */
    font-weight: 900; /* Makes price text strong. */
    line-height: 1.1; /* Keeps price text compact. */
    letter-spacing: -0.045em; /* Adds premium price spacing. */
} /* Ends pricing amount styling. */

.nq-pricing-plan-card p { /* Styles pricing card description text. */
    margin: 0 0 20px; /* Adds spacing below card description. */
    color: var(--nq-pricing-muted); /* Applies muted description color. */
    font-size: 15.5px; /* Sets readable description size. */
    line-height: 1.75; /* Improves description readability. */
} /* Ends pricing card description styling. */

.nq-pricing-plan-card ul { /* Styles pricing card feature lists. */
    display: grid; /* Creates clean stacked list rows. */
    gap: 11px; /* Adds spacing between list items. */
    margin: 0 0 28px; /* Adds spacing below list. */
    padding: 0; /* Removes default list padding. */
    list-style: none; /* Removes default list bullets. */
} /* Ends pricing card feature list styling. */

.nq-pricing-plan-card li { /* Styles pricing card feature list items. */
    position: relative; /* Allows custom bullet placement. */
    padding-left: 22px; /* Adds room for custom bullet. */
    color: #26364f; /* Applies readable list text color. */
    font-size: 15px; /* Sets list text size. */
    font-weight: 650; /* Makes list text stronger without looking heavy. */
    line-height: 1.55; /* Improves list readability. */
} /* Ends pricing card feature list item styling. */

.nq-pricing-plan-card li::before { /* Adds custom bullet to pricing card list items. */
    content: ""; /* Creates the custom bullet. */
    position: absolute; /* Positions the bullet inside the list item. */
    top: 9px; /* Aligns the bullet with list text. */
    left: 0; /* Places the bullet at the start of list item. */
    width: 7px; /* Sets bullet width. */
    height: 7px; /* Sets bullet height. */
    border-radius: 999px; /* Makes the bullet circular. */
    background: var(--nq-pricing-navy); /* Applies navy bullet color. */
    box-shadow: 0 0 0 4px rgba(32, 39, 90, 0.08); /* Adds soft bullet glow. */
} /* Ends custom bullet styling. */

.nq-pricing-plan-card .nq-btn { /* Styles buttons inside pricing cards. */
    margin-top: auto; /* Pushes buttons to the bottom of cards. */
    min-height: 52px; /* Gives plan buttons a premium height. */
    border-radius: 14px; /* Applies rounded button corners. */
    font-weight: 900; /* Makes button text strong. */
} /* Ends buttons inside pricing cards styling. */

.nq-pricing-plan-card--free { /* Styles the Free Trial plan card. */
    border-top-color: var(--nq-pricing-green); /* Adds green top accent for Free Trial. */
    background: linear-gradient(145deg, #ffffff 0%, #f7fff8 100%); /* Adds a subtle green-tinted background. */
} /* Ends Free Trial plan card styling. */

.nq-pricing-plan-card--free::before { /* Styles the Free Trial card glow. */
    background: rgba(34, 89, 35, 0.12); /* Applies a soft green glow. */
} /* Ends Free Trial card glow styling. */

.nq-pricing-plan-card--free .nq-plan-card__label { /* Styles the Free Trial label. */
    border-color: rgba(34, 89, 35, 0.22); /* Applies green label border. */
    background: rgba(34, 89, 35, 0.08); /* Applies green label background. */
    color: var(--nq-pricing-green); /* Applies green label text. */
} /* Ends Free Trial label styling. */

.nq-pricing-plan-card--growth { /* Styles the Growth featured plan card. */
    border-color: rgba(238, 157, 27, 0.95); /* Adds premium gold border for Growth. */
    border-top-color: var(--nq-pricing-gold); /* Applies strong gold top accent. */
    background: linear-gradient(145deg, #ffffff 0%, #fff7e8 100%); /* Adds warm premium Growth background. */
    box-shadow: 0 28px 76px rgba(238, 157, 27, 0.20); /* Adds stronger gold featured shadow. */
} /* Ends Growth featured plan card styling. */

.nq-pricing-plan-card--growth::before { /* Styles the Growth card glow. */
    background: rgba(238, 157, 27, 0.22); /* Applies soft gold glow. */
} /* Ends Growth card glow styling. */

.nq-pricing-plan-card--growth .nq-plan-card__label { /* Styles the Growth label. */
    border-color: rgba(238, 157, 27, 0.45); /* Applies gold label border. */
    background: rgba(238, 157, 27, 0.12); /* Applies gold label background. */
    color: var(--nq-pricing-navy); /* Applies navy label text. */
} /* Ends Growth label styling. */

.nq-pricing-plan-card--growth .nq-plan-card__badge { /* Styles the Most Popular badge. */
    display: inline-flex; /* Keeps the badge compact. */
    width: fit-content; /* Makes the badge width fit content. */
    align-items: center; /* Vertically centers badge text. */
    justify-content: center; /* Horizontally centers badge text. */
    min-height: 34px; /* Sets badge height. */
    margin: 0 0 16px; /* Adds spacing below badge. */
    padding: 0 16px; /* Adds horizontal badge padding. */
    border-radius: 999px; /* Makes badge pill-shaped. */
    background: var(--nq-pricing-gold); /* Applies gold badge background. */
    color: var(--nq-pricing-navy); /* Applies navy badge text. */
    font-size: 12px; /* Sets badge text size. */
    font-weight: 950; /* Makes badge text strong. */
    box-shadow: 0 12px 28px rgba(238, 157, 27, 0.26); /* Adds badge glow. */
} /* Ends Most Popular badge styling. */

.nq-pricing-plan-card--lite { /* Styles the Lite 10-Year card. */
    border-top-color: #6b7da8; /* Applies blue-grey top accent. */
    background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%); /* Adds a subtle blue-tinted background. */
} /* Ends Lite 10-Year card styling. */

.nq-pricing-plan-card--lite::before { /* Styles the Lite card glow. */
    background: rgba(195, 224, 233, 0.44); /* Applies soft tech-blue glow. */
} /* Ends Lite card glow styling. */

.nq-pricing-plan-card--enterprise { /* Styles the Enterprise card. */
    border-top-color: var(--nq-pricing-navy); /* Applies navy top accent. */
    background: linear-gradient(145deg, #ffffff 0%, #f7f8ff 100%); /* Adds a subtle enterprise navy-tinted background. */
} /* Ends Enterprise card styling. */

.nq-pricing-plan-card--enterprise::before { /* Styles the Enterprise card glow. */
    background: rgba(32, 39, 90, 0.13); /* Applies soft navy glow. */
} /* Ends Enterprise card glow styling. */

.nq-pricing-comparison-section { /* Styles the comparison table section. */
    background: linear-gradient(180deg, #f9f6f0 0%, #fffdf8 100%); /* Adds a warm premium background behind the table. */
} /* Ends comparison table section styling. */

.nq-pricing-table-card { /* Styles the comparison table outer card. */
    padding: 22px; /* Adds spacing around the table wrapper. */
    border: 1px solid rgba(220, 230, 242, 0.95); /* Adds soft card border. */
    border-radius: 30px; /* Applies premium rounded card corners. */
    background: rgba(255, 255, 255, 0.90); /* Applies a clean glass-white table surface. */
    box-shadow: 0 30px 80px rgba(17, 24, 61, 0.10); /* Adds enterprise-grade table shadow. */
} /* Ends comparison table outer card styling. */

.nq-pricing-table-scroll { /* Styles the scrollable table viewport. */
    width: 100%; /* Makes the table viewport full width. */
    overflow-x: auto; /* Allows horizontal scroll on smaller screens. */
    border-radius: 22px; /* Rounds the visible table viewport. */
    background: #ffffff; /* Applies white table background. */
} /* Ends scrollable table viewport styling. */

.nq-pricing-table { /* Styles the comparison table. */
    width: 100%; /* Makes the table fill its container. */
    min-width: 1180px; /* Preserves proper column width on desktop and enables mobile scroll. */
    border-collapse: separate; /* Allows row spacing and rounded cells. */
    border-spacing: 0; /* Removes unwanted table gaps. */
    color: var(--nq-pricing-text); /* Applies main table text color. */
    font-size: 14px; /* Sets compact enterprise table text size. */
} /* Ends comparison table styling. */

.nq-pricing-table thead th { /* Styles comparison table header cells. */
    position: sticky; /* Keeps header sticky inside horizontal table viewport where supported. */
    top: 0; /* Sets sticky header top position. */
    z-index: 3; /* Keeps header above body cells. */
    padding: 18px 16px; /* Adds premium header cell padding. */
    background: linear-gradient(135deg, var(--nq-pricing-navy-dark), var(--nq-pricing-navy)); /* Applies navy header background. */
    color: #ffffff; /* Applies white header text. */
    font-size: 13px; /* Sets compact header text size. */
    font-weight: 950; /* Makes header text strong. */
    line-height: 1.35; /* Improves header readability. */
    text-align: left; /* Aligns header text left. */
    white-space: nowrap; /* Prevents short headers from wrapping. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.14); /* Adds subtle header divider. */
} /* Ends comparison table header cell styling. */

.nq-pricing-table thead th:first-child { /* Styles the first header cell. */
    border-top-left-radius: 18px; /* Rounds the top-left header corner. */
} /* Ends first header cell styling. */

.nq-pricing-table thead th:last-child { /* Styles the last header cell. */
    border-top-right-radius: 18px; /* Rounds the top-right header corner. */
} /* Ends last header cell styling. */

.nq-pricing-table tbody th { /* Styles comparison table row labels. */
    position: sticky; /* Keeps parameter column visible during horizontal scroll. */
    left: 0; /* Pins the parameter column to the left. */
    z-index: 2; /* Keeps row labels above normal body cells. */
    width: 190px; /* Gives row labels consistent width. */
    padding: 17px 16px; /* Adds premium row label padding. */
    background: #f8fbff; /* Applies soft row label background. */
    color: var(--nq-pricing-navy); /* Applies navy label text. */
    font-size: 14px; /* Sets row label text size. */
    font-weight: 950; /* Makes row labels strong. */
    line-height: 1.35; /* Improves row label readability. */
    text-align: left; /* Aligns row labels left. */
    border-right: 1px solid rgba(220, 230, 242, 0.95); /* Adds vertical separation after labels. */
    border-bottom: 1px solid rgba(220, 230, 242, 0.82); /* Adds row divider. */
} /* Ends comparison table row label styling. */

.nq-pricing-table td { /* Styles comparison table data cells. */
    padding: 17px 16px; /* Adds premium cell padding. */
    color: #26364f; /* Applies readable data text color. */
    font-size: 14px; /* Sets table body text size. */
    font-weight: 650; /* Makes data text readable. */
    line-height: 1.5; /* Improves data readability. */
    vertical-align: middle; /* Vertically centers table data. */
    border-bottom: 1px solid rgba(220, 230, 242, 0.82); /* Adds subtle row dividers. */
    background: #ffffff; /* Applies white cell background. */
} /* Ends comparison table data cell styling. */

.nq-pricing-table tbody tr:nth-child(even) td { /* Styles even table body data rows. */
    background: #fbfdff; /* Applies subtle row striping. */
} /* Ends even row data cell styling. */

.nq-pricing-table tbody tr:nth-child(even) th { /* Styles even table body label rows. */
    background: #f3f8fc; /* Applies subtle row label striping. */
} /* Ends even row label cell styling. */

.nq-pricing-table tbody tr:hover td { /* Styles table data cells on row hover. */
    background: rgba(195, 224, 233, 0.24); /* Applies soft blue hover state. */
} /* Ends row hover data cell styling. */

.nq-pricing-table tbody tr:hover th { /* Styles table label cells on row hover. */
    background: rgba(195, 224, 233, 0.38); /* Applies stronger label hover state. */
} /* Ends row hover label cell styling. */

.nq-pricing-table th:nth-child(5), /* Targets the Growth column header. */
.nq-pricing-table td:nth-child(5) { /* Targets the Growth column data cells. */
    background-image: linear-gradient(180deg, rgba(238, 157, 27, 0.13), rgba(238, 157, 27, 0.05)); /* Highlights Growth column softly. */
} /* Ends Growth column highlight styling. */

.nq-pricing-table thead th:nth-child(5) { /* Targets the Growth header cell. */
    background: linear-gradient(135deg, #ee9d1b, #f7b955); /* Applies gold header for Growth column. */
    color: var(--nq-pricing-navy); /* Applies navy text on Growth header. */
} /* Ends Growth header styling. */

.nq-pricing-table tbody tr:last-child th, /* Targets the final row label cell. */
.nq-pricing-table tbody tr:last-child td { /* Targets the final row data cells. */
    border-bottom: 0; /* Removes the final row border. */
} /* Ends final table row border cleanup. */

.nq-pricing-table-scroll::-webkit-scrollbar { /* Styles the table horizontal scrollbar. */
    height: 10px; /* Sets horizontal scrollbar height. */
} /* Ends table scrollbar base styling. */

.nq-pricing-table-scroll::-webkit-scrollbar-track { /* Styles the table scrollbar track. */
    background: #eef4fa; /* Applies a soft blue scrollbar track. */
    border-radius: 999px; /* Rounds the scrollbar track. */
} /* Ends table scrollbar track styling. */

.nq-pricing-table-scroll::-webkit-scrollbar-thumb { /* Styles the table scrollbar thumb. */
    background: rgba(32, 39, 90, 0.45); /* Applies navy scrollbar thumb color. */
    border-radius: 999px; /* Rounds the scrollbar thumb. */
} /* Ends table scrollbar thumb styling. */

.nq-pricing-table-scroll::-webkit-scrollbar-thumb:hover { /* Styles the table scrollbar thumb on hover. */
    background: rgba(32, 39, 90, 0.68); /* Darkens the scrollbar thumb on hover. */
} /* Ends table scrollbar thumb hover styling. */

@media (min-width: 1024px) { /* Starts desktop-only pricing refinements. */
    .nq-pricing-plan-card--enterprise { /* Targets the Enterprise card on desktop. */
        grid-column: 2 / 3; /* Centers the Enterprise card in the middle column. */
    } /* Ends desktop Enterprise card positioning. */
} /* Ends desktop-only pricing refinements. */

@media (max-width: 1180px) { /* Starts medium desktop pricing refinements. */
    .nq-pricing-plan-grid { /* Adjusts pricing grid on medium screens. */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Uses two pricing cards per row. */
    } /* Ends medium pricing grid adjustment. */

    .nq-pricing-plan-card--enterprise { /* Targets Enterprise card on medium screens. */
        grid-column: auto; /* Lets Enterprise follow natural grid flow. */
    } /* Ends medium Enterprise positioning reset. */
} /* Ends medium desktop pricing refinements. */

@media (max-width: 760px) { /* Starts mobile pricing refinements. */
    .nq-pricing-toggle { /* Adjusts pricing toggle on mobile. */
        width: 100%; /* Makes the pricing toggle full width. */
        justify-content: center; /* Centers toggle buttons. */
    } /* Ends mobile pricing toggle adjustment. */

    .nq-pricing-toggle .nq-btn { /* Adjusts pricing toggle buttons on mobile. */
        flex: 1; /* Makes both toggle buttons equal width. */
        justify-content: center; /* Centers toggle button text. */
    } /* Ends mobile pricing toggle button adjustment. */

    .nq-pricing-plan-grid { /* Adjusts pricing grid on mobile. */
        grid-template-columns: 1fr; /* Uses one card per row. */
        gap: 20px; /* Reduces mobile card gap. */
    } /* Ends mobile pricing grid adjustment. */

    .nq-pricing-plan-card { /* Adjusts pricing cards on mobile. */
        min-height: auto; /* Removes fixed desktop card height on mobile. */
        padding: 26px 22px 24px; /* Reduces mobile card padding. */
        border-radius: 22px; /* Reduces mobile card radius. */
    } /* Ends mobile pricing card adjustment. */

    .nq-pricing-plan-card h3 { /* Adjusts pricing card amounts on mobile. */
        font-size: 32px; /* Keeps mobile prices large but controlled. */
    } /* Ends mobile pricing amount adjustment. */

    .nq-pricing-table-card { /* Adjusts comparison table card on mobile. */
        padding: 12px; /* Reduces table card padding. */
        border-radius: 22px; /* Reduces table card radius. */
    } /* Ends mobile comparison table card adjustment. */

    .nq-pricing-table-scroll { /* Adjusts table scroll wrapper on mobile. */
        border-radius: 16px; /* Reduces table scroll wrapper radius. */
    } /* Ends mobile table scroll wrapper adjustment. */
} /* Ends mobile pricing refinements. */

@media (max-width: 460px) { /* Starts small mobile pricing refinements. */
    .nq-pricing-plan-card { /* Adjusts pricing cards on small mobile screens. */
        padding: 24px 18px 22px; /* Reduces small mobile card padding. */
    } /* Ends small mobile pricing card adjustment. */

    .nq-pricing-plan-card .nq-btn { /* Adjusts pricing card buttons on small mobile screens. */
        min-height: 48px; /* Reduces small mobile button height. */
    } /* Ends small mobile pricing card button adjustment. */
} /* Ends small mobile pricing refinements. */