/* Tablet and iPad Pro layout overrides for every page of the site.
   Consolidated from 108 per-page <style> blocks into the two media queries
   below. Each rule keeps the comment that explained why it exists, and is
   labelled with the page it came from.

   LOAD ORDER: this file is linked at the END OF <body>, not in <head>.
   The Tailwind CDN injects its generated utilities into <head> at runtime,
   so a stylesheet linked in <head> loses every equal-specificity tie to a
   utility class. Moving this link into <head> silently reverts sections.

   Rules whose selectors also match pages that never declared them are NOT
   here -- they stay inline in their own page. See docs/tablet-layout.html. */

@media (min-width: 768px) and (max-width: 1023px) {

    /* ==== about.html ==== */
    /* Tablet: centre the card(s) left alone on the last row.
       Laptop and mobile are outside both media queries. */

            body [data-tfix="abt-stats"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 1 * 24px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== about.html ==== */

            body [data-footer-grid] {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

    /* ==== index.html ==== */
    /* Tablet: centre the card(s) left alone on the last row.
       Laptop and mobile are outside both media queries. */

            body [data-tfix="idx-shape"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 1 * 24px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== privacy.html ==== */
    /* Tablet only (768-1023px)
       At these widths the three support cards are ~218px wide. The email
       address is a single unbreakable token, so as a flex item with the
       default min-width:auto it could not shrink and spilled outside the
       card. Let all three values shrink and break within their card. */

            .support-card-value {
                min-width: 0;
                overflow-wrap: anywhere;
            }

    /* ==== services.html ==== */
    /* Ragged last row: fill the short final row rather than leaving a gap.
       Spans differ per band because the column count does. */

            body [data-fill="svc"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== products/connect-21.html ==== */
    /* Trust strip, tablets only
       Four 152px columns at text-4xl: "23+ Years" wrapped to two lines while
       the rest stayed on one, and "30,000+" ran edge to edge into the
       divider. Smaller figures and a tighter gutter give every cell the same
       single-line rhythm. */

            [data-trust-grid] {
                gap: 1.5rem !important;
            }

            [data-trust-grid] > * {
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }

            [data-trust-grid] > * > span:first-child {
                font-size: 1.75rem !important;
                line-height: 1.3;
            }

    /* ==== products/connect-21.html ==== */
    /* Ragged last row: fill the short final row rather than leaving a gap.
       Spans differ per band because the column count does. */

            body [data-fill="c21"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== products/tally-prime-server.html ==== */
    /* Scenario cards, tablets only
       The five cards live in two grids (3 + 2). At two columns that reads as
       2 / 1 + gap / 2, leaving a hole in the middle row. Dissolving both
       grids into one flow fills it: 2 / 2 / 1. The lg: three-up laptop
       layout and the single-column phone stack are untouched. */

            /* !important: the wrapper also carries Tailwind's `contents`, and the
               CDN stylesheet is injected after this one. */
            [data-tps-scenarios] {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2rem;
                margin-bottom: 4rem;
            }

            [data-tps-scenarios] > [data-tps-row] {
                display: contents;
            }

    /* ==== products/tally-prime-server.html ==== */
    /* Tablet: the five scenario cards flow into a two-column grid, leaving
       "Role-Based Access Management" alone on the last row. The row wrappers
       are display:contents, so the cards themselves are the grid items —
       target the last card, not the wrapper. */

            body [data-tps-scenarios]>[data-tps-row]:last-child>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 2rem) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== products/tally-prime.html ==== */
    /* Banner wordmark, tablets only
       The wordmark is pinned to the right edge and deliberately cropped by a
       negative margin, which reads as a wide desktop flourish. On a tablet's
       narrower banner it just looks like the logo fell off the edge, so
       centre it and drop the crop. Phones hide the banner entirely and the
       laptop layout is untouched. */

            [data-tp-banner] > div {
                justify-content: center;
            }

            [data-tp-banner] img {
                margin-right: 0;
            }

    /* ==== products/tally-prime.html ==== */
    /* Ragged last row: fill the short final row rather than leaving a gap.
       Spans differ per band because the column count does. */

            body [data-fill="tp"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== products/tally-subscription-services.html ==== */
    /* Pricing plans swipe on tablets too
       Three plans in a two-column tablet grid left the third stranded on a
       row of its own. Same scroller the phone gets, sized so two plans read
       at once with the third peeking. Phones already scroll and the laptop
       three-up grid is untouched. */


            [data-carousel="tss-1yr"]:not(.hidden),
            [data-carousel="tss-2yr"]:not(.hidden) {
                display: flex !important;
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
                gap: 1.5rem !important;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-padding-left: 1.5rem;
                margin-left: -1.5rem !important;
                margin-right: -1.5rem !important;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                padding-bottom: 0.5rem;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            [data-carousel="tss-1yr"]::-webkit-scrollbar,
            [data-carousel="tss-2yr"]::-webkit-scrollbar {
                display: none;
            }

            [data-carousel="tss-1yr"] > *,
            [data-carousel="tss-2yr"] > * {
                flex: 0 0 auto !important;
                width: 46% !important;
                max-width: 340px !important;
                min-width: 0;
                scroll-snap-align: start;
            }

            [data-swipe-hint="pricing"],
            [data-carousel-dots="tss-1yr"]:not(.hidden),
            [data-carousel-dots="tss-2yr"]:not(.hidden) {
                display: flex !important;
            }

    /* ==== products/tallydex.html ==== */

            .footer-grid {
                grid-template-columns: 2fr 1fr;
                gap: 40px;
            }

    /* ==== service_pages/amc-services.html ==== */
    /* Tablet: centre the card(s) left alone on the last row.
       Laptop and mobile are outside both media queries. */

            body [data-tfix="amc-more"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 1 * 32px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== service_pages/amc-services.html ==== */
    /* Tablet only (768-1023px)
       "Helping You Get More From Tally": three columns leave ~198px per card,
       and "Practical Recommendations" rendered up to 51px outside its card.
       Two columns give the headings room.
       "Getting Help Is Simple": five 112px columns produced tall, thin cards
       with headings broken across 3-4 lines. Three columns read properly, but
       five cards over three columns leaves the last row 3+2 with an empty
       third cell beside a bordered card, which frames the gap.
       
       Laid out on six columns instead: a span-2 item on six columns is exactly
       as wide as a 1-column item on three ((W-2G)/3), so the first row is
       unchanged, and the last two cards take span-3 to fill the row exactly.
       Both rows stay internally equal. */

            [data-improvement-grid] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            [data-carousel="getting-help"] {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }

            [data-carousel="getting-help"]>* {
                grid-column: span 2;
            }

            [data-carousel="getting-help"]>:nth-last-child(-n+2) {
                grid-column: span 3;
            }

    /* ==== service_pages/data-migration.html ==== */
    /* Tablet: centre the card(s) left alone on the last row.
       Laptop and mobile are outside both media queries. */

            body [data-tfix="dm-risk"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 1 * 24px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== service_pages/onsite-remote-support.html ==== */
    /* Tablet only (768-1023px)
       "Getting Help Is Simple": five ~112px columns produced tall, thin cards
       with headings broken across 3-4 lines. Three columns read properly, but
       five cards over three columns leaves the last row 3+2 with an empty
       third cell beside a bordered card, which frames the gap.
       
       Laid out on six columns instead: a span-2 item on six columns is exactly
       as wide as a 1-column item on three ((W-2G)/3), so the first row is
       unchanged, and the last two cards take span-3 to fill the row exactly.
       Both rows stay internally equal. */

            [data-carousel="getting-help"] {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }

            [data-carousel="getting-help"]>* {
                grid-column: span 2;
            }

            [data-carousel="getting-help"]>:nth-last-child(-n+2) {
                grid-column: span 3;
            }

    /* ==== service_pages/tally-data-integration.html ==== */
    /* Tablet: the last two cards sit alone on row 2. Re-lay the row on six
       columns — a span-2 item on six columns is exactly as wide as a
       1-column item on three ((W-2G)/3) — and start the pair at lines 2 and
       4, which offsets them by (W+G)/6: precisely half the leftover, so the
       pair lands dead centre. Laptop, mobile and iPad Pro are outside this
       media query and unaffected. */

            body [data-tfix="tdi-designed"] {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }

            body [data-tfix="tdi-designed"]>* {
                grid-column: span 2;
            }

            body [data-tfix="tdi-designed"]>:nth-last-child(2) {
                grid-column: 2 / span 2;
            }

            body [data-tfix="tdi-designed"]>:last-child {
                grid-column: 4 / span 2;
            }

    /* ==== service_pages/tally-data-integration.html ==== */
    /* Both tablet bands: centre the card left alone on the last row. The row
       wrapper is display:contents, so the cards are the grid items. */

            body [data-usecases]>[data-usecases-row]:last-child>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 2rem) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== service_pages/tally-data-integration.html ==== */
    /* Tablet only (768-1023px)
       (a) The use-case cards live in two containers (3 + a centred 2). At two
       columns that produced a 2 / 1 / 2 layout with a hole in row two.
       Dissolving both containers lets all five cards flow 2 / 2 / 1.
       (b) Five process columns leave ~112px per card here, so the headings
       spilled out. Three columns give them room. */

            [data-usecases] {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2rem;
                align-items: start;
            }

            [data-usecases] > [data-usecases-header] {
                grid-column: 1 / -1;
            }

            [data-usecases] > [data-usecases-row] {
                display: contents;
            }

            [data-usecases] [data-usecases-row] > div {
                width: auto;
            }

            [data-process-grid] {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

    /* ==== solutions_pages/barcode-printing-solution.html ==== */
    /* Ragged last row: fill the short final row rather than leaving a gap.
       Spans differ per band because the column count does. */

            body [data-fill="bc"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions_pages/barcode-printing-solution.html ==== */
    /* Tablet only: the seven workflow steps run 2-up here, so step 7 sits
       alone in the left column with the right half of the row empty. Span it
       to fill the row — the same treatment the other ragged grids got, just
       in the band where this one goes short. */

            body [data-bc-steps]>:last-child {
                grid-column: 1 / -1;
            }

    /* ==== solutions_pages/chit-fund-management.html ==== */
    /* Ragged last row: fill the short final row rather than leaving a gap.
       Spans differ per band because the column count does. */

            body [data-fill="chit"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions_pages/logistics-management.html ==== */
    /* Tablet: centre the card(s) left alone on the last row.
       Laptop and mobile are outside both media queries. */

            body [data-tfix="log-trip"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 1 * 16px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== solutions_pages/multi-branch-trading.html ==== */
    /* Ragged last row: fill the short final row rather than leaving a gap.
       Spans differ per band because the column count does. */

            body [data-fill="mbt"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions_pages/vehicle-service-management.html ==== */
    /* Tablet + iPad Pro: the last two cards live in a sub-wrapper carrying
       `md:col-span-2 lg:col-span-3`. On a laptop that is deliberate — three
       cards, then a centred pair. On two columns it misbehaves: the wrapper
       tries to span three tracks (overflowing on iPad Pro) and "Manufacturers
       & Models" is stranded mid-grid.
       
       Flatten it with display:contents so all five cards are equal members of
       the grid, the way every other card section on the site behaves, and
       centre the one left on the last row. */

            body [data-veh-setup] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            body [data-veh-setup]>[class*="lg:col-span-3"] {
                display: contents;
            }

            /* the pair carried explicit `md:w-[calc(...)]` / `lg:w-[calc(...)]`
               widths sized against the old flex wrapper; as grid items those
               percentages resolve against a single track and squeeze the card. */
            body [data-veh-setup]>[class*="lg:col-span-3"]>* {
                width: auto;
            }

            body [data-veh-setup]>[class*="lg:col-span-3"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 2rem) / 2);
            }
}

@media (min-width: 1024px) and (max-width: 1400px) and (orientation: portrait) and (any-pointer: coarse) {

    /* ==== 404.html ==== */
    /* Tablet layout on large tablets in portrait
       An iPad Pro is 1024px wide in portrait (1032 on the 13" M4) — exactly
       where Tailwind's `lg:` utilities begin — so it was being served the
       laptop layout and the page's main media shrank by 20-69%.
       
       Gated on three conditions together so laptops of the same width are
       never affected:
       orientation: portrait  — a laptop is always landscape, so this
       alone excludes them, including touchscreen
       laptops at 1366x768;
       any-pointer: coarse    — a touch screen is present (stays true on an
       iPad with a Magic Keyboard, where
       `pointer` reports fine);
       max-width: 1400px      — bounds it to tablet-sized displays.
       
       Written as plain CSS rather than Tailwind utilities so it keeps
       working once the CDN is replaced by a compiled stylesheet, and it
       re-evaluates live when the device is rotated. */


            /* media + text splits collapse to a single column */
            body [class*="lg:grid-cols-12"] {
                grid-template-columns: minmax(0, 1fr) !important;
            }

            body [class*="lg:grid-cols-12"]>* {
                grid-column: auto !important;
            }

            body [class*="lg:grid-cols-2"] {
                grid-template-columns: minmax(0, 1fr) !important;
            }

            body [class*="lg:flex-row"] {
                flex-direction: column !important;
            }

            /* wide card grids step down to two columns rather than three to
               seven, which at 1024px leaves cards barely 200px wide */
            body [class*="lg:grid-cols-3"],
            body [class*="lg:grid-cols-4"],
            body [class*="lg:grid-cols-5"],
            body [class*="lg:grid-cols-6"],
            body [class*="lg:grid-cols-7"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

    /* ==== about.html ==== */
    /* Real iPad Pro: the portrait rule steps this grid down to two columns,
       which strands the same card again. Gated on the identical condition so
       the two always agree. */

            body [data-tfix="abt-stats"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 24px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== about.html ==== */
    /* iPad Pro: this is a three-column row (card, portrait, card) on a laptop.
       The portrait rule steps it to two columns, which pairs the first card
       with the photo and strands the second card beside dead space. Drop to
       the single-column stack an iPad Air already gets. */

            /* !important: the site-wide portrait rule caps lg:grid-cols-3 at two
               columns with !important, so this has to match it to win. */
            body [data-abt-leaders] {
                grid-template-columns: minmax(0, 1fr) !important;
            }

            body [data-abt-leaders]>* {
                grid-column: auto;
            }

            /* the portrait carries `lg:min-h-0 lg:aspect-auto` because it stretches
               to the row height in the three-column layout; stacked it has no
               intrinsic height, so restore the small-screen sizing. */
            body [data-abt-leaders]>[class*="lg:aspect-auto"] {
                min-height: 350px;
                aspect-ratio: 4 / 5;
            }

    /* ==== about.html ==== */
    /* iPad Pro: the Core Philosophy column is `lg:sticky lg:top-32`, an
       affordance for the two-column desktop layout where the short text
       column floats beside the tall card column. `lg:` starts at 1024px —
       exactly where the portrait rule collapses lg:grid-cols-2 to one
       column — so the sticky switches on at the very width where the layout
       it was written for switches off. Stacked, the sticky column's
       constraint rectangle is the whole grid (both rows), so it takes the
       full 128px offset and drops 128px into the row below; with a 64px row
       gap that leaves the illustration overlapping the first card by 64px.
       Static restores the spacing an iPad Air already gets. */

            body [data-abt-philosophy] {
                position: static;
            }

    /* ==== index.html ==== */
    /* Solutions CTA on the portrait iPad Pro
       At 1024px the lg: two-column split leaves each side 425px wide, which
       breaks the 60px headline across seven lines and squeezes six bullets
       and the illustration into half a tablet. Give the copy the full width -
       the headline settles back to four lines, as it does on the smaller
       tablets - and run the illustration underneath at a size it can hold.
       Landscape and laptop widths never match this. */

            [data-solutions-cta] {
                grid-template-columns: minmax(0, 1fr) !important;
                gap: 3.5rem !important;
            }

            [data-solutions-cta] > div > h2 {
                max-width: 20ch;
            }

            [data-solutions-art] > div {
                max-width: 520px;
                margin-left: auto;
                margin-right: auto;
            }

    /* ==== index.html ==== */
    /* Real iPad Pro: the portrait rule steps this grid down to two columns,
       which strands the same card again. Gated on the identical condition so
       the two always agree. */

            body [data-tfix="idx-shape"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 24px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== services.html ==== */

            body [data-fill="svc"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions.html ==== */
    /* Large tablets
       The card splits into a 5/7 two-column grid at lg (1024px), which is
       exactly the portrait width of a 12.9" iPad Pro — so it landed on the
       laptop layout and the media shrank to ~354px.
       
       Keep those devices on the stacked layout instead. Gated on
       `any-pointer: coarse` -- true whenever a touch screen is present, so
       it still matches an iPad Pro with a Magic Keyboard attached (which
       reports `pointer: fine` because the trackpad becomes primary).
       A mouse-only laptop reports no coarse pointer at all, so it is
       untouched. Capped at 1400px to cover iPad Pro landscape (1366/1376)
       without reaching desktop displays.
       
       Scoped to `body` so it outranks Tailwind's lg: utilities regardless
       of which order the CDN injects its stylesheet. */

            body .solution-card {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }

            body .solution-card > * {
                grid-column: auto;
            }

    /* ==== products/connect-21.html ==== */
    /* Trust strip, tablets only
       Four 152px columns at text-4xl: "23+ Years" wrapped to two lines while
       the rest stayed on one, and "30,000+" ran edge to edge into the
       divider. Smaller figures and a tighter gutter give every cell the same
       single-line rhythm. */

            [data-trust-grid] {
                gap: 1.5rem !important;
            }

            [data-trust-grid] > * {
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }

            [data-trust-grid] > * > span:first-child {
                font-size: 1.75rem !important;
                line-height: 1.3;
            }

    /* ==== products/connect-21.html ==== */

            body [data-fill="c21"]>:nth-last-child(-n+2) { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }
            body [data-fill="c21"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== products/tally-on-cloud.html ==== */
    /* Story steps on the portrait iPad Pro
       At 1024px the lg: three-up layout gives each step a 288px column with
       48px of padding - 192px of usable width for a heading and a paragraph.
       Stack them instead, the way the smaller tablets do, and swap the
       horizontal step arrows for the vertical ones that belong between
       stacked cards. Landscape and laptop widths never match this. */

            [data-carousel="toc-anywhere"] {
                grid-template-columns: minmax(0, 1fr) !important;
                max-width: 640px;
                margin-left: auto;
                margin-right: auto;
            }

            [data-carousel="toc-anywhere"] > [data-step-arrow].absolute {
                display: none !important;
            }

            [data-carousel="toc-anywhere"] > [data-step-arrow]:not(.absolute) {
                display: flex !important;
            }

    /* ==== products/tally-on-cloud.html ==== */
    /* iPad Pro: the seven deployment steps are a `lg:flex-row` band with each
       step pinned to a 14% width. The portrait rule turns the band into a
       column, so the steps stack while keeping that width — a 110px ribbon
       down the left with the rail shooting off to the right and most of the
       page empty.
       
       Lay them out as a three-column process grid instead: ~300px per step
       uses the width, keeps the number-above-label presentation from the
       laptop, and cuts the section height by roughly two thirds. The rail is
       hidden because it only reads as a rail across a single row. */

            body [data-toc-steps] {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 2.5rem 1.5rem;
                align-items: start;
            }

            body [data-toc-steps]>div {
                width: auto;
            }

            /* seven into three leaves one on the last row — centre it */
            body [data-toc-steps]>div:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 3rem) / 3);
            }

            body [data-toc-rail] {
                display: none;
            }

    /* ==== products/tally-prime-server.html ==== */
    /* Scenario cards, tablets only
       The five cards live in two grids (3 + 2). At two columns that reads as
       2 / 1 + gap / 2, leaving a hole in the middle row. Dissolving both
       grids into one flow fills it: 2 / 2 / 1. The lg: three-up laptop
       layout and the single-column phone stack are untouched. */

            /* !important: the wrapper also carries Tailwind's `contents`, and the
               CDN stylesheet is injected after this one. */
            [data-tps-scenarios] {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2rem;
                margin-bottom: 4rem;
            }

            [data-tps-scenarios] > [data-tps-row] {
                display: contents;
            }

    /* ==== products/tally-prime-server.html ==== */
    /* Tablet: the five scenario cards flow into a two-column grid, leaving
       "Role-Based Access Management" alone on the last row. The row wrappers
       are display:contents, so the cards themselves are the grid items —
       target the last card, not the wrapper. */

            body [data-tps-scenarios]>[data-tps-row]:last-child>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 2rem) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== products/tally-prime.html ==== */
    /* Banner wordmark, tablets only
       The wordmark is pinned to the right edge and deliberately cropped by a
       negative margin, which reads as a wide desktop flourish. On a tablet's
       narrower banner it just looks like the logo fell off the edge, so
       centre it and drop the crop. Phones hide the banner entirely and the
       laptop layout is untouched. */

            [data-tp-banner] > div {
                justify-content: center;
            }

            [data-tp-banner] img {
                margin-right: 0;
            }

    /* ==== products/tally-prime.html ==== */

            body [data-fill="tp"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== products/tally-prime.html ==== */
    /* iPad Pro: the three licence cards drop to two columns, stranding
       "Auditor License" with an empty slot beside it while the upgrade card
       sits alone below. Hoist both into one two-column grid — the pricing
       row becomes display:contents so its cards are grid items — so the
       upgrade card lands in that empty slot. */

            body [data-tp-lic] {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2rem;
                align-items: start;
            }

            body [data-tp-lic]>.text-center,
            body [data-tp-lic]>[class*="md:hidden"] {
                grid-column: 1 / -1;
            }

            body [data-tp-lic]>[class*="m-carousel"] {
                display: contents;
            }

            /* the upgrade card is a centred max-w-4xl block; let it fill its cell */
            body [data-tp-lic]>[class*="max-w-4xl"] {
                max-width: none;
                margin: 0;
            }

            /* its inner row would be far too cramped at half width */
            body [data-tp-lic] [class*="lg:flex-row"] {
                flex-direction: column;
                align-items: stretch;
            }

    /* ==== products/tally-subscription-services.html ==== */
    /* Pricing plans swipe on tablets too
       Three plans in a two-column tablet grid left the third stranded on a
       row of its own. Same scroller the phone gets, sized so two plans read
       at once with the third peeking. Phones already scroll and the laptop
       three-up grid is untouched. */


            [data-carousel="tss-1yr"]:not(.hidden),
            [data-carousel="tss-2yr"]:not(.hidden) {
                display: flex !important;
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
                gap: 1.5rem !important;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-padding-left: 1.5rem;
                margin-left: -1.5rem !important;
                margin-right: -1.5rem !important;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                padding-bottom: 0.5rem;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            [data-carousel="tss-1yr"]::-webkit-scrollbar,
            [data-carousel="tss-2yr"]::-webkit-scrollbar {
                display: none;
            }

            [data-carousel="tss-1yr"] > *,
            [data-carousel="tss-2yr"] > * {
                flex: 0 0 auto !important;
                width: 46% !important;
                max-width: 340px !important;
                min-width: 0;
                scroll-snap-align: start;
            }

            [data-swipe-hint="pricing"],
            [data-carousel-dots="tss-1yr"]:not(.hidden),
            [data-carousel-dots="tss-2yr"]:not(.hidden) {
                display: flex !important;
            }

    /* ==== products/zoho.html ==== */
    /* Pricing plans on the portrait iPad Pro
       The lg: four-up grid gives each plan a 204px column with 32px padding,
       so 140px carries a title, a price, a paragraph and a feature list. Two
       up at this width, which also squares the four-card tabs into 2x2.
       Landscape and laptop widths never match this. */


            [data-carousel="zoho-plan-books"],
            [data-carousel="zoho-plan-inventory"],
            [data-carousel="zoho-plan-billing"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                max-width: 780px;
                margin-left: auto;
                margin-right: auto;
            }

    /* ==== service_pages/data-migration.html ==== */
    /* Real iPad Pro: the portrait rule steps this grid down to two columns,
       which strands the same card again. Gated on the identical condition so
       the two always agree. */

            body [data-tfix="dm-risk"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 24px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== service_pages/tally-data-integration.html ==== */
    /* iPad Pro: three columns squeezes these cards to ~283px, wrapping the
       titles and leaving row one ragged. Use the same two-column treatment
       the smaller tablet already gets. */

            body [data-usecases] {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2rem;
                align-items: start;
            }

            body [data-usecases]>[data-usecases-header] {
                grid-column: 1 / -1;
            }

            body [data-usecases]>[data-usecases-row] {
                display: contents;
            }

            body [data-usecases] [data-usecases-row]>div {
                width: auto;
            }

    /* ==== service_pages/tally-data-integration.html ==== */
    /* Both tablet bands: centre the card left alone on the last row. The row
       wrapper is display:contents, so the cards are the grid items. */

            body [data-usecases]>[data-usecases-row]:last-child>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 2rem) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== service_pages/training.html ==== */

            body [data-fill="trn"]>:nth-last-child(-n+2) { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }
            body [data-fill="trn"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions_pages/barcode-printing-solution.html ==== */

            body [data-fill="bc"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions_pages/chit-fund-management.html ==== */

            body [data-fill="chit"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions_pages/fixedassets.html ==== */
    /* iPad Pro: this pair uses `order-1 lg:order-2` so the laptop leads on a
       wide screen. The portrait rule stacks the grid into one column, where
       that lg order puts "Asset Transactions" below its laptop. Restore the
       small-screen order so the heading introduces the image it describes. */

            body [data-fa-includes]>[class*="lg:order-1"] {
                order: 2;
            }

            body [data-fa-includes]>[class*="lg:order-2"] {
                order: 1;
            }

    /* ==== solutions_pages/industry-specific-solutions.html ==== */

            body [data-fill="ind"]>:last-child { grid-column: auto; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions_pages/logistics-management.html ==== */
    /* Real iPad Pro: the portrait rule steps this grid down to two columns,
       which strands the same card again. Gated on the identical condition so
       the two always agree. */

            body [data-tfix="log-trip"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 16px) / 2);
                max-width: none;
                margin-inline: 0;
            }

    /* ==== solutions_pages/logistics-management.html ==== */
    /* iPad Pro: this gradient rail is `hidden lg:block`, drawn across a single
       row of trip stages. The portrait rule steps the grid down to two
       columns, so the rail is left striping across the middle of a
       multi-row grid, joining nothing. Hide it there. */

            body [data-log-rail] {
                display: none;
            }

    /* ==== solutions_pages/manufacturing.html ==== */
    /* iPad Pro: each stage is a `lg:flex-row` of four steps with a connector
       span drawn across them. The portrait rule turns the row into a column,
       so the steps stack in a ~150px ribbon while the connector still runs
       off to the right across empty space, and the section grows to 2400px.
       
       Lay each stage out as a 2x2 grid: ~440px per step at this width, the
       icon-above-centred-label presentation is kept, and the stage spine on
       the left still marks the three stages. The horizontal connector is
       hidden because it only reads across a single row. */

            body [data-mfw-steps] {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2.25rem 1.5rem;
                align-items: start;
            }

            body [data-mfw-steps]>li {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 0;
            }

            body [data-mfw-hline] {
                display: none;
            }

    /* ==== solutions_pages/multi-branch-trading.html ==== */

            body [data-fill="mbt"]>:last-child { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; }

    /* ==== solutions_pages/vehicle-service-management.html ==== */
    /* iPad Pro: same treatment as multi-branch. The intro is a two-column band
       on a laptop, so the copy carries `lg:text-left lg:mx-0` and the artwork
       `lg:mr-0`; once the portrait rule stacks the band, the copy hugs the
       left and the art is pushed right. Centre both, enlarge the artwork, and
       turn the cards into the swipe track already built for phones. */

            body [data-veh-copy] {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }

            body [data-veh-art] {
                margin-left: auto;
                margin-right: auto;
                max-width: 32rem;
            }

            body [data-carousel="veh-modernize"] {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-padding-left: 1.5rem;
                margin-left: -1.5rem;
                margin-right: -1.5rem;
                padding: 0 1.5rem 0.5rem;
                gap: 1.25rem;
            }

            body [data-carousel="veh-modernize"]>* {
                flex: 0 0 auto;
                width: 44%;
                max-width: none;
                scroll-snap-align: start;
            }

            /* only this section gains the track, so only its hint and dots show */
            body [data-carousel-dots="veh-modernize"],
            body [data-veh-hint] {
                display: flex;
            }

    /* ==== solutions_pages/vehicle-service-management.html ==== */
    /* Tablet + iPad Pro: the last two cards live in a sub-wrapper carrying
       `md:col-span-2 lg:col-span-3`. On a laptop that is deliberate — three
       cards, then a centred pair. On two columns it misbehaves: the wrapper
       tries to span three tracks (overflowing on iPad Pro) and "Manufacturers
       & Models" is stranded mid-grid.
       
       Flatten it with display:contents so all five cards are equal members of
       the grid, the way every other card section on the site behaves, and
       centre the one left on the last row. */

            body [data-veh-setup] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            body [data-veh-setup]>[class*="lg:col-span-3"] {
                display: contents;
            }

            /* the pair carried explicit `md:w-[calc(...)]` / `lg:w-[calc(...)]`
               widths sized against the old flex wrapper; as grid items those
               percentages resolve against a single track and squeeze the card. */
            body [data-veh-setup]>[class*="lg:col-span-3"]>* {
                width: auto;
            }

            body [data-veh-setup]>[class*="lg:col-span-3"]>:last-child {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 2rem) / 2);
            }

    /* ==== connect-21.html + training.html: full-width card rows ==== */
    /* Both grids hold five cards whose first three already span the full row at
       this width. The ragged-row fill rule reset the last two to `grid-column:
       auto` -- correct for undoing the laptop `span 3`, but in a two-column grid
       `auto` means one column, so the fourth card rendered at half the width of
       every other card while the fifth was filled to full width by the rule
       below it. Both now span the row, matching their siblings. */

    /* ==== products/connect-21.html ==== */
    /* "How It Works" is a six-step roadmap built as `lg:flex-row` with each step
       at `lg:w-[15%]` and a `hidden lg:block` rail drawn behind them.

       The portrait rule flips the container to a column, but the steps keep the
       15% width meant for a row, so they stack as 144px ribbons pinned to the
       left with ~85% of the width empty, and the rail — still on, because `lg:`
       is live at 1024px — draws a horizontal line across the top of a vertical
       stack, joining nothing.

       Re-laid as three columns by two rows: at 961px that gives each step ~310px
       instead of 144px, keeps the numbered left-to-right reading order, and lets
       the circle-above-text presentation stand. The rail has no meaning across a
       two-row grid, so it is hidden. */

    body [data-c21-steps] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.75rem 1rem;
        align-items: start;
    }

    /* the steps carry `lg:w-[15%]`, sized for a single row of six */
    body [data-c21-steps]>[class*="lg:w-\[15%\]"] {
        width: auto;
        max-width: none;
    }

    body [data-c21-rail] {
        display: none;
    }

    /* ==== index.html ==== */
    /* Google reviews trust strip.

       The site-wide portrait rule flips every `lg:flex-row` container to a
       column. That is right for content splits that genuinely need the width,
       but this strip does not: the copy is capped at `max-w-md` (448px) and the
       rating block is 310px, so side by side they need 448 + 32 + 310 = 790px
       inside an 848px container -- it fits at this width with 58px to spare.
       Stacked, it ran 449px tall with large empty margins either side; in a row
       it is 259px, the same as the laptop layout.

       !important: the site-wide rule sets flex-direction with !important, so
       matching specificity alone would not win. */

    body [data-idx-trust] {
        flex-direction: row !important;
    }
}
