/* ============================================================
   Trinico brand skin for the 360 Monitoring landing page.
   Added 2026-08-09 by the Website Design Team.

   WHY THIS FILE EXISTS
   The page markup is a vendor marketing template and its styling
   lives in templates/nexus/css/store.css, which is the PARENT
   theme and is never edited (Law 1). So this is a scoped override
   loaded after the parent, changing nothing but presentation.

   WHAT IT CORRECTS
   Open Sans throughout        -> Montserrat, the brand face
   #B8D2FF periwinkle bands    -> soft brand-sky wash
   #8952CB purple CTAs         -> Trinico cobalt #1B77C9
   pure black CTA              -> cobalt outline
   SHOUTING UPPERCASE labels   -> sentence case
   vendor FAQ styling          -> the Trinico accordion look

   Every colour below is a Trinico brand token:
   sky #44A8DA, cobalt #1B77C9, green #ABC441, orange #FF6600.
   No purple anywhere, and no purple-to-blue gradients.
   ============================================================ */

.landing-page.threesixtymonitoring,
.landing-page.threesixtymonitoring h1,
.landing-page.threesixtymonitoring h2,
.landing-page.threesixtymonitoring h3,
.landing-page.threesixtymonitoring h4,
.landing-page.threesixtymonitoring h5,
.landing-page.threesixtymonitoring p,
.landing-page.threesixtymonitoring a,
.landing-page.threesixtymonitoring span,
.landing-page.threesixtymonitoring li,
.landing-page.threesixtymonitoring td,
.landing-page.threesixtymonitoring th,
.landing-page.threesixtymonitoring .btn {
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- headings ---------- */
.landing-page.threesixtymonitoring h1,
.landing-page.threesixtymonitoring h2 {
    color: #10314b !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.18;
}
.landing-page.threesixtymonitoring h3,
.landing-page.threesixtymonitoring h4 {
    color: #10314b !important;
    font-weight: 600;
}
.landing-page.threesixtymonitoring .section-discover h2,
.landing-page.threesixtymonitoring .section-features h2,
.landing-page.threesixtymonitoring .section-notifications h2,
.landing-page.threesixtymonitoring .section-pricing h2 {
    margin-bottom: 14px;
}

/* ---------- the two off-brand bands ---------- */
.landing-page.threesixtymonitoring .section-header,
.landing-page.threesixtymonitoring .section-monitoring {
    background-color: #eaf4fb !important;
    background-image: linear-gradient(180deg, #e6f2fa 0%, #f6fbfd 100%) !important;
    border-top: 1px solid #d8e9f4;
    border-bottom: 1px solid #d8e9f4;
}
.landing-page.threesixtymonitoring .section-header {
    border-top: 0;
}

/* ---------- call to action buttons ---------- */
.landing-page.threesixtymonitoring .btn,
.landing-page.threesixtymonitoring a.btn,
.landing-page.threesixtymonitoring button.btn {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    border-radius: 30px;
    padding: 12px 26px;
    box-shadow: 0 2px 10px rgba(27, 119, 201, .18);
    transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.landing-page.threesixtymonitoring .btn-primary,
.landing-page.threesixtymonitoring .btn-purple,
.landing-page.threesixtymonitoring .btn-dark,
.landing-page.threesixtymonitoring .btn-black,
.landing-page.threesixtymonitoring .btn[style*="8952"],
.landing-page.threesixtymonitoring a.btn-primary {
    background-color: #1B77C9 !important;
    border-color: #1B77C9 !important;
    color: #fff !important;
}
.landing-page.threesixtymonitoring .btn-primary:hover,
.landing-page.threesixtymonitoring .btn-purple:hover,
.landing-page.threesixtymonitoring .btn-dark:hover,
.landing-page.threesixtymonitoring a.btn-primary:hover {
    background-color: #15619f !important;
    border-color: #15619f !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(27, 119, 201, .28);
}
.landing-page.threesixtymonitoring .btn:focus-visible {
    outline: 3px solid #44A8DA;
    outline-offset: 3px;
}

/* the secondary/ghost action, so two CTAs never compete */
.landing-page.threesixtymonitoring .btn-secondary,
.landing-page.threesixtymonitoring .btn-outline,
.landing-page.threesixtymonitoring .btn-default {
    background-color: transparent !important;
    border: 2px solid #1B77C9 !important;
    color: #1B77C9 !important;
    box-shadow: none;
}
.landing-page.threesixtymonitoring .btn-secondary:hover,
.landing-page.threesixtymonitoring .btn-outline:hover,
.landing-page.threesixtymonitoring .btn-default:hover {
    background-color: #1B77C9 !important;
    color: #fff !important;
}

/* ---------- stop the shouting ---------- */
.landing-page.threesixtymonitoring .section-faq h3,
.landing-page.threesixtymonitoring .section-faq h4,
.landing-page.threesixtymonitoring .section-faq .btn-link,
.landing-page.threesixtymonitoring .section-faq button,
.landing-page.threesixtymonitoring .section-faq a,
.landing-page.threesixtymonitoring .section-faq .card-header,
.landing-page.threesixtymonitoring .section-features .nav-link,
.landing-page.threesixtymonitoring .p-eyebrow,
.landing-page.threesixtymonitoring .text-uppercase {
    text-transform: none !important;
}

/* The vendor FAQ markup was converted to the house structure on 2026-08-09
   (section.trinico-wb-faq > .trinico-wb-container > .trinico-wb-faq-head +
   .trinico-wb-faq-list > details.trinico-wb-faq-item), so it now picks up the
   site's own FAQ CSS from the theme stylesheet and needs no rules here. The
   bespoke .card styling that used to live at this spot has been removed as dead
   code. Do not reintroduce page-specific FAQ styling; match the markup instead. */

/* ---------- pricing tables ---------- */
.landing-page.threesixtymonitoring .section-pricing table th {
    background: #10314b;
    color: #fff;
    font-weight: 600;
    border: 0;
}
.landing-page.threesixtymonitoring .section-pricing table td,
.landing-page.threesixtymonitoring .section-pricing table th {
    padding: 12px 14px;
}
.landing-page.threesixtymonitoring .section-pricing table tbody tr:nth-child(odd) td {
    background: #f6fafd;
}

/* ---------- container width, matched to the rest of the site ---------- */
.landing-page.threesixtymonitoring .container {
    max-width: 1140px;
}

/* ---------- one FAQ per page ----------
   Company rule, CEO 2026-08-09: where WHMCS ships its own FAQ, that
   is the one the page uses, presented in our format. We do not add a
   second. Our own block is suppressed here, and the FAQPage schema in
   mod_trinico_seo was repointed at the vendor questions so the markup
   still matches what a visitor can actually see (SEO Rule 9). */
section.trinico-page-faq-wb,
.trinico-wb-faq.trinico-page-faq-wb {
    display: none !important;
}

/* ---------- small screens ---------- */
@media (max-width: 767px) {
    .landing-page.threesixtymonitoring h1 { font-size: 30px !important; }
    .landing-page.threesixtymonitoring h2 { font-size: 24px !important; }
    .landing-page.threesixtymonitoring .btn { width: 100%; max-width: 320px; }
    .landing-page.threesixtymonitoring .section-header,
    .landing-page.threesixtymonitoring .section-monitoring { padding: 36px 0; }
}

/* the domain search submit inside this page was pure black; bring it on brand */
.landing-page.threesixtymonitoring .btn-search {
    background-color: #1B77C9 !important;
    border-color: #1B77C9 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 10px 18px;
}
.landing-page.threesixtymonitoring .btn-search:hover {
    background-color: #15619f !important;
}

/* FAQ question buttons are full-width text, not pills; undo the CTA shape */
.landing-page.threesixtymonitoring .section-faq .btn-link {
    width: 100%;
    text-align: left;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
}

/* The pricing-table Order buttons carry a more specific vendor rule than the
   generic .btn-primary override above, so they need their own, matched at the
   same depth. Found by measuring, not guessed: seven buttons stayed #8952CB
   after the first pass. */
.landing-page.threesixtymonitoring .section-pricing .btn-primary,
.landing-page.threesixtymonitoring .section-pricing table .btn-primary,
.landing-page.threesixtymonitoring .div-pricing-container .btn-primary,
.landing-page.threesixtymonitoring .section-pricing a.btn.btn-primary,
.landing-page.threesixtymonitoring .section-pricing td .btn.btn-primary {
    background-color: #1B77C9 !important;
    border-color: #1B77C9 !important;
    color: #fff !important;
}
.landing-page.threesixtymonitoring .section-pricing .btn-primary:hover,
.landing-page.threesixtymonitoring .section-pricing table .btn-primary:hover,
.landing-page.threesixtymonitoring .div-pricing-container .btn-primary:hover {
    background-color: #15619f !important;
    border-color: #15619f !important;
}

/* NOT FIXED HERE, on purpose: a pre-existing 15px horizontal scroll.
   Verified as not caused by this skin, scrollWidth stayed 1445 against a 1430
   viewport with this stylesheet disabled. The offending element is a WHMCS
   .row / .col-12.primary-content wrapper ABOVE .landing-page, so it cannot be
   reached cleanly from a page-scoped sheet. Two attempts were made and both
   were reverted rather than left in as dead or risky CSS. Logged as its own
   finding for the Website Design Team. */

/* Pricing table price cells: white text on the vendor periwinkle #B8D2FF
   measured 1.53:1, which is unreadable and fails AA badly. Brand cobalt with
   white text measures 4.64:1 and passes. Found by axe, not by eye. */
.landing-page.threesixtymonitoring .div-feature-price,
.landing-page.threesixtymonitoring .div-feature-values .div-feature-price {
    background-color: #1B77C9 !important;
    color: #fff !important;
    font-weight: 600;
}

/* ============================================================
   PRICING, modernised. 2026-08-09.
   Structure is column-based, not a table: .div-pricing-container
   holds one .div-feature-labels (the left label column) and four
   .div-feature-values (the plan columns). Each plan column has a
   .header, a <ul> of features and a .div-feature-order button.
   The price band arrived with zero padding and square corners,
   which is most of why it read as unfinished.
   ============================================================ */

.landing-page.threesixtymonitoring .div-pricing-container {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

/* each plan becomes a real card */
.landing-page.threesixtymonitoring .div-feature-values {
    background: #fff;
    border: 1px solid #e3ecf4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(16, 49, 75, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    display: flex;
    flex-direction: column;
}
.landing-page.threesixtymonitoring .div-feature-values:hover {
    transform: translateY(-3px);
    border-color: #bcdcf0;
    box-shadow: 0 10px 26px rgba(16, 49, 75, .12);
}

/* plan name */
.landing-page.threesixtymonitoring .div-plan-name {
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #10314b;
    padding: 18px 16px 4px;
    text-align: center;
}

/* the price band: padded, centred, brand cobalt */
.landing-page.threesixtymonitoring .div-feature-price {
    display: block;
    padding: 14px 16px !important;
    margin: 0 0 8px;
    font-size: 20px !important;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.01em;
    background-color: #1B77C9 !important;
    color: #fff !important;
}

/* feature rows, readable and evenly separated */
.landing-page.threesixtymonitoring .div-feature-values ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}
.landing-page.threesixtymonitoring .div-feature-values ul li {
    padding: 11px 14px;
    font-size: 14px;
    color: #44566b;
    text-align: center;
    border-bottom: 1px solid #eef4f9;
}
.landing-page.threesixtymonitoring .div-feature-values ul li:last-child {
    border-bottom: 0;
}

/* the left label column reads as labels, not as a card */
.landing-page.threesixtymonitoring .div-feature-labels {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.landing-page.threesixtymonitoring .div-feature-labels ul li {
    padding: 11px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #10314b;
    text-align: left;
    border-bottom: 1px solid transparent;
}

/* order button sits at the foot of every card, same height, full width */
.landing-page.threesixtymonitoring .div-feature-order {
    padding: 16px 14px 18px;
    margin-top: auto;
}
.landing-page.threesixtymonitoring .div-feature-order .btn {
    display: block;
    width: 100%;
    padding: 11px 16px;
}

@media (max-width: 991px) {
    .landing-page.threesixtymonitoring .div-pricing-container { gap: 14px; }
    .landing-page.threesixtymonitoring .div-feature-values { min-width: 240px; }
}

/* Switching .div-pricing-container to flex dropped the original percentage
   widths, leaving 167px cards. Let the plan cards share the remaining space
   evenly and give the label column only what it needs. */
.landing-page.threesixtymonitoring .div-feature-labels {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
    max-width: 220px;
}
.landing-page.threesixtymonitoring .div-feature-values {
    flex: 1 1 0;
    min-width: 190px;
    width: auto;
    max-width: none;
}

/* Cards clip at 203px because they carry overflow:hidden for the rounded price
   band. Let long values wrap instead of being cut off. */
.landing-page.threesixtymonitoring .div-feature-values,
.landing-page.threesixtymonitoring .div-feature-values ul li,
.landing-page.threesixtymonitoring .div-feature-price,
.landing-page.threesixtymonitoring .div-plan-name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
}
.landing-page.threesixtymonitoring .div-feature-price {
    white-space: nowrap;
    font-size: 18px !important;
}
@media (max-width: 1199px) {
    .landing-page.threesixtymonitoring .div-feature-price { font-size: 16px !important; }
}

/* ============================================================
   "Lost revenue per year" cards, modernised. 2026-08-09.
   Markup is fixed by the vendor: .row-revenue holds four
   .col-6.col-lg-3, each wrapping a .row of five .col-12 in this
   order: percentage, "uptime" label, an "=", the amount, and the
   "per year" label. Targeted by position so the template markup
   stays untouched.
   The amount now renders through {$activeCurrency}, so it reads
   R8,750 in rand and $500 if a visitor switches to dollars.
   ============================================================ */

.landing-page.threesixtymonitoring .row-revenue {
    margin-top: 26px;
    row-gap: 16px;
}
.landing-page.threesixtymonitoring .row-revenue > [class*="col-"] > .row {
    margin: 0;
    height: 100%;
    background: #fff;
    border: 1px solid #dfeaf4;
    border-radius: 16px;
    padding: 22px 14px 20px;
    text-align: center;
    align-content: start;
    box-shadow: 0 2px 10px rgba(16, 49, 75, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.landing-page.threesixtymonitoring .row-revenue > [class*="col-"] > .row:hover {
    transform: translateY(-3px);
    border-color: #b9dbf0;
    box-shadow: 0 10px 26px rgba(16, 49, 75, .13);
}

/* 1. the uptime percentage, the thing the eye should land on first */
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(1) {
    font-family: Montserrat, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #1B77C9;
    letter-spacing: -0.02em;
}
/* 2. "uptime" */
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(2) {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #7286a0;
    margin-top: 2px;
}
/* 3. the bare "=" reads as a typo in a card, so it becomes a divider rule */
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(3) {
    font-size: 0;
    line-height: 0;
    height: 1px;
    background: #e7eff7;
    margin: 16px auto 14px;
    max-width: 54px;
    padding: 0;
}
/* 4. the money */
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(4) {
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: #10314b;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
/* 5. "per year" */
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(5) {
    font-size: 12px;
    font-weight: 500;
    color: #7286a0;
    margin-top: 4px;
}

@media (max-width: 575px) {
    .landing-page.threesixtymonitoring .row-revenue > [class*="col-"] > .row { padding: 18px 10px 16px; }
    .landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(1) { font-size: 25px; }
    .landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(4) { font-size: 20px; }
}

/* The vendor rules for these cards are more specific than the block above, so
   the card background came through purple (#AC86DA) and the type at 40px.
   Stated explicitly rather than left to specificity luck. Measured, not guessed. */
.landing-page.threesixtymonitoring .row-revenue > [class*="col-"] {
    display: flex;
}
.landing-page.threesixtymonitoring .row-revenue > [class*="col-"] > .row {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    width: 100%;
}
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(1) {
    font-size: 30px !important;
    color: #1B77C9 !important;
}
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(4) {
    font-size: 24px !important;
    color: #10314b !important;
}
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(2),
.landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(5) {
    font-size: 12px !important;
    color: #6c8199 !important;
}
@media (max-width: 575px) {
    .landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(1) { font-size: 25px !important; }
    .landing-page.threesixtymonitoring .row-revenue .col-12:nth-child(4) { font-size: 20px !important; }
}