/*!
 * TPC Hosting — custom.css
 * Theme-level additions that cannot be expressed as Lagom2 vars.
 * Loaded automatically by templates/lagom2/includes/head.tpl after
 * the compiled theme vars (minified.css), so it can safely reference
 * custom properties and override inherited styles.
 */

/* ── Global token overrides ─────────────────────────────────────────
 * Tighter line-height across the site, smaller/bolder banner caption,
 * and a body-text section subtitle (the CMS extension defaults it
 * to xxlg/light). One :root block, no per-element line-height fixes.
 */
:root {
  --line-height-base: 1.5;
  --line-height-lg: 1.55;
  --line-height-md: 1.5;

  --banner-caption-font-size: 12px;
  --banner-caption-line-height: 16px;
  --banner-caption-font-weight: 700;

  --section-subtitle-font-size: var(--font-size-h6);
  --section-subtitle-line-height: var(--line-height-h6);
  --section-subtitle-font-weight: var(--font-weight-base);
}

/* Banner caption color: lagom-cms.css overrides this on navy/green
 * banners with equal-specificity rules at a later source position.
 * Bumping with `body` is enough to win the cascade. */
body .site-banner.banner.banner-secondary .banner-caption,
body .site-banner.banner.banner-primary .banner-caption,
body .site-banner.banner.banner-secondary.banner-cms .banner-caption,
body .site-banner.banner.banner-primary.banner-cms .banner-caption {
  color: var(--brand-primary-lighter);
}

/* ── Headings: use Roboto Slab site-wide ─────────────────────────── */
h1, h2, h3, h4, h5, h6,
.banner-title, .lc-banner-title,
.section-title, .lc-section-title,
.section-caption, .lc-section-caption,
.package-title,
.feature-title, .lc-feature-title,
.feature-lg-title,
.feature-sm-title,
.faq-item-top,
.list-group-cms-item-top,
.section-cta-title {
  font-family: var(--font-family-headings);
}

/* ── Section & banner captions: uppercase with tracking ──────────── */
.section-caption, .lc-section-caption,
.banner-caption, .lc-banner-caption {
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ── Section subtitle/desc body copy ─────────────────────────────────
 * lagom-cms.css ships these at 24px/300 (xxlg/light) and a medium
 * gray. Use lg body size and the dark heading color so the lead
 * paragraph reads as primary copy, not as a subtitle. */
body .site-section .section-desc,
body .site-section .section-subtitle {
  font-size: var(--font-size-lg) !important;
  line-height: var(--line-height-lg) !important;
  font-weight: var(--font-weight-base) !important;
  color: var(--text-heading-color) !important;
}
/* On dark/navy sections the dark heading color is unreadable — force
 * white for subtitle/desc inside section-secondary. */
body .site-section.section-secondary .section-desc,
body .site-section.section-secondary .section-subtitle {
  color: hsla(0, 0%, 100%, 0.9) !important;
}
body .site-section.section-secondary .section-desc strong,
body .site-section.section-secondary .section-desc b {
  color: #ffffff !important;
}
body .site-section .section-desc strong,
body .site-section .section-desc b {
  font-weight: var(--font-weight-bold) !important;
}

/* feature-icon-top-center centers the *text*, not the icon — fix it. */
.feature.feature-icon-top-center .feature-icon {
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero banner image: rounded corners ──────────────────────────── */
.site-banner.banner.banner-type-1 .banner-graphic,
.site-banner.banner.banner-type-2 .banner-graphic {
  border-radius: 20px;
  overflow: hidden;
}
.site-banner.banner.banner-type-1 .banner-graphic img,
.site-banner.banner.banner-type-2 .banner-graphic img {
  border-radius: 20px;
  display: block;
}

/* ── TPC Hero trust strip (custom tpc-hero section type) ─────────── */
.site-banner .tpc-hero-trust-strip {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 14px;
}
.site-banner .tpc-hero-trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: hsla(0, 0%, 100%, 0.9);
}
.site-banner .tpc-hero-trust-strip li::before {
  content: none !important;
}
.site-banner .tpc-hero-trust-strip li strong {
  color: #fff;
  font-weight: 700;
}
.site-banner .tpc-hero-trust-strip li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--brand-primary-lighter);
}

/* ── Section background overrides (Hybrid G palette) ──────────────────
 * Lagom2 alternates section backgrounds based on position; we lock
 * them to the mockup palette via section custom_class so the page
 * stays deterministic regardless of section reordering.
 *   navy   #114B5F   hero, trusted strip, final CTA  (theme=secondary)
 *   cream  #FEFEFC   why-tpc, pricing, reviews        (default theme)
 *   sage   #EAF2F8   built-for, migration             (.section-migration)
 *   paper  #ECEEE8   performance proof, FAQ           (.section-perf-proof)
 *   green  #009245   money-back band                  (.section-money-back)
 *
 * Dark-mode twins (same role, dark surface):
 *   charcoal #161616 (cream twin), graphite #202020 (paper twin),
 *   moss #202020 (sage twin), deeper navy #0D1B2A (navy twin — handled
 *   by Lagom2's --dark-mode-brand-secondary).
 */
body .site-section.section-perf-proof {
  background-color: #ECEEE8 !important;
}
body .site-section.section-migration {
  background-color: #EAF2F8 !important;
}

/* ── Dark mode (.lagom-dark-mode on <html>) ─────────────────────────
 * Lagom2's stock dark-mode-gray-* values are slightly off our spec
 * (cream twin too cool, sage twin too teal). Override them so any
 * default Lagom2 component using these vars also gets the right
 * Hybrid G dark twins. */
.lagom-dark-mode {
  --dark-mode-gray-lighter-4: #202020; /* surface/card bg */
  --dark-mode-gray-gradient-end: #202020; /* gray section bg (surface tone) */
}
/* Per-section dark backgrounds — keyed off the same custom_class hooks
 * as the light overrides. Money-back stays green (already !important). */
.lagom-dark-mode body .site-section.section-default {
  background-color: #161616 !important;
}
.lagom-dark-mode body .site-section.section-gray {
  background-color: #202020 !important;
}
.lagom-dark-mode body .site-section.section-perf-proof {
  background-color: #202020 !important;
}
.lagom-dark-mode body .site-section.section-migration {
  background-color: #202020 !important;
}
.lagom-dark-mode body .site-section.section-faq.section-default {
  background-color: #202020 !important;
}

/* ── SSL pages — Hybrid G section backgrounds ─────────────────────────
 * Scoped to all five SSL pages via the .site-cms-ssl* wrapper class
 * Lagom2 generates from the page slug:
 *   ssl-certificates                        (overview)
 *   ssl-certificates/domain-validation      (DV)
 *   ssl-certificates/organization-validation (OV)
 *   ssl-certificates/extended-validation-ssl (EV)
 *   ssl-certificates/wildcard-ssl            (Wildcard)
 *
 * Lagom2 ships these section themes as transparent — they inherit the
 * body cream and the page reads as one flat color. We explicitly assign
 * the Hybrid G alternating palette via the existing theme classes so
 * we don't need a custom_class on every section. */
body [class*="site-cms-ssl"] .site-section.section-default {
  background-color: #fefefc !important;
}
body [class*="site-cms-ssl"] .site-section.section-light {
  background-color: #EAF2F8 !important;
}
body [class*="site-cms-ssl"] .site-section.section-faq {
  background-color: #ECEEE8 !important;
}
body [class*="site-cms-ssl"] .site-section.section-primary,
body [class*="site-cms-ssl"] .site-section.section-cta-boxed {
  background-color: #009245 !important;
}
/* SSL CTA boxes — white text on green (overview uses .section-primary,
 * sub-pages use .section-default.section-cta-boxed without primary) */
body [class*="site-cms-ssl"] .site-section.section-primary,
body [class*="site-cms-ssl"] .site-section.section-primary .section-title,
body [class*="site-cms-ssl"] .site-section.section-primary .section-subtitle,
body [class*="site-cms-ssl"] .site-section.section-primary .section-desc,
body [class*="site-cms-ssl"] .site-section.section-primary .section-caption,
body [class*="site-cms-ssl"] .site-section.section-cta-boxed,
body [class*="site-cms-ssl"] .site-section.section-cta-boxed .section-title,
body [class*="site-cms-ssl"] .site-section.section-cta-boxed .section-subtitle,
body [class*="site-cms-ssl"] .site-section.section-cta-boxed .section-desc,
body [class*="site-cms-ssl"] .site-section.section-cta-boxed .section-caption {
  color: #ffffff !important;
}

/* SSL pages — dark mode counterparts */
.lagom-dark-mode body [class*="site-cms-ssl"] .site-section.section-default {
  background-color: #161616 !important;
}
.lagom-dark-mode body [class*="site-cms-ssl"] .site-section.section-light {
  background-color: #202020 !important;
}
.lagom-dark-mode body [class*="site-cms-ssl"] .site-section.section-faq {
  background-color: #202020 !important;
}
.lagom-dark-mode body [class*="site-cms-ssl"] .site-section.section-primary,
.lagom-dark-mode body [class*="site-cms-ssl"] .site-section.section-cta-boxed {
  background-color: #009245 !important;
}
/* Money-back band keeps brand green in both modes (the .section-default
 * dark override above would otherwise win on specificity). */
.lagom-dark-mode body .site-section.section-money-back {
  background-color: #009245 !important;
}
/* Cards on dark sections — pricing packages and TPC review cards both
 * ship with hardcoded white backgrounds. Lift them onto a slightly
 * raised dark surface so the text inside (which Lagom2 already swaps
 * to light) becomes readable. */
.lagom-dark-mode body .package:not(.package-horizontal) {
  background-color: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.lagom-dark-mode body .package:not(.package-horizontal).package-featured {
  border-color: var(--brand-primary, #009245) !important;
}
.lagom-dark-mode body .site-cms-web-hosting .tpc-review-card {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Footer in dark mode: Lagom2's stock value is #121212 near-pure-black,
 * which is colder than our Hybrid G charcoal. Lift it to the charcoal
 * twin so the footer reads as part of the same dark surface family. */
.lagom-dark-mode body .main-footer {
  background-color: #161616 !important;
}
.lagom-dark-mode body .main-footer .footer-top {
  background-color: transparent !important;
}
/* Copyright bar gets its own darker tone so it visually separates
 * from the main footer above (site-wide, both modes). */
body .main-footer .footer-bottom {
  background-color: #ecede8 !important; /* light mode: cool paper */
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 18px;
  padding-bottom: 18px;
}
.lagom-dark-mode body .main-footer .footer-bottom {
  background-color: #0e0f11 !important; /* dark mode: deeper charcoal */
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* Billing cycle dropdown pill stays light/paper in dark mode by default
 * — lift it onto a graphite surface so it reads as part of the dark
 * pricing section rather than a stranded white pill. */
.lagom-dark-mode body .product-billing-switcher {
  background-color: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.lagom-dark-mode body .product-billing-switcher .btn-dropdown,
.lagom-dark-mode body .product-billing-switcher .btn-group .btn {
  background-color: transparent !important;
  color: var(--gray-darker) !important;
}

/* Footer payment gateway icons in dark mode: the stock SVGs ship with
 * full-colour brand artwork (Visa blue, Mastercard orange/red, PayPal
 * blue, etc.) which clashes with the dark footer surface. Desaturate
 * + lift them to a soft light grey so they read as a quiet trust strip
 * rather than a colourful jumble. Hover restores the original colour. */
.lagom-dark-mode body .main-footer .footer-payment-gateway .gateway-icon svg {
  filter: grayscale(1) brightness(1.6) opacity(0.7);
  transition: filter 0.2s ease;
}
.lagom-dark-mode body .main-footer .footer-payment-gateway .gateway-icon:hover svg {
  filter: grayscale(0) brightness(1) opacity(1);
}

/* Money-back "See plans" button: Lagom2 dark mode sets .btn-primary
 * .btn-text color to white because it assumes a dark button. Our
 * override gives the OUTER button green text, but the inner span wins
 * on specificity. Force the inner text green so it stays visible on
 * the white pill in dark mode. */
.lagom-dark-mode body .site-section.section-money-back .btn.btn-primary .btn-text,
.lagom-dark-mode body .site-section.section-money-back .lc-btn.btn-primary .btn-text {
  color: #009245 !important;
}

/* Final CTA "Talk to a human" outline button: Lagom2 dark mode sets
 * the border to graphite which is invisible against the navy section
 * background. Lift it to a translucent white so the button reads as a
 * proper secondary CTA. */
.lagom-dark-mode body .site-section.section-final-cta .btn.btn-default.btn-outline,
.lagom-dark-mode body .site-section.section-final-cta .btn.btn-outline {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}
.lagom-dark-mode body .site-section.section-final-cta .btn.btn-default.btn-outline:hover,
.lagom-dark-mode body .site-section.section-final-cta .btn.btn-outline:hover {
  border-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Trust strip: thin compact band on navy under the hero ───────────
 * Per mockup: just one line of small white text directly on the navy
 * hero band, no white box, no big padding. "30+ countries" highlighted
 * in brand lime via the <strong> tag in the subtitle. */
body .site-section.section-trust-strip {
  padding: 14px 0 18px !important;
  min-height: 0 !important;
  height: auto !important;
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
}
body .site-section.section-trust-strip .container,
body .site-section.section-trust-strip .container-default {
  min-height: 0 !important;
  height: auto !important;
}
body .site-section.section-trust-strip .section-box,
body .site-section.section-trust-strip .section-box.is-boxed {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body .site-section.section-trust-strip .section-content {
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  width: 100% !important;
  max-width: none !important;
}
body .site-section.section-trust-strip .section-subtitle {
  color: hsla(0, 0%, 100%, 0.85) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body .site-section.section-trust-strip .section-subtitle strong {
  color: var(--brand-primary-lighter) !important;
  font-weight: 700;
}

/* ── Money-back band: green bg, white text, photo + 30-day badge ─────
 * Compact padding (56px top/bottom) because this is a lead-in band,
 * not a major section — Lagom2 graphic sections otherwise default to
 * 100px/110px to center text against a tall photo. */
body .site-section.section-money-back {
  background-color: #009245 !important;
  position: relative;
  overflow: visible !important;
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
body .site-section.section-money-back .section-caption {
  color: #ffffff !important;
  opacity: 0.85;
}
body .site-section.section-money-back .section-title,
body .site-section.section-money-back .section-subtitle,
body .site-section.section-money-back .section-desc,
body .site-section.section-money-back .section-desc * {
  color: #ffffff !important;
}
/* CTA button: white pill with green text on the green band */
body .site-section.section-money-back .btn.btn-primary,
body .site-section.section-money-back .lc-btn.btn-primary {
  background-color: #ffffff !important;
  color: #009245 !important;
  border-color: #ffffff !important;
}
body .site-section.section-money-back .btn.btn-primary:hover,
body .site-section.section-money-back .lc-btn.btn-primary:hover {
  background-color: #fefefc !important;
  color: #006b33 !important;
}
/* Photo: rounded corners + soft shadow, badge overflow allowed */
body .site-section.section-money-back .section-graphic-container,
body .site-section.section-money-back .section-graphic {
  position: relative;
  overflow: visible !important;
}
body .site-section.section-money-back .section-graphic img {
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  display: block;
  max-height: 340px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
/* Compact the whole money-back band — strip Lagom2's graphic-section
 * inner padding/margin on .section-content which otherwise centers a
 * tall photo layout we don't need here. */
body .site-section.section-money-back .section-content {
  padding: 0 60px 0 0 !important;
  margin: 0 !important;
}
body .site-section.section-money-back .section-background {
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
body .site-section.section-money-back .section-graphic {
  height: auto !important;
}
/* Lagom2 sets explicit min-height/height on the section's .container
 * to match the section-shape SVG (~677px) for graphic sections. We
 * have a much shorter photo, so let the container shrink to content. */
body .site-section.section-money-back .container,
body .site-section.section-money-back .container-default {
  min-height: 0 !important;
  height: auto !important;
  align-items: center;
}
/* Hide the decorative section-shape blob — we don't need it on the
 * solid green band, and it's the thing that's inflating the layout. */
body .site-section.section-money-back .section-shape {
  display: none !important;
}
/* 30-day badge: large white circle in the top-left corner of the photo */
body .site-section.section-money-back .section-graphic-container::after,
body .site-section.section-money-back .section-graphic::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'><circle cx='65' cy='65' r='62' fill='none' stroke='%23009245' stroke-width='2' stroke-dasharray='3 3'/><text x='65' y='66' text-anchor='middle' fill='%23009245' font-family='Roboto Slab,Georgia,serif' font-size='44' font-weight='800'>30</text><text x='65' y='86' text-anchor='middle' fill='%23009245' font-family='Roboto,sans-serif' font-size='13' font-weight='700' letter-spacing='2'>DAYS</text></svg>");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  z-index: 5;
  pointer-events: none;
}

/* ── Pricing card layout polish ───────────────────────────────────
 * Lagom2 nests package leaves inside box → header → body → content
 * wrappers that have no styling of their own. Flatten with
 * display:contents so we can reorder via flex `order` to get the
 * mockup sequence: title → tagline → price → features → button.
 * Line-height comes from the global --line-height-base override. */
body .package:not(.package-horizontal) {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  overflow: visible !important;
}
body .package:not(.package-horizontal) .package-box,
body .package:not(.package-horizontal) .package-header,
body .package:not(.package-horizontal) .package-body,
body .package:not(.package-horizontal) .package-content {
  display: contents !important;
}
body .package:not(.package-horizontal) .package-title {
  order: 1;
  margin: 0 !important;
  font-size: 22px;
  text-align: center;
}
body .package:not(.package-horizontal) .package-tagline {
  order: 2;
  margin: 0 !important;
  font-size: 14px;
  color: #6D7482;
  text-align: center;
}
body .package:not(.package-horizontal) .package-price {
  order: 3;
  margin: 4px 0 8px !important;
  text-align: center;
  position: relative;
}
/* Big new-price amount */
body .package:not(.package-horizontal) .package-price .price .price-ammount {
  font-size: 34px !important;
  line-height: 1.1 !important;
  font-weight: 800;
  color: var(--text-heading-color);
}
body .package:not(.package-horizontal) .package-price .price .price-ammount sub {
  font-size: 14px;
  font-weight: 600;
}
/* "excluding VAT" microcopy under the cycle */
body .package:not(.package-horizontal) .package-price::after {
  content: "excluding VAT";
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: #8a8f99;
}
/* Monthly / billing cycle: larger so it reads as a label, not a footnote */
body .package:not(.package-horizontal) .package-price .price .price-cycle {
  font-size: 15px !important;
  font-weight: 500;
  color: #4B4F58;
  margin-top: 4px;
  display: block;
}
/* Save badge: brand green instead of pink */
body .package:not(.package-horizontal) .price-discount-save,
body .package:not(.package-horizontal) .label-save {
  background-color: var(--brand-primary-lighter-3, #D6E8F2) !important;
  color: var(--brand-primary-darker, #006B33) !important;
}
body .package:not(.package-horizontal) .package-features {
  order: 4;
  flex: 1 0 auto;
  margin: 4px 0 16px !important;
  list-style: none !important;
  padding: 0 !important;
}
body .package:not(.package-horizontal) .package-features li {
  text-align: left !important;
  padding: 6px 0 !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
}
/* Override the absolute-positioned ::before checkmark — use it as a
 * flex item instead so it sits vertically centered with the text. */
body .package:not(.package-horizontal) .package-features li::before {
  position: static !important;
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Hide the diagonal "Featured" corner label — the MOST POPULAR pill
 * above the card already conveys the same signal, and the corner
 * label was being clipped by the package overflow:hidden we removed
 * to show the pill. */
body .package:not(.package-horizontal) .label-corner {
  display: none !important;
}
body .package:not(.package-horizontal) .package-actions {
  order: 5;
  margin-top: auto !important;
}

/* Equal card heights: stretch the column track and the card. */
body .package-col {
  display: flex !important;
}
body .package-col > .package {
  flex: 1 1 auto;
}

/* Centered "Every plan comes with..." subtitle below the cards */
body .site-section .section-additional-info {
  text-align: center !important;
  margin-top: 24px;
  color: var(--text-heading-color);
}

/* ── Lime accent line between final CTA and footer (mockup spec) ───── */
body .site-section.section-final-cta {
  position: relative;
}
body .site-section.section-final-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #80B726 20%,
    #80B726 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Custom footer overrides (overwrites/footer.tpl) ──────────────────
 * Social icon row, legal strip, and minor spacing tweaks for the TPC
 * footer layout. Everything scoped under .main-footer. */

/* Social icon row: sits below the brand description in footer-company */
body .main-footer .tpc-footer-socials {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
body .main-footer .tpc-footer-socials li {
  margin: 0;
  padding: 0;
}
body .main-footer .tpc-footer-socials li::before {
  content: none !important;
}
body .main-footer .tpc-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EAF2F8;
  color: #114B5F;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
body .main-footer .tpc-footer-socials a:hover {
  background: var(--brand-primary, #009245);
  color: #ffffff;
  transform: translateY(-2px);
}
body .main-footer .tpc-footer-socials svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  min-width: 18px;
}

/* Legal strip: horizontal list of legal links in footer-bottom.
 * `order: 3` + `flex: 1 1 auto` + right-justify places it on row 2
 * to the right of the copyright in the footer-bottom flex layout.
 * (font-size comes from the footer typography block below.) */
body .main-footer .footer-bottom .footer-legal-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  order: 3;
  flex: 1 1 auto;
  justify-content: flex-end;
}
body .main-footer .footer-bottom .footer-legal-links li {
  position: relative;
  padding: 0;
  margin: 0;
}
body .main-footer .footer-bottom .footer-legal-links li::before {
  content: none !important;
}
body .main-footer .footer-bottom .footer-legal-links li + li::after {
  content: "·";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a8f99;
  opacity: 0.6;
}
body .main-footer .footer-bottom .footer-legal-links a {
  color: #6D7482;
  text-decoration: none;
  transition: color 0.2s ease;
}
body .main-footer .footer-bottom .footer-legal-links a:hover {
  color: var(--brand-primary, #009245);
}

/* footer-bottom layout: payment icons row on top, copyright + legal row below.
 * Uses flex-wrap + order so payments take a full row first, then copyright
 * (left) and legal links (right) share the second row. */
body .main-footer .footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
/* Row 1 — payment icons, full width, centered */
body .main-footer .footer-bottom .footer-payment-gateway {
  order: 1;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(109, 116, 130, 0.15);
  margin: 0;
}
/* Row 2 — copyright on the left */
body .main-footer .footer-bottom .footer-copyright {
  order: 2;
  flex: 0 0 auto;
}
/* Hide the redundant currency switcher in footer-bottom — already in navbar */
body .main-footer .footer-bottom .footer-nav.footer-nav-h {
  display: none !important;
}
@media (max-width: 767px) {
  body .main-footer .footer-bottom .footer-legal-links {
    justify-content: flex-start;
    flex: 1 1 100%;
  }
}

/* ── FAQ typography (mockup spec) ──────────────────────────────────
 * Question is the louder element — readers scan questions first, so
 * it gets weight 600 at 16px. Answer is body copy at 14px. Lagom2
 * defaults invert this (question 14px / answer 17px). */
body .faq-item .faq-item-top,
body .faq-item-top.panel-heading {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
body .faq-item .faq-item-bottom,
body .faq-item .faq-item-bottom p,
body .faq-item-bottom .panel-body {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ── Footer typography (mockup spec) ──────────────────────────────
 * Mockup: column titles small uppercase headings (14px / bold /
 * letter-spaced), links 14px regular, footer-bottom 12px. Lagom2
 * ships these at 20px / 17px / 14px which reads as one big body
 * blob with no hierarchy. */
body .main-footer .footer-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 16px !important;
}
body .main-footer .footer-nav a,
body .main-footer .footer-col a.nav-link,
body .main-footer .footer-site-map a {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
body .main-footer .footer-company-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
body .main-footer .footer-bottom .footer-copyright,
body .main-footer .footer-bottom .footer-legal-links {
  font-size: 12px !important;
}


/* TPC plain-answer section — see brand/lagom-overrides/sections/tpc-plain-answer */
body .section-tpc-plain-answer {
  padding-top: 32px;
  padding-bottom: 32px;
}
body .section-tpc-plain-answer .tpc-plain-answer-box {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 28px;
  border-left: 3px solid #009245;
  background: #ECEEE8;
  border-radius: 4px;
  font-size: 17px;
  line-height: 1.6;
  color: #2a2a2a;
}
body .section-tpc-plain-answer .tpc-plain-answer-caption {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #009245;
  margin-bottom: 8px;
}
body .section-tpc-plain-answer .tpc-plain-answer-title {
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #114B5F;
  margin: 0 0 10px 0;
}
body .section-tpc-plain-answer .tpc-plain-answer-body {
  color: #2a2a2a;
}
body .section-tpc-plain-answer .tpc-plain-answer-body p {
  margin: 0;
}
body .section-tpc-plain-answer .tpc-plain-answer-body strong {
  color: #114B5F;
}

/* Dark mode twin (Hybrid G deep moss + warm off-white) */
html.lagom-dark-mode body .section-tpc-plain-answer .tpc-plain-answer-box {
  background: #202020;
  border-left-color: #009245;
  color: #e8e6e0;
}
html.lagom-dark-mode body .section-tpc-plain-answer .tpc-plain-answer-title {
  color: #e8e6e0;
}
html.lagom-dark-mode body .section-tpc-plain-answer .tpc-plain-answer-body {
  color: #e8e6e0;
}
html.lagom-dark-mode body .section-tpc-plain-answer .tpc-plain-answer-body strong {
  color: #9fd8b4;
}


/* TPC vps-pricing card polish — see scripts/deploy_vps_card_css.py */
/* ════════════════════════════════════════════════════════════════
   TPC Hosting — /vps-hosting pricing cards
   Scoped to .vps-pricing (section custom_class set on section 909).
   Mirrors the /web-hosting brand polish, but tuned for 5 narrower
   columns instead of 3 — smaller padding, 13px text, MOST POPULAR
   ribbon, green checkmark bullets, featured ribbon + lift.
   ════════════════════════════════════════════════════════════════ */

/* Rounded card, soft shadow, white bg — override the dark Lagom default */
body .vps-pricing .package {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #eef0ec !important;
  padding: 28px 18px 22px !important;
  box-shadow: 0 4px 12px rgba(17, 75, 95, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  height: 100% !important;
}
body .vps-pricing .package:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(17, 75, 95, 0.10) !important;
}

/* Title — slab serif, navy, compact */
body .vps-pricing .package-title {
  font-family: "Roboto Slab", Georgia, serif !important;
  color: #114B5F !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  text-align: center;
}

/* Tagline under title — small grey microcopy */
body .vps-pricing .package-tagline {
  color: #6D7482 !important;
  font-size: 12px !important;
  text-align: center;
  margin: 0 0 10px !important;
  min-height: 32px;
}

/* Price — big, navy, centered */
body .vps-pricing .package-price .price .price-ammount {
  color: #114B5F !important;
  font-size: 30px !important;
  font-weight: 800 !important;
}

/* Features list — checkmarks, grey dividers, left-aligned */
body .vps-pricing .package-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 18px !important;
}
body .vps-pricing .package-features li {
  padding: 7px 0 7px 22px !important;
  position: relative !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #353535 !important;
  border-bottom: 1px solid #f0f3ee !important;
  text-align: left !important;
  display: block !important;
}
body .vps-pricing .package-features li:last-child {
  border-bottom: none !important;
}
body .vps-pricing .package-features li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 7px !important;
  color: #009245 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  flex: none !important;
}

/* Featured plan (middle card) — green border, ribbon, subtle lift */
body .vps-pricing .package.package-featured {
  border: 2px solid #009245 !important;
  box-shadow: 0 18px 40px rgba(0, 146, 69, 0.18) !important;
  position: relative !important;
}
body .vps-pricing .package.package-featured::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #009245;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
}
body .vps-pricing .package.package-featured .package-title {
  color: #009245 !important;
}
body .vps-pricing .package-col:has(.package-featured) .package {
  transform: translateY(-8px);
}
body .vps-pricing .package-col:has(.package-featured) .package:hover {
  transform: translateY(-12px);
}

/* Order button — brand green, full-width */
body .vps-pricing .package-actions .btn {
  background: #009245 !important;
  border-color: #009245 !important;
  color: #ffffff !important;
  width: 100%;
  border-radius: 8px !important;
  font-weight: 700;
}
body .vps-pricing .package-actions .btn:hover {
  background: #006B33 !important;
  border-color: #006B33 !important;
}

/* Inline bold values — override Lagom's block-level dark card treatment
 * that was making <b> elements display:block (stacking) and white. */
body .vps-pricing .package-features li b {
  display: inline !important;
  color: #114B5F !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  margin-right: 4px;
}

/* ── Dark mode twin — mirror /web-hosting pattern ─────────────────
 * Lagom's dark-mode cards use #202020 background + white text. We
 * inherit those values and just override specific properties that
 * we hardcoded for light mode above (white bg, navy title, etc). */
html.lagom-dark-mode body .vps-pricing .package {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
html.lagom-dark-mode body .vps-pricing .package-title {
  color: #ffffff !important;
}
html.lagom-dark-mode body .vps-pricing .package.package-featured .package-title {
  color: #009245 !important;
}
html.lagom-dark-mode body .vps-pricing .package-tagline {
  color: #c9cdd4 !important;
}
html.lagom-dark-mode body .vps-pricing .package-price .price .price-ammount {
  color: #ffffff !important;
}
html.lagom-dark-mode body .vps-pricing .package-features li {
  color: #e8e6e0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html.lagom-dark-mode body .vps-pricing .package-features li b {
  color: #ffffff !important;
}
html.lagom-dark-mode body .vps-pricing .package-features li::before {
  color: #34c974 !important;
}

/* TPC vps-addons price-list — price rows inside Additional Services tiles */
body .fix-vps-hosting-tpc-h5 .feature .addon-desc {
  margin: 0 0 14px !important;
}
body .fix-vps-hosting-tpc-h5 .feature .addon-prices {
  list-style: none !important;
  padding: 14px 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(0, 146, 69, 0.15);
}
body .fix-vps-hosting-tpc-h5 .feature .addon-prices li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0 !important;
  font-size: 13px !important;
  border-bottom: none !important;
}
body .fix-vps-hosting-tpc-h5 .feature .addon-prices li::before {
  content: none !important;
  display: none !important;
}
body .fix-vps-hosting-tpc-h5 .feature .addon-prices li .addon-tier {
  color: #6D7482;
}
body .fix-vps-hosting-tpc-h5 .feature .addon-prices li .addon-price {
  color: #009245;
  font-weight: 700;
}
html.lagom-dark-mode body .fix-vps-hosting-tpc-h5 .feature .addon-prices li .addon-tier {
  color: #c9cdd4;
}
html.lagom-dark-mode body .fix-vps-hosting-tpc-h5 .feature .addon-prices {
  border-top-color: rgba(52, 201, 116, 0.25);
}

/* TPC vps-addons description min-height — reserve space for ~3 wrapped
 * lines in every feature-desc so cross-row tile heights stay close.
 * The price-list block sits below regardless of description length. */
body .fix-vps-hosting-tpc-h5 .feature .feature-desc {
  min-height: 4.5em;
}

/* Fix green shadow clipping on product cards */
body .section-content-packages .content-slider {
  overflow: visible !important;
}
body .section-content-packages .container-slider {
  overflow: visible !important;
}
body .section-content-packages {
  padding-bottom: 20px;
}
/* ════════════════════════════════════════════════════════════════
   Package card styles (runtime-injected on dev, appended here for prod)
   ════════════════════════════════════════════════════════════════ */
.package-title {
  font-size: 18px !important;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.package .package-box ul.list { text-align: left; }
.package-more-info { display: block; margin-top: 10px; font-size: 13px; color: #1a73e8; text-decoration: none; text-align: left; }
.package-more-info:hover { text-decoration: underline; }
.package .price-starting-from { display: none; }
.section-graphic img { border-radius: 16px; }

/* PRICING CARDS */
.section-content-packages .package {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #eef0ec;
  padding: 32px 28px 28px;
  box-shadow: 0 4px 12px rgba(17, 75, 95, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.section-content-packages .package:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(17, 75, 95, 0.10);
}
.section-content-packages .package-title {
  font-family: "Roboto Slab", Georgia, serif;
  color: #114B5F;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.section-content-packages .package-features {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.section-content-packages .package-features li {
  padding: 8px 0 8px 26px;
  position: relative;
  font-size: 14px;
  color: #353535;
  border-bottom: 1px solid #f0f3ee;
}
.section-content-packages .package-features li:last-child { border-bottom: none; }
.section-content-packages .package-features li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 8px;
  color: #009245;
  font-weight: 700;
}

/* Featured (TPC Business) plan */
.section-content-packages .package.package-featured {
  border: 2px solid #009245;
  box-shadow: 0 18px 40px rgba(0, 146, 69, 0.18);
  position: relative;
}
.section-content-packages .package.package-featured::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #009245;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
}
.section-content-packages .package.package-featured .package-title {
  color: #009245;
}
.section-content-packages .package-col:has(.package-featured) .package {
  transform: translateY(-8px);
}
.section-content-packages .package-col:has(.package-featured) .package:hover {
  transform: translateY(-12px);
}