/*!
 * 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.
 */

/* Self-hosted Roboto Slab (variable font, weights 400/500/700/800).
 * Site markup references Roboto Slab on headings but no @font-face
 * was shipped, so on machines without it installed browsers fell back
 * to Georgia and titles rendered inconsistently across users. */
/* latin-ext 400 */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-slab/roboto-slab-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 400 */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-slab/roboto-slab-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext 500 */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-slab/roboto-slab-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 500 */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-slab/roboto-slab-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext 700 */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-slab/roboto-slab-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 700 */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-slab/roboto-slab-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext 800 */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/roboto-slab/roboto-slab-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 800 */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/roboto-slab/roboto-slab-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 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;
}

/* Banner title/subtitle: match homepage custom-hero typography.
 * Lagom defaults: title 48/800/56, subtitle 24/300/40. Homepage hero
 * reads 48/700/1.15 + 18/400/1.65. Align Lagom banners to that. */
body .banner-title, body .lc-banner-title {
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #353535 !important;
}
body .site-banner.banner-secondary .banner-title,
body .site-banner.banner-primary .banner-title,
body .site-banner.banner-secondary .lc-banner-title,
body .site-banner.banner-primary .lc-banner-title {
  color: #ffffff !important;
}
body .banner-subtitle, body .lc-banner-subtitle {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #958B85 !important;
}
body .site-banner.banner-secondary .banner-subtitle,
body .site-banner.banner-primary .banner-subtitle,
body .site-banner.banner-secondary .lc-banner-subtitle,
body .site-banner.banner-primary .lc-banner-subtitle {
  color: hsla(0, 0%, 100%, 0.9) !important;
}

/* ── 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,
.site-banner.banner.banner-type-1 .banner-graphic img,
.site-banner.banner.banner-type-2 .banner-graphic img {
  border-radius: 20px;
}
.site-banner.banner.banner-type-1 .banner-graphic,
.site-banner.banner.banner-type-2 .banner-graphic {
  overflow: hidden;
}
.site-banner.banner.banner-type-1 .banner-graphic img,
.site-banner.banner.banner-type-2 .banner-graphic img {
  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,
.lagom-dark-mode body .site-section.section-perf-proof,
.lagom-dark-mode body .site-section.section-migration,
.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;
  font-size: 13px;
}
body .fix-vps-hosting-tpc-h5 .feature .addon-prices li .addon-price {
  color: #009245;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
}
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,
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);
}

/* Security & Tools mega-menu: 3 explicit columns (Security | Services | SEO) */
@media (min-width: 992px) {
    .security-menu.dropdown-extended > .dropdown-menu {
        columns: 3;
        column-fill: auto !important;
        height: 650px;
    }
    .security-menu.dropdown-extended > .dropdown-menu > li { break-inside: avoid; }
    .security-menu.dropdown-extended > .dropdown-menu > li.nav-header ~ li.nav-header { break-before: column; }
}

/* ── .tpc-hero — shared hero class ────────────────────────────────────
 * Add custom_class="tpc-hero" to any Lagom2 banner section in the CMS
 * to get the standard TPC hero treatment. No CSS changes needed for
 * new pages — just set the class in the banner config.
 * Workspace uses .wkspc-hero__caption-pill (inline CSS) which shares
 * the pill rule via the combined selector below. */

/* Eyebrow pill */
.tpc-hero .banner-caption {
  display: inline-block !important;
  color: #80B726 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(128, 183, 38, 0.3) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  margin-bottom: 20px !important;
  background: transparent !important;
  line-height: 1.4 !important;
}

/* Background gradient */
.tpc-hero.banner-secondary {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(128, 183, 38, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(0, 146, 69, 0.14), transparent 55%),
    linear-gradient(135deg, #0B2F3E 0%, #114B5F 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Subtle grid texture overlay */
.tpc-hero.banner-secondary::before {
  content: "" !important;
  position: absolute !important;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none;
  z-index: 0;
}

/* Banner content above grid overlay */
.tpc-hero.banner-secondary .container {
  position: relative;
  z-index: 1;
}

/* Hide predefined diagonal shape SVG */
.tpc-hero .banner-shape {
  display: none !important;
}

/* H1 weight 800 */
.tpc-hero .banner-title {
  font-weight: 800 !important;
}

/* CTA buttons: match original workspace sizing (no btn-lg) */
body .tpc-hero .btn,
body .tpc-hero .lc-btn {
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
}
body .tpc-hero .btn.btn-primary,
body .tpc-hero .lc-btn.btn-primary {
  background-color: #009245 !important;
  border-color: #009245 !important;
  color: #ffffff !important;
}
body .tpc-hero .btn.btn-outline,
body .tpc-hero .btn.btn-default:not(.btn-primary),
body .tpc-hero .lc-btn.btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}


/* ── Workspace hero: lime highlight + code + bullet list ───────────────
 * These classes are used in the banner title/subtitle HTML fields.
 * Scoped to .tpc-hero so they only apply inside the hero banner. */
.tpc-hero .wkspc-hero__lime { color: #80B726; }

.tpc-hero .wkspc-hero__code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background: rgba(128, 183, 38, 0.12);
  color: #80B726;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Banner subtitle: match original workspace hero typography */
body .tpc-hero .banner-subtitle,
body .tpc-hero .lc-banner-subtitle {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
body .tpc-hero.banner-sides .banner-content .banner-subtitle {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.tpc-hero .banner-subtitle ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 24px !important;
}
.tpc-hero .banner-subtitle ul li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}
/* Remove Lagom2 auto-generated bullet/checkmark pseudo-element */
.tpc-hero .banner-subtitle ul li::before {
  content: none !important;
  display: none !important;
}
/* Banner actions: flex row with gap matching original layout */
body .tpc-hero .banner-actions,
body .tpc-hero .banner-actions-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* ── Banner two-column layout ───────────────────────────────────────────
 * The workspace page CSS has display:block !important on all .container
 * (needed for tpc-html sections). For the banner we must use higher
 * specificity (body prefix adds type selector weight) to restore flex. */
body .tpc-hero.banner-sides .container {
  display: flex !important;
  align-items: center !important;
}
body .tpc-hero.banner-sides .banner-content {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  box-sizing: border-box !important;
}
body .tpc-hero.banner-sides .banner-background {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .tpc-hero .banner-graphic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
/* Activity card: max width within its column */
body .tpc-hero .banner-graphic .wkspc-activity {
  max-width: 440px !important;
  width: 100% !important;
}

/* ── Workspace activity card ───────────────────────────────────────────
 * Moved from inline <style> on the workspace CMS page to custom.css.
 * Scoped to .wkspc-activity — only used in workspace-activity.tpl. */
.wkspc-activity {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 20px;
  max-width: 440px;
  width: 100%;
}
.wkspc-activity__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.wkspc-activity__status { display: flex; align-items: center; gap: 8px; }
.wkspc-activity__dot {
  width: 8px; height: 8px;
  background: #80B726;
  border-radius: 50%;
  animation: wksp-blink 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes wksp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.wkspc-activity__status-text { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 2px; }
.wkspc-activity__team { font-size: 11px; color: rgba(255,255,255,0.5); }
.wkspc-activity__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.wkspc-activity__item:first-child { border-top: none; }
.wkspc-activity__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.wkspc-activity__icon--green { background: rgba(0,146,69,0.2); color: #80B726; }
.wkspc-activity__icon--red   { background: rgba(208,70,70,0.2); color: #d04646; }
.wkspc-activity__icon--blue  { background: rgba(16,98,254,0.2); color: #1062FE; }
.wkspc-activity__icon--lime  { background: rgba(128,183,38,0.2); color: #80B726; }
.wkspc-activity__info { flex: 1; min-width: 0; }
.wkspc-activity__name {
  font-size: 14px; font-weight: 600; color: #fff;
  margin: 0 0 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wkspc-activity__detail { font-size: 12px; color: rgba(255,255,255,0.6); margin: 0; }
.wkspc-activity__time { font-size: 11px; color: rgba(255,255,255,0.4); white-space: nowrap; }
.wkspc-activity__footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.wkspc-activity__footer-link { color: #80B726; font-weight: 600; }


/* ════════════════════════════════════════════════════════════════════
 * /workspace page styles (consolidated from CMS section CSS fields).
 * Sections 1246-1251 have empty `css` fields in DB so admin edits
 * cannot break these styles. All scoped under .site-cms-workspace.
 * ════════════════════════════════════════════════════════════════════ */

/* PAGE-LEVEL OVERRIDES */
.site-cms-workspace .site-section{padding-top:80px;padding-bottom:80px}
.site-cms-workspace .site-section .container{display:block!important;max-width:1280px!important;width:auto!important;padding:0 20px!important;margin:0 auto!important}
.site-cms-workspace .site-section .section-title{font-size:32px;line-height:1.2;margin:0 0 12px;font-weight:800;color:#353535}
.site-cms-workspace .site-section .section-subtitle{font-size:16px;color:#7c7c7c;max-width:680px;margin:0 auto;line-height:1.55}

/* Per-section background overrides (light mode) */
.site-cms-workspace .wkspc-trust-section{padding-top:48px!important;padding-bottom:48px!important;background:#fff!important}
.site-cms-workspace .wkspc-flow-section,
.site-cms-workspace .wkspc-pricing-section{background:#fff!important}
.site-cms-workspace .wkspc-uc-section,
.site-cms-workspace .wkspc-fg-section,
.site-cms-workspace .section-faq{background:#F2F2F2!important}

/* Hero section 1246 (original tpc-html with col-md-6 markup) */
.site-cms-workspace .wkspc-hero-section{background:radial-gradient(ellipse at 20% 10%,rgba(128,183,38,.12),transparent 50%),radial-gradient(ellipse at 80% 90%,rgba(0,146,69,.14),transparent 55%),linear-gradient(135deg,#0B2F3E 0%,#114B5F 100%)!important;position:relative;overflow:hidden;padding-top:100px!important;padding-bottom:100px!important}
.site-cms-workspace .wkspc-hero-section::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}
.site-cms-workspace .wkspc-hero-section .container{position:relative;z-index:1}
.wkspc-hero__row{align-items:center}
.wkspc-hero__caption-pill{display:inline-block;color:#80B726;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;border:1px solid rgba(128,183,38,.3);border-radius:999px;padding:4px 12px;margin-bottom:20px}
.wkspc-hero__title{font-family:'Roboto Slab',Georgia,serif;font-size:48px;font-weight:800;color:#fff;line-height:1.15;margin:0 0 24px}
.wkspc-hero__subtitle{font-size:17px;color:rgba(255,255,255,.85);margin:0 0 32px;max-width:520px;line-height:1.6}
.wkspc-hero__list{list-style:none;padding:0;margin:0 0 40px}
.wkspc-hero__list-item{display:flex;align-items:flex-start;gap:12px;color:rgba(255,255,255,.9);font-size:15px;margin-bottom:12px}
.wkspc-hero__check{color:#80B726;font-size:16px;margin-top:2px;flex-shrink:0}
.wkspc-hero__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:0}
.wkspc-hero__btn--outline{border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;background:transparent!important}
.wkspc-hero__right{display:flex;align-items:center;justify-content:center}

/* Trust strip section 1247 */
.wkspc-trust{background:#fff}
.wkspc-trust__stats{text-align:center;margin-bottom:30px}
.wkspc-stat{padding:8px 4px}
.wkspc-stat__value{font-family:'Roboto Slab',Georgia,serif;font-size:36px;font-weight:700;color:#009245;line-height:1.1;margin-bottom:4px;letter-spacing:-.5px}
.wkspc-stat__label{font-size:11px;color:#7c7c7c;text-transform:uppercase;letter-spacing:.6px;margin:0;font-weight:500;line-height:1.4}
.wkspc-trust__promises{padding-top:28px;border-top:1px solid #d8e3d2}
.wkspc-promise{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:10px;height:100%}
.wkspc-promise--featured{background:rgba(128,183,38,.10)}
.wkspc-promise__icon{font-size:20px;color:#009245;margin-top:2px;flex-shrink:0}
.wkspc-promise__title{font-family:'Roboto Slab',Georgia,serif;font-size:14px;color:#353535;margin:0 0 4px;font-weight:700}
.wkspc-promise__desc{color:#7c7c7c;font-size:12px;line-height:1.55;margin:0}
@media (max-width:767px){.wkspc-stat,.wkspc-promise{margin-bottom:14px}}

/* Use cases section 1248 */
.wkspc-uc__head{text-align:center;margin-bottom:48px}
.wkspc-uc__grid{margin-top:8px}
.wkspc-uc__grid > [class*=col-]{margin-bottom:24px;display:flex}
.wkspc-uc-card{background:#fff;border-radius:12px;padding:28px;box-shadow:0 2px 8px rgba(11,47,62,.05);border-left:4px solid #009245;width:100%;transition:transform .18s ease,box-shadow .18s ease}
.wkspc-uc-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(11,47,62,.10)}
.wkspc-uc-card--green{border-left-color:#009245}
.wkspc-uc-card--lime{border-left-color:#80B726}
.wkspc-uc-card--blue{border-left-color:#1062FE}
.wkspc-uc-card--red{border-left-color:#d04646}
.wkspc-uc-card--navy{border-left-color:#114B5F}
.wkspc-uc-card__icon{font-size:28px;margin-bottom:14px}
.wkspc-uc-card--green .wkspc-uc-card__icon{color:#009245}
.wkspc-uc-card--lime .wkspc-uc-card__icon{color:#80B726}
.wkspc-uc-card--blue .wkspc-uc-card__icon{color:#1062FE}
.wkspc-uc-card--red .wkspc-uc-card__icon{color:#d04646}
.wkspc-uc-card--navy .wkspc-uc-card__icon{color:#114B5F}
.wkspc-uc-card__title{font-family:'Roboto Slab',Georgia,serif;font-size:18px;color:#353535;margin:0 0 10px;font-weight:700}
.wkspc-uc-card__desc{color:#7c7c7c;font-size:14px;line-height:1.65;margin:0}
.wkspc-uc__head .section-title,.wkspc-uc__head .section-subtitle{margin-left:auto!important;margin-right:auto!important}

/* Flow section 1249 */
.wkspc-flow__head{text-align:center;margin-bottom:48px}
.wkspc-flow__grid{margin-top:8px}
.wkspc-flow__grid > [class*=col-]{margin-bottom:32px}
.wkspc-step{text-align:center;padding:0 12px}
.wkspc-step__circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:28px;border:2px solid;background:rgba(0,146,69,.10)}
.wkspc-step--green .wkspc-step__circle{border-color:#009245;color:#009245;background:rgba(0,146,69,.10)}
.wkspc-step--lime  .wkspc-step__circle{border-color:#80B726;color:#80B726;background:rgba(128,183,38,.12)}
.wkspc-step--blue  .wkspc-step__circle{border-color:#1062FE;color:#1062FE;background:rgba(16,98,254,.10)}
.wkspc-step--navy  .wkspc-step__circle{border-color:#114B5F;color:#114B5F;background:rgba(17,75,95,.10)}
.wkspc-step__label{font-size:11px;font-weight:700;color:#7c7c7c;letter-spacing:2px;margin:0 0 6px}
.wkspc-step__title{font-family:'Roboto Slab',Georgia,serif;font-size:18px;color:#353535;margin:0 0 8px;font-weight:700}
.wkspc-step__desc{color:#7c7c7c;font-size:14px;line-height:1.6;margin:0}
.wkspc-flow__head .section-title,.wkspc-flow__head .section-subtitle{margin-left:auto!important;margin-right:auto!important}

/* Features grid section 1250 */
.wkspc-fg__head{text-align:center;margin-bottom:48px}
.wkspc-fg__group{margin-bottom:48px}
.wkspc-fg__group:last-child{margin-bottom:0}
.wkspc-fg__group-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.wkspc-fg__badge{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.wkspc-fg__badge--green{background:rgba(0,146,69,.18);color:#009245}
.wkspc-fg__badge--blue{background:rgba(16,98,254,.18);color:#1062FE}
.wkspc-fg__badge--red{background:rgba(208,70,70,.18);color:#d04646}
.wkspc-fg__group-title{font-family:'Roboto Slab',Georgia,serif;font-size:20px;color:#353535;margin:0;font-weight:700;flex-shrink:0}
.wkspc-fg__rule{flex:1;height:1px;background:#d8e3d2}
.wkspc-fg__card{background:#fff;border-radius:10px;padding:24px;box-shadow:0 1px 4px rgba(11,47,62,.05);height:100%;margin-bottom:16px;transition:transform .15s ease,box-shadow .15s ease}
.wkspc-fg__card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(11,47,62,.08)}
.wkspc-fg__card h4{font-family:'Roboto Slab',Georgia,serif;font-size:16px;color:#353535;margin:0 0 8px;font-weight:700}
.wkspc-fg__card p{color:#7c7c7c;font-size:14px;line-height:1.55;margin:0}
.wkspc-fg__head .section-title,.wkspc-fg__head .section-subtitle{margin-left:auto!important;margin-right:auto!important}

/* Pricing section 1251 */
.wkspc-pricing__intro{text-align:center;margin-bottom:36px}
.wkspc-pricing__cards{margin-top:8px}
.wkspc-card{background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:32px 28px;height:100%;position:relative;display:flex;flex-direction:column}
.wkspc-card--featured{border-top:4px solid #80B726;box-shadow:0 6px 24px rgba(11,47,62,.08)}
.wkspc-card__badge{position:absolute;top:14px;right:14px;background:#009245;color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px}
.wkspc-card__title{margin:0 0 4px;font-size:22px;color:#0B2F3E}
.wkspc-card__audience{color:#7c7c7c;font-size:13px;margin:0 0 18px}
.wkspc-card__price{margin:0;line-height:1.1}
.wkspc-card__amount{font-size:36px;font-weight:700;color:#009245}
.wkspc-card__period{font-size:14px;color:#7c7c7c;font-weight:400;margin-left:4px}
.wkspc-card__quota{color:#7c7c7c;font-size:13px;margin:6px 0 18px}
.wkspc-card__cta{display:block;text-align:center;margin:0 0 22px}
.wkspc-card__features{list-style:none;padding:0;margin:0;font-size:14px;line-height:1.85;color:#3b3b3b}
.wkspc-card__features li::before{content:"\2713";color:#009245;font-weight:700;margin-right:8px}
.wkspc-pricing__footer{text-align:center;color:#7c7c7c;font-size:14px;margin:32px 0 0}
@media (max-width:991px){.wkspc-card{margin-bottom:20px}}
.wkspc-pricing__intro .section-title,.wkspc-pricing__intro .section-subtitle{margin-left:auto!important;margin-right:auto!important}

/* DARK MODE — section backgrounds */
.lagom-dark-mode .site-cms-workspace .site-section .section-title{color:#e8e6e0!important}
.lagom-dark-mode .site-cms-workspace .site-section .section-subtitle{color:#a0a09a!important}
.lagom-dark-mode .site-cms-workspace .wkspc-trust-section,
.lagom-dark-mode .site-cms-workspace .wkspc-flow-section,
.lagom-dark-mode .site-cms-workspace .wkspc-pricing-section{background:#1f201d!important}
.lagom-dark-mode .site-cms-workspace .wkspc-uc-section,
.lagom-dark-mode .site-cms-workspace .wkspc-fg-section,
.lagom-dark-mode .site-cms-workspace .section-faq{background:#16171a!important}

/* DARK MODE — inner cards */
.lagom-dark-mode .wkspc-trust{background:#1f201d!important}
.lagom-dark-mode .wkspc-trust__stats .wkspc-stat__label{color:#a0a09a!important}
.lagom-dark-mode .wkspc-promise__title{color:#e8e6e0!important}
.lagom-dark-mode .wkspc-promise__desc{color:#a0a09a!important}
.lagom-dark-mode .wkspc-trust__promises{border-top-color:#2a2b28!important}
.lagom-dark-mode .wkspc-uc-card{background:#16171a!important;border-top-color:#2a2b28!important;border-right-color:#2a2b28!important;border-bottom-color:#2a2b28!important}
.lagom-dark-mode .wkspc-uc-card__title{color:#e8e6e0!important}
.lagom-dark-mode .wkspc-uc-card__desc{color:#a0a09a!important}
.lagom-dark-mode .wkspc-step__label{color:#e8e6e0!important}
.lagom-dark-mode .wkspc-step__desc{color:#a0a09a!important}
.lagom-dark-mode .wkspc-fg__card{background:#1f201d!important;border-color:#2a2b28!important}
.lagom-dark-mode .wkspc-fg__card-title,.lagom-dark-mode .wkspc-fg__card h3,.lagom-dark-mode .wkspc-fg__group-label{color:#e8e6e0!important}
.lagom-dark-mode .wkspc-fg__card p,.lagom-dark-mode .wkspc-fg__card-body{color:#a0a09a!important}
.lagom-dark-mode .wkspc-card{background:#1f201d!important;border-color:#2a2b28!important}
.lagom-dark-mode .wkspc-card h3,.lagom-dark-mode .wkspc-card__name,.lagom-dark-mode .wkspc-card__price{color:#e8e6e0!important}
.lagom-dark-mode .wkspc-card p,.lagom-dark-mode .wkspc-card li{color:#a0a09a!important}
.lagom-dark-mode .wkspc-card--featured{background:#114B5F!important;border-color:#114B5F!important}
.lagom-dark-mode .wkspc-card--featured *{color:#fff!important}
.lagom-dark-mode .wkspc-pricing__note{color:#a0a09a!important}

/* DARK MODE — preserve brand icon colors.
   Set BOTH color AND fill on the SVG (Lagom forces fill:white in dark mode, which overrides currentColor).
   Rules grouped by color: identical declarations share a single selector list.
   The activity__icon block lower down is folded in here per matching color. */
.lagom-dark-mode .wkspc-promise__icon,
.lagom-dark-mode .wkspc-promise__icon svg,
.lagom-dark-mode .wkspc-promise__icon path,
.lagom-dark-mode .wkspc-uc-card--green .wkspc-uc-card__icon,
.lagom-dark-mode .wkspc-uc-card--green .wkspc-uc-card__icon svg,
.lagom-dark-mode .wkspc-uc-card--green .wkspc-uc-card__icon path{color:#009245!important;fill:#009245!important}
.lagom-dark-mode .wkspc-stat__value{color:#009245!important}

.lagom-dark-mode .wkspc-uc-card--lime .wkspc-uc-card__icon,
.lagom-dark-mode .wkspc-uc-card--lime .wkspc-uc-card__icon svg,
.lagom-dark-mode .wkspc-uc-card--lime .wkspc-uc-card__icon path,
.lagom-dark-mode .wkspc-activity__icon--green,
.lagom-dark-mode .wkspc-activity__icon--green svg,
.lagom-dark-mode .wkspc-activity__icon--green path,
.lagom-dark-mode .wkspc-activity__icon--lime,
.lagom-dark-mode .wkspc-activity__icon--lime svg,
.lagom-dark-mode .wkspc-activity__icon--lime path{color:#80B726!important;fill:#80B726!important}
.lagom-dark-mode .wkspc-uc-card--blue .wkspc-uc-card__icon,
.lagom-dark-mode .wkspc-uc-card--blue .wkspc-uc-card__icon svg,
.lagom-dark-mode .wkspc-uc-card--blue .wkspc-uc-card__icon path,
.lagom-dark-mode .wkspc-activity__icon--blue,
.lagom-dark-mode .wkspc-activity__icon--blue svg,
.lagom-dark-mode .wkspc-activity__icon--blue path{color:#1062FE!important;fill:#1062FE!important}
.lagom-dark-mode .wkspc-uc-card--red .wkspc-uc-card__icon,
.lagom-dark-mode .wkspc-uc-card--red .wkspc-uc-card__icon svg,
.lagom-dark-mode .wkspc-uc-card--red .wkspc-uc-card__icon path,
.lagom-dark-mode .wkspc-activity__icon--red,
.lagom-dark-mode .wkspc-activity__icon--red svg,
.lagom-dark-mode .wkspc-activity__icon--red path{color:#d04646!important;fill:#d04646!important}
.lagom-dark-mode .wkspc-uc-card--navy .wkspc-uc-card__icon,
.lagom-dark-mode .wkspc-uc-card--navy .wkspc-uc-card__icon svg,
.lagom-dark-mode .wkspc-uc-card--navy .wkspc-uc-card__icon path{color:#3a7a93!important;fill:#3a7a93!important}

/* Preserve brand left-edge stripe (parent rule overrides border-color shorthand otherwise) */
.lagom-dark-mode .wkspc-uc-card--green{border-left-color:#009245!important}
.lagom-dark-mode .wkspc-uc-card--lime {border-left-color:#80B726!important}
.lagom-dark-mode .wkspc-uc-card--blue {border-left-color:#1062FE!important}
.lagom-dark-mode .wkspc-uc-card--red  {border-left-color:#d04646!important}
.lagom-dark-mode .wkspc-uc-card--navy {border-left-color:#3a7a93!important}

.lagom-dark-mode .wkspc-step--green .wkspc-step__circle,
.lagom-dark-mode .wkspc-step--green .wkspc-step__circle svg,
.lagom-dark-mode .wkspc-step--green .wkspc-step__circle path{border-color:#009245!important;color:#009245!important;fill:#009245!important;background:rgba(0,146,69,.10)!important}
.lagom-dark-mode .wkspc-step--lime .wkspc-step__circle,
.lagom-dark-mode .wkspc-step--lime .wkspc-step__circle svg,
.lagom-dark-mode .wkspc-step--lime .wkspc-step__circle path{border-color:#80B726!important;color:#80B726!important;fill:#80B726!important;background:rgba(128,183,38,.12)!important}
.lagom-dark-mode .wkspc-step--blue .wkspc-step__circle,
.lagom-dark-mode .wkspc-step--blue .wkspc-step__circle svg,
.lagom-dark-mode .wkspc-step--blue .wkspc-step__circle path{border-color:#1062FE!important;color:#1062FE!important;fill:#1062FE!important;background:rgba(16,98,254,.10)!important}
.lagom-dark-mode .wkspc-step--navy .wkspc-step__circle,
.lagom-dark-mode .wkspc-step--navy .wkspc-step__circle svg,
.lagom-dark-mode .wkspc-step--navy .wkspc-step__circle path{border-color:#3a7a93!important;color:#3a7a93!important;fill:#3a7a93!important;background:rgba(58,122,147,.15)!important}

.lagom-dark-mode .wkspc-fg__badge--green,
.lagom-dark-mode .wkspc-fg__badge--green svg,
.lagom-dark-mode .wkspc-fg__badge--green path{background:rgba(0,146,69,.18)!important;color:#009245!important;fill:#009245!important}
.lagom-dark-mode .wkspc-fg__badge--blue,
.lagom-dark-mode .wkspc-fg__badge--blue svg,
.lagom-dark-mode .wkspc-fg__badge--blue path{background:rgba(16,98,254,.18)!important;color:#1062FE!important;fill:#1062FE!important}
.lagom-dark-mode .wkspc-fg__badge--red,
.lagom-dark-mode .wkspc-fg__badge--red svg,
.lagom-dark-mode .wkspc-fg__badge--red path{background:rgba(208,70,70,.18)!important;color:#d04646!important;fill:#d04646!important}

/* 1.7 CLS fix (2026-05-05): reserve .banner-graphic-background space on banners that
   lazy-load animation CSS via in-body <link> tag. Without this, animation CSS arrives
   late and applies display:flex/sizing rules that shift the page (n8n-hosting CLS 0.52,
   reseller-hosting 0.44). Pre-allocating min-height keeps the layout stable. */
.banner-custom-graphic-overlap .banner-graphic-background[data-animation-css] {
    min-height: 280px;
    contain: layout;
}
@media (min-width: 768px) {
    .banner-custom-graphic-overlap .banner-graphic-background[data-animation-css] {
        min-height: 480px;
    }
}

/* 1.8 hero photo fit (2026-05-05): tpc-hero photos are exported at 1200x896 (4:3) but
   the .banner-graphic container is 640x480 (also 4:3) with overflow:hidden. The CSS sets
   img to its natural width/height + objectFit:fill, so users see only the centre 640x480
   of the source — bottom 208px (table/foreground) gets cropped off.
   Source and container aspects nearly match (1.339 vs 1.333), so object-fit:cover scales
   the whole image into the container with negligible (~3px) edge crop.
   Affects: /web-hosting, /managed-wordpress-hosting (both .tpc-hero). */
.tpc-hero .banner-graphic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* ─── BEGIN: VPS redesign 2026-05-12 (tpc-feature-section) ─── */
/* TPC shared brand pattern — feature-cards section.
 *
 * 2-column layout (text + 2x2 card grid) bolted onto prod's stock .site-section.
 * Hook the parent with .tpc-feature-cards. Cards come in two variants:
 *   - .tfc-photo  : 16:9 image full-bleed at the top, then body
 *   - .tfc-icon-wrap + .tfc-icon-badge : SVG icon chip, then body
 *
 * Typography (eyebrow, H2, subtitle, ghost button) inherits from prod's
 * .section-caption / .section-title / .section-subtitle / .btn.btn-default.
 * Background variant comes from prod's .section-default / .section-gray /
 * .section-secondary on the same parent.
 *
 * Currently used on /vps-hosting. Intended to be reused on other product
 * deep-dive pages — do NOT add page-specific selectors here.
 */

/* ── 2-column text + cards layout (hook on .tpc-feature-cards) ── */
.tpc-feature-cards .tfc-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: center;
}
.tpc-feature-cards .tfc-text { min-width: 0; text-align: left; }
/* Left-align text + button — overrides prod's centered defaults on
 * .section-caption / .section-title / .section-subtitle / .section-actions
 * and any margin:auto on the .btn itself. */
.tpc-feature-cards .tfc-text .section-caption,
.tpc-feature-cards .tfc-text .section-title,
.tpc-feature-cards .tfc-text .section-subtitle,
.tpc-feature-cards .tfc-text .section-actions {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}
.tpc-feature-cards .tfc-text .section-actions .btn {
  margin-left: 0 !important;
  margin-right: auto !important;
  float: none !important;
}
.tpc-feature-cards .section-subtitle { max-width: 56ch; margin-bottom: 28px; }

/* ── Card grid 2x2 ── */
.tpc-feature-cards .tfc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tpc-feature-cards .tfc-card {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Card surface — light bg variants */
.tpc-feature-cards.section-default .tfc-card,
.tpc-feature-cards.section-gray .tfc-card {
  background: #fff;
  border: 1px solid #e8f0e9;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
/* Card surface — dark bg variant (navy) */
.tpc-feature-cards.section-secondary .tfc-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(199,227,210,0.18);
}

/* Card body */
.tpc-feature-cards .tfc-card-body {
  padding: 18px 20px 22px;
}
.tpc-feature-cards .tfc-card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.3;
}
.tpc-feature-cards .tfc-card-sub {
  font-size: 13px;
  line-height: 1.45;
}

/* Card body colors per bg */
.tpc-feature-cards.section-default .tfc-card-title,
.tpc-feature-cards.section-gray .tfc-card-title { color: #1a2b35; }
.tpc-feature-cards.section-default .tfc-card-sub,
.tpc-feature-cards.section-gray .tfc-card-sub   { color: #5a6b75; }
.tpc-feature-cards.section-secondary .tfc-card-title { color: #fff; }
.tpc-feature-cards.section-secondary .tfc-card-sub   { color: rgba(255,255,255,0.66); }

/* ── Photo card variant ── */
.tpc-feature-cards .tfc-photo {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: #0a1a22;
}
.tpc-feature-cards .tfc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Icon chip variant ── */
.tpc-feature-cards .tfc-icon-wrap {
  padding: 22px 20px 0;
}
.tpc-feature-cards .tfc-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tpc-feature-cards .tfc-icon-badge svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icon badge colour per bg */
.tpc-feature-cards.section-default .tfc-icon-badge,
.tpc-feature-cards.section-gray .tfc-icon-badge {
  background: #e8f0e9;
}
.tpc-feature-cards.section-default .tfc-icon-badge svg,
.tpc-feature-cards.section-gray .tfc-icon-badge svg {
  stroke: #0B6E3E;
}
.tpc-feature-cards.section-secondary .tfc-icon-badge {
  background: rgba(199,227,210,0.14);
}
.tpc-feature-cards.section-secondary .tfc-icon-badge svg {
  stroke: #C7E3D2;
}
/* Chip card body has slightly tighter top padding */
.tpc-feature-cards .tfc-card .tfc-icon-wrap + .tfc-card-body {
  padding-top: 14px;
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .tpc-feature-cards .tfc-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 540px) {
  .tpc-feature-cards .tfc-cards {
    grid-template-columns: 1fr;
  }
}
/* ─── END: VPS redesign 2026-05-12 ─── */

/* ─── Checkout payment-method logos (2026-05-17, hardened 2026-05-18) ──────
 * Lagom2 stock CSS sets .check-icon to max-width:70px with width:100% on its
 * <img>/<svg> child and no height cap, which makes wide wordmarks render
 * tall and small/raster gateway PNGs render upscaled and pixelated. It also
 * force-inverts every <img> via `filter: brightness(0) invert(1)` (intended
 * for dark mode only), which would crush brand colours in light mode.
 *
 * This block forces every gateway logo on the order-form payment radio row
 * into a fixed-aspect box that scales each SVG/PNG proportionally via
 * object-fit:contain. `!important` is used because Lagom2 ships duplicate
 * stock rules with the same specificity as ours (#paymentGatewaysContainer
 * .check-icon ...) and source-order alone is not reliable when CDN caches
 * serve stale custom.css.
 */
body #paymentGatewaysContainer .check-icon,
.panel.panel-check .check-icon {
  width: 130px !important;
  max-width: 130px !important;
  min-width: 130px !important;
  height: 40px !important;
  flex: 0 0 130px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body #paymentGatewaysContainer .check-icon img,
body #paymentGatewaysContainer .check-icon svg,
.panel.panel-check .check-icon img,
.panel.panel-check .check-icon svg {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
body:not(.lagom-dark-mode) #paymentGatewaysContainer .check-icon img,
body:not(.lagom-dark-mode) #paymentGatewaysContainer .check-icon .svg-icon,
body:not(.lagom-dark-mode) .panel.panel-check .check-icon img,
body:not(.lagom-dark-mode) .panel.panel-check .check-icon .svg-icon {
  filter: none !important;
}
/* ─── END: Checkout payment-method logos ─── */

/* ─── Selected gateway + inline form share one visual block (2026-05-18) ──
 * After the JS in overwrites/form-payment-gateway.tpl moves
 * #paymentCardFormDiv to sit directly after the selected .panel.panel-
 * check, this block visually merges the two: form picks up the same
 * --panel-active-bg + --panel-active-border-color as the .checked row,
 * the selected row loses its bottom rounding so it flows into the form,
 * and the form gets the bottom rounding instead.
 *
 * Also hides the form wrapper when nothing is in it (non-CC gateways
 * that need no input — Bank Transfer / CoinGate / Binance / etc).
 */
/* Shared "merged block" bg + border — both halves use the SAME values
 * so the outline reads as one rectangle and the fill is one flat colour.
 * Background is --panel-active-bg darkened ~12% so the selected block
 * stands out clearly against the page. Border is 2px so the outline is
 * actually visible (stock --panel-active-border-color was too faint at
 * 1px against the cream background). */
#paymentGatewaysContainer .panel.panel-check.checked + #paymentCardFormDiv,
#paymentGatewaysContainer .panel.panel-check.checked:has(+ #paymentCardFormDiv) {
  background: color-mix(in srgb, var(--panel-active-bg) 88%, #000) !important;
  border: 2px solid var(--panel-active-border-color) !important;
}
/* Form wrapper: rounded bottom only, no top (merges into row above) */
#paymentGatewaysContainer .panel.panel-check.checked + #paymentCardFormDiv {
  border-top: 0 !important;
  border-bottom-left-radius: var(--panel-border-radius) !important;
  border-bottom-right-radius: var(--panel-border-radius) !important;
  margin-top: -2px;
  padding: 16px 20px;
  position: relative;
  z-index: 8;
}
/* Selected row: rounded top only, no bottom (merges into form below) */
#paymentGatewaysContainer .panel.panel-check.checked:has(+ #paymentCardFormDiv) {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* Hide #creditCardInputFields whenever the selected gateway radio
 * isn't a CC type. The Smarty template only adds .is-credit-card to
 * CC-type radios; if none is currently checked, no CC form is needed.
 * Lagom2's stock JS doesn't always re-add .hidden when switching from
 * a CC gateway to a non-CC one (e.g. Stripe → PayPal), so we hide it
 * deterministically here based on which radio is checked. */
#paymentGatewaysContainer:not(:has(input.payment-methods.is-credit-card:checked)) #creditCardInputFields {
  display: none !important;
}
/* Hide the wrapper entirely when nothing inside it is going to show.
 * Two cases:
 *   1. Stock case: #paymentGatewayInput empty AND #creditCardInputFields
 *      has .hidden class (handled by stock Lagom JS for some gateways).
 *   2. Our case: non-CC gateway checked AND #paymentGatewayInput empty
 *      (combine the CSS hide-rule above with empty gateway input). */
#paymentCardFormDiv:has(#paymentGatewayInput:empty):has(#creditCardInputFields.hidden),
#paymentGatewaysContainer:not(:has(input.payment-methods.is-credit-card:checked)) #paymentCardFormDiv:has(#paymentGatewayInput:empty) {
  display: none !important;
}
/* Strip every inner element's own background and border so the wrapper's
 * --panel-active-bg shows through as one solid colour.
 * .panel-form ships with background:var(--ui-block-bg-form) which is
 * what was making the form area a different shade from the row above. */
#paymentCardFormDiv,
#paymentCardFormDiv .section,
#paymentCardFormDiv .section-heading,
#paymentCardFormDiv .section-body,
#paymentCardFormDiv .panel,
#paymentCardFormDiv .panel-form,
#paymentCardFormDiv .panel-body,
#paymentCardFormDiv .cc-input-container {
  background: transparent !important;
  border: 0 !important;
}
#paymentCardFormDiv > .section + .section {
  margin-top: 12px;
}
/* ─── END: Selected gateway + inline form merge ─── */

/* ===== TPC SUPPORT REDESIGN — append start (deploy_to_prod.py) ===== */
/* ============================================================================
 * TPC Support page redesign — additions
 * Brand reference: brand/BRAND.md + docs/brand.md
 * Reuses: .banner-*, .section-*, .btn-*, .tpc-feature-cards (VPS redesign), Bootstrap grid
 * Audit (Task 2.1) at c:/tmp/support-redesign-staging-backup-20260523/css-audit.txt
 * Palette: navy #114B5F, cream #fefefc, paper #f4f5f1, sage #e8f0e9,
 *          green #009245 / #0B6E3E, lime #80B726
 * ============================================================================ */

/* --- 1. Hero scope --- moved inline into custom-support-hero.tpl
   (self-contained scoped CSS, mirrors VPS hero pattern, prevents
   Lagom's section-secondary cascade from overriding chip/link colors).
   See: templates/lagom2/core/cms/sections/config/custom-support-hero/ */

/* --- 2. Pulse dot (used by trust + status sections only; hero owns .sh-dot) --- */
.tpc-dot,
.tpc-pulse-dot {
  display: inline-block; width: 8px; height: 8px;
  background: #009245; border-radius: 50%;
}
.tpc-pulse-dot { animation: tpcPulse 2s ease-in-out infinite; }
@keyframes tpcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,146,69,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(0,146,69,0); }
}

/* --- 3. Trust strip --- */
.tpc-support-trust {
  padding: 32px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
  background: #fefefc;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(17,75,95,0.14);
  background: #fff; border-radius: 999px;
  font: 500 13px/1.4 'Montserrat', sans-serif;
  color: #1a2226;
}

/* --- 4. Intent cards (chip + arrow inside existing .tpc-feature-cards) --- */
.tpc-intent-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(0,146,69,0.10); color: #0B6E3E;
  font-size: 22px; margin-bottom: 16px;
}
.tpc-intent-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  font: 600 14px/1 'Montserrat', sans-serif;
  color: #009245; text-decoration: none;
  transition: color 0.15s;
}
.tpc-intent-cta:hover { color: #007a3a; text-decoration: none; }

/* --- 5. Ticket form --- */
.tpc-support-ticket { padding: 80px 0; background: #fefefc; }
.tpc-support-ticket__bullets { list-style: none; padding: 0; margin: 24px 0 0 0; }
.tpc-support-ticket__bullets li {
  padding-left: 28px; position: relative; margin-bottom: 12px;
  font: 400 14px/1.5 'Montserrat', sans-serif;
  color: rgba(26,34,38,0.85);
}
.tpc-support-ticket__bullets li::before {
  content: "\2713"; position: absolute; left: 0;
  color: #009245; font-weight: 700;
}
.tpc-support-ticket__customer {
  margin-top: 32px; padding: 20px;
  background: #e8f0e9; border: 1px solid #C7E3D2; border-radius: 8px;
  font: 400 14px/1.5 'Montserrat', sans-serif;
}
.tpc-support-ticket__customer strong { display: block; margin-bottom: 6px; color: #114B5F; }
.tpc-support-ticket__customer a { color: #009245; font-weight: 600; text-decoration: none; }
.tpc-support-ticket__form {
  background: #fff; border-radius: 16px; padding: 32px;
  box-shadow: 0 14px 36px -16px rgba(11,47,62,0.18);
}
.tpc-support-ticket__form-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
  font: 700 11px/1 'Montserrat', sans-serif;
  text-transform: uppercase; letter-spacing: 2px; color: #5a6770;
}
.tpc-support-ticket__form-meta strong { color: #114B5F; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row > label { display: block; }
.form-row > .form-row__full { grid-column: 1 / -1; }
.form-label {
  display: block;
  font: 700 11px/1 'Montserrat', sans-serif;
  text-transform: uppercase; letter-spacing: 2px;
  color: #5a6770; margin-bottom: 6px;
}
.tpc-support-ticket__form input,
.tpc-support-ticket__form select,
.tpc-support-ticket__form textarea {
  width: 100%; padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(17,75,95,0.15); border-radius: 8px;
  font: 400 14px/1.5 'Montserrat', sans-serif; color: #1a2226;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tpc-support-ticket__form input:focus,
.tpc-support-ticket__form select:focus,
.tpc-support-ticket__form textarea:focus {
  outline: none; border-color: #009245;
  box-shadow: 0 0 0 3px rgba(0,146,69,0.16);
}
.tpc-support-ticket__form textarea { resize: vertical; min-height: 120px; }
.tpc-support-ticket__dropzone {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 16px;
  border: 1px dashed rgba(17,75,95,0.20); border-radius: 8px;
  cursor: pointer; color: #5a6770; font-size: 14px;
  transition: background 0.15s;
}
.tpc-support-ticket__dropzone:hover { background: #f4f5f1; }
.tpc-support-ticket__dropzone input[type="file"] { display: none; }
.tpc-hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; }
.tpc-support-ticket__submit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 24px;
}
.tpc-fineprint { max-width: 360px; font-size: 12px; color: #5a6770; margin: 0; }
.tpc-fineprint a { color: #114B5F; text-decoration: underline; }
.tpc-form-error { color: #c0392b; font-size: 14px; margin-top: 12px; }
.tpc-form-hint { color: #5a6770; }
.tpc-support-ticket__success { text-align: center; padding: 40px 20px; }
.tpc-success-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 20px;
  background: #009245; color: #fff; border-radius: 50%;
  font-size: 28px; font-weight: 700;
}
.tpc-support-ticket__success a,
.tpc-support-ticket__success button { margin: 0 6px; }

/* --- 6. KB section --- */
.tpc-support-kb { padding: 80px 0; background: #e8f0e9; }
.tpc-kb-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 600px; margin: 24px auto 0;
  padding: 6px 6px 6px 18px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 4px 16px -8px rgba(11,47,62,0.15);
}
.tpc-kb-search input {
  flex: 1; border: 0; outline: 0; padding: 12px 0;
  font: 400 14px/1.5 'Montserrat', sans-serif;
  color: #1a2226; background: transparent;
}
.tpc-kb-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 24px;
}
.tpc-kb-chip {
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(17,75,95,0.10); border-radius: 8px;
  font: 500 13px/1 'Montserrat', sans-serif;
  color: #1a2226; text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.tpc-kb-chip:hover {
  background: #fff; border-color: rgba(0,146,69,0.50);
  transform: translateY(-1px); color: #114B5F; text-decoration: none;
}

/* --- 7. Channel grid --- */
.tpc-support-channels {
  background: #fff; max-width: 900px; margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 4px 16px -8px rgba(11,47,62,0.15);
  overflow: hidden;
}
.tpc-channel-row {
  display: grid; grid-template-columns: 48px 1fr 2fr auto;
  align-items: center; gap: 20px;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(17,75,95,0.08);
  transition: background 0.15s;
}
.tpc-channel-row:last-child { border-bottom: 0; }
.tpc-channel-row:hover { background: rgba(254,254,252,0.6); }
.tpc-channel-icon { font-size: 22px; }
.tpc-channel-name { font: 700 16px/1.3 'Roboto Slab', serif; color: #114B5F; }
.tpc-channel-detail { font: 400 14px/1.5 'Montserrat', sans-serif; color: rgba(26,34,38,0.75); }
.tpc-channel-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 14px/1 'Montserrat', sans-serif;
  color: #009245; text-decoration: none;
}
.tpc-channel-cta:hover { color: #007a3a; text-decoration: none; }
.tpc-channel-row--customer { background: #114B5F; color: #fff; }
.tpc-channel-row--customer .tpc-channel-icon,
.tpc-channel-row--customer .tpc-channel-name { color: #fff; }
.tpc-channel-row--customer .tpc-channel-detail { color: rgba(255,255,255,0.80); }
.tpc-channel-row--customer .tpc-channel-cta { color: #80B726; }
.tpc-channel-row--customer .tpc-channel-cta:hover { color: #fff; }
.tpc-channel-row--customer:hover { background: #114B5F; }

/* --- 8. Status banner --- */
.tpc-support-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 900px; margin: 24px auto;
  padding: 20px 28px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 4px 16px -8px rgba(11,47,62,0.15);
}
.tpc-support-status__left { display: flex; align-items: center; gap: 16px; }
.tpc-support-status__left strong {
  display: block; font: 700 16px/1.3 'Roboto Slab', serif; color: #114B5F;
}
.tpc-support-status__caption {
  display: block; font: 400 13px/1.4 'Montserrat', sans-serif;
  color: #5a6770; margin-top: 2px;
}
.tpc-support-status__link {
  font: 600 14px/1 'Montserrat', sans-serif;
  color: #009245; text-decoration: none;
}
.tpc-support-status__link:hover { color: #007a3a; text-decoration: none; }

/* --- 9. Final CTA ---
 * Selectors use `.site-section.tpc-support-final-cta` + !important to beat
 * Lagom's default `.site-section.section-default { background: #fff }` cascade.
 * This section has no per-section inline <style> block, unlike the other 6
 * tpc-html sections, so the CSS must self-defend specificity here. */
.site-section.tpc-support-final-cta {
  padding: 80px 0 !important;
  background: linear-gradient(135deg, #0B2F3E 0%, #114B5F 100%) !important;
  color: #fff; position: relative; overflow: hidden;
}
.site-section.tpc-support-final-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none;
}
.site-section.tpc-support-final-cta > .container { position: relative; z-index: 1; }
.site-section.tpc-support-final-cta .banner-caption { color: #80B726 !important; }
.site-section.tpc-support-final-cta .banner-title { color: #fff !important; }
.site-section.tpc-support-final-cta .banner-subtitle { color: rgba(255,255,255,0.85) !important; }
.site-section.tpc-support-final-cta .btn { margin: 4px 4px 4px 0; }
/* "Chat with us now" (.btn-primary) keeps the green brand color. */
/* "Open a ticket" (.btn-default.btn-outline) — Lagom's default uses dark
 * border + dark text, which goes invisible on the navy gradient. Override
 * to white-on-transparent so the outline is readable on the dark section. */
.site-section.tpc-support-final-cta .btn.btn-default,
.site-section.tpc-support-final-cta .btn.btn-default.btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  color: #fff !important;
}
.site-section.tpc-support-final-cta .btn.btn-default svg,
.site-section.tpc-support-final-cta .btn.btn-default.btn-outline svg {
  stroke: #fff !important;
}
.site-section.tpc-support-final-cta .btn.btn-default:hover,
.site-section.tpc-support-final-cta .btn.btn-default.btn-outline:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
}
.site-section.tpc-support-final-cta .tpc-support-final-cta__footer {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.site-section.tpc-support-final-cta .tpc-support-final-cta__footer > div {
  color: rgba(255,255,255,0.85) !important;
  font: 400 13px/1.5 'Montserrat', sans-serif;
}
.site-section.tpc-support-final-cta .footer-cell-label {
  display: block; font: 700 11px/1 'Montserrat', sans-serif;
  text-transform: uppercase; letter-spacing: 2px;
  color: #80B726 !important; margin-bottom: 8px;
}

/* --- 10. Responsive (max-width: 768px) --- */
@media (max-width: 768px) {
  .tpc-support-hero__copy,
  .tpc-support-hero__media { width: 100%; }
  .trust-pill { font-size: 12px; padding: 6px 12px; }
  .form-row { grid-template-columns: 1fr; }
  .tpc-channel-row {
    grid-template-columns: 36px 1fr auto;
    gap: 12px; padding: 16px 20px;
  }
  .tpc-channel-detail { display: none; }
  .tpc-support-final-cta__footer {
    grid-template-columns: repeat(2, 1fr); gap: 20px;
  }
}

/* ============================================================================
 * --- 11. Dark mode overrides (.lagom-dark-mode on <html>) ---
 *
 * Reuses the TPC dark palette established in the existing custom.css block:
 *   body dark   #161616
 *   surface     #202020
 *   nested      #1a1a1a
 *   border      rgba(255,255,255, .08-.15)
 *   body text   #e6e8ea
 *   muted text  rgba(255,255,255, .55-.65)
 *
 * Hero + Final CTA + Customer row in channels already render dark by design
 * (navy gradient / hardcoded white text) and need no overrides.
 *
 * All rules carry !important to beat Lagom's lagom-cms.css and our own
 * unprefixed light-mode rules above. Specificity also bumped via
 * `html.lagom-dark-mode body` so we beat any inline-style rules from the
 * per-section TPLs.
 * ============================================================================ */

/* --- Trust strip --- */
html.lagom-dark-mode body .site-section.tpc-support-trust { background: #161616 !important; }
html.lagom-dark-mode body .trust-pill {
  background: #202020 !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e6e8ea !important;
}

/* --- Intent cards (.tpc-feature-cards reuse — inline-styled section bg) --- */
html.lagom-dark-mode body .site-section.tpc-feature-cards { background: #161616 !important; }
html.lagom-dark-mode body .tpc-feature-cards .tfc-title { color: #fff !important; }
html.lagom-dark-mode body .tpc-feature-cards .tfc-sub { color: rgba(255,255,255,0.70) !important; }
html.lagom-dark-mode body .tpc-feature-cards.section-default .tfc-card {
  background: #202020 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.40) !important;
}
html.lagom-dark-mode body .tpc-feature-cards.section-default .tfc-card:hover {
  border-color: rgba(0,146,69,0.50) !important;
}
html.lagom-dark-mode body .tpc-feature-cards.section-default .tfc-card-title { color: #fff !important; }
html.lagom-dark-mode body .tpc-feature-cards.section-default .tfc-card-sub { color: rgba(255,255,255,0.70) !important; }
html.lagom-dark-mode body .tpc-intent-icon {
  background: rgba(0,146,69,0.18) !important;
  color: #80B726 !important;
}

/* --- Ticket form section --- */
html.lagom-dark-mode body .site-section.tpc-support-ticket { background: #161616 !important; }
html.lagom-dark-mode body .tpc-support-ticket .section-title { color: #fff !important; }
html.lagom-dark-mode body .tpc-support-ticket .section-caption { color: #80B726 !important; }
html.lagom-dark-mode body .tpc-support-ticket .section-subtitle { color: rgba(255,255,255,0.75) !important; }
html.lagom-dark-mode body .tpc-support-ticket__bullets li { color: rgba(255,255,255,0.75) !important; }
html.lagom-dark-mode body .tpc-support-ticket__customer {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.75) !important;
}
html.lagom-dark-mode body .tpc-support-ticket__customer strong { color: #fff !important; }
html.lagom-dark-mode body .tpc-support-ticket__customer a { color: #80B726 !important; }
html.lagom-dark-mode body .tpc-support-ticket__form {
  background: #202020 !important;
  box-shadow: 0 14px 36px -16px rgba(0,0,0,0.60) !important;
}
html.lagom-dark-mode body .tpc-support-ticket__form-meta { color: rgba(255,255,255,0.60) !important; }
html.lagom-dark-mode body .tpc-support-ticket__form-meta strong { color: #fff !important; }
html.lagom-dark-mode body .form-label { color: rgba(255,255,255,0.60) !important; }
html.lagom-dark-mode body .tpc-support-ticket__form input,
html.lagom-dark-mode body .tpc-support-ticket__form select,
html.lagom-dark-mode body .tpc-support-ticket__form textarea {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #e6e8ea !important;
}
html.lagom-dark-mode body .tpc-support-ticket__form input::placeholder,
html.lagom-dark-mode body .tpc-support-ticket__form textarea::placeholder {
  color: rgba(255,255,255,0.35) !important;
}
html.lagom-dark-mode body .tpc-support-ticket__form input:focus,
html.lagom-dark-mode body .tpc-support-ticket__form select:focus,
html.lagom-dark-mode body .tpc-support-ticket__form textarea:focus {
  border-color: #009245 !important;
  box-shadow: 0 0 0 3px rgba(0,146,69,0.24) !important;
}
html.lagom-dark-mode body .tpc-support-ticket__dropzone {
  border-color: rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.60) !important;
}
html.lagom-dark-mode body .tpc-support-ticket__dropzone:hover {
  background: rgba(255,255,255,0.04) !important;
}
html.lagom-dark-mode body .tpc-fineprint { color: rgba(255,255,255,0.55) !important; }
html.lagom-dark-mode body .tpc-fineprint a { color: #e6e8ea !important; }
html.lagom-dark-mode body .tpc-form-hint { color: rgba(255,255,255,0.55) !important; }

/* --- KB section --- */
html.lagom-dark-mode body .site-section.tpc-support-kb { background: #202020 !important; }
html.lagom-dark-mode body .tpc-support-kb .section-title,
html.lagom-dark-mode body .tpc-support-kb h2,
html.lagom-dark-mode body .tpc-support-kb h3 { color: #fff !important; }
html.lagom-dark-mode body .tpc-support-kb .section-caption { color: #80B726 !important; }
html.lagom-dark-mode body .tpc-support-kb .section-subtitle { color: rgba(255,255,255,0.70) !important; }
html.lagom-dark-mode body .tpc-kb-search {
  background: #1a1a1a !important;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.60) !important;
}
html.lagom-dark-mode body .tpc-kb-search input { color: #e6e8ea !important; background: transparent !important; }
html.lagom-dark-mode body .tpc-kb-search input::placeholder { color: rgba(255,255,255,0.35) !important; }
html.lagom-dark-mode body .tpc-kb-chip {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.85) !important;
}
html.lagom-dark-mode body .tpc-kb-chip:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(0,146,69,0.50) !important;
  color: #fff !important;
}

/* --- Channels card --- */
html.lagom-dark-mode body .tpc-support-channels {
  background: #202020 !important;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.60) !important;
}
html.lagom-dark-mode body .tpc-channel-row {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html.lagom-dark-mode body .tpc-channel-row:hover { background: rgba(255,255,255,0.04) !important; }
html.lagom-dark-mode body .tpc-channel-name { color: #fff !important; }
html.lagom-dark-mode body .tpc-channel-detail { color: rgba(255,255,255,0.65) !important; }
/* .tpc-channel-row--customer keeps navy bg + white text — works in both modes */

/* --- Status strip --- */
html.lagom-dark-mode body .tpc-support-status {
  background: #202020 !important;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.60) !important;
}
html.lagom-dark-mode body .tpc-support-status__left strong { color: #fff !important; }
html.lagom-dark-mode body .tpc-support-status__caption { color: rgba(255,255,255,0.60) !important; }

/* --- FAQ — bg flip is already handled by the global
 *     `.lagom-dark-mode body .site-section.section-faq.section-default` rule in
 *     the main custom.css. Question/answer text inherits Lagom dark-mode vars. ---
 */

/* --- Final CTA — already navy gradient, all text already white-on-dark. --- */


/* ============================================================================
 * --- 11b. Dark mode — short class names (match section_html inline <style>) ---
 *
 * The per-section HTML files (channels.html, kb.html, status.html) carry their
 * own scoped <style> blocks using SHORTER class prefixes (.ch-*, .kb-*,
 * .tpc-status-*) than the support-additions.css rules above. Those inline
 * styles win on cascade order, so we need the SAME selectors here with
 * !important to flip them in dark mode.
 * ============================================================================ */

/* --- KB section (short names: .kb-form / .kb-chip / .kb-title / .kb-sub etc.) --- */
html.lagom-dark-mode body .tpc-support-kb .kb-eyebrow { color: #80B726 !important; }
html.lagom-dark-mode body .tpc-support-kb .kb-title { color: #fff !important; }
html.lagom-dark-mode body .tpc-support-kb .kb-sub { color: rgba(255,255,255,0.70) !important; }
html.lagom-dark-mode body .tpc-support-kb .kb-popular-label { color: rgba(255,255,255,0.55) !important; }
html.lagom-dark-mode body .tpc-support-kb .kb-form {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.50) !important;
}
html.lagom-dark-mode body .tpc-support-kb .kb-form-icon { color: #80B726 !important; }
html.lagom-dark-mode body .tpc-support-kb .kb-form input[type="search"] {
  color: #e6e8ea !important;
  background: transparent !important;
}
html.lagom-dark-mode body .tpc-support-kb .kb-form input::placeholder {
  color: rgba(255,255,255,0.40) !important;
}
html.lagom-dark-mode body .tpc-support-kb .kb-chip {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.85) !important;
}
html.lagom-dark-mode body .tpc-support-kb .kb-chip:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(0,146,69,0.50) !important;
  color: #fff !important;
}
/* .kb-search-btn keeps the green brand color — already readable on dark */

/* --- Channels section (short names: .ch-card / .ch-row / .ch-name etc.) --- */
html.lagom-dark-mode body .tpc-support-channels .ch-eyebrow { color: #80B726 !important; }
html.lagom-dark-mode body .tpc-support-channels .ch-title { color: #fff !important; }
html.lagom-dark-mode body .tpc-support-channels .ch-card {
  background: #202020 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 12px -4px rgba(0,0,0,0.50) !important;
}
html.lagom-dark-mode body .tpc-support-channels .ch-row {
  border-top-color: rgba(255,255,255,0.08) !important;
}
html.lagom-dark-mode body .tpc-support-channels .ch-row:hover {
  background: rgba(255,255,255,0.04) !important;
}
html.lagom-dark-mode body .tpc-support-channels .ch-name { color: #fff !important; }
html.lagom-dark-mode body .tpc-support-channels .ch-detail {
  color: rgba(255,255,255,0.65) !important;
}
/* .ch-icon + .ch-cta keep their green brand colors — already readable on dark */
/* .ch-row--customer keeps navy + white text — works in both modes */

/* --- Status strip (short names: .tpc-status-row / .tpc-status-left / etc.) --- */
html.lagom-dark-mode body .site-section.tpc-support-status {
  background: #161616 !important;
}
html.lagom-dark-mode body .tpc-support-status .tpc-status-left {
  color: rgba(255,255,255,0.85) !important;
}
html.lagom-dark-mode body .tpc-support-status .tpc-status-caption {
  color: rgba(255,255,255,0.55) !important;
}
html.lagom-dark-mode body .tpc-support-status .tpc-status-link {
  color: #80B726 !important;
}
html.lagom-dark-mode body .tpc-support-status .tpc-status-link:hover {
  color: #fff !important;
}

/* --- Trust strip (already covered via .trust-pill above, scope tightens cascade) --- */
html.lagom-dark-mode body .tpc-support-trust .trust-pill {
  background: #202020 !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e6e8ea !important;
}
/* ===== TPC SUPPORT REDESIGN — append end ===== */


/* TPC: hide CSS-overlay 30 DAYS badge on managed-wordpress-hosting money-back section (in-photo badge is used instead) */
body .site-cms-managed-wordpress-hosting .section-money-back .section-graphic-container::after,
body .site-cms-managed-wordpress-hosting .section-money-back .section-graphic-container::before,
body .site-cms-managed-wordpress-hosting .section-money-back .section-graphic::after,
body .site-cms-managed-wordpress-hosting .section-money-back .section-graphic::before,
body .site-cms-demanaged-wordpress-hosting .section-money-back .section-graphic-container::after,
body .site-cms-demanaged-wordpress-hosting .section-money-back .section-graphic-container::before,
body .site-cms-demanaged-wordpress-hosting .section-money-back .section-graphic::after,
body .site-cms-demanaged-wordpress-hosting .section-money-back .section-graphic::before,
body .site-cms-romanaged-wordpress-hosting .section-money-back .section-graphic-container::after,
body .site-cms-romanaged-wordpress-hosting .section-money-back .section-graphic-container::before,
body .site-cms-romanaged-wordpress-hosting .section-money-back .section-graphic::after,
body .site-cms-romanaged-wordpress-hosting .section-money-back .section-graphic::before,
body .site-cms-deverwaltetes-wordpress-hosting .section-money-back .section-graphic-container::after,
body .site-cms-deverwaltetes-wordpress-hosting .section-money-back .section-graphic-container::before,
body .site-cms-deverwaltetes-wordpress-hosting .section-money-back .section-graphic::after,
body .site-cms-deverwaltetes-wordpress-hosting .section-money-back .section-graphic::before,
body .site-cms-rogazduire-wordpress-administrata .section-money-back .section-graphic-container::after,
body .site-cms-rogazduire-wordpress-administrata .section-money-back .section-graphic-container::before,
body .site-cms-rogazduire-wordpress-administrata .section-money-back .section-graphic::after,
body .site-cms-rogazduire-wordpress-administrata .section-money-back .section-graphic::before {
  display: none !important;
  background: none !important;
  content: none !important;
}