/* Pricing & Features (template-pricing.php), built from templates/BNTouch_Pricing_v23.pdf.

   Everything here is page-local: design-om.css is generated from the live Opportunity Mining
   page and design-om-extras.css is shared by several pages, so neither is touched. This file is
   enqueued after both, but every override is still written to out-specify the rule it beats
   rather than to rely on load order -- design-om.css re-declares .om-hero and .om-stats inside
   its own breakpoints, so a single-class selector here would lose below 1200px.

   Colours below are sampled from the comp with src/tools/px.py rather than estimated:
     navy head / dark card  #032d60      section pale   #f6f7f9
     orange                 #f7941e      row stripe    #fafbfc
     table tick             #1d7a3a      CRM column    #fff8ee
     table dash             #cfd5df      row rule      #eef0f4
     table outline          #e4e7ee      coming-soon   #fff3d6
   The comp is 1280px wide; its 1133px content column is close enough to .om-container's 1108px
   to reuse it, and the geometry below is the comp's own measurements divided by 1466/1280. */

/* ---------------------------------------------------------------------------------------------
   Utility: text that exists only for screen readers. Used for the table caption and for the word
   behind every tick and dash, because a bare glyph is not an accessible value.
   --------------------------------------------------------------------------------------------- */
.pr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------
   Hero. The OM hero is a fixed 1070px because it holds a 410px video and a stats row; this one
   holds a heading, a lead and one line of social proof. .om-hero--compact in design-om-extras
   already relaxes the height, but the mobile breakpoint in design-om.css re-imposes
   min-height:860px, so the variant is repeated in the media query at the bottom of this file.
   --------------------------------------------------------------------------------------------- */
/* Tight to the top -- Yuri, 2026-09-21 marked all three gaps above the cards and asked for the
   pricing to sit closer to the top. 62/58 becomes 34/32 here, and the plans section's own 70px
   of top padding becomes 28 below, which takes the hero-to-card distance from 96px to 60. The
   page is a price list: the sooner the prices are on screen the better it does its job. */
.om-hero.om-hero--pricing {
    height: auto;
    min-height: 0;
    padding: 34px 0 32px;
}
#plans.om-section { padding-top: 28px; }
.om-hero--pricing h1 {
    max-width: 860px;
    margin: 0 0 26px;
    font-size: 42px;
    line-height: 1.16;
    font-weight: 600;
}
/* The lead, the one-line rating row and the list of site NAMES are gone: the hero now carries
   bnt_stars() and bnt_review_logos(), the same two components as every other page, and their
   styling is shared -- see .om-hero--wash in design-om-extras.css. */

/* ---------------------------------------------------------------------------------------------
   Plan cards. Four columns, each a flex column so the buttons sit on a common baseline at the
   bottom however much copy a card carries -- the CRM card is much the longest and sets the
   height of the row, exactly as in the comp.

   These are NOT .om-card-grid: that component is display:grid with a 36px icon column, three
   fixed rows and a fixed height per card, none of which suits a pricing card.
   --------------------------------------------------------------------------------------------- */
/* Three columns. The two add-on cards share the middle one, stacked -- see the $bnt_columns
   loop in template-pricing.php, which groups them on the card data rather than here. The grid's
   children are columns now, not cards, so a card that is alone in its column has to be told to
   fill it; two in a column split it by their own content. */
.pr-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 26px;
    align-items: stretch;
}
.pr-plan-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pr-plan-col > .pr-plan { flex: 1 1 auto; }
/* The stacked pair is one card with a rule through it, not two cards in a column. With one
   price and one button under both (see the template), two separate boxes each ending in white
   space read as two purchases where the copy says one conversation. So the column takes the
   card's own border and background, and the cards inside give theirs up.

   1 1 auto is not used here either: it would stretch the shorter of the two to match, and they
   are different lengths on purpose. */
.pr-plan-col--stacked {
    gap: 0;
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: 10px;
}
.pr-plan-col--stacked > .pr-plan {
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-radius: 0;
    /* Room around the rule. At 6px under the first card and 22px over the second the two halves
       ran into each other -- Yuri, 2026-09-21: "now it is too meshed together." 30px either side
       is more than the 20px gap they had as separate cards, which is the point: inside one box
       the only thing separating them is space, so there has to be more of it, not less. */
    padding-bottom: 30px;
}
.pr-plan-col--stacked > .pr-plan + .pr-plan {
    position: relative;
    padding-top: 30px;
}
/* The rule between the halves, drawn full width by a pseudo-element on the card's own box.

   It was `margin: 0 -20px` with the padding put back, which pulled the whole second half 20px
   left of the first -- Yuri, 2026-09-21: "OM and WG sections are not aligned on the left edge."
   The element already spans the column; only the line needed to, so only the line is positioned
   and the padding is left alone. Inset by the card's 20px it read as an underline belonging to
   the list above it rather than as the edge between two halves, which is why it is not simply a
   border-top. */
.pr-plan-col--stacked > .pr-plan + .pr-plan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #e4e7ee;
}
/* The half's name carries the separation as well: it is the first thing under the rule, and at
   the shared .pr-plan__name size the two halves opened identically to the CRM card beside them,
   which is what made the pair read as one undifferentiated block of ticks. */
.pr-plan-col--stacked .pr-plan__name { margin-bottom: 14px; }
/* The pair's foot: the price sits with the button it explains, not at the top of a card where
   a per-card price used to be. margin-top:auto pins it to the bottom of the column at whatever
   height the neighbouring columns set. */
.pr-plan__shared {
    margin-top: auto;
    /* No rule above this one, unlike the one between the halves: three lines across one card
       would make the foot look like a third product. Space does the work -- 26px, and the price
       is set large enough to hold the break on its own. */
    /* 22px at the foot, not 24: it is the card's own bottom padding, and two pixels more here
       drops the pair's button two pixels below the buttons beside it. */
    padding: 26px 20px 22px;
}
/* The price stands in the upper button slot: 46px tall, the same as the button below it, so it
   sits on the line the other columns' first button sits on. */
.pr-plan__shared .pr-plan__price {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0 0 10px;
    text-align: center;
}
.pr-plan__shared .pr-plan__actions { margin-top: 0; }
.pr-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 20px 22px;
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: 10px;
    box-shadow: 0 6px 22px -16px rgba(22, 38, 59, .28);
}
/* The featured card's border is 2px against everyone else's 1, so its inside is a pixel shorter
   at both ends and its button row landed a pixel high. The pixel is given back at the foot --
   not at .pr-plan__actions, whose top padding cannot move a block that is pinned to the bottom. */
.pr-plan--featured { padding-bottom: 21px; }
.pr-plan--featured {
    border: 2px solid var(--orange, #f7941e);
    box-shadow: 0 14px 34px -22px rgba(22, 38, 59, .42);
}
.pr-plan--dark {
    background: linear-gradient(180deg, #032d60 0%, #054592 100%);
    border-color: transparent;
    box-shadow: 0 16px 38px -22px rgba(22, 38, 59, .55);
}

/* The badge straddles the top edge of its card, as drawn. */
.pr-plan__badge {
    position: absolute;
    top: 0;
    left: 22px;
    margin: 0;
    padding: 4px 13px;
    transform: translateY(-50%);
    background: var(--orange, #f7941e);
    border-radius: 999px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

/* .om-page h3 is 16px/1.3; a plan name is the card's title. */
.pr-plan .pr-plan__name {
    margin: 0 0 14px;
    color: #032d60;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
}
.pr-plan--dark .pr-plan__name { color: #fff; }

.pr-plan__price {
    margin: 0;
    color: #032d60;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
}
/* "Pricing on a call" and "Custom" are phrases, not figures, and are set smaller in the comp. */
.pr-plan__price--phrase { font-size: 26px; }
.pr-plan--dark .pr-plan__price { color: #fff; }
.pr-plan__unit {
    color: #66717e;
    font-size: 15px;
    font-weight: 700;
}
.pr-plan__tier {
    margin: 10px 0 0;
    color: #032d60;
    font-size: 14px;
    font-weight: 700;
}
.pr-plan__notes {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    color: #66717e;
    font-size: 14px;
    line-height: 1.75;
}
.pr-plan__blurb {
    margin: 20px 0 0;
    color: #5e6874;
    font-size: 14.5px;
    line-height: 1.55;
}
.pr-plan--dark .pr-plan__blurb { color: #c4cfdd; }

/* The label's top margin has to out-specify design-om.css's `.om-page p { margin-top: 0 }`,
   which scores (0,1,1) -- a bare .pr-plan__label scores (0,1,0) and lost, so the 24px this rule
   claimed to set was never applied and the label sat flush against whatever preceded it. That is
   the gap Yuri marked twice, 2026-09-21; the second time because the first fix raised a number
   that was being thrown away. At 34px it was too much ("make 50% of what is currently in"), so
   17. Measured after: 17px under the CRM card's notes and under Enterprise's paragraph, 0 where
   the label follows the card name (it is the name's own rule that spaces those). */
.om-page .pr-plan__label { margin-top: 17px; }
/* Except where the label follows the card name directly, which is the add-on pair: the name
   already carries 14px under it, so anything here is added to a gap that was right. Zero keeps
   that pair exactly as it was while the two cards with a block above their label gain the 34. */
.om-page .pr-plan__name + .pr-plan__label { margin-top: 0; }
.pr-plan__label {
    margin: 17px 0 4px;
    color: #032d60;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.pr-plan--dark .pr-plan__label { color: var(--orange, #f7941e); }

.pr-plan__feats {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* The comp sets a single-line row at 29px: a 20px line plus 4px of padding either side plus the
   rule. Anything looser and the six-item CRM card runs well past the height the comp draws. */
.pr-plan__feats li {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 7px;
    padding: 4px 0;
    border-bottom: 1px solid #eef0f4;
    color: #2e3033;
    font-size: 14.5px;
    line-height: 1.42;
}
.pr-plan--dark .pr-plan__feats li {
    border-bottom-color: #1b59a5;
    color: #e6ecf3;
}
.pr-plan__tick {
    color: var(--orange, #f7941e);
    font-weight: 700;
}

/* Pushed to the bottom of the card so all four rows of buttons line up. */
/* Every column's foot is two slots tall, whether or not it fills both, so the buttons line up
   across the three columns -- Yuri, 2026-09-21, marking the rows he wants level. The CRM card
   fills both (Sign Up over the demo button); Enterprise fills only the lower one and leaves the
   upper slot empty; the add-on pair puts its price in the upper slot, which is what "move the
   pricing by the CTA" ends up meaning once the rows are level.

   56px is a 46px button plus the 10px gap. Fixed rather than derived, because the whole point
   is that a foot with one button reserves the height of a foot with two. */
.pr-plan__actions {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
    /* Bottom-aligned: a single button drops to the lower slot rather than sitting in the upper
       one, which is what put Enterprise's button on its own line before. */
    align-content: end;
    min-height: calc(46px + 56px);
}
/* The pair's foot is already inside its own block, so the reservation would double up. */
.pr-plan__shared .pr-plan__actions { min-height: 46px; padding-top: 0; }

/* ---------------------------------------------------------------------------------------------
   Buttons. .om-btn is height:56px with line-height:56px and a 0 border-radius from design-om.css
   -- too tall for a card footer and far too tall for the 31px buttons inside the table head --
   so the pricing page has its own small button rather than fighting that geometry.
   --------------------------------------------------------------------------------------------- */
.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 18px;
    /* 4px, not 8px: the same corner .om-btn draws, so the small button reads as the same
       button drawn smaller rather than as a second button. */
    border-radius: 4px;
    font-size: 15px;
    /* Not bold, same as .om-btn -- see the note in theme.css. */
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    transition: .15s;
}
/* --orange is pinned to the button's #f9b233 in theme.css, for every orange button on the site
   at once -- see the note there. The label follows .om-btn to near-black: white on #f9b233 is
   1.9:1 and was the one place on the site where the orange button had an unreadable label. */
.pr-btn--solid {
    background: var(--orange, #f9b233);
    border: 2px solid var(--orange, #f9b233);
    color: #092b54 !important;
}
.pr-btn--outline {
    background: #fff;
    border: 2px solid var(--orange, #f7941e);
    color: #d9820b !important;
}
.pr-btn:hover { filter: brightness(.96); }
.pr-btn--sm {
    min-height: 31px;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 13px;
}

/* Footnote under the cards, and under the table. */
.pr-note {
    margin: 22px 0 0;
    color: #66717e;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}
/* The table footnote runs the full width of the table, as drawn, so it breaks where the comp
   breaks it. */
.pr-note--left { text-align: left; }
/* The plans note needs more air than the table's does -- Yuri, 2026-09-21. 22px put it right
   under the row of cards, close enough to read as the last line of the middle one rather than a
   footnote on all three. This one is scoped to #plans so the table footnote, which is attached
   to the table on purpose, keeps its own spacing. */
/* The whole foot of the plans block: two plain terms, then the three footnotes, all left and
   all on the same left edge. The 40px is the air under the cards Yuri asked for; everything
   inside the block is spaced against itself, not against the cards. */
.pr-foot {
    margin-top: 40px;
    text-align: left;
}
.pr-foot .pr-note {
    margin: 0 0 6px;
    text-align: left;
}
.pr-foot .pr-notes { margin-top: 14px; }

/* ---------------------------------------------------------------------------------------------
   Comparison table. A real <table> with a caption, scoped column headers and a <th scope="row">
   per feature, so it is navigable rather than a grid of glyphs. The wrapper carries the outline
   and the rounded corners, because border-radius on a table with collapsed borders is ignored.
   --------------------------------------------------------------------------------------------- */
.pr-compare {
    margin-top: 8px;
    border: 1px solid #e4e7ee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.pr-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 15px;
}
.pr-col-feature { width: 47%; }
.pr-col-plan { width: 17.6%; }

.pr-table thead th {
    padding: 18px 4px 20px;
    background: #032d60;
    color: #fff;
}
.pr-th-feature {
    padding-left: 24px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}
/* Bottom-aligned, so the three buttons sit on one baseline even if a plan name wraps --
   "+ Opportunity Mining" is only just narrower than its column. Do NOT make this a flex
   container to get the same effect: display:flex takes the cell out of the table layout and all
   three header cells collapse into the first column. */
.pr-th-plan {
    text-align: center;
    vertical-align: bottom;
}
.pr-th-plan__name {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
}
.pr-th-plan__price {
    display: block;
    margin: 4px 0 14px;
    color: #b7c1ce;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

/* Section header spanning the whole table. */
.pr-group th {
    padding: 12px 24px;
    background: #f6f7f9;
    border-top: 1px solid #eef0f4;
    border-bottom: 1px solid #eef0f4;
    color: #032d60;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.pr-table tbody th[scope="row"] {
    padding: 15px 24px;
    border-top: 1px solid #eef0f4;
    color: #2e3033;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
}
.pr-mark {
    padding: 15px 10px;
    border-top: 1px solid #eef0f4;
    text-align: center;
    vertical-align: middle;
}
/* The comp stripes the rows in one continuous run through the whole table, group headers
   included, so the shade is set from PHP rather than with :nth-child(). */
.pr-row--alt th[scope="row"],
.pr-row--alt .pr-mark { background: #fafbfc; }
.pr-group.pr-row--alt th { background: #f6f7f9; }

/* --- Collapsing groups --------------------------------------------------------------------
   Collapsed is a class the script adds (assets/js/pricing.js), never a default here: the
   stylesheet's job is the open, complete table, so a browser that never runs the script shows
   every feature rather than eight headings and nothing under them.

   The rows go with `display: none` on a class rather than the hidden attribute, because the
   mobile block below sets `display: block` on table rows and would out-specify [hidden]. */
.pr-tbody.is-collapsed .pr-row--detail { display: none; }

/* The <th> keeps its padding; the button fills it, so the whole strip is the hit area rather
   than the words alone. */
.pr-group__label { padding: 0 !important; }
.pr-group__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}
.pr-group__toggle:hover { color: var(--orange-d, #dd8210); }
.pr-group__toggle:focus-visible { outline: 2px solid var(--orange-d, #dd8210); outline-offset: -2px; }
/* The count is the reason to open the group, so it sits with the name rather than at the far
   edge where the ticks are. Not uppercased with the name: it is a number, not a label. */
.pr-group__count {
    color: #66717e;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
/* A chevron drawn from a border, so it turns with a transform and needs no file. Down when the
   group is open, right when it is closed -- the arrow points at what happens next. */
.pr-group__chevron {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: 60% 60%;
    transition: transform .15s ease;
}
.pr-tbody.is-collapsed .pr-group__chevron { transform: rotate(-45deg); }
/* The CRM column is tinted for its whole height, over the stripe. */
.pr-table .pr-mark--highlight { background: #fff8ee; }

.pr-tick {
    color: #1d7a3a;
    font-size: 17px;
    font-weight: 700;
}
.pr-none {
    color: #cfd5df;
    font-size: 15px;
}

/* "coming soon", beside the Call Assistant label. */
.pr-soon {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    background: #fff3d6;
    border: 1px dashed var(--orange, #f7941e);
    border-radius: 5px;
    color: #b06f05;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.55;
    vertical-align: 1px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------
   Stats strip. .om-stats is a 223px pale band with a 102px gap, built for the OM page's three
   short claims. The comp draws a ~98px ruled strip, and design-om.css re-declares .om-stats
   inside two breakpoints, so the variant selector is doubled and repeated below.
   --------------------------------------------------------------------------------------------- */
.om-stats.om-stats--pricing {
    height: auto;
    min-height: 0;
    padding: 26px 20px;
    gap: 48px;
    background: #f6f7f9;
    border-top: 1px solid #e4e7ee;
    border-bottom: 1px solid #e4e7ee;
}
.om-stats--pricing div {
    width: auto;
    min-width: 0;
}
.om-stats--pricing strong {
    color: #032d60;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}
.om-stats--pricing span {
    margin-top: 4px;
    color: #66717e;
    font-size: 14px;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------------------------
   FAQ. The comp draws all three answers expanded with no disclosure control, so these are static
   cards rather than .om-faq's <details> accordion (which is also pinned to a 630px section).
   The comp's block is ~816px wide, wider than .om-narrow's 728px, so it sets its own width.
   --------------------------------------------------------------------------------------------- */
.pr-faq {
    display: grid;
    gap: 16px;
    width: min(820px, 100%);
    margin: 0 auto;
}
.pr-faq__item {
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: 10px;
}
.pr-faq__item h3 {
    margin: 0 0 8px;
    color: #032d60;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}
.pr-faq__item p {
    margin: 0;
    color: #5e6874;
    font-size: 15px;
    line-height: 1.6;
}
.pr-faq__item a {
    color: #d9820b;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------
   Closing CTA. .om-cta caps its heading at 552px and its button at 302px; the comp runs the
   heading to ~700px over two lines and draws a narrower button.
   --------------------------------------------------------------------------------------------- */
.om-pricing .om-cta h2 {
    width: auto;
    max-width: 700px;
    margin-bottom: 18px;
}
.om-pricing .om-cta p { width: auto; max-width: 700px; }
.om-pricing .om-cta .om-btn {
    width: auto;
    min-width: 248px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------------------------
   Collapses. Four cards do not fit below ~1180px, and the table's three value columns stop being
   readable below ~900px.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    /* Two across: the stacked add-on column travels as one cell, so the pair stays together
       rather than being split across a row boundary. */
    .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}

@media (max-width: 900px) {
    /* .om-hero and .om-stats are re-declared inside design-om.css's own breakpoints, so both
       variants have to be repeated here at equal-or-higher specificity or the fixed heights and
       the 860px min-height come back. */
    .om-hero.om-hero--pricing {
        height: auto;
        min-height: 0;
        padding: 26px 0 24px;
    }
    #plans.om-section { padding-top: 22px; }
    .om-hero--pricing h1 { width: auto; max-width: 100%; font-size: 30px; }

    .om-stats.om-stats--pricing {
        height: auto;
        min-height: 0;
        flex-direction: column;
        gap: 20px;
        padding: 26px 20px;
    }
    .om-stats--pricing div { width: auto; }

    .pr-plan { padding: 26px 18px 20px; }

    /* The table stacks: one block per feature, each value labelled with its column name from
       data-plan, since the <thead> is off screen. The element is still a table in the
       accessibility tree only where the display change does not remove it, so the row header
       stays a <th scope="row"> and the caption stays in place for the name. */
    .pr-compare {
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }
    .pr-table,
    .pr-table tbody,
    .pr-table tr,
    .pr-table tbody th[scope="row"],
    .pr-group th {
        display: block;
        width: auto;
    }
    .pr-table thead { display: none; }
    .pr-group th {
        margin: 22px 0 10px;
        padding: 10px 14px;
        border: 1px solid #e4e7ee;
        border-radius: 8px;
        background: #eef1f5;
    }
    .pr-group.pr-row--alt th { background: #eef1f5; }
    /* The group's summary ticks are desktop only. Stacked, each one becomes a labelled line,
       which is three extra lines under every heading saying what the heading already implies. */
    .pr-group .pr-mark { display: none; }
    .pr-group__toggle { padding: 0; }
    .pr-group__label { padding: 10px 14px !important; }
    .pr-table tbody tr:not(.pr-group) {
        margin-bottom: 10px;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid #e4e7ee;
        border-radius: 8px;
    }
    .pr-table tbody tr.pr-row--alt:not(.pr-group) { background: #fafbfc; }
    .pr-table tbody th[scope="row"] {
        padding: 0 0 8px;
        border-top: 0;
        font-size: 15px;
        font-weight: 700;
    }
    .pr-table tbody th[scope="row"],
    .pr-row--alt th[scope="row"] { background: transparent; }
    /* Both selectors are scoped under .pr-table so they score (0,2,0): the desktop
       .pr-table .pr-mark--highlight tint is (0,2,0) too, and a bare .pr-mark here would lose to
       it and leave the CRM column as the only one laid out as a labelled line. */
    .pr-table .pr-mark,
    .pr-table .pr-mark--highlight {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border-top: 0;
        background: transparent;
        text-align: left;
    }
    .pr-table .pr-mark::before {
        content: attr(data-plan);
        color: #66717e;
        font-size: 13.5px;
    }

    .om-pricing .om-cta .om-btn { width: 100%; max-width: 300px; }
}

@media (max-width: 700px) {
    .pr-plans { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .om-hero--pricing h1 { font-size: 26px; }
    .pr-plan__price { font-size: 30px; }
    .pr-plan__price--phrase { font-size: 23px; }
    .pr-faq__item { padding: 18px 20px; }
}

/* --- Footnote marks -----------------------------------------------------------------------
   The live page marks record limits, SMTP and text/voice with *, ** and ***; this carries them
   across (Yuri, 2026-09-21). Orange rather than inherited grey, so the mark is findable in a
   list of ticked features without being loud, and lifted in its own <sup> so it never widens
   the line it sits on. */
.pr-ast {
    color: var(--orange-d, #dd8210);
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .04em;
}
sup.pr-ast { top: -.4em; }

/* The notes under the table. A list, not a paragraph: three separate terms, each answering a
   different mark, and run together they were one sentence a reader had to unpick to find the
   one that applied to them. The mark hangs in the margin so the three line up. */
.pr-notes {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: #66717e;
    font-size: 14px;
    line-height: 1.55;
}
.pr-notes li { margin-bottom: 4px; }
/* The mark runs with the sentence it introduces, not hanging in a margin of its own -- Yuri,
   2026-09-21: "have * by the word and not on the new line." Hung at left:0 in a 26px indent it
   read as a bullet column, a step removed from the note it belongs to. */
.pr-notes .pr-ast { margin-right: 5px; }
.pr-notes + .pr-note { margin-top: 10px; }
/* A marked term and its asterisk are one run of text: the mark must not be able to wrap onto a
   line of its own, and in a grid row it must not be able to become a second grid item. */
.pr-term { display: inline; }
.pr-term .pr-ast { white-space: nowrap; }

/* --- Homes For Our Troops ------------------------------------------------------------------
   The live page's closing banner, as a section: artwork beside two short paragraphs and two
   links. Not centred like the rest of the page -- it is a note about what BNTouch does with the
   money, not another pitch, and a left-set column reads as the quieter thing it is.

   The artwork is 421x301 and drawn at 260, small enough to sit beside the copy without becoming
   the section. Width and height are on the <img> so it reserves its box before it loads. */
/* Its own ground, not the page's white -- Yuri, 2026-09-21: "background for troops section
   should be different." A warm band, the palest tint of the site's orange rather than the grey
   --pale the comparison section uses, because the two sections meet and a second grey would
   just look like the first one restarting. Full width, with the copy on the container. */
.pr-troops {
    background: linear-gradient(180deg, #fff9f0 0%, #fdf3e6 100%);
    border-top: 1px solid #f5e6d2;
    border-bottom: 1px solid #f5e6d2;
}
.pr-troops__inner {
    display: flex;
    /* Centred on the artwork rather than top-aligned: the picture is 300px of mostly sky and
       the copy is three short blocks, so aligned at the top the text sat against the flag and
       left a hole under it. */
    align-items: center;
    gap: 44px;
}
.pr-troops__art {
    flex: 0 0 260px;
    width: 260px;
    height: auto;
}
.pr-troops__copy { max-width: 640px; }
.pr-troops__copy h2 {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.25;
    text-align: left;
}
.pr-troops__copy p {
    margin: 0 0 10px;
    color: #5e6874;
    font-size: 15px;
    line-height: 1.6;
}
.pr-troops__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 14px !important;
}
/* .om-text-link ships white with !important (design-om.css) because everywhere else on the
   site it sits on the navy hero. On this cream band that is white on #fdf3e6 -- invisible, and
   the screenshot showed exactly that. Navy, with !important to answer !important, keeping the
   underline the base rule sets: 12.4:1 measured. */
.pr-troops__links .om-text-link {
    margin: 0;
    color: #032d60 !important;
    font-size: 15px;
}
.pr-troops__links .om-text-link:hover { color: #dd8210 !important; }
@media (max-width: 900px) {
    /* Stacked, the artwork leads: at 260px beside a 390px column there is no room for both, and
       a flag-and-house picture is what makes a reader stop and read the two paragraphs. */
    .pr-troops__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .pr-troops__art { flex: 0 0 auto; width: 200px; }
}
/* The inline link in the copy. Left alone it is the browser's #00EE blue: this page sets link
   colour on its buttons and .om-text-link, and nothing had ever put a plain <a> inside a
   paragraph here before. Navy with an underline, which is what a link inside running text
   should look like; the underline is what marks it, not the colour alone. */
.pr-troops__copy p a {
    color: #032d60;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pr-troops__copy p a:hover { color: var(--orange-d, #dd8210); }