/* Compact pricing spacing update section: this CSS keeps the approved design but removes unnecessary large padding. */
:root { /* Starts the shared Pricing page design token scope. */
    --nq-pricing-navy: #20275a; /* Stores the main NediQR navy color. */
    --nq-pricing-deep: #071247; /* Stores the deepest navy color for premium surfaces. */
    --nq-pricing-dark: #101743; /* Stores the dark hero background color. */
    --nq-pricing-gold: #ee9d1b; /* Stores the NediQR gold accent color. */
    --nq-pricing-gold-soft: #fff4dc; /* Stores the soft gold highlight color. */
    --nq-pricing-blue: #c3e0e9; /* Stores the soft tech blue accent color. */
    --nq-pricing-cream: #f9f6f0; /* Stores the warm page background color. */
    --nq-pricing-white: #ffffff; /* Stores the white surface color. */
    --nq-pricing-text: #11183d; /* Stores the primary readable text color. */
    --nq-pricing-muted: #65738d; /* Stores the muted supporting text color. */
    --nq-pricing-border: #dce6f2; /* Stores the standard card border color. */
    --nq-pricing-green: #225923; /* Stores the success green color. */
    --nq-pricing-shadow-soft: 0 24px 70px rgba(17, 24, 61, 0.10); /* Stores the soft premium card shadow. */
    --nq-pricing-shadow-strong: 0 36px 100px rgba(17, 24, 61, 0.18); /* Stores the stronger premium card shadow. */
} /* Ends the shared Pricing page design token scope. */

.nq-pricing-page { /* Starts the rebuilt Pricing page root styling. */
    min-height: 100vh; /* Ensures the pricing page covers the full viewport height. */
    overflow-x: hidden; /* Prevents unwanted page-level horizontal scrolling. */
    background: radial-gradient(circle at 50% 0%, rgba(195, 224, 233, 0.18), transparent 34%), var(--nq-pricing-cream); /* Applies the premium cream background with a soft glow. */
    color: var(--nq-pricing-text); /* Applies the default Pricing page text color. */
} /* Ends the rebuilt Pricing page root styling. */

.nq-pricing-page * { /* Starts universal Pricing page box-model control. */
    box-sizing: border-box; /* Makes width and padding calculations predictable. */
} /* Ends universal Pricing page box-model control. */

.nq-pricing-page svg { /* Starts global SVG sizing behavior inside Pricing page. */
    display: block; /* Removes inline SVG baseline gaps. */
    width: 1em; /* Makes SVG icons inherit text-based sizing. */
    height: 1em; /* Makes SVG icons inherit text-based sizing. */
} /* Ends global SVG sizing behavior inside Pricing page. */

.nq-pricing-container { /* Starts the standard pricing container aligned with the homepage body sections. */
    width: min(calc(100% - (var(--nq-page-edge, 42px) * 2)), var(--nq-hero-max, 1520px)); /* Pricing alignment section: uses the same left margin and right boundary as the homepage hero container so the Pricing hero starts where the Home hero starts. */
    margin: 0 auto; /* Pricing alignment section: centers the container exactly like the homepage container. */
} /* Ends the standard pricing container aligned with the homepage body sections. */

.nq-pricing-container-wide { /* Starts the comparison table container aligned with the homepage body sections. */
    width: min(calc(100% - (var(--nq-page-edge, 42px) * 2)), var(--nq-hero-max, 1520px)); /* Full comparison table alignment section: keeps the table inside the same left and right boundary as the Pricing hero and homepage hero. */
} /* Ends the comparison table container aligned with the homepage body sections. */

/* Shared header and footer policy section: this pricing CSS intentionally does not override the common public header or footer. */

.nq-pricing-hero { /* Starts the premium hero section styling. */
    position: relative; /* Allows background glows and layering. */
    padding: 74px 0 84px; /* Hero design section: matches the homepage hero top and bottom rhythm. */
    overflow: hidden; /* Keeps decorative gradients inside the hero. */
    background: radial-gradient(circle at 68% 26%, rgba(238, 157, 27, 0.14), transparent 22%), radial-gradient(circle at 20% 20%, rgba(195, 224, 233, 0.10), transparent 28%), linear-gradient(135deg, #182050 0%, #11183d 48%, #0a102d 100%); /* Applies the reference-like navy hero gradient. */
} /* Ends the premium hero section styling. */

.nq-pricing-hero::before { /* Starts the hero grid overlay styling. */
    content: ""; /* Creates the decorative grid overlay. */
    position: absolute; /* Positions the decorative grid overlay. */
    inset: 0; /* Stretches the grid overlay across the hero. */
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); /* Draws the subtle hero grid lines. */
    background-size: 46px 46px; /* Hero design section: matches the homepage grid spacing. */
    opacity: 0.45; /* Softens the hero grid overlay. */
    pointer-events: none; /* Prevents the overlay from blocking interactions. */
} /* Ends the hero grid overlay styling. */

.nq-pricing-hero-grid { /* Starts the hero grid layout. */
    position: relative; /* Keeps hero content above the grid overlay. */
    z-index: 1; /* Places hero content above decorative layers. */
    display: grid; /* Creates the two-column hero layout. */
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.9fr); /* Hero layout section: follows the homepage two-column hero proportions. */
    align-items: center; /* Vertically centers hero content and card. */
    gap: 56px; /* Hero layout section: matches the homepage hero column gap. */
} /* Ends the hero grid layout. */

.nq-pricing-kicker { /* Starts shared section eyebrow styling. */
    margin: 0 0 14px; /* Shared section label section: matches the homepage kicker spacing. */
    color: var(--nq-pricing-gold); /* Applies gold eyebrow text. */
    font-size: 12px; /* Shared section label section: matches the homepage kicker size. */
    font-weight: 900; /* Makes eyebrow text strong like the homepage. */
    letter-spacing: 0.12em; /* Shared section label section: matches the homepage uppercase spacing. */
    line-height: 1.2; /* Keeps eyebrow text compact. */
    text-transform: uppercase; /* Forces eyebrow text to uppercase. */
} /* Ends shared section eyebrow styling. */

.nq-pricing-hero-title { /* Starts the hero headline styling. */
    max-width: 760px; /* Hero title section: matches the homepage headline line length. */
    margin: 0; /* Removes default heading margin. */
    color: #ffffff; /* Applies white hero headline text. */
    font-size: clamp(32px, 4.6vw, 54px); /* Hero title section: matches the homepage headline scale. */
    font-weight: 720; /* Makes the hero headline extra bold. */
    line-height: 1.03; /* Keeps the hero headline tight and premium. */
    letter-spacing: -0.058em; /* Hero title section: matches the homepage headline compression. */
} /* Ends the hero headline styling. */

.nq-pricing-hero-subtitle { /* Starts the hero subtitle styling. */
    max-width: 680px; /* Hero subtitle section: matches the homepage readable line length. */
    margin: 22px 0 0; /* Hero content section: matches the homepage subtitle spacing. */
    color: rgba(255, 255, 255, 0.84); /* Applies soft white subtitle text like the homepage. */
    font-size: clamp(16px, 1.5vw, 18px); /* Hero subtitle section: matches the homepage subtitle scale. */
    font-weight: 500; /* Keeps subtitle text clean. */
    line-height: 1.6; /* Hero subtitle section: keeps the homepage readability rhythm. */
} /* Ends the hero subtitle styling. */

.nq-pricing-hero-actions { /* Starts the hero action button row styling. */
    display: flex; /* Places hero buttons in a row. */
    flex-wrap: wrap; /* Allows buttons to wrap on small screens. */
    gap: 14px; /* Hero CTA section: matches the homepage button gap. */
    margin-top: 30px; /* Hero CTA section: matches the homepage action spacing. */
} /* Ends the hero action button row styling. */

.nq-pricing-btn { /* Starts shared pricing button styling. */
    display: inline-flex; /* Allows icon/text alignment if needed. */
    align-items: center; /* Vertically centers button text. */
    justify-content: center; /* Horizontally centers button text. */
    min-height: 44px; /* Button design section: matches the shared homepage button height. */
    padding: 12px 20px; /* Button design section: matches the shared homepage button padding. */
    border-radius: var(--nq-radius-sm, 10px); /* Button design section: uses the shared homepage radius token. */
    border: 1px solid transparent; /* Creates stable button border sizing. */
    font-size: 18px; /* Button design section: matches the shared homepage button text size. */
    font-weight: 720; /* Makes button text strong. */
    line-height: 1; /* Keeps button text vertically centered. */
    text-decoration: none; /* Removes underline from link buttons. */
    cursor: pointer; /* Shows pointer cursor on buttons. */
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; /* Adds smooth button interactions. */
} /* Ends shared pricing button styling. */

.nq-pricing-btn:hover { /* Starts shared pricing button hover styling. */
    transform: translateY(-2px); /* Lifts buttons slightly on hover. */
} /* Ends shared pricing button hover styling. */

.nq-pricing-btn-primary { /* Starts primary pricing button styling. */
    background: linear-gradient(180deg, #ffb326 0%, var(--nq-pricing-gold) 100%); /* Applies the gold CTA background. */
    color: #071247; /* Applies navy text on gold buttons. */
    box-shadow: 0 18px 40px rgba(238, 157, 27, 0.32); /* Adds gold button glow. */
} /* Ends primary pricing button styling. */

.nq-pricing-btn-secondary { /* Starts secondary pricing button styling. */
    background: rgba(255, 255, 255, 0.05); /* Applies translucent navy secondary button background. */
    border-color: rgba(255, 255, 255, 0.45); /* Applies light secondary button border. */
    color: #ffffff; /* Applies white secondary button text. */
} /* Ends secondary pricing button styling. */

.nq-pricing-hero-pills { /* Starts hero pill row styling. */
    display: flex; /* Places hero pills in a row. */
    flex-wrap: wrap; /* Allows pills to wrap on smaller screens. */
    gap: 10px; /* Hero highlight section: matches the homepage pill gap. */
    margin-top: 24px; /* Hero highlight section: matches the homepage pill spacing. */
} /* Ends hero pill row styling. */

.nq-pricing-hero-pills span { /* Starts individual hero pill styling. */
    display: inline-flex; /* Aligns pill icon and text. */
    align-items: center; /* Vertically centers pill content. */
    gap: 8px; /* Hero highlight section: keeps pricing pill icons close to text. */
    min-height: auto; /* Hero highlight section: follows the homepage natural pill height. */
    padding: 8px 12px; /* Hero highlight section: matches homepage pill padding. */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Adds subtle pill border. */
    border-radius: 999px; /* Makes the pills fully rounded. */
    background: rgba(255, 255, 255, 0.06); /* Applies translucent pill background. */
    color: rgba(255, 255, 255, 0.94); /* Applies soft white pill text. */
    font-size: 12px; /* Hero highlight section: matches homepage pill text size. */
    font-weight: 850; /* Makes pill text strong. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); /* Adds subtle inner pill highlight. */
} /* Ends individual hero pill styling. */

.nq-pricing-hero-pills svg { /* Starts hero pill icon styling. */
    width: 14px; /* Hero highlight icon section: keeps compact icon width without changing the icon artwork. */
    height: 14px; /* Hero highlight icon section: keeps compact icon height without changing the icon artwork. */
    color: rgba(255, 255, 255, 0.92); /* Applies light icon color. */
} /* Ends hero pill icon styling. */

.nq-pricing-hero-proof-grid { /* Starts hero proof cards grid styling. */
    display: grid; /* Creates the proof cards grid. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Shows two proof cards on desktop. */
    gap: 14px; /* Hero proof-card section: matches the homepage proof-card gap. */
    max-width: 680px; /* Hero proof-card section: aligns proof cards with the homepage subtitle width. */
    margin-top: 24px; /* Hero proof-card section: matches homepage proof-card spacing. */
} /* Ends hero proof cards grid styling. */

.nq-pricing-hero-proof-card { /* Starts hero proof card styling. */
    display: grid; /* Creates icon-and-copy layout. */
    grid-template-columns: 40px minmax(0, 1fr); /* Hero proof-card section: keeps the icon-and-copy structure. */
    gap: 14px; /* Hero proof-card section: matches the compact homepage proof-card rhythm. */
    min-height: 88px; /* Hero proof-card section: gives proof cards the same visual weight as homepage cards. */
    padding: 16px; /* Hero proof-card section: matches the homepage proof-card padding. */
    border: 1px solid rgba(255, 255, 255, 0.16); /* Adds subtle proof card border. */
    border-radius: 26px; /* Applies premium proof card rounding. */
    background: rgba(255, 255, 255, 0.07); /* Applies glassy proof card background. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); /* Adds proof card inner highlight. */
} /* Ends hero proof card styling. */

.nq-pricing-hero-proof-icon { /* Starts hero proof icon block styling. */
    display: inline-flex; /* Centers proof icons. */
    align-items: center; /* Vertically centers proof icons. */
    justify-content: center; /* Horizontally centers proof icons. */
    width: 40px; /* Hero proof icon section: reduces icon block width. */
    height: 40px; /* Hero proof icon section: reduces icon block height. */
    border-radius: 16px; /* Applies proof icon block rounding. */
    background: rgba(70, 119, 255, 0.22); /* Applies soft blue icon background. */
    color: #79a7ff; /* Applies blue proof icon color. */
} /* Ends hero proof icon block styling. */

.nq-pricing-hero-proof-icon svg { /* Starts hero proof SVG styling. */
    width: 20px; /* Hero proof icon section: reduces SVG width. */
    height: 20px; /* Hero proof icon section: reduces SVG height. */
} /* Ends hero proof SVG styling. */

.nq-pricing-hero-proof-card strong { /* Starts hero proof title styling. */
    display: block; /* Keeps proof title on its own line. */
    margin-bottom: 10px; /* Adds spacing below proof title. */
    color: #ffffff; /* Applies white proof title text. */
    font-size: 14px; /* Hero proof title section: matches the homepage proof-card title size. */
    font-weight: 950; /* Makes proof title strong. */
    line-height: 1.2; /* Keeps proof title compact. */
} /* Ends hero proof title styling. */

.nq-pricing-hero-proof-card p { /* Starts hero proof description styling. */
    margin: 0; /* Removes default paragraph margin. */
    color: rgba(255, 255, 255, 0.78); /* Applies soft white proof description text. */
    font-size: 13px; /* Hero proof copy section: matches the homepage proof-card copy size. */
    font-weight: 500; /* Keeps proof description clean. */
    line-height: 1.45; /* Hero proof copy section: keeps description compact and readable. */
} /* Ends hero proof description styling. */

.nq-pricing-hero-visual { /* Starts hero visual alignment styling. */
    display: flex; /* Allows hero card alignment control. */
    justify-content: flex-end; /* Aligns the hero card to the right. */
} /* Ends hero visual alignment styling. */

.nq-pricing-hero-card { /* Starts hero pricing preview card styling. */
    width: min(100%, 440px); /* Hero pricing-preview section: keeps the pricing preview balanced inside the homepage-aligned hero. */
    padding: 28px; /* Hero pricing-preview section: matches the homepage dashboard-card padding. */
    border: 1px solid rgba(17, 24, 61, 0.08); /* Adds subtle hero card border. */
    border-radius: 34px; /* Hero pricing-preview section: matches the homepage dashboard-card radius. */
    background: linear-gradient(145deg, #fffdf8 0%, #ffffff 100%); /* Applies clean white hero card gradient. */
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.26); /* Adds strong hero card shadow. */
} /* Ends hero pricing preview card styling. */

.nq-pricing-hero-card-top { /* Starts hero pricing card top row styling. */
    display: flex; /* Places status and badge in one row. */
    align-items: center; /* Vertically centers status and badge. */
    justify-content: space-between; /* Pushes status and badge apart. */
    gap: 20px; /* Adds spacing between status and badge. */
    margin-bottom: 16px; /* Hero pricing-preview section: tightens title-to-metrics spacing. */
} /* Ends hero pricing card top row styling. */

.nq-pricing-hero-card-status { /* Starts hero pricing card status styling. */
    display: inline-flex; /* Aligns dot and title. */
    align-items: center; /* Vertically centers dot and title. */
    gap: 14px; /* Adds spacing between dot and title. */
    color: var(--nq-pricing-text); /* Applies title text color. */
    font-size: 13px; /* Hero pricing-preview title section: reduces title size. */
    font-weight: 950; /* Makes status title strong. */
} /* Ends hero pricing card status styling. */

.nq-pricing-hero-card-dot { /* Starts hero card green status dot styling. */
    width: 9px; /* Hero pricing-preview status section: reduces dot width. */
    height: 9px; /* Hero pricing-preview status section: reduces dot height. */
    border-radius: 999px; /* Makes the status dot round. */
    background: #0c8a2a; /* Applies green status color. */
} /* Ends hero card green status dot styling. */

.nq-pricing-hero-card-badge { /* Starts hero card billing badge styling. */
    color: #1c3f98; /* Applies blue billing badge text. */
    font-size: 11px; /* Hero pricing-preview badge section: reduces badge text size. */
    font-weight: 950; /* Makes billing badge text strong. */
} /* Ends hero card billing badge styling. */

.nq-pricing-hero-metric-grid { /* Starts hero pricing metric grid styling. */
    display: grid; /* Creates metric grid. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Shows two metrics per row. */
    gap: 14px; /* Adds spacing between metric cards. */
} /* Ends hero pricing metric grid styling. */

.nq-pricing-hero-metric { /* Starts hero metric card styling. */
    min-height: 76px; /* Hero pricing-preview metrics section: brings metric cards to normal scale. */
    padding: 14px; /* Hero pricing-preview metrics section: reduces metric card padding. */
    border: 1px solid rgba(220, 230, 242, 0.92); /* Adds metric card border. */
    border-radius: 18px; /* Applies metric card rounding. */
    background: #f8fbff; /* Applies pale metric card background. */
} /* Ends hero metric card styling. */

.nq-pricing-hero-metric strong { /* Starts hero metric value styling. */
    display: block; /* Keeps metric value on its own line. */
    color: var(--nq-pricing-navy); /* Applies navy metric value text. */
    font-size: 24px; /* Hero pricing-preview metric section: reduces metric value size. */
    font-weight: 950; /* Makes metric value strong. */
    line-height: 1.05; /* Keeps metric value compact. */
    letter-spacing: -0.04em; /* Adds premium metric text spacing. */
} /* Ends hero metric value styling. */

.nq-pricing-hero-metric span { /* Starts hero metric label styling. */
    display: block; /* Keeps metric label on its own line. */
    margin-top: 8px; /* Hero pricing-preview metric section: reduces label spacing. */
    color: #303a58; /* Applies readable metric label color. */
    font-size: 11px; /* Hero pricing-preview metric section: reduces metric label size. */
    font-weight: 800; /* Makes metric label strong. */
} /* Ends hero metric label styling. */

.nq-pricing-hero-bars { /* Starts decorative hero card bars styling. */
    display: grid; /* Stacks decorative bars. */
    gap: 10px; /* Adds spacing between decorative bars. */
    margin: 14px 0 12px; /* Hero pricing-preview section: tightens decorative bar spacing. */
} /* Ends decorative hero card bars styling. */

.nq-pricing-hero-bars span { /* Starts each decorative hero card bar styling. */
    display: block; /* Makes each bar visible as a block. */
    height: 5px; /* Hero pricing-preview bar section: reduces bar height. */
    border-radius: 999px; /* Makes bars rounded. */
    background: #dff2f7; /* Applies soft tech blue bar color. */
} /* Ends each decorative hero card bar styling. */

.nq-pricing-hero-bars span:nth-child(1) { /* Starts first decorative bar width styling. */
    width: 72%; /* Sets first bar width. */
} /* Ends first decorative bar width styling. */

.nq-pricing-hero-bars span:nth-child(2) { /* Starts second decorative bar width styling. */
    width: 88%; /* Sets second bar width. */
} /* Ends second decorative bar width styling. */

.nq-pricing-hero-bars span:nth-child(3) { /* Starts third decorative bar width styling. */
    width: 60%; /* Sets third bar width. */
} /* Ends third decorative bar width styling. */

.nq-pricing-hero-mini-table { /* Starts hero mini table styling. */
    display: grid; /* Stacks mini table rows. */
    border-top: 1px solid rgba(17, 24, 61, 0.16); /* Adds top divider to mini table. */
} /* Ends hero mini table styling. */

.nq-pricing-hero-mini-row { /* Starts hero mini table row styling. */
    display: grid; /* Creates mini table row columns. */
    grid-template-columns: 1fr 1fr auto; /* Sets label, plan, and price columns. */
    gap: 16px; /* Adds spacing between mini row columns. */
    align-items: center; /* Vertically centers mini row content. */
    min-height: 42px; /* Hero pricing-preview mini-table section: reduces mini row height. */
    border-bottom: 1px solid rgba(17, 24, 61, 0.12); /* Adds mini row divider. */
} /* Ends hero mini table row styling. */

.nq-pricing-hero-mini-row span { /* Starts mini table label styling. */
    color: #65738d; /* Applies muted mini label color. */
    font-size: 11px; /* Hero pricing-preview mini-table section: reduces mini label size. */
    font-weight: 850; /* Makes mini label text strong. */
} /* Ends mini table label styling. */

.nq-pricing-hero-mini-row strong { /* Starts mini table plan styling. */
    color: var(--nq-pricing-navy); /* Applies navy mini plan text. */
    font-size: 12px; /* Hero pricing-preview mini-table section: reduces mini plan size. */
    font-weight: 950; /* Makes mini plan text strong. */
} /* Ends mini table plan styling. */

.nq-pricing-hero-mini-row em { /* Starts mini table price styling. */
    color: var(--nq-pricing-green); /* Applies green mini price text. */
    font-size: 11px; /* Hero pricing-preview mini-table section: reduces mini price size. */
    font-style: normal; /* Removes italic styling from price. */
    font-weight: 950; /* Makes mini price text strong. */
} /* Ends mini table price styling. */

.nq-pricing-trust { /* Starts floating trust section styling. */
    position: relative; /* Allows trust cards to layer above background. */
    z-index: 3; /* Places trust cards above section background. */
    margin-top: -38px; /* Trust cards section: matches the homepage floating strip overlap. */
    padding-bottom: 36px; /* Trust cards section: matches the homepage section rhythm before the next block. */
} /* Ends floating trust section styling. */

.nq-pricing-trust-grid { /* Starts trust card grid styling. */
    display: grid; /* Creates trust card grid. */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Shows three trust cards on desktop. */
    gap: 0; /* Trust cards section: creates a single homepage-style connected strip. */
    overflow: hidden; /* Trust cards section: clips inner dividers like the homepage trust strip. */
    border: 1px solid var(--nq-border, #d9e2ec); /* Trust cards section: matches the homepage trust strip border. */
    border-radius: 24px; /* Trust cards section: matches the homepage trust strip radius. */
    background: var(--nq-white, #ffffff); /* Trust cards section: matches the homepage trust strip surface. */
    box-shadow: var(--nq-shadow-card, 0 24px 60px rgba(32, 39, 90, 0.14)); /* Trust cards section: matches the homepage trust strip shadow. */
} /* Ends trust card grid styling. */

.nq-pricing-trust-card { /* Starts trust card styling. */
    display: grid; /* Creates trust card icon and copy layout. */
    grid-template-columns: 48px minmax(0, 1fr); /* Trust card section: keeps the pricing trust icons aligned with the copy. */
    align-items: center; /* Vertically centers trust card content. */
    gap: 14px; /* Trust card content section: keeps icon-to-copy spacing compact. */
    min-height: 96px; /* Trust cards section: matches the homepage trust-strip height. */
    padding: 22px 24px; /* Trust cards section: follows the homepage trust-strip item padding. */
    border: 0; /* Trust cards section: removes individual card borders inside the connected strip. */
    border-right: 1px solid var(--nq-border, #d9e2ec); /* Trust cards section: adds the homepage-style internal divider. */
    border-radius: 0; /* Trust cards section: lets the parent strip control the rounding. */
    background: transparent; /* Trust cards section: lets the parent strip provide the surface. */
    box-shadow: none; /* Trust cards section: lets the parent strip provide the shadow. */
} /* Ends trust card styling. */

.nq-pricing-trust-card:last-child { /* Starts final trust card divider cleanup. */
    border-right: 0; /* Trust cards section: removes the final divider like the homepage trust strip. */
} /* Ends final trust card divider cleanup. */

.nq-pricing-trust-icon { /* Starts trust card icon circle styling. */
    display: inline-flex; /* Centers trust icon. */
    align-items: center; /* Vertically centers trust icon. */
    justify-content: center; /* Horizontally centers trust icon. */
    width: 48px; /* Trust icon section: reduces icon circle width. */
    height: 48px; /* Trust icon section: reduces icon circle height. */
    border-radius: 999px; /* Makes trust icon circle round. */
    background: #f1f3f8; /* Applies soft grey trust icon background. */
    color: var(--nq-pricing-navy); /* Applies navy trust icon color. */
} /* Ends trust card icon circle styling. */

.nq-pricing-trust-icon svg { /* Starts trust card SVG styling. */
    width: 24px; /* Trust icon section: reduces SVG width. */
    height: 24px; /* Trust icon section: reduces SVG height. */
} /* Ends trust card SVG styling. */

.nq-pricing-trust-card strong { /* Starts trust card title styling. */
    display: block; /* Keeps trust card title on its own line. */
    margin-bottom: 8px; /* Trust card content section: reduces title-to-copy spacing. */
    color: var(--nq-pricing-navy); /* Applies navy trust title text. */
    font-size: 15px; /* Trust title section: matches the homepage trust-strip heading size. */
    font-weight: 950; /* Makes trust title strong. */
    line-height: 1.2; /* Keeps trust title compact. */
} /* Ends trust card title styling. */

.nq-pricing-trust-card p { /* Starts trust card description styling. */
    margin: 0; /* Removes default paragraph margin. */
    color: #3d4962; /* Applies trust description text color. */
    font-size: 13px; /* Trust copy section: matches the homepage trust-strip copy size. */
    font-weight: 500; /* Keeps trust description clean. */
    line-height: 1.55; /* Improves trust description readability. */
} /* Ends trust card description styling. */

.nq-pricing-plans-section { /* Starts plan card section styling. */
    padding: 36px 0; /* Plan cards section: matches the homepage section spacing rhythm. */
    background: linear-gradient(180deg, rgba(249, 246, 240, 0.00) 0%, rgba(255, 253, 248, 0.92) 100%); /* Creates a subtle section background transition. */
} /* Ends plan card section styling. */

.nq-pricing-section-head { /* Starts shared section heading wrapper styling. */
    margin-bottom: 36px; /* Section heading design: matches the homepage heading-to-content spacing. */
} /* Ends shared section heading wrapper styling. */

.nq-pricing-section-head-split { /* Starts split section heading styling. */
    display: flex; /* Creates a split heading row. */
    align-items: flex-start; /* Aligns toggle to top of text. */
    justify-content: space-between; /* Pushes heading and toggle apart. */
    gap: 34px; /* Plans heading section: matches the homepage split-heading gap. */
} /* Ends split section heading styling. */

.nq-pricing-section-head-center { /* Starts centered section heading styling. */
    max-width: 930px; /* Controls centered heading width. */
    margin-left: auto; /* Centers the heading wrapper horizontally. */
    margin-right: auto; /* Centers the heading wrapper horizontally. */
    text-align: center; /* Centers heading text. */
} /* Ends centered section heading styling. */

.nq-pricing-section-copy { /* Starts section copy wrapper styling. */
    max-width: 820px; /* Section heading layout section: matches the homepage heading width. */
} /* Ends section copy wrapper styling. */

.nq-pricing-section-head h2 { /* Starts shared section heading text styling. */
    margin: 0; /* Removes default heading margin. */
    color: var(--nq-pricing-navy); /* Applies navy section heading color. */
    font-size: clamp(32px, 3.35vw, 46px); /* Section heading design: matches the homepage section heading scale. */
    font-weight: 720; /* Makes section headings very strong. */
    line-height: 1.08; /* Keeps section headings compact. */
    letter-spacing: -0.043em; /* Section heading design: matches the homepage section heading compression. */
} /* Ends shared section heading text styling. */

.nq-pricing-section-head p:not(.nq-pricing-kicker) { /* Starts shared section supporting text styling. */
    max-width: 850px; /* Keeps supporting copy readable. */
    margin: 14px 0 0; /* Section supporting-copy section: matches the homepage intro spacing. */
    color: var(--nq-pricing-muted); /* Applies muted supporting text color. */
    font-size: 16px; /* Section supporting-copy section: matches the homepage intro text size. */
    font-weight: 500; /* Keeps supporting text clean. */
    line-height: 1.55; /* Section supporting-copy section: keeps copy compact and readable. */
} /* Ends shared section supporting text styling. */

.nq-pricing-section-head-center p:not(.nq-pricing-kicker) { /* Starts centered section supporting text adjustment. */
    margin-left: auto; /* Centers supporting copy under centered headings. */
    margin-right: auto; /* Centers supporting copy under centered headings. */
} /* Ends centered section supporting text adjustment. */

.nq-pricing-toggle { /* Starts billing toggle wrapper styling. */
    display: inline-flex; /* Places toggle buttons in one row. */
    align-items: center; /* Vertically centers toggle buttons. */
    gap: 8px; /* Adds spacing between toggle buttons. */
    padding: 6px; /* Billing toggle section: reduces toggle wrapper padding. */
    border: 1px solid rgba(220, 230, 242, 0.95); /* Adds toggle wrapper border. */
    border-radius: 999px; /* Makes the toggle wrapper pill-shaped. */
    background: #ffffff; /* Applies white toggle background. */
    box-shadow: 0 18px 48px rgba(17, 24, 61, 0.12); /* Adds premium toggle shadow. */
} /* Ends billing toggle wrapper styling. */

.nq-pricing-toggle-btn { /* Starts billing toggle button styling. */
    min-width: 74px; /* Billing toggle section: reduces toggle button width to the reference scale. */
    min-height: 28px; /* Billing toggle section: reduces toggle button height further. */
    padding: 0 14px; /* Billing toggle section: trims toggle button side padding. */
    border: 0; /* Removes default button border. */
    border-radius: 999px; /* Makes toggle buttons pill-shaped. */
    background: transparent; /* Keeps inactive toggle buttons transparent. */
    color: var(--nq-pricing-navy); /* Applies navy toggle text. */
    font-size: 11px; /* Billing toggle section: reduces toggle text size. */
    font-weight: 950; /* Makes toggle text strong. */
    cursor: pointer; /* Shows pointer cursor on toggle buttons. */
} /* Ends billing toggle button styling. */

.nq-pricing-toggle-btn.is-active, .nq-pricing-toggle-btn.nq-btn-primary { /* Starts active billing toggle button styling. */
    background: linear-gradient(180deg, #ffb326 0%, var(--nq-pricing-gold) 100%); /* Applies gold active toggle background. */
    color: var(--nq-pricing-deep); /* Applies navy active toggle text. */
    box-shadow: 0 12px 26px rgba(238, 157, 27, 0.28); /* Adds active toggle shadow. */
} /* Ends active billing toggle button styling. */

.nq-pricing-save-note { /* Starts billing save-note styling. */
    margin: -18px 0 24px; /* Plans helper-note section: keeps helper note close to the heading like the homepage plan area. */
    color: var(--nq-pricing-muted); /* Applies muted save-note text. */
    font-size: 14px; /* Plans helper-note section: matches the homepage pricing helper scale. */
    font-weight: 750; /* Makes save-note text moderately strong. */
    line-height: 1.5; /* Keeps save-note readable. */
} /* Ends billing save-note styling. */

.nq-pricing-plan-grid { /* Starts pricing plan card grid styling. */
    display: grid; /* Creates the plan card grid. */
    grid-template-columns: repeat(3, minmax(280px, 380px)); /* Package cards section: caps card width so Free Trial through Enterprise do not look horizontally stretched. */
    justify-content: center; /* Package cards section: keeps the compact card group centered without changing the page section alignment. */
    gap: 22px; /* Package cards grid section: keeps card spacing balanced after reducing the stretched width. */
    align-items: stretch; /* Makes cards stretch evenly. */
} /* Ends pricing plan card grid styling. */

.nq-pricing-plan-card { /* Starts pricing plan card styling. */
    position: relative; /* Allows decorative card glow placement. */
    display: flex; /* Enables vertical content layout. */
    flex-direction: column; /* Stacks card content vertically. */
    min-height: 334px; /* Package cards section: reduces the tall empty feel while keeping every card visually balanced. */
    padding: 26px 24px 24px; /* Package cards section: improves readability inside the now more compact card width. */
    overflow: hidden; /* Clips decorative glows inside the card. */
    border: 1px solid rgba(220, 230, 242, 0.95); /* Adds soft plan card border. */
    border-top: 4px solid rgba(32, 39, 90, 0.20); /* Adds neutral top accent. */
    border-radius: 24px; /* Plan card design section: matches the homepage card radius. */
    background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%); /* Applies soft white card gradient. */
    box-shadow: var(--nq-pricing-shadow-soft); /* Applies soft card shadow. */
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; /* Adds smooth card interaction. */
} /* Ends pricing plan card styling. */

.nq-pricing-plan-card::before { /* Starts plan card decorative glow styling. */
    content: ""; /* Creates the plan card glow element. */
    position: absolute; /* Positions the glow inside the card. */
    right: -70px; /* Moves glow partially outside the card. */
    bottom: -90px; /* Moves glow partially below the card. */
    width: 230px; /* Sets glow width. */
    height: 230px; /* Sets glow height. */
    border-radius: 999px; /* Makes glow circular. */
    background: rgba(195, 224, 233, 0.34); /* Applies soft tech-blue glow. */
    pointer-events: none; /* Keeps glow from blocking interactions. */
} /* Ends plan card decorative glow styling. */

.nq-pricing-plan-card:hover { /* Starts plan card hover styling. */
    transform: translateY(-6px); /* Lifts card on hover. */
    box-shadow: var(--nq-pricing-shadow-strong); /* Applies stronger card shadow on hover. */
} /* Ends plan card hover styling. */

.nq-pricing-plan-card > * { /* Starts plan card direct child layering. */
    position: relative; /* Keeps content above decorative glows. */
    z-index: 1; /* Places content above decorative glows. */
} /* Ends plan card direct child layering. */

.nq-pricing-plan-label { /* Starts plan label pill styling. */
    display: inline-flex; /* Keeps label width compact. */
    align-items: center; /* Vertically centers label text. */
    width: fit-content; /* Shrinks label width to content. */
    min-height: 24px; /* Plan label section: reduces label height. */
    margin: 0 0 14px; /* Plan card label section: tightens label-to-price spacing. */
    padding: 0 10px; /* Plan label section: reduces label side padding. */
    border: 1px solid rgba(32, 39, 90, 0.14); /* Adds label border. */
    border-radius: 999px; /* Makes label pill-shaped. */
    background: rgba(32, 39, 90, 0.06); /* Applies soft navy label background. */
    color: var(--nq-pricing-navy); /* Applies navy label text. */
    font-size: 11px; /* Plan label section: matches the homepage plan badge scale. */
    font-weight: 950; /* Makes label text strong. */
    letter-spacing: 0.06em; /* Adds label letter spacing. */
    text-transform: uppercase; /* Shows plan labels in uppercase. */
} /* Ends plan label pill styling. */

.nq-pricing-plan-badge { /* Starts Growth popular badge styling. */
    display: inline-flex; /* Keeps Growth badge compact. */
    align-items: center; /* Vertically centers Growth badge text. */
    justify-content: center; /* Horizontally centers Growth badge text. */
    width: fit-content; /* Shrinks Growth badge width to content. */
    min-height: 22px; /* Growth badge section: reduces badge height to the reference scale. */
    margin-bottom: 8px; /* Growth badge section: reduces badge-to-label spacing. */
    padding: 0 12px; /* Growth badge section: trims badge side padding. */
    border-radius: 999px; /* Makes Growth badge pill-shaped. */
    background: var(--nq-pricing-gold); /* Applies gold Growth badge background. */
    color: var(--nq-pricing-deep); /* Applies navy Growth badge text. */
    font-size: 9px; /* Growth badge section: reduces badge text size. */
    font-weight: 950; /* Makes Growth badge text strong. */
} /* Ends Growth popular badge styling. */

.nq-pricing-plan-card h3 { /* Starts plan card price styling. */
    margin: 0 0 14px; /* Plan card price section: reduces spacing below plan price. */
    color: var(--nq-pricing-navy); /* Applies navy plan price text. */
    font-size: clamp(26px, 2.2vw, 34px); /* Plan card price section: reduces price size to normal UI scale. */
    font-weight: 950; /* Makes plan prices very strong. */
    line-height: 1.08; /* Keeps plan price text compact. */
    letter-spacing: -0.040em; /* Plan card price section: softens price spacing. */
} /* Ends plan card price styling. */

.nq-pricing-plan-card p { /* Starts plan card paragraph styling. */
    margin: 0 0 14px; /* Plan card paragraph section: keeps paragraph spacing compact. */
    color: var(--nq-pricing-muted); /* Applies muted paragraph text. */
    font-size: 13px; /* Package cards section: improves content readability without changing plan copy. */
    font-weight: 500; /* Keeps paragraph text clean. */
    line-height: 1.45; /* Plan card paragraph section: keeps paragraph lines compact. */
} /* Ends plan card paragraph styling. */

.nq-pricing-plan-card ul { /* Starts plan card list styling. */
    display: grid; /* Stacks list items with gap. */
    gap: 7px; /* Package cards section: gives feature lines slightly better readability inside compact cards. */
    margin: 0 0 18px; /* Plan card feature-list section: reduces list-to-button spacing. */
    padding: 0; /* Removes default list padding. */
    list-style: none; /* Removes default list bullets. */
} /* Ends plan card list styling. */

.nq-pricing-plan-card li { /* Starts plan card list item styling. */
    position: relative; /* Allows custom bullet placement. */
    padding-left: 15px; /* Plan card feature-list section: reduces bullet text indent. */
    color: #17213d; /* Applies readable list item color. */
    font-size: 13px; /* Package cards section: improves feature-list readability without changing content. */
    font-weight: 600; /* Makes list item text strong. */
    line-height: 1.35; /* Plan card feature-list section: keeps list items compact. */
} /* Ends plan card list item styling. */

.nq-pricing-plan-card li::before { /* Starts custom plan card bullet styling. */
    content: ""; /* Creates the custom bullet. */
    position: absolute; /* Positions the custom bullet. */
    top: 6px; /* Plan card bullet section: aligns smaller bullet with compact text. */
    left: 0; /* Places bullet at the start of list item. */
    width: 4px; /* Plan card bullet section: reduces bullet width. */
    height: 4px; /* Plan card bullet section: reduces bullet height. */
    border-radius: 999px; /* Makes bullet round. */
    background: var(--nq-pricing-navy); /* Applies navy bullet color. */
    box-shadow: 0 0 0 3px rgba(32, 39, 90, 0.08); /* Plan card bullet section: reduces bullet halo. */
} /* Ends custom plan card bullet styling. */

.nq-pricing-card-btn { /* Starts plan card button styling. */
    display: inline-flex; /* Centers plan card button text. */
    align-items: center; /* Vertically centers plan card button text. */
    justify-content: center; /* Horizontally centers plan card button text. */
    width: 100%; /* Makes plan card buttons full width. */
    min-height: 36px; /* Package cards section: keeps CTA buttons readable inside the balanced cards. */
    margin-top: auto; /* Pushes plan card buttons to the bottom. */
    border: 1px solid rgba(32, 39, 90, 0.16); /* Adds card button border. */
    border-radius: 8px; /* Plan card CTA section: reduces button rounding. */
    background: #ffffff; /* Applies white card button background. */
    color: var(--nq-pricing-navy); /* Applies navy card button text. */
    font-size: 12px; /* Package cards section: improves CTA readability without changing button labels. */
    font-weight: 950; /* Makes card button text strong. */
    cursor: pointer; /* Shows pointer cursor on card buttons. */
} /* Ends plan card button styling. */

.nq-pricing-card-btn-primary { /* Starts highlighted Growth card button styling. */
    border-color: var(--nq-pricing-gold); /* Applies gold button border. */
    background: linear-gradient(180deg, #ffb326 0%, var(--nq-pricing-gold) 100%); /* Applies gold Growth button background. */
    color: var(--nq-pricing-deep); /* Applies navy Growth button text. */
} /* Ends highlighted Growth card button styling. */

.nq-pricing-plan-card-free { /* Starts Free Trial card accent styling. */
    border-top-color: var(--nq-pricing-green); /* Applies green top accent to Free Trial card. */
    background: linear-gradient(145deg, #ffffff 0%, #f8fff8 100%); /* Applies soft green card background. */
} /* Ends Free Trial card accent styling. */

.nq-pricing-plan-card-free .nq-pricing-plan-label { /* Starts Free Trial label accent styling. */
    background: rgba(34, 89, 35, 0.09); /* Applies soft green label background. */
    color: var(--nq-pricing-green); /* Applies green label text. */
} /* Ends Free Trial label accent styling. */

.nq-pricing-plan-card-growth { /* Starts Growth card accent styling. */
    border-color: rgba(238, 157, 27, 0.95); /* Applies gold border to Growth card. */
    border-top-color: var(--nq-pricing-gold); /* Applies strong gold top accent to Growth card. */
    background: linear-gradient(145deg, #ffffff 0%, #fff7e7 100%); /* Applies warm Growth card background. */
    box-shadow: 0 30px 90px rgba(238, 157, 27, 0.22); /* Applies strong Growth card shadow. */
} /* Ends Growth card accent styling. */

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

.nq-pricing-plan-card-lite { /* Starts Lite card accent styling. */
    border-top-color: var(--nq-pricing-navy); /* Applies navy Lite card top accent. */
    background: linear-gradient(145deg, #ffffff 0%, #f6fbff 100%); /* Applies soft blue Lite card background. */
} /* Ends Lite card accent styling. */

.nq-pricing-plan-card-enterprise { /* Starts Enterprise card accent styling. */
    border-top-color: var(--nq-pricing-navy); /* Applies navy Enterprise card top accent. */
    background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%); /* Applies soft Enterprise card background. */
} /* Ends Enterprise card accent styling. */

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

.nq-pricing-billing-section { /* Starts billing clarity section styling. */
    padding: 34px 0 30px; /* Billing clarity section: reduces section padding to match the reference. */
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.94) 0%, rgba(249, 246, 240, 0.98) 100%); /* Applies billing section background transition. */
} /* Ends billing clarity section styling. */

.nq-pricing-billing-grid { /* Starts billing card grid styling. */
    display: grid; /* Creates billing card grid. */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Shows three billing cards on desktop. */
    gap: 16px; /* Billing clarity grid section: reduces card gap further. */
    margin-top: 20px; /* Billing clarity grid section: reduces heading-to-card spacing to the reference scale. */
} /* Ends billing card grid styling. */

.nq-pricing-billing-card { /* Starts billing card styling. */
    min-height: 104px; /* Billing card design section: reduces billing card height to normal scale. */
    padding: 18px; /* Billing card design section: reduces billing card padding. */
    border: 1px solid rgba(220, 230, 242, 0.95); /* Adds billing card border. */
    border-top: 3px solid var(--nq-pricing-gold); /* Adds billing card top accent. */
    border-radius: 14px; /* Billing card design section: reduces card rounding. */
    background: #ffffff; /* Applies white billing card background. */
    box-shadow: var(--nq-pricing-shadow-soft); /* Applies billing card shadow. */
} /* Ends billing card styling. */

.nq-pricing-billing-card span { /* Starts billing card number styling. */
    display: inline-flex; /* Centers number inside badge. */
    align-items: center; /* Vertically centers number badge. */
    justify-content: center; /* Horizontally centers number badge. */
    width: 34px; /* Billing badge section: reduces number badge width. */
    height: 34px; /* Billing badge section: reduces number badge height. */
    margin-bottom: 10px; /* Billing badge section: tightens badge-to-title spacing. */
    border-radius: 14px; /* Applies number badge rounding. */
    background: var(--nq-pricing-deep); /* Applies navy number badge background. */
    color: var(--nq-pricing-gold); /* Applies gold number badge text. */
    font-size: 11px; /* Billing badge section: reduces number text size. */
    font-weight: 950; /* Makes number badge text strong. */
} /* Ends billing card number styling. */

.nq-pricing-billing-card-two span { /* Starts second billing card number accent. */
    background: var(--nq-pricing-gold); /* Applies gold background to second billing number. */
    color: var(--nq-pricing-deep); /* Applies navy text to second billing number. */
} /* Ends second billing card number accent. */

.nq-pricing-billing-card-three span { /* Starts third billing card number accent. */
    background: var(--nq-pricing-green); /* Applies green background to third billing number. */
    color: #ffffff; /* Applies white text to third billing number. */
} /* Ends third billing card number accent. */

.nq-pricing-billing-card h3 { /* Starts billing card title styling. */
    margin: 0 0 10px; /* Billing title section: reduces title-to-copy spacing. */
    color: var(--nq-pricing-navy); /* Applies navy billing title text. */
    font-size: 16px; /* Billing title section: reduces title size to the reference scale. */
    font-weight: 950; /* Makes billing title strong. */
    line-height: 1.25; /* Keeps billing title compact. */
} /* Ends billing card title styling. */

.nq-pricing-billing-card p { /* Starts billing card description styling. */
    margin: 0; /* Removes default paragraph margin. */
    color: #3c4963; /* Applies billing card description color. */
    font-size: 12px; /* Billing copy section: reduces description text size. */
    font-weight: 500; /* Keeps billing description clean. */
    line-height: 1.45; /* Billing copy section: keeps description compact. */
} /* Ends billing card description styling. */

.nq-pricing-comparison-section { /* Starts comparison table section styling. */
    padding: 36px 0; /* Full comparison table section: matches the homepage section rhythm while staying inside the shared page boundary. */
    background: linear-gradient(180deg, rgba(249, 246, 240, 0.98) 0%, #fffdf8 100%); /* Applies warm comparison section background. */
} /* Ends comparison table section styling. */

.nq-pricing-comparison-head { /* Starts comparison heading spacing refinement. */
    margin-bottom: 28px; /* Full comparison table heading section: keeps the heading close to the compact table. */
} /* Ends comparison heading spacing refinement. */

.nq-pricing-comparison-card { /* Starts comparison table outer card styling. */
    position: relative; /* Allows table card layering. */
    padding: 10px; /* Full comparison table card section: gives the larger readable table a clean premium frame without changing page alignment. */
    border: 1px solid rgba(220, 230, 242, 0.96); /* Adds subtle table card border. */
    border-radius: 24px; /* Full comparison table card section: matches the homepage card radius. */
    background: #ffffff; /* Applies white table card surface. */
    box-shadow: 0 36px 100px rgba(17, 24, 61, 0.14); /* Applies premium table card shadow. */
} /* Ends comparison table outer card styling. */

.nq-pricing-comparison-scroll { /* Starts comparison table scroll wrapper styling. */
    width: 100%; /* Makes the table wrapper fill the card. */
    overflow: visible; /* Prevents desktop clipping and scrollbar. */
    border: 1px solid rgba(17, 24, 61, 0.12); /* Adds a clean table frame. */
    border-radius: 20px; /* Full comparison table frame section: keeps the larger readable table frame clean. */
    background: #ffffff; /* Applies white table background. */
} /* Ends comparison table scroll wrapper styling. */

.nq-pricing-comparison-table { /* Starts comparison table styling. */
    width: 100%; /* Makes table fill the available wide card. */
    border-collapse: separate; /* Allows independent border control. */
    border-spacing: 0; /* Removes default table cell spacing. */
    table-layout: fixed; /* Keeps all table columns balanced. */
    color: var(--nq-pricing-deep); /* Applies deep navy table text. */
} /* Ends comparison table styling. */

.nq-pricing-col-parameter { /* Starts parameter column width styling. */
    width: 16%; /* Full comparison table column section: gives row labels enough room while keeping all columns inside the shared page width. */
} /* Ends parameter column width styling. */

.nq-pricing-col-plan { /* Starts plan column width styling. */
    width: 12%; /* Full comparison table column section: expands each plan column so the full table uses the available aligned width without desktop scroll. */
} /* Ends plan column width styling. */

.nq-pricing-comparison-table thead th { /* Starts comparison table header cell styling. */
    position: relative; /* Allows the popular ribbon to sit inside Growth header. */
    height: 72px; /* Full comparison table header section: improves readability while staying inside the homepage-aligned table width. */
    padding: 13px 8px; /* Full comparison table header section: increases readable spacing without creating horizontal scroll. */
    background: linear-gradient(180deg, #071247 0%, #0d1744 100%); /* Applies dark navy table header background. */
    color: #ffffff; /* Applies white header text. */
    font-size: 16px; /* Full comparison table header section: increases header readability while preserving the fixed table layout. */
    font-weight: 950; /* Makes header text strong. */
    line-height: 1.22; /* Keeps the larger header text compact and readable. */
    text-align: center; /* Centers header text. */
    vertical-align: middle; /* Vertically centers header content. */
    border-right: 1px solid rgba(255, 255, 255, 0.22); /* Adds header column divider. */
} /* Ends comparison table header cell styling. */

.nq-pricing-comparison-table thead th:first-child { /* Starts first header cell styling. */
    text-align: left; /* Left-aligns the Parameter header. */
    border-top-left-radius: 20px; /* Rounds the top-left table corner. */
} /* Ends first header cell styling. */

.nq-pricing-comparison-table thead th:last-child { /* Starts last header cell styling. */
    border-right: 0; /* Removes final header divider. */
    border-top-right-radius: 20px; /* Rounds the top-right table corner. */
} /* Ends last header cell styling. */

.nq-pricing-growth-head { /* Starts Growth header accent styling. */
    background: linear-gradient(180deg, #f8b12c 0%, var(--nq-pricing-gold) 100%) !important; /* Applies gold Growth header background. */
    color: var(--nq-pricing-deep) !important; /* Applies navy Growth header text. */
} /* Ends Growth header accent styling. */

.nq-pricing-lite-head { /* Starts Lite header accent styling. */
    background: linear-gradient(180deg, #f4a21d 0%, #ef8f15 100%) !important; /* Applies orange Lite header background. */
    color: #ffffff !important; /* Applies white Lite header text. */
} /* Ends Lite header accent styling. */

.nq-pricing-table-head-label { /* Starts table header label styling. */
    display: inline-flex; /* Aligns header icon and label. */
    align-items: center; /* Vertically centers header icon and label. */
    justify-content: center; /* Centers header label group. */
    gap: 7px; /* Full comparison table header section: gives the larger header icon and label better breathing room. */
    width: 100%; /* Makes label use full cell width. */
} /* Ends table header label styling. */

.nq-pricing-comparison-table thead th:first-child .nq-pricing-table-head-label { /* Starts Parameter header label alignment. */
    justify-content: flex-start; /* Left-aligns Parameter header content. */
} /* Ends Parameter header label alignment. */

.nq-pricing-table-head-label svg { /* Starts header SVG icon styling. */
    width: 16px; /* Full comparison table header icon section: increases icon visibility without changing the icon artwork. */
    height: 16px; /* Full comparison table header icon section: increases icon visibility without changing the icon artwork. */
    flex: 0 0 auto; /* Prevents header icons from shrinking. */
    color: currentColor; /* Makes SVG icons inherit header color. */
} /* Ends header SVG icon styling. */

.nq-pricing-popular-ribbon { /* Starts Growth popular ribbon styling. */
    position: absolute; /* Positions the ribbon relative to the Growth header. */
    top: -16px; /* Full comparison table popular-ribbon section: keeps the ribbon visible above the larger Growth header. */
    left: 50%; /* Centers the ribbon horizontally. */
    transform: translateX(-50%); /* Corrects horizontal centering. */
    display: inline-flex; /* Centers ribbon text. */
    align-items: center; /* Vertically centers ribbon text. */
    justify-content: center; /* Horizontally centers ribbon text. */
    min-width: 118px; /* Full comparison table popular-ribbon section: balances the ribbon with the larger Growth column. */
    min-height: 26px; /* Full comparison table popular-ribbon section: improves ribbon readability. */
    padding: 0 12px; /* Full comparison table popular-ribbon section: trims ribbon side padding. */
    border-radius: 999px; /* Makes ribbon pill-shaped. */
    background: #f8b12c; /* Applies gold ribbon background. */
    color: var(--nq-pricing-deep); /* Applies navy ribbon text. */
    font-size: 10px; /* Full comparison table popular-ribbon section: keeps ribbon text readable inside the Growth column. */
    font-weight: 950; /* Makes ribbon text strong. */
    letter-spacing: 0.04em; /* Adds ribbon text spacing. */
    text-transform: uppercase; /* Shows ribbon text in uppercase. */
    box-shadow: 0 10px 26px rgba(238, 157, 27, 0.34); /* Adds gold ribbon shadow. */
    z-index: 4; /* Keeps ribbon above neighboring cells. */
} /* Ends Growth popular ribbon styling. */

.nq-pricing-comparison-table tbody th { /* Starts table body row header styling. */
    padding: 12px 10px; /* Full comparison table parameter-column section: increases row label readability while keeping the same page alignment. */
    background: #ffffff; /* Applies white row header background. */
    color: var(--nq-pricing-deep); /* Applies deep navy row header text. */
    font-size: 16px; /* Full comparison table parameter-column section: makes row labels readable without desktop horizontal scroll. */
    font-weight: 720; /* Makes row header text strong. */
    line-height: 1.3; /* Keeps the larger row header text compact. */
    overflow-wrap: anywhere; /* Full comparison table parameter-column section: wraps long labels without forcing scroll. */
    word-break: normal; /* Full comparison table parameter-column section: preserves normal word breaks wherever possible. */
    text-align: left; /* Left-aligns row header text. */
    vertical-align: middle; /* Vertically centers row header content. */
    border-right: 1px solid rgba(17, 24, 61, 0.13); /* Adds divider after row headers. */
    border-bottom: 1px solid rgba(17, 24, 61, 0.10); /* Adds row header bottom divider. */
} /* Ends table body row header styling. */

.nq-pricing-comparison-table tbody td { /* Starts table body data cell styling. */
    padding: 12px 8px; /* Full comparison table cell section: increases data-cell readability while keeping every plan inside the aligned width. */
    background: #ffffff; /* Applies white data cell background. */
    color: var(--nq-pricing-deep); /* Applies deep navy data text. */
    font-size: 15px; /* Full comparison table cell section: makes plan values readable while keeping the full table inside the shared page width. */
    font-weight: 600; /* Makes data cell text strong. */
    line-height: 1.32; /* Full comparison table cell section: balances row height and readability. */
    overflow-wrap: anywhere; /* Full comparison table cell section: allows long values to wrap instead of creating horizontal scroll. */
    word-break: normal; /* Full comparison table cell section: preserves normal word breaks wherever possible. */
    text-align: center; /* Centers data cell text. */
    vertical-align: middle; /* Vertically centers data cell text. */
    border-right: 1px solid rgba(17, 24, 61, 0.10); /* Adds data cell column divider. */
    border-bottom: 1px solid rgba(17, 24, 61, 0.10); /* Adds data cell row divider. */
} /* Ends table body data cell styling. */

.nq-pricing-comparison-table tbody td strong { /* Starts table price value styling. */
    color: var(--nq-pricing-deep); /* Applies deep navy price text. */
    font-size: 16px; /* Full comparison table price section: makes price values readable inside each column. */
    font-weight: 660; /* Makes table price values very strong. */
    line-height: 1.25; /* Full comparison table price section: keeps larger price values compact and readable. */
} /* Ends table price value styling. */

.nq-pricing-comparison-table tbody tr:nth-child(even) th, .nq-pricing-comparison-table tbody tr:nth-child(even) td { /* Starts even row striping styling. */
    background: #fcfdff; /* Applies a very soft row stripe. */
} /* Ends even row striping styling. */

.nq-pricing-comparison-table tbody td:nth-child(5), .nq-pricing-comparison-table tbody th:nth-child(5) { /* Starts Growth column body highlight styling. */
    background-image: linear-gradient(180deg, rgba(238, 157, 27, 0.13), rgba(238, 157, 27, 0.05)); /* Applies soft Growth column highlight. */
} /* Ends Growth column body highlight styling. */

.nq-pricing-comparison-table tbody tr:hover th, .nq-pricing-comparison-table tbody tr:hover td { /* Starts table row hover styling. */
    background-color: rgba(195, 224, 233, 0.20); /* Applies subtle hover highlight. */
} /* Ends table row hover styling. */

.nq-pricing-table-row-label { /* Starts table row label content styling. */
    display: inline-flex; /* Aligns row icon and text. */
    align-items: center; /* Vertically centers row icon and text. */
    gap: 8px; /* Full comparison table row-label section: gives the row icon and text better spacing. */
} /* Ends table row label content styling. */

.nq-pricing-table-row-label svg { /* Starts table row SVG icon styling. */
    width: 16px; /* Full comparison table row icon section: improves row icon visibility without changing icon artwork. */
    height: 16px; /* Full comparison table row icon section: improves row icon visibility without changing icon artwork. */
    flex: 0 0 auto; /* Prevents row icons from shrinking. */
    color: var(--nq-pricing-navy); /* Applies navy row icon color. */
} /* Ends table row SVG icon styling. */

.nq-pricing-comparison-table tbody tr:last-child th, .nq-pricing-comparison-table tbody tr:last-child td { /* Starts final table row border cleanup. */
    border-bottom: 0; /* Removes the final row bottom border. */
} /* Ends final table row border cleanup. */

.nq-pricing-comparison-table tbody td:last-child { /* Starts final data column border cleanup. */
    border-right: 0; /* Removes far-right body border. */
} /* Ends final data column border cleanup. */

.nq-pricing-enterprise-contact-cell { /* Starts merged Enterprise contact cell styling inside the full comparison table. */
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(244, 248, 252, 0.98) 100%) !important; /* Full comparison table Enterprise section: gives the merged contact area a premium custom-plan surface. */
    vertical-align: middle; /* Full comparison table Enterprise section: keeps the Contact Us action centered through all comparison rows. */
} /* Ends merged Enterprise contact cell styling inside the full comparison table. */

.nq-pricing-enterprise-contact-link { /* Starts Enterprise contact link styling inside the merged comparison table cell. */
    display: inline-flex; /* Full comparison table Enterprise section: stacks the icon, title, and helper text cleanly. */
    flex-direction: column; /* Full comparison table Enterprise section: creates a vertical Contact Us action. */
    align-items: center; /* Full comparison table Enterprise section: centers the Enterprise action horizontally. */
    justify-content: center; /* Full comparison table Enterprise section: centers the Enterprise action vertically. */
    gap: 10px; /* Full comparison table Enterprise section: adds controlled spacing around icon, helper copy, and the Contact Us button. */
    width: 100%; /* Full comparison table Enterprise section: makes the click target fill the column. */
    min-height: 230px; /* Full comparison table Enterprise section: gives the merged action enough visual weight. */
    padding: 18px 8px; /* Full comparison table Enterprise section: keeps the merged action readable without widening the table. */
    color: var(--nq-pricing-deep); /* Full comparison table Enterprise section: uses deep navy text. */
    text-align: center; /* Full comparison table Enterprise section: centers the Enterprise helper copy. */
    text-decoration: none; /* Full comparison table Enterprise section: removes default link underline. */
} /* Ends Enterprise contact link styling inside the merged comparison table cell. */

.nq-pricing-enterprise-contact-link svg { /* Starts Enterprise contact icon styling inside the merged comparison table cell. */
    width: 26px; /* Full comparison table Enterprise section: makes the Enterprise icon visible without changing the icon artwork. */
    height: 26px; /* Full comparison table Enterprise section: makes the Enterprise icon visible without changing the icon artwork. */
    color: var(--nq-pricing-gold); /* Full comparison table Enterprise section: uses gold to signal custom enquiry. */
} /* Ends Enterprise contact icon styling inside the merged comparison table cell. */

.nq-pricing-enterprise-contact-link strong { /* Starts Enterprise contact title styling inside the merged comparison table cell. */
    display: block; /* Full comparison table Enterprise section: keeps the Enterprise title clean. */
    font-size: 16px; /* Full comparison table Enterprise section: keeps the Enterprise title readable above the button. */
    font-weight: 950; /* Full comparison table Enterprise section: makes the Enterprise title strong. */
    line-height: 1.15; /* Full comparison table Enterprise section: keeps the title compact. */
} /* Ends Enterprise contact title styling inside the merged comparison table cell. */

.nq-pricing-enterprise-contact-helper { /* Starts Enterprise contact helper text styling inside the merged comparison table cell. */
    display: block; /* Full comparison table Enterprise section: keeps the helper text on its own line. */
    max-width: 118px; /* Full comparison table Enterprise section: keeps helper text compact inside the Enterprise column. */
    color: var(--nq-pricing-muted); /* Full comparison table Enterprise section: uses muted helper text. */
    font-size: 14px; /* Full comparison table Enterprise section: keeps helper text readable but compact. */
    font-weight: 750; /* Full comparison table Enterprise section: gives helper text enough weight. */
    line-height: 1.35; /* Full comparison table Enterprise section: improves helper text readability. */
} /* Ends Enterprise contact helper text styling inside the merged comparison table cell. */

.nq-pricing-enterprise-contact-button { /* Starts Enterprise gold Contact Us button inside the full comparison table. */
    display: inline-flex; /* Full comparison table Enterprise section: creates a proper button surface inside the merged Enterprise column. */
    align-items: center; /* Vertically centers the Contact Us button text. */
    justify-content: center; /* Horizontally centers the Contact Us button text. */
    min-height: 36px; /* Full comparison table Enterprise section: keeps the Enterprise CTA clearly tappable without widening the column. */
    min-width: 102px; /* Full comparison table Enterprise section: makes the Contact Us button visually clear like the reference. */
    padding: 0 15px; /* Full comparison table Enterprise section: gives the button balanced horizontal spacing. */
    border-radius: 8px; /* Full comparison table Enterprise section: matches the compact pricing CTA button radius. */
    background: linear-gradient(180deg, #ffb326 0%, var(--nq-pricing-gold) 100%); /* Full comparison table Enterprise section: applies the proper gold Contact Us button. */
    color: var(--nq-pricing-deep); /* Full comparison table Enterprise section: keeps button text readable on gold. */
    font-size: 14px; /* Full comparison table Enterprise section: keeps button text readable inside the Enterprise column. */
    font-weight: 950; /* Full comparison table Enterprise section: makes the button label strong. */
    line-height: 1; /* Full comparison table Enterprise section: keeps the button text vertically centered. */
    box-shadow: 0 14px 26px rgba(238, 157, 27, 0.24); /* Full comparison table Enterprise section: adds a subtle gold CTA lift. */
} /* Ends Enterprise gold Contact Us button inside the full comparison table. */

.nq-pricing-enterprise-contact-link:hover { /* Starts Enterprise contact link hover styling inside the merged comparison table cell. */
    color: var(--nq-pricing-navy); /* Full comparison table Enterprise section: keeps hover text on brand. */
} /* Ends Enterprise contact link hover styling inside the merged comparison table cell. */

.nq-pricing-comparison-cta { /* Starts sign-up CTA wrapper below the full comparison table. */
    display: flex; /* Full comparison table CTA section: centers the sign-up button below the table. */
    justify-content: center; /* Full comparison table CTA section: horizontally centers the sign-up button. */
    margin-top: 28px; /* Full comparison table CTA section: adds clean spacing below the table card. */
} /* Ends sign-up CTA wrapper below the full comparison table. */

.nq-pricing-comparison-signup-btn { /* Starts sign-up button styling below the full comparison table. */
    min-width: 160px; /* Full comparison table CTA section: gives the Start Free Trial button strong presence. */
} /* Ends sign-up button styling below the full comparison table. */

.nq-pricing-final-cta-section { /* Starts final CTA section styling. */
    padding: 30px 0 54px; /* Final CTA section: matches the homepage final CTA spacing. */
    background: #fffdf8; /* Applies warm white CTA section background. */
} /* Ends final CTA section styling. */

.nq-pricing-final-cta-card { /* Starts final CTA card styling. */
    display: grid; /* Creates final CTA copy and button layout. */
    grid-template-columns: minmax(0, 1fr) auto; /* Sets copy column and button column. */
    align-items: center; /* Vertically centers CTA content. */
    gap: 42px; /* Final CTA layout section: matches the homepage CTA gap. */
    min-height: auto; /* Final CTA card section: follows content height like the homepage CTA card. */
    padding: 44px 50px; /* Final CTA card section: matches the homepage CTA card padding. */
    border: 1px solid rgba(255, 255, 255, 0.14); /* Adds subtle CTA card border. */
    border-radius: 32px; /* Final CTA card section: matches the homepage CTA card radius. */
    background: radial-gradient(circle at 90% 20%, rgba(238, 157, 27, 0.16), transparent 28%), linear-gradient(135deg, #20275a 0%, #11183d 72%, #0a102d 100%); /* Applies rich navy CTA background. */
    box-shadow: 0 34px 100px rgba(17, 24, 61, 0.22); /* Applies premium CTA shadow. */
} /* Ends final CTA card styling. */

.nq-pricing-final-cta-copy .nq-pricing-kicker { /* Starts CTA kicker spacing refinement. */
    margin-bottom: 14px; /* Final CTA text section: reduces kicker-to-heading spacing. */
} /* Ends CTA kicker spacing refinement. */

.nq-pricing-final-cta-copy h2 { /* Starts final CTA heading styling. */
    max-width: 1180px; /* Keeps CTA headline readable. */
    margin: 0; /* Removes default heading margin. */
    color: #ffffff; /* Applies white CTA heading text. */
    font-size: clamp(24px, 3vw, 32px); /* Final CTA heading section: matches the homepage CTA headline scale. */
    font-weight: 600; /* Makes CTA headline very strong. */
    line-height: 1.12; /* Keeps CTA headline readable. */
    letter-spacing: -0.055em; /* Adds premium CTA heading spacing. */
} /* Ends final CTA heading styling. */

.nq-pricing-final-cta-copy p:not(.nq-pricing-kicker) { /* Starts final CTA paragraph styling. */
    max-width: 1100px; /* Keeps CTA paragraph line length controlled. */
    margin: 12px 0 0; /* Final CTA copy section: reduces paragraph spacing. */
    color: rgba(255, 255, 255, 0.82); /* Applies soft white CTA paragraph text. */
    font-size: 15px; /* Final CTA copy section: matches the homepage CTA paragraph scale. */
    font-weight: 500; /* Keeps CTA paragraph clean. */
    line-height: 1.55; /* Final CTA copy section: keeps paragraph compact. */
} /* Ends final CTA paragraph styling. */

.nq-pricing-final-cta-btn { /* Starts final CTA button sizing. */
    min-width: 140px; /* Final CTA button section: keeps the CTA button compact inside the homepage-style card. */
    min-height: 44px; /* Final CTA button section: matches the shared homepage button height. */
} /* Ends final CTA button sizing. */

/* Shared footer policy section: the common public footer remains controlled by public-page-end.php and global layout CSS. */

@media (max-width: 1440px) { /* Starts large laptop responsive adjustments. */
    .nq-pricing-container { /* Targets the standard container on large laptops. */
        width: min(calc(100% - (var(--nq-page-edge, 42px) * 2)), var(--nq-hero-max, 1520px)); /* Large laptop layout section: keeps pricing aligned with the homepage hero left margin on large laptop screens. */
    } /* Ends standard container large laptop adjustment. */
    .nq-pricing-hero-grid { /* Targets the hero grid on large laptops. */
        grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); /* Reduces hero card column slightly. */
        gap: 38px; /* Large laptop hero section: keeps hero columns compact. */
    } /* Ends hero grid large laptop adjustment. */
    .nq-pricing-hero-title { /* Targets hero title on large laptops. */
        font-size: clamp(36px, 4.1vw, 48px); /* Large laptop hero title section: prevents oversized hero heading. */
    } /* Ends hero title large laptop adjustment. */
} /* Ends large laptop responsive adjustments. */

@media (max-width: 1320px) { /* Starts compact-table breakpoint adjustments. */
    .nq-pricing-comparison-scroll { /* Targets comparison table wrapper below wide desktop. */
        overflow-x: visible; /* Full comparison table section: keeps the table inside the shared page width without horizontal scroll. */
    } /* Ends comparison table wrapper compact-table adjustment. */
    .nq-pricing-comparison-table { /* Targets comparison table below wide desktop. */
        min-width: 0; /* Full comparison table section: removes forced table overflow so columns stay inside the container. */
    } /* Ends comparison table compact-table adjustment. */
} /* Ends compact-table breakpoint adjustments. */

@media (max-width: 1180px) { /* Starts tablet responsive adjustments. */
    .nq-pricing-hero-grid { /* Targets hero grid on tablets. */
        grid-template-columns: 1fr; /* Stacks hero columns. */
    } /* Ends tablet hero grid adjustment. */
    .nq-pricing-hero-visual { /* Targets hero visual on tablets. */
        justify-content: flex-start; /* Aligns hero card left on tablets. */
    } /* Ends tablet hero visual adjustment. */
    .nq-pricing-trust-grid { /* Targets trust grid on tablets. */
        grid-template-columns: 1fr; /* Stacks trust cards on tablets. */
    } /* Ends tablet trust grid adjustment. */
    .nq-pricing-section-head-split { /* Targets split heading on tablets. */
        flex-direction: column; /* Stacks heading and toggle. */
        gap: 24px; /* Reduces split heading gap. */
    } /* Ends tablet split heading adjustment. */
    .nq-pricing-plan-grid { /* Targets plan grid on tablets. */
        grid-template-columns: repeat(2, minmax(280px, 380px)); /* Shows two compact, balanced plan cards per row. */
        justify-content: center; /* Keeps tablet package cards centered instead of stretched. */
    } /* Ends tablet plan grid adjustment. */
    .nq-pricing-plan-card-enterprise { /* Targets Enterprise card on tablets. */
        grid-column: auto; /* Restores natural grid flow. */
    } /* Ends tablet Enterprise card adjustment. */
    .nq-pricing-billing-grid { /* Targets billing grid on tablets. */
        grid-template-columns: 1fr; /* Stacks billing cards on tablets. */
    } /* Ends tablet billing grid adjustment. */
    .nq-pricing-final-cta-card { /* Targets CTA card on tablets. */
        grid-template-columns: 1fr; /* Stacks CTA copy and button. */
    } /* Ends tablet CTA card adjustment. */
} /* Ends tablet responsive adjustments. */

@media (max-width: 760px) { /* Starts mobile responsive adjustments. */
    .nq-pricing-container, .nq-pricing-container-wide { /* Targets all pricing containers on mobile. */
        width: min(92vw, 100%); /* Keeps mobile containers inside viewport. */
    } /* Ends mobile container adjustment. */
    .nq-pricing-hero { /* Targets hero section on mobile. */
        padding: 42px 0 58px; /* Mobile hero section: keeps hero compact. */
    } /* Ends mobile hero adjustment. */
    .nq-pricing-hero-title { /* Targets hero title on mobile. */
        font-size: clamp(34px, 10vw, 46px); /* Mobile hero title section: avoids zoomed headline size. */
    } /* Ends mobile hero title adjustment. */
    .nq-pricing-hero-subtitle { /* Targets hero subtitle on mobile. */
        font-size: 14px; /* Mobile hero subtitle section: keeps subtitle compact. */
    } /* Ends mobile hero subtitle adjustment. */
    .nq-pricing-hero-proof-grid { /* Targets hero proof grid on mobile. */
        grid-template-columns: 1fr; /* Stacks hero proof cards on mobile. */
    } /* Ends mobile hero proof grid adjustment. */
    .nq-pricing-hero-proof-card { /* Targets hero proof cards on mobile. */
        grid-template-columns: 1fr; /* Stacks proof icon and text on mobile. */
    } /* Ends mobile hero proof card adjustment. */
    .nq-pricing-hero-card { /* Targets hero pricing card on mobile. */
        padding: 16px; /* Mobile hero card section: trims card padding further. */
        border-radius: 26px; /* Reduces hero card rounding on mobile. */
    } /* Ends mobile hero pricing card adjustment. */
    .nq-pricing-hero-metric-grid { /* Targets hero metric grid on mobile. */
        grid-template-columns: 1fr; /* Stacks hero metrics on mobile. */
    } /* Ends mobile hero metric grid adjustment. */
    .nq-pricing-trust { /* Targets trust section on mobile. */
        margin-top: -38px; /* Mobile trust section: keeps overlap compact. */
        padding-bottom: 28px; /* Mobile trust section: removes excess space below trust cards. */
    } /* Ends mobile trust section adjustment. */
    .nq-pricing-trust-card { /* Targets trust cards on mobile. */
        grid-template-columns: 1fr; /* Stacks trust icon and copy on mobile. */
        padding: 16px; /* Mobile trust card section: trims card padding further. */
    } /* Ends mobile trust card adjustment. */
    .nq-pricing-plan-grid { /* Targets plan grid on mobile. */
        grid-template-columns: 1fr; /* Shows one plan card per row on mobile. */
    } /* Ends mobile plan grid adjustment. */
    .nq-pricing-plan-card { /* Targets plan cards on mobile. */
        min-height: auto; /* Removes fixed card height on mobile. */
        padding: 18px; /* Mobile plan card section: trims card padding further. */
    } /* Ends mobile plan card adjustment. */
    .nq-pricing-toggle { /* Targets pricing toggle on mobile. */
        width: 100%; /* Makes pricing toggle full width on mobile. */
    } /* Ends mobile pricing toggle adjustment. */
    .nq-pricing-toggle-btn { /* Targets pricing toggle buttons on mobile. */
        flex: 1; /* Makes toggle buttons equal width on mobile. */
    } /* Ends mobile pricing toggle button adjustment. */
    .nq-pricing-section-head h2 { /* Targets section headings on mobile. */
        font-size: clamp(28px, 8vw, 36px); /* Mobile section heading section: prevents zoomed headings. */
    } /* Ends mobile section heading adjustment. */
    .nq-pricing-billing-card { /* Targets billing cards on mobile. */
        padding: 16px; /* Mobile billing card section: trims card padding further. */
    } /* Ends mobile billing card adjustment. */
    .nq-pricing-comparison-card { /* Targets comparison card on mobile. */
        padding: 8px; /* Mobile comparison table section: trims card padding. */
        border-radius: 24px; /* Reduces comparison card rounding on mobile. */
    } /* Ends mobile comparison card adjustment. */
    .nq-pricing-comparison-table thead th { /* Targets comparison table headers on mobile. */
        font-size: 10px; /* Mobile comparison table section: keeps the larger table fitting smaller screens. */
        padding: 9px 4px; /* Mobile comparison table section: trims header padding on small screens. */
    } /* Ends mobile comparison table header adjustment. */
    .nq-pricing-comparison-table tbody th, .nq-pricing-comparison-table tbody td { /* Targets comparison table body cells on mobile. */
        font-size: 9px; /* Mobile comparison table section: keeps the no-scroll table readable on small screens. */
        padding: 8px 4px; /* Mobile comparison table section: trims data-cell padding on small screens. */
    } /* Ends mobile comparison table body cell adjustment. */
    .nq-pricing-enterprise-contact-link { /* Targets merged Enterprise contact action on mobile. */
        min-height: 180px; /* Mobile comparison table Enterprise section: keeps the merged contact action compact. */
        padding: 12px 4px; /* Mobile comparison table Enterprise section: trims merged contact action padding. */
    } /* Ends mobile merged Enterprise contact action adjustment. */
    .nq-pricing-enterprise-contact-helper { /* Targets merged Enterprise helper text on mobile. */
        display: none; /* Mobile comparison table Enterprise section: hides only helper copy while keeping the Contact Us button visible. */
    } /* Ends mobile merged Enterprise helper text adjustment. */
    .nq-pricing-enterprise-contact-button { /* Targets merged Enterprise Contact Us button on mobile. */
        min-width: 76px; /* Mobile comparison table Enterprise section: keeps the button compact inside the narrow Enterprise column. */
        min-height: 30px; /* Mobile comparison table Enterprise section: keeps the button tappable but compact. */
        padding: 0 8px; /* Mobile comparison table Enterprise section: trims button side padding. */
        font-size: 9.5px; /* Mobile comparison table Enterprise section: keeps the button label fitting inside the table. */
    } /* Ends mobile merged Enterprise Contact Us button adjustment. */
    .nq-pricing-final-cta-card { /* Targets CTA card on mobile. */
        padding: 20px 16px; /* Mobile CTA section: trims card padding further. */
        border-radius: 26px; /* Reduces CTA card rounding on mobile. */
    } /* Ends mobile CTA card adjustment. */
} /* Ends mobile responsive adjustments. */