/* Neumorphic preview theme for the legacy homepage.
   Loaded only on ?theme=neu. Content and markup are untouched - this file
   only restyles surfaces.

   Hybrid on purpose: panels, cards and inputs are neumorphic (soft, same
   colour as the surface, shadow-only edges), but every call to action stays
   a solid high-contrast block. Pure neumorphism puts buttons at roughly
   1.5:1 against their background, which fails WCAG AA (3:1 for UI, 4.5:1 for
   text) and, on a page whose job is to take orders, hides the thing people
   are meant to click. */

.legacy-home.neu {
  /* Base is deliberately a few steps off white: on a near-white surface the
     white highlight has nothing to show against and the whole effect reads
     as flat. */
  --neu-bg: #e1e9e6;
  --neu-light: #ffffff;
  --neu-dark: rgba(11, 61, 46, 0.26);
  --neu-text: #0b3d2e;
  --neu-muted: #416055;        /* 5.6:1 on the base - AA */
  --neu-cta: #0e7f5c;          /* 4.9:1 against white text - AA */
  --neu-cta-hover: #0b6b4d;
  --neu-r: 22px;
  --neu-d: 12px;
  --neu-blur: 24px;
}

html.neu,
html.neu body,
.legacy-home.neu {
  background: var(--neu-bg);
  color: var(--neu-text);
}

/* Flatten every section tint to the one base colour. Neumorphism reads as
   "extruded from the surface", which only works when there is one surface. */
.legacy-home.neu section,
.legacy-home.neu .why-box-row,
.legacy-home.neu .how-work,
.legacy-home.neu .home-prices,
.legacy-home.neu .panel-group,
.legacy-home.neu .wrapper > div {
  background: var(--neu-bg) !important;
}

/* Hero: the gradient image is replaced by the flat base. A soft shadow on a
   gradient looks stuck on rather than raised. */
.legacy-home.neu .main-banner {
  background-image: none !important;
  background: var(--neu-bg) !important;
}

/* ---- raised surfaces ------------------------------------------------- */

.legacy-home.neu .why-box,
.legacy-home.neu .card,
.legacy-home.neu .how-work__steps--item,
.legacy-home.neu .item,
.legacy-home.neu .panel,
.legacy-home.neu .smm-badge,
.legacy-home.neu .home-prices table {
  background: var(--neu-bg);
  border: 0 !important;
  border-radius: var(--neu-r);
  box-shadow:
    var(--neu-d) var(--neu-d) var(--neu-blur) var(--neu-dark),
    calc(var(--neu-d) * -1) calc(var(--neu-d) * -1) var(--neu-blur) var(--neu-light);
}

.legacy-home.neu .why-box,
.legacy-home.neu .card,
.legacy-home.neu .how-work__steps--item,
.legacy-home.neu .item {
  padding: 24px 20px;
  transition: box-shadow .25s ease, transform .25s ease;
}

/* Testimonials sit in a 3-column grid of fixed-width tracks. Make each card a
   column flexbox filling its track, so every card in a row is the same height
   and the star rows line up across them instead of floating at three
   different heights. */
.legacy-home.neu .item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px;
}

.legacy-home.neu .item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.legacy-home.neu .item-info li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legacy-home.neu .item-info img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
}

.legacy-home.neu .item-info span {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--neu-text);
  line-height: 1.3;
}

.legacy-home.neu .item p {
  flex: 1 1 auto;        /* pushes the rating to the bottom of every card */
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--neu-muted);
  /* The legacy theme justifies this copy, which in a 280px column opens
     rivers and splits words. Ragged right reads better at this width. */
  text-align: left;
  /* The theme sets word-break: break-all, which chops words mid-letter
     ("discover ed", "sup port"). Words wrap at word boundaries here. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.legacy-home.neu .rating {
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legacy-home.neu .rating li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 0;
}

.legacy-home.neu .why-box:hover,
.legacy-home.neu .card:hover,
.legacy-home.neu .how-work__steps--item:hover {
  box-shadow:
    calc(var(--neu-d) + 4px) calc(var(--neu-d) + 4px) calc(var(--neu-blur) + 6px) var(--neu-dark),
    calc(var(--neu-d) * -1 - 4px) calc(var(--neu-d) * -1 - 4px) calc(var(--neu-blur) + 6px) var(--neu-light);
  transform: translateY(-2px);
}

/* Circular icon wells - pressed in rather than raised, so the icon reads as
   sitting in a dish. */
.legacy-home.neu .card__icon,
.legacy-home.neu .how-work__steps--item .num {
  background: var(--neu-bg);
  border: 0;
  border-radius: 50%;
  box-shadow:
    inset 6px 6px 12px var(--neu-dark),
    inset -6px -6px 12px var(--neu-light);
}

/* ---- FAQ accordion ---------------------------------------------------- */

.legacy-home.neu .panel {
  margin-bottom: 18px;
  overflow: hidden;
}

.legacy-home.neu .panel-heading,
.legacy-home.neu .panel-body {
  background: transparent !important;
  border: 0 !important;
}

.legacy-home.neu .panel-title > a {
  color: var(--neu-text);
  font-weight: 600;
}

/* An open panel is pressed in, which is how a neumorphic surface shows
   state without adding a colour. */
.legacy-home.neu .panel-collapse.in {
  box-shadow: inset 7px 7px 14px var(--neu-dark), inset -7px -7px 14px var(--neu-light);
  border-radius: 0 0 var(--neu-r) var(--neu-r);
}

/* ---- price table ------------------------------------------------------ */

.legacy-home.neu .home-prices table {
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.legacy-home.neu .home-prices thead tr {
  background: var(--neu-bg) !important;
  color: var(--neu-text) !important;
  box-shadow: inset 0 -4px 9px var(--neu-dark);
}

.legacy-home.neu .home-prices th,
.legacy-home.neu .home-prices td {
  border: 0 !important;
  background: transparent;
}

.legacy-home.neu .home-prices tbody tr + tr td {
  box-shadow: inset 0 1px 0 rgba(11, 61, 46, 0.10);
}

/* ---- inputs ----------------------------------------------------------- */

.legacy-home.neu input[type="text"],
.legacy-home.neu input[type="email"],
.legacy-home.neu input[type="password"],
.legacy-home.neu select,
.legacy-home.neu textarea {
  background: var(--neu-bg);
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--neu-text);
  box-shadow: inset 7px 7px 13px var(--neu-dark), inset -6px -6px 12px var(--neu-light);
}

.legacy-home.neu input:focus,
.legacy-home.neu select:focus,
.legacy-home.neu textarea:focus {
  outline: 2px solid var(--neu-cta);
  outline-offset: 2px;
}

/* ---- calls to action: deliberately NOT neumorphic --------------------- */

.legacy-home.neu .btn,
.legacy-home.neu .btn-primary,
.legacy-home.neu .button-row a {
  background: var(--neu-cta) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px;
  font-weight: 600;
  padding: 13px 26px;
  box-shadow: 7px 7px 16px var(--neu-dark), -4px -4px 10px var(--neu-light);
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}

.legacy-home.neu .btn:hover,
.legacy-home.neu .btn-primary:hover,
.legacy-home.neu .button-row a:hover {
  background: var(--neu-cta-hover) !important;
  color: #fff !important;
}

/* Pressed state: the button sinks into the surface. */
.legacy-home.neu .btn:active,
.legacy-home.neu .btn-primary:active {
  transform: translateY(1px);
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.22), inset -2px -2px 6px rgba(255, 255, 255, 0.15);
}

.legacy-home.neu .btn:focus-visible {
  outline: 3px solid var(--neu-text);
  outline-offset: 3px;
}

/* ---- typography ------------------------------------------------------- */

.legacy-home.neu .section-title,
.legacy-home.neu h1,
.legacy-home.neu h2,
.legacy-home.neu h3 {
  color: var(--neu-text);
}

.legacy-home.neu p,
.legacy-home.neu .why-box-txt,
.legacy-home.neu .txt {
  color: var(--neu-muted);
}

/* ---- footer: stays dark, shadows inverted ----------------------------- */

.legacy-home.neu .footer,
.legacy-home.neu footer {
  background: #0d3b2f !important;
}

.legacy-home.neu .footer__links a {
  color: #cfe3db;
}

/* ---- reduced motion / small screens ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .legacy-home.neu * {
    transition: none !important;
  }
}

@media (max-width: 767px) {
  .legacy-home.neu {
    --neu-d: 8px;
    --neu-blur: 16px;
    --neu-r: 18px;
  }
  .legacy-home.neu .why-box,
  .legacy-home.neu .card,
  .legacy-home.neu .how-work__steps--item,
  .legacy-home.neu .item {
    padding: 22px 18px;
  }
}

/* The theme's global word-break: break-all also chops copy in the feature
   boxes, the step cards and the FAQ answers. Same correction. */
.legacy-home.neu .why-box-txt,
.legacy-home.neu .card p,
.legacy-home.neu .how-work__steps--item p,
.legacy-home.neu .panel-body,
.legacy-home.neu .txt {
  word-break: normal;
  overflow-wrap: break-word;
  text-align: left;
}


/* ======================================================================
   Parts of the page built after this theme was first written. Each one
   arrived with its own light-surface styling, which has to be answered
   here or the page comes out half neumorphic.
   ====================================================================== */

/* ---- FAQ: one grid of cards ------------------------------------------ */

/* The accordion is a single two-column grid now. The layout is kept; only
   the surface changes. */
.legacy-home.neu .panel-group.faq-grid {
  gap: 0 20px;
}

.legacy-home.neu .panel-group .panel {
  background: var(--neu-bg) !important;
  border: 0 !important;
  border-radius: var(--neu-r);
  margin-bottom: 18px;
  box-shadow:
    var(--neu-d) var(--neu-d) var(--neu-blur) var(--neu-dark),
    calc(var(--neu-d) * -1) calc(var(--neu-d) * -1) var(--neu-blur) var(--neu-light);
}

.legacy-home.neu .panel-group .panel:hover {
  box-shadow:
    calc(var(--neu-d) + 3px) calc(var(--neu-d) + 3px) calc(var(--neu-blur) + 5px) var(--neu-dark),
    calc(var(--neu-d) * -1 - 3px) calc(var(--neu-d) * -1 - 3px) calc(var(--neu-blur) + 5px) var(--neu-light);
}

/* The default theme marks the open card with a green border. Here it sinks
   instead, which is how this surface shows state. */
.legacy-home.neu.js-accordion .panel-group .panel:has(> .panel-collapse.in) {
  box-shadow:
    inset 6px 6px 13px var(--neu-dark),
    inset -6px -6px 13px var(--neu-light);
}

.legacy-home.neu.js-accordion .panel-title > a,
.legacy-home.neu.js-accordion .panel-title > a:hover,
.legacy-home.neu.js-accordion .panel-title > a[aria-expanded="true"] {
  color: var(--neu-text);
}

.legacy-home.neu.js-accordion .panel-title > a::after {
  border-right-color: var(--neu-muted);
  border-bottom-color: var(--neu-muted);
}

.legacy-home.neu.js-accordion .panel-title > a:hover::after,
.legacy-home.neu.js-accordion .panel-title > a[aria-expanded="true"]::after {
  border-right-color: var(--neu-text);
  border-bottom-color: var(--neu-text);
}

.legacy-home.neu .panel-group .panel-body {
  color: var(--neu-muted);
}

/* The default open card carries an inset green ring on focus; on this
   surface the ring is the only edge there is, so it stays visible. */
.legacy-home.neu.js-accordion .panel-title > a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--neu-cta);
}

/* ---- testimonials ----------------------------------------------------- */

.legacy-home.neu .testimonials .item {
  background: var(--neu-bg) !important;
  border: 0 !important;
  border-radius: var(--neu-r);
  padding: 22px 20px;
}

.legacy-home.neu .testimonials .item p {
  color: var(--neu-muted);
}

.legacy-home.neu .testimonials .item-info li span {
  color: var(--neu-text);
}

/* ---- "Show more reviews" ---------------------------------------------- */

/* Not a .btn, so the call-to-action rule above does not reach it. It is a
   secondary control, so it is a raised surface rather than a solid block. */
.legacy-home.neu .more-reviews__btn {
  background: var(--neu-bg);
  border: 0;
  border-radius: 999px;
  color: var(--neu-cta);
  box-shadow: 7px 7px 15px var(--neu-dark), -5px -5px 12px var(--neu-light);
}

.legacy-home.neu .more-reviews__toggle:focus-visible + .more-reviews__btn {
  outline: 3px solid var(--neu-cta);
}

/* ---- closing call to action ------------------------------------------- */

/* The default panel is a mint slab with a border. Here it is the base
   colour, raised off the page. */
.legacy-home.neu .get-started__inner::after {
  background: var(--neu-bg) !important;
  border: 0 !important;
  border-radius: calc(var(--neu-r) + 6px);
  box-shadow:
    calc(var(--neu-d) + 4px) calc(var(--neu-d) + 4px) calc(var(--neu-blur) + 8px) var(--neu-dark),
    calc(var(--neu-d) * -1 - 4px) calc(var(--neu-d) * -1 - 4px) calc(var(--neu-blur) + 8px) var(--neu-light);
}

.legacy-home.neu .get-started__inner .section-title {
  color: var(--neu-text);
}

.legacy-home.neu .get-started__inner p {
  color: var(--neu-muted);
}

/* ---- support button --------------------------------------------------- */

/* The button itself is a call to action and keeps its colour. The two links
   behind it are surfaces, so they take the base colour. */
.legacy-home.neu .support-fab > summary {
  background: var(--neu-cta);
  box-shadow: 7px 7px 16px var(--neu-dark), -4px -4px 10px var(--neu-light);
}

.legacy-home.neu .support-fab > summary:hover {
  background: var(--neu-cta-hover);
}

.legacy-home.neu .support-fab__link {
  background: var(--neu-bg);
  color: var(--neu-text);
  box-shadow: 5px 5px 12px var(--neu-dark), -4px -4px 10px var(--neu-light);
}

.legacy-home.neu .support-fab__link:hover,
.legacy-home.neu .support-fab__link:focus {
  color: var(--neu-text);
}

/* ---- header and footer logos ------------------------------------------ */

/* The header sits on the base colour, so the dark wordmark is right. The
   footer stays dark in this theme, so the light one is still right. Nothing
   to change - noted so the next person does not go looking. */

/* The blanket p colour above is --neu-muted, which is meant for the light
   base. The footer stays dark in this theme, so that copy measured 1.8:1
   down there. Light text on the dark panel instead: 9.7:1. */
.legacy-home.neu .footer p,
.legacy-home.neu .footer li,
.legacy-home.neu .footer address,
.legacy-home.neu footer p {
  color: #d7e7e0;
}

.legacy-home.neu .footer a {
  color: #d7e7e0;
}

.legacy-home.neu .footer a:hover,
.legacy-home.neu .footer a:focus {
  color: #ffffff;
}