/* ==========================================================================
   Northlight for WHMCS — design layer
   --------------------------------------------------------------------------
   Everything is scoped under html.nl-on. That class is added by the addon
   module only while the license is valid, which is what makes the licence
   kill-switch work: without the class the client area renders exactly as the
   parent Twenty-One theme, with no broken layout and no visible error.

   The token values below are defaults. The addon module overwrites them with
   inline custom properties on <html> from the Brand tab, so an administrator
   never edits this file.
   ========================================================================== */

html.nl-on{
  --nl-accent:#2f6df6;
  --nl-accent-ink:#ffffff;
  --nl-radius:12px;
  --nl-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --nl-bg:#ffffff;
  --nl-bg-soft:#f6f7f9;
  --nl-ink:#0e1116;
  --nl-ink-soft:#5b6472;
  --nl-line:#e4e7ec;
  --nl-card:#ffffff;
  --nl-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12);
}

/* Dark mode is opt-in per install. The module adds html.nl-dark-auto when the
   Brand tab has dark mode enabled; without it the light palette always wins. */
@media (prefers-color-scheme: dark){
  html.nl-on.nl-dark-auto{
    /* Tells the browser to render everything it draws itself — form controls,
       scrollbars, autofill, date pickers — in dark. Without this the UA paints
       inputs and selects white no matter what the author stylesheet says on
       some mobile browsers. */
    color-scheme:dark;

    --nl-bg:#0d1017;
    --nl-bg-soft:#141922;
    --nl-ink:#eef1f6;
    --nl-ink-soft:#9aa4b2;
    --nl-line:#232a36;
    --nl-card:#141922;
    --nl-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

html.nl-on body{
  font-family:var(--nl-font);
  background:var(--nl-bg);
  color:var(--nl-ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
html.nl-on a{color:inherit}
html.nl-on img{max-width:100%}

/* --------------------------------------------------------------------------
   Parent-theme surfaces
   Twenty-One's own header, footer and inner pages are restyled with the same
   tokens so the whole client area matches, without overriding its templates.
   Selector list is deliberately broad; harmless where a selector is absent.
   -------------------------------------------------------------------------- */
html.nl-on #header,
html.nl-on .navbar-default,
html.nl-on #main-menu{
  background:var(--nl-bg) !important;
  border:0;
  border-bottom:1px solid var(--nl-line);
  box-shadow:none;
}
html.nl-on #main-menu .navbar-nav > li > a{
  color:var(--nl-ink-soft);
  font-weight:500;
}
html.nl-on #main-menu .navbar-nav > li > a:hover,
html.nl-on #main-menu .navbar-nav > .active > a{
  color:var(--nl-ink);
  background:transparent;
}
html.nl-on #footer{
  background:var(--nl-bg);
  border-top:1px solid var(--nl-line);
  color:var(--nl-ink-soft);
}
/* --------------------------------------------------------------------------
   Surfaces — generated, not written by hand.

   Five stylesheets ship with a WHMCS install and paint surfaces this theme
   does not control: the parent theme's theme.css, all.css and store.css, and
   the Standard Cart order form's own style.css and all.css. Between them they
   contain 203 rules that set a LIGHT background and NO text colour. On a dark
   page each of those keeps its light background while the text above it turns
   light, and the result is unreadable.

   Every one is answered below, using the original selectors so specificity is
   guaranteed. The list is produced by tools/contrast-test/analyse-theme-css.py
   — regenerate it against a new WHMCS release rather than editing by hand. The
   first attempt at this section was hand-copied and silently dropped
   .primary-bg-color, which is the box behind "Additional Information".

   Two rules govern everything here:
     1. Any selector that sets a background sets a colour from the same tokens.
     2. Both are written in tokens, so they are correct in light mode too —
        applying them only in dark is what leaves a page half converted.

   On load order: the theme's custom.css is loaded last by includes/head.tpl,
   but the order form loads its own stylesheet afterwards from common.tpl. That
   makes order unreliable, so these rules win on specificity and !important
   instead — each is an original selector prefixed with html.nl-on, which
   outranks it, cart id selectors included.
   -------------------------------------------------------------------------- */

/* Card-level surfaces — 35 selectors, every one of them a rule in
   Twenty-One or the Standard Cart that paints white with no text colour. */
html.nl-on #order-standard_cart .account-select-container div.account.active,
html.nl-on #order-standard_cart .mc-promo,
html.nl-on #order-standard_cart .products .product,
html.nl-on #order-standard_cart .view-cart-items .item,
html.nl-on #order-standard_cart .view-cart-promotion-code,
html.nl-on .bg-white,
html.nl-on .card,
html.nl-on .client-home-cards .card-header,
html.nl-on .featured-tld,
html.nl-on .home-domain-search .input-group-wrapper,
html.nl-on .img-thumbnail,
html.nl-on .list-group-item,
html.nl-on .mc-promo-login,
html.nl-on .mc-promo-manage,
html.nl-on .md-editor > .btn-toolbar,
html.nl-on .md-editor > .md-preview,
html.nl-on .md-editor.md-fullscreen-mode,
html.nl-on .md-editor>.md-preview,
html.nl-on .md-editor>textarea:focus,
html.nl-on .md-preview table,
html.nl-on .modal-content,
html.nl-on .popover,
html.nl-on .promo-banner,
html.nl-on .promo-container,
html.nl-on .responsive-tabs-sm,
html.nl-on .responsive-tabs-sm .nav-item a.active,
html.nl-on .responsive-tabs-sm-connector .channel,
html.nl-on .store-order-container .store-domain-tabs li.active a,
html.nl-on .table td,
html.nl-on .table th,
html.nl-on .table-list > tbody > tr > td,
html.nl-on .upgrade .products .product,
html.nl-on .wp-toolkit,
html.nl-on div.product-details-tab-container,
html.nl-on header.header{
  background-color:var(--nl-card) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}

/* Recessed surfaces — 72 selectors: headings, footers, alternating
   rows, breadcrumbs. Light but not white in the original. */
html.nl-on #order-standard_cart .account-select-container div.account,
html.nl-on #order-standard_cart .apply-credit-container,
html.nl-on #order-standard_cart .cc-input-container,
html.nl-on #order-standard_cart .domain-selection-options .option,
html.nl-on #order-standard_cart .domain-selection-options .option-selected,
html.nl-on #order-standard_cart .field[disabled],
html.nl-on #order-standard_cart .field[readonly],
html.nl-on #order-standard_cart .form-control[disabled],
html.nl-on #order-standard_cart .form-control[readonly],
html.nl-on #order-standard_cart .mc-promo .body,
html.nl-on #order-standard_cart .panel-addon .panel-price,
html.nl-on #order-standard_cart .product-info,
html.nl-on #order-standard_cart .products .product header,
html.nl-on #order-standard_cart .summary-container,
html.nl-on #order-standard_cart .view-cart-gateway-checkout,
html.nl-on #order-standard_cart .view-cart-items .item:nth-child(even),
html.nl-on #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
html.nl-on #order-standard_cart .view-cart-tabs .tab-content,
html.nl-on #registration .field[disabled],
html.nl-on #registration .field[readonly],
html.nl-on #registration .form-control[disabled],
html.nl-on #registration .form-control[readonly],
html.nl-on .announcements .announcement article,
html.nl-on .bg-light,
html.nl-on .breadcrumb,
html.nl-on .continue-container,
html.nl-on .custom-file-input:disabled ~ .custom-file-label,
html.nl-on .custom-file-input[disabled] ~ .custom-file-label,
html.nl-on .dataTables_wrapper table.table-list thead th.sorting_asc,
html.nl-on .dataTables_wrapper table.table-list thead th.sorting_desc,
html.nl-on .domain-pricing .tld-pricing-header .col-sm-2,
html.nl-on .domain-pricing .tld-pricing-header .col-sm-4,
html.nl-on .domain-pricing .tld-pricing-header .col-xs-2,
html.nl-on .domain-pricing .tld-pricing-header .col-xs-4,
html.nl-on .domain-pricing .tld-pricing-header div:nth-child(odd),
html.nl-on .domain-renewals,
html.nl-on .domain-renewals .domain-renewal:nth-child(even),
html.nl-on .form-control:disabled,
html.nl-on .form-control[readonly],
html.nl-on .invite-box,
html.nl-on .invoice-summary-table td.total-row,
html.nl-on .jumbotron,
html.nl-on .master-breadcrumb,
html.nl-on .md-editor .md-footer,
html.nl-on .md-editor>.md-header,
html.nl-on .md-editor>textarea,
html.nl-on .md-preview table > thead > tr > th,
html.nl-on .modal .modal-header,
html.nl-on .popover-header,
html.nl-on .primary-bg-color,
html.nl-on .progress,
html.nl-on .sitebuilder-upgrade-container .promo-wrapper,
html.nl-on .spotlight-tlds,
html.nl-on .store-order-container .store-domain-tabs li a,
html.nl-on .suggested-domains .domain-lookup-suggestions-loader,
html.nl-on .table-dark.table-striped tbody tr:nth-of-type(odd),
html.nl-on .ticketfeedbackstaffcont,
html.nl-on .tiles .tile,
html.nl-on .toast,
html.nl-on .upgrade .product-to-be-upgraded,
html.nl-on .view-ticket .attachment-list li figure,
html.nl-on .weebly-upgrade-container .promo-wrapper,
html.nl-on .wp-toolkit .cart-items .item:nth-child(odd),
html.nl-on .wp-toolkit .faqs .border-line,
html.nl-on .wp-toolkit .service-selector .divider,
html.nl-on a.bg-light:focus,
html.nl-on button.bg-light:focus,
html.nl-on div.credit-card,
html.nl-on div.dtr-modal div.dtr-modal-close,
html.nl-on div.dtr-modal div.dtr-modal-display,
html.nl-on div.product-details div.product-icon,
html.nl-on tr.masspay-total td{
  background-color:var(--nl-bg-soft) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}

/* Branded and semantic tints — 35 selectors. These are meant to
   stay bright (sale badges, highlights, validation states), so the background
   is left alone and only the text is pinned dark enough to read on it. */
html.nl-on .domain-checker-container,
html.nl-on .domain-checker-container .input-group-box,
html.nl-on .domain-pricing .tld-row.highlighted,
html.nl-on .mark,
html.nl-on .markdown-content table,
html.nl-on .markdown-content table > thead > tr > th,
html.nl-on .md-editor > textarea.markdown-editor,
html.nl-on .table-danger,
html.nl-on .table-danger > td,
html.nl-on .table-danger > th,
html.nl-on .table-info,
html.nl-on .table-info > td,
html.nl-on .table-info > th,
html.nl-on .table-light,
html.nl-on .table-light > td,
html.nl-on .table-light > th,
html.nl-on .table-primary,
html.nl-on .table-primary > td,
html.nl-on .table-primary > th,
html.nl-on .table-secondary,
html.nl-on .table-secondary > td,
html.nl-on .table-secondary > th,
html.nl-on .table-success,
html.nl-on .table-success > td,
html.nl-on .table-success > th,
html.nl-on .table-warning,
html.nl-on .table-warning > td,
html.nl-on .table-warning > th,
html.nl-on .tld-sale-group-sale,
html.nl-on .wp-toolkit .body-intro,
html.nl-on .wp-toolkit .hero-image,
html.nl-on form[data-role="json-form"] .has-error input.form-control,
html.nl-on form[data-role="json-form"] .has-error select.form-control,
html.nl-on form[data-role="json-form"] .has-error textarea.form-control,
html.nl-on mark{
  color:#14202b !important;
}

/* --------------------------------------------------------------------------
   Fixed text colours — the mirror image of the problem above.

   These rules pin a dark colour and set no background, so they read fine on
   the light surface the original theme assumed and fail on the dark one we
   put behind them. The cart sets its form labels to #666, which measures
   3.07:1 on our dark card. They are also more specific than the surface rules
   above, so recolouring the container is not enough — each needs answering.

   Reported by the second half of analyse-theme-css.py.
   -------------------------------------------------------------------------- */
html.nl-on #order-standard_cart label,
html.nl-on #registration label,
html.nl-on #order-standard_cart .panel-addon .panel-body label,
html.nl-on #order-standard_cart .order-summary .recurring-charges,
html.nl-on #order-standard_cart p.domain-renewal-desc,
html.nl-on #order-standard_cart .cc-input-container .existing-cc-grid,
html.nl-on .field-help-text,
html.nl-on .blockquote-footer,
html.nl-on .breadcrumb-item.active{
  color:var(--nl-ink-soft) !important;
}

html.nl-on #order-standard_cart .products .product header span,
html.nl-on #order-standard_cart .btn-remove-from-cart,
html.nl-on #order-standard_cart .sub-heading span,
html.nl-on #order-standard_cart .sub-heading-borderless span,
html.nl-on #order-standard_cart .view-cart-items .item-domain{
  color:var(--nl-ink) !important;
}

/* --------------------------------------------------------------------------
   Defence against modules that patch the theme from the outside.

   A module can inject its own <style> into the page head, which lands AFTER
   this file. At equal specificity the later rule wins, so a module carrying
   its own `html.nl-on` overrides silently replaces ours. One on this install
   sets `html.nl-on .table td{background-color:transparent!important}` — the
   exact rule removed in 1.0.4, because a transparent cell lets a light
   wrapper show through.

   Adding :root raises these to (0,3,1) so a plain html.nl-on rule at (0,2,1)
   can no longer take them, whatever order it loads in. This is a guard, not a
   licence for an arms race: the real fix is for the module to drop its theme
   overrides, since the theme now covers every surface they did and does it in
   tokens, so it follows the administrator's own brand colours.
   -------------------------------------------------------------------------- */
html.nl-on:root .table,
html.nl-on:root .table th,
html.nl-on:root .table td,
html.nl-on:root .table-responsive{
  background-color:var(--nl-card) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}
html.nl-on:root .table-striped tbody tr:nth-of-type(odd) td{
  background-color:var(--nl-bg-soft) !important;
}

/* Components Bootstrap pairs correctly.

   These set a light background AND a dark colour, so the analysis reports them
   as safe — and they are readable. They still read as bright rectangles
   punched into a dark page, so they follow the palette for consistency. Found
   by scanning the live site rather than the stylesheets. */
html.nl-on .dropdown-menu,
html.nl-on .dropdown-item,
html.nl-on .lb-outerContainer,
html.nl-on .lb-dataContainer{
  background-color:var(--nl-card) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}
html.nl-on .dropdown-item:hover,
html.nl-on .dropdown-item:focus{
  background-color:var(--nl-bg-soft) !important;
  color:var(--nl-ink) !important;
}
html.nl-on .dropdown-divider{border-top-color:var(--nl-line) !important}

/* Bootstrap 3 era classes.

   Twenty-One is Bootstrap 4, which dropped panels and wells, so nothing in the
   analysed stylesheets paints them and they are absent from the generated list
   above. WHMCS templates and third-party modules still emit the markup though,
   and a module may bring its own styling for it. Covering them costs nothing
   and stops a module's white panel appearing on a dark page. */
html.nl-on .panel,
html.nl-on .panel-body,
html.nl-on .well,
html.nl-on .tab-content,
html.nl-on .tab-pane,
html.nl-on .table,
html.nl-on .table-responsive{
  background-color:var(--nl-card) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}
html.nl-on .panel-heading,
html.nl-on .panel-footer{
  background-color:var(--nl-bg-soft) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}

/* Rounded corners and borders on the containers that read as cards. */
html.nl-on .panel,
html.nl-on .card,
html.nl-on .well,
html.nl-on .list-group,
html.nl-on .modal-content,
html.nl-on .table-responsive{
  border:1px solid var(--nl-line);
  border-radius:calc(var(--nl-radius) + 2px);
  box-shadow:none;
}

/* Form controls. Twenty-One leaves these to Bootstrap, which paints them
   white; color-scheme handles what the browser draws itself. */
html.nl-on .form-control,
html.nl-on .custom-select,
html.nl-on .input-group-text,
html.nl-on .custom-file-label,
html.nl-on select,
html.nl-on textarea,
html.nl-on input[type="text"],
html.nl-on input[type="email"],
html.nl-on input[type="password"],
html.nl-on input[type="number"],
html.nl-on input[type="search"],
html.nl-on input[type="tel"],
html.nl-on input[type="url"]{
  background-color:var(--nl-card) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}
html.nl-on .form-control::placeholder{color:var(--nl-ink-soft)}

/* Neutral buttons: white background plus inherited light text hid the label. */
html.nl-on .btn-default,
html.nl-on .btn-secondary,
html.nl-on .btn-light,
html.nl-on .btn-outline-secondary{
  background-color:var(--nl-bg-soft) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}

/* The lined section titles sit on top of a rule with a solid background to
   mask the line behind them, so that background has to follow the page. */
html.nl-on .header-lined,
html.nl-on .header-lined span,
html.nl-on legend,
html.nl-on fieldset{
  background-color:var(--nl-bg) !important;
  color:var(--nl-ink) !important;
}

/* WHMCS order forms ship their own stylesheet, outside the theme, wrapped in
   an id. An id outranks a class, so the cart needs its own pass. */
html.nl-on #order-standard_cart,
html.nl-on #order-standard_cart .cart-body,
html.nl-on #order-standard_cart .summary-container,
html.nl-on #order-standard_cart .order-summary,
html.nl-on #order-standard_cart .view-cart-items,
html.nl-on #order-standard_cart .view-cart-items-header,
html.nl-on #order-standard_cart .product-info,
html.nl-on #order-standard_cart .promo-code,
html.nl-on #order-standard_cart .select-account,
html.nl-on #order-standard_cart .account-item,
html.nl-on #order-standard_cart .credit-balance,
html.nl-on #order-standard_cart .checkout-items,
html.nl-on #order-standard_cart .field-container,
html.nl-on #order-standard_cart .panel,
html.nl-on #order-standard_cart .panel-body,
html.nl-on #order-standard_cart .list-group-item,
html.nl-on #order-standard_cart .tab-content{
  background-color:var(--nl-card) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) !important;
}

/* Tabs.

   The active tab is a case where the pairing rule applies to OUR OWN rules,
   not just Twenty-One's. Setting a colour on .nav-tabs .nav-link without a
   background left the active tab holding Twenty-One's white while taking our
   light text — the same failure, arrived at from the other direction. Anything
   that sets one half here must set the other. */
html.nl-on .nav-tabs{border-bottom-color:var(--nl-line)}
html.nl-on .nav-tabs .nav-link{
  background-color:transparent;
  color:var(--nl-ink-soft);
}
html.nl-on .nav-tabs .nav-link.active,
html.nl-on .nav-tabs .nav-item.show .nav-link{
  background-color:var(--nl-card) !important;
  color:var(--nl-ink) !important;
  border-color:var(--nl-line) var(--nl-line) var(--nl-card) !important;
}
html.nl-on hr{border-color:var(--nl-line)}
html.nl-on .text-muted{color:var(--nl-ink-soft) !important}
html.nl-on .close{color:var(--nl-ink);text-shadow:none;opacity:.6}

html.nl-on .btn{
  border-radius:var(--nl-radius);
  font-weight:600;
  border:1px solid transparent;
}
html.nl-on .btn-primary{
  background:var(--nl-accent);
  border-color:var(--nl-accent);
  color:var(--nl-accent-ink);
}
html.nl-on .btn-primary:hover,
html.nl-on .btn-primary:focus{
  background:var(--nl-accent);
  border-color:var(--nl-accent);
  filter:brightness(.93);
}
html.nl-on .form-control{
  border-radius:var(--nl-radius);
  border-color:var(--nl-line);
  box-shadow:none;
}

/* --------------------------------------------------------------------------
   Northlight homepage
   -------------------------------------------------------------------------- */
.nl-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

.nl-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--nl-radius);
  font-weight:600;font-size:14.5px;line-height:1;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.nl-btn:hover{text-decoration:none}
.nl-btn:active{transform:translateY(1px)}
.nl-btn--primary{background:var(--nl-accent);color:var(--nl-accent-ink)}
.nl-btn--primary:hover{filter:brightness(.93);color:var(--nl-accent-ink)}
.nl-btn--ghost{background:transparent;color:var(--nl-ink);border-color:var(--nl-line)}
.nl-btn--ghost:hover{background:var(--nl-bg-soft);color:var(--nl-ink)}
.nl-btn--lg{padding:14px 26px;font-size:15.5px}
.nl-btn--block{width:100%;justify-content:center}

/* hero */
.nl-hero{padding:96px 0 72px;text-align:center}
.nl-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  border:1px solid var(--nl-line);background:var(--nl-bg-soft);
  font-size:13px;color:var(--nl-ink-soft);font-weight:500;margin-bottom:26px;
}
.nl-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--nl-accent);display:block}
.nl-hero h1{
  font-size:clamp(34px,5.2vw,54px);line-height:1.08;
  letter-spacing:-.035em;font-weight:700;margin:0 0 20px;
  max-width:20ch;margin-left:auto;margin-right:auto;
}
.nl-hero .nl-lede{font-size:18px;color:var(--nl-ink-soft);max-width:56ch;margin:0 auto 34px}
.nl-hero .nl-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.nl-search{
  display:flex;gap:8px;max-width:560px;margin:38px auto 0;
  padding:8px;border:1px solid var(--nl-line);border-radius:calc(var(--nl-radius) + 4px);
  background:var(--nl-card);box-shadow:var(--nl-shadow);
}
.nl-search input{
  flex:1;border:0;outline:0;background:transparent;color:var(--nl-ink);
  font:inherit;font-size:15px;padding:0 12px;height:auto;box-shadow:none;
}
.nl-search input::placeholder{color:var(--nl-ink-soft)}

/* trust strip */
.nl-trust{border-top:1px solid var(--nl-line);border-bottom:1px solid var(--nl-line);background:var(--nl-bg-soft)}
.nl-trust .nl-row{
  display:flex;gap:44px;justify-content:center;flex-wrap:wrap;
  padding:22px 0;font-size:13.5px;color:var(--nl-ink-soft);font-weight:500;
}
.nl-trust span{display:flex;align-items:center;gap:8px}

/* section shell */
.nl-block{padding:84px 0}
.nl-block--soft{background:var(--nl-bg-soft);border-top:1px solid var(--nl-line);border-bottom:1px solid var(--nl-line)}
.nl-head{text-align:center;max-width:60ch;margin:0 auto 48px}
.nl-head h2{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.03em;margin:0 0 12px;font-weight:700}
.nl-head p{color:var(--nl-ink-soft);font-size:16.5px;margin:0}

/* product cards */
.nl-cards{display:grid;gap:20px}
.nl-cards--2{grid-template-columns:repeat(2,1fr)}
.nl-cards--3{grid-template-columns:repeat(3,1fr)}
.nl-cards--4{grid-template-columns:repeat(4,1fr)}
.nl-card{
  background:var(--nl-card);border:1px solid var(--nl-line);
  border-radius:calc(var(--nl-radius) + 4px);padding:28px;
  display:flex;flex-direction:column;position:relative;
  transition:border-color .15s ease, transform .15s ease;
}
.nl-card:hover{border-color:var(--nl-accent);transform:translateY(-2px)}
.nl-card--badged{border-color:var(--nl-accent);box-shadow:var(--nl-shadow)}
.nl-badge{
  position:absolute;top:-11px;left:28px;
  background:var(--nl-accent);color:var(--nl-accent-ink);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.nl-card h3{margin:0 0 6px;font-size:18px;letter-spacing:-.02em}
.nl-card .nl-desc{color:var(--nl-ink-soft);font-size:14.5px;margin:0 0 22px;min-height:44px}
.nl-price{display:flex;align-items:baseline;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.nl-price .nl-amount{font-size:34px;font-weight:700;letter-spacing:-.03em}
.nl-price .nl-cycle{color:var(--nl-ink-soft);font-size:14px}
.nl-feats{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.nl-feats li{display:flex;gap:10px;font-size:14.5px;color:var(--nl-ink-soft);align-items:flex-start}
.nl-feats li::before{
  content:"";flex:none;width:15px;height:15px;margin-top:3px;background:var(--nl-accent);
  -webkit-mask:var(--nl-tick) center/contain no-repeat;
  mask:var(--nl-tick) center/contain no-repeat;
}
html.nl-on{--nl-tick:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>")}
.nl-card .nl-btn{margin-top:auto}

/* feature grid */
.nl-features{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.nl-feature .nl-ico{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:var(--nl-bg-soft);color:var(--nl-accent);margin-bottom:16px;
}
.nl-feature h4{margin:0 0 6px;font-size:15.5px;letter-spacing:-.01em}
.nl-feature p{margin:0;color:var(--nl-ink-soft);font-size:14.5px}

/* faq */
.nl-faq{max-width:760px;margin:0 auto;border-top:1px solid var(--nl-line)}
.nl-faq details{border-bottom:1px solid var(--nl-line)}
.nl-faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:600;font-size:16px;
}
.nl-faq summary::-webkit-details-marker{display:none}
.nl-faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:400;color:var(--nl-ink-soft);
}
.nl-faq details[open] summary::after{content:"\2013"}
.nl-faq .nl-answer{padding:0 40px 22px 0;color:var(--nl-ink-soft);font-size:15px}

/* cta band */
.nl-ctaband{
  background:var(--nl-bg-soft);border:1px solid var(--nl-line);
  border-radius:calc(var(--nl-radius) + 8px);padding:56px 40px;text-align:center;
}
.nl-ctaband h2{margin:0 0 12px;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.03em}
.nl-ctaband p{margin:0 auto 28px;color:var(--nl-ink-soft);max-width:52ch}

/* custom html block */
.nl-html{max-width:860px;margin:0 auto}

@media (max-width:900px){
  .nl-cards--2,.nl-cards--3,.nl-cards--4{grid-template-columns:1fr}
  .nl-features{grid-template-columns:repeat(2,1fr)}
  .nl-hero{padding:64px 0 48px}
  .nl-block{padding:60px 0}
  .nl-trust .nl-row{gap:20px}
}
@media (max-width:560px){
  .nl-features{grid-template-columns:1fr}
}