/* Look C, Lab Panels (picked 2026-11-06 as the Synergy site standard): floating square nav, each section in a big gold-cornered panel, gold footer. */
.site-head,
body:not(.has-hero) .site-head,
.site-head.is-stuck {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-nav {
  margin-top: 10px;
  width: calc(100% - 24px);
  max-width: calc(var(--max-w) + 24px);
  padding: 0 24px;
  background-color: #000;
  background-image: linear-gradient(rgba(1, 255, 65, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 255, 65, 0.2) 1px, transparent 1px), linear-gradient(rgba(1, 255, 65, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 255, 65, 0.07) 1px, transparent 1px);
  background-size: 78px 78px, 78px 78px, 13px 13px, 13px 13px;
  border: 1px solid rgba(1, 255, 65, 0.3);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.85), 0 0 34px -6px rgba(1, 255, 65, 0.45), 0 12px 30px -10px rgba(254, 200, 61, 0.5);
}
.site-nav::after {
  content: "";
  position: absolute;
  inset: var(--gi, 6px);
  pointer-events: none;
  z-index: 3;
  color: var(--gc, #fec83d);
  background:
    linear-gradient(currentColor, currentColor) left top / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) left top / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) right top / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) right top / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) left bottom / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) left bottom / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) right bottom / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) right bottom / var(--gw, 2px) var(--gl, 18px);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px var(--gg, rgba(254, 200, 61, 0.7)));
  --gi: 5px;
  --gl: 24px;
  --gw: 3px;
}
.logo-dot,
.sec--dark .card-num,
.sec--ink .card-num {
  color: #fec83d;
}
.sec--dark,
.sec--ink {
  background-color: #050505;
  background-image: radial-gradient(rgba(1, 255, 65, 0.12) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
}
.sec--light {
  background: var(--paper) var(--dots) 0 0 / 20px 20px;
}
.sec > .wrap {
  position: relative;
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(28px, 4vw, 52px);
}
.sec--dark > .wrap,
.sec--ink > .wrap {
  background-color: #000;
  background-image: linear-gradient(rgba(1, 255, 65, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 255, 65, 0.2) 1px, transparent 1px), linear-gradient(rgba(1, 255, 65, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 255, 65, 0.07) 1px, transparent 1px);
  background-size: 78px 78px, 78px 78px, 13px 13px, 13px 13px;
  border: 1px solid rgba(1, 255, 65, 0.25);
  box-shadow: 0 0 0 6px #000, 0 0 60px -12px rgba(1, 255, 65, 0.4);
}
.sec--light > .wrap,
.sec--paper > .wrap {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e6e3dc;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.6), 0 24px 60px -30px rgba(0, 0, 0, 0.35);
}
.sec > .wrap::after {
  content: "";
  position: absolute;
  inset: var(--gi, 6px);
  pointer-events: none;
  z-index: 3;
  color: var(--gc, #fec83d);
  background:
    linear-gradient(currentColor, currentColor) left top / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) left top / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) right top / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) right top / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) left bottom / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) left bottom / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) right bottom / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) right bottom / var(--gw, 2px) var(--gl, 18px);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px var(--gg, rgba(254, 200, 61, 0.7)));
  --gi: 8px;
  --gl: 34px;
  --gw: 3px;
}
.sec--light > .wrap::after,
.sec--paper > .wrap::after {
  --gc: #e0a107;
  --gg: rgba(224, 161, 7, 0.45);
}
.card,
.review,
.area,
.sb-item,
.bt-card,
.shot,
.grb-item,
.form,
.faq-row,
.why-video {
  position: relative;
  border-radius: 0;
}
.card::after,
.review::after,
.area::after,
.sb-item::after,
.bt-card::after,
.shot::after,
.grb-item::after,
.form::after,
.faq-row::after,
.why-video::after {
  content: "";
  position: absolute;
  inset: var(--gi, 6px);
  pointer-events: none;
  z-index: 3;
  color: var(--gc, #fec83d);
  background:
    linear-gradient(currentColor, currentColor) left top / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) left top / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) right top / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) right top / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) left bottom / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) left bottom / var(--gw, 2px) var(--gl, 18px),
    linear-gradient(currentColor, currentColor) right bottom / var(--gl, 18px) var(--gw, 2px),
    linear-gradient(currentColor, currentColor) right bottom / var(--gw, 2px) var(--gl, 18px);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px var(--gg, rgba(254, 200, 61, 0.7)));
  --gl: 12px;
  --gi: 4px;
}
.sec--light .card::after,
.sec--paper .card::after,
.sec--light .review::after,
.sec--paper .review::after,
.sec--light .area::after,
.sec--paper .area::after,
.sec--light .faq-row::after,
.sec--paper .faq-row::after,
.sec--light .form::after,
.sec--paper .form::after {
  --gc: #e0a107;
  --gg: rgba(224, 161, 7, 0.45);
}
.btn {
  border-radius: 0;
}

/* ---- Round 2 (2026-11-06) ---- */

/* timeline cards stay positioned by the script */
.bt-card {
  position: absolute;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(1, 255, 65, 0.04) 40%, rgba(0, 0, 0, 0.6));
  border-color: rgba(1, 255, 65, 0.3);
  box-shadow: 0 0 0 4px #000, 0 0 30px -10px rgba(1, 255, 65, 0.4);
}

/* stats: four separate square boxes with room between them */
.statbar {
  background: #050505 radial-gradient(rgba(1, 255, 65, 0.12) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
  border: 0;
}
.statbar-row {
  gap: 14px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.sb-item,
.sb-item:first-child {
  padding: 16px 20px;
  border: 1px solid rgba(1, 255, 65, 0.28);
  background-color: #000;
  background-image: linear-gradient(rgba(1, 255, 65, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 255, 65, 0.12) 1px, transparent 1px);
  background-size: 13px 13px;
  box-shadow: 0 0 0 4px #000, 0 0 24px -8px rgba(1, 255, 65, 0.4);
}
.sb-item::after {
  --gl: 14px;
  --gi: 4px;
}

/* top light: green pass, then gold pass */
.topbar::after {
  animation: tbRun 5.2s linear infinite, tbSwap 10.4s step-end infinite;
}
@keyframes tbSwap {
  0% {
    background-image: linear-gradient(90deg, transparent, #fff 44%, #01ff41 56%, transparent);
    filter: drop-shadow(0 0 4px #01ff41);
  }
  50% {
    background-image: linear-gradient(90deg, transparent, #fff6d6 44%, #fec83d 56%, transparent);
    filter: drop-shadow(0 0 4px #fec83d);
  }
}

/* build timeline: black grid panel with soft glows and big gold corners */
.bt-wrap {
  background: #050505 radial-gradient(rgba(1, 255, 65, 0.12) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
}
.bt-pin::before {
  inset: 12px;
  background-color: #000;
  background-image:
    radial-gradient(40% 45% at 12% 25%, rgba(254, 200, 61, 0.14), transparent 70%),
    radial-gradient(38% 45% at 90% 70%, rgba(1, 255, 65, 0.14), transparent 70%),
    linear-gradient(rgba(1, 255, 65, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 255, 65, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(1, 255, 65, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 255, 65, 0.07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 78px 78px, 78px 78px, 13px 13px, 13px 13px;
  border: 1px solid rgba(1, 255, 65, 0.25);
  box-shadow: 0 0 0 6px #000, 0 0 60px -12px rgba(1, 255, 65, 0.4);
}
.bt-pin::after {
  content: "";
  position: absolute;
  inset: 20px;
  pointer-events: none;
  z-index: 3;
  color: #fec83d;
  --l: 34px;
  background:
    linear-gradient(currentColor, currentColor) left top / var(--l) 3px,
    linear-gradient(currentColor, currentColor) left top / 3px var(--l),
    linear-gradient(currentColor, currentColor) right top / var(--l) 3px,
    linear-gradient(currentColor, currentColor) right top / 3px var(--l),
    linear-gradient(currentColor, currentColor) left bottom / var(--l) 3px,
    linear-gradient(currentColor, currentColor) left bottom / 3px var(--l),
    linear-gradient(currentColor, currentColor) right bottom / var(--l) 3px,
    linear-gradient(currentColor, currentColor) right bottom / 3px var(--l);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(254, 200, 61, 0.7));
}
.bt-day em {
  color: #fec83d;
}
@media (max-width: 960px) {
  .sb-item:nth-child(n) {
    border: 1px solid rgba(1, 255, 65, 0.28);
    padding: 14px 16px;
  }
}
@media (max-width: 600px) {
  .statbar-row {
    gap: 10px;
  }
  .sb-item:nth-child(n) {
    padding: 12px;
  }
}
@media (max-width: 760px) {
  .sec > .wrap {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ---- Round 3 (2026-11-06) ---- */

/* shared: a black grid panel with big gold corners, drawn behind a full-width section */
.logos,
.site-foot {
  position: relative;
  isolation: isolate;
  --px: max(10px, calc((100% - var(--max-w)) / 2));
}
.logos::before,
.site-foot::before {
  content: "";
  position: absolute;
  inset: 14px var(--px);
  z-index: -1;
  background-color: #000;
  background-image:
    radial-gradient(40% 60% at 10% 30%, rgba(254, 200, 61, 0.14), transparent 70%),
    radial-gradient(40% 60% at 90% 70%, rgba(1, 255, 65, 0.12), transparent 70%),
    linear-gradient(rgba(1, 255, 65, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 255, 65, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(1, 255, 65, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 255, 65, 0.07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 78px 78px, 78px 78px, 13px 13px, 13px 13px;
  border: 1px solid rgba(1, 255, 65, 0.28);
  box-shadow: 0 0 0 6px #000, 0 0 60px -12px rgba(1, 255, 65, 0.45);
}
.logos::after,
.site-foot::after {
  content: "";
  position: absolute;
  inset: 22px calc(var(--px) + 8px);
  pointer-events: none;
  z-index: 3;
  color: #fec83d;
  --l: 34px;
  background:
    linear-gradient(currentColor, currentColor) left top / var(--l) 3px,
    linear-gradient(currentColor, currentColor) left top / 3px var(--l),
    linear-gradient(currentColor, currentColor) right top / var(--l) 3px,
    linear-gradient(currentColor, currentColor) right top / 3px var(--l),
    linear-gradient(currentColor, currentColor) left bottom / var(--l) 3px,
    linear-gradient(currentColor, currentColor) left bottom / 3px var(--l),
    linear-gradient(currentColor, currentColor) right bottom / var(--l) 3px,
    linear-gradient(currentColor, currentColor) right bottom / 3px var(--l);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(254, 200, 61, 0.7));
}

/* brands we've worked with: front and center */
.logos {
  padding: 58px 0 54px;
  background: var(--paper) var(--dots) 0 0 / 20px 20px;
  border: 0;
}
.logos-label {
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: #fec83d;
  margin-bottom: 24px;
  text-shadow: 0 0 12px rgba(254, 200, 61, 0.35);
}
.logos-row {
  padding: 0 calc(var(--px) + 28px);
  gap: 16px 22px;
}
.logos-row a {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 22px -6px rgba(1, 255, 65, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.logos-row a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #fec83d, 0 0 26px -4px rgba(254, 200, 61, 0.6);
}

/* footer: same panel, gold touches */
.site-foot {
  background: var(--paper) var(--dots) 0 0 / 20px 20px;
  padding-top: clamp(64px, 7vw, 96px);
  padding-bottom: 14px;
}
.site-foot > .wrap {
  padding-left: max(var(--pad-x), 34px);
  padding-right: max(var(--pad-x), 34px);
}
.foot-col h3 {
  color: #fec83d;
}
.foot-social a {
  border-radius: 0;
}
.foot-bot {
  border-top-color: rgba(254, 200, 61, 0.3);
  padding-bottom: 34px;
}
@media (max-width: 760px) {
  .logos-row {
    padding: 0 28px;
  }
}
/* footer divider stays inside the panel */
.foot-bot {
  border-top: 0;
  padding-top: 0;
}
.foot-bot .wrap {
  border-top: 1px solid rgba(254, 200, 61, 0.3);
  padding-top: 22px;
}

/* ---- Round 4 (2026-11-06): footer full width, all black with the green grid ---- */
.site-foot {
  --px: 0px;
  background: #000;
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: 0;
}
.site-foot::before {
  inset: 0;
  border: 0;
  border-top: 1px solid rgba(1, 255, 65, 0.3);
  box-shadow: none;
  background-image:
    radial-gradient(35% 55% at 8% 20%, rgba(254, 200, 61, 0.1), transparent 70%),
    radial-gradient(35% 55% at 92% 80%, rgba(1, 255, 65, 0.1), transparent 70%),
    linear-gradient(rgba(1, 255, 65, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 255, 65, 0.14) 1px, transparent 1px),
    linear-gradient(rgba(1, 255, 65, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 255, 65, 0.05) 1px, transparent 1px);
}
.site-foot::after {
  inset: 14px;
}
.site-foot > .wrap {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.foot-bot {
  padding-bottom: 28px;
}
/* hidden icon sprite at the end of main left a 25px white line above the footer */
main > svg:last-child {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Footer: gold version (picked 2026-11-06) ---- */
.site-foot .logo-dot,
.foot-phone,
.foot-social a,
.foot-col a:hover,
.foot-legal a:hover {
  color: #fec83d;
}
.foot-social a {
  border-color: rgba(254, 200, 61, 0.55);
  box-shadow: 0 0 14px -4px rgba(254, 200, 61, 0.5);
}
.foot-social a:hover {
  background: #fec83d;
  color: #000;
  border-color: #fec83d;
}
.foot-phone {
  text-shadow: 0 0 14px rgba(254, 200, 61, 0.45);
}
.site-foot .logo img {
  filter: drop-shadow(0 0 6px rgba(254, 200, 61, 0.55));
}
.foot-bot .wrap {
  border-top: 1px solid #fec83d;
  box-shadow: 0 -1px 10px -2px rgba(254, 200, 61, 0.5);
}
.site-foot::before {
  border-top-color: rgba(254, 200, 61, 0.45);
}

/* Phone menu button on the black nav: white bars, the short one gold. */
@media (max-width: 1024px) {
  body .ntl::before,
  body .ntl::after,
  body .ntl .ntl-bar {
    background: #fff;
    height: 2.5px;
    border-radius: 1px;
  }
  body .ntl::before {
    width: 22px;
  }
  body .ntl .ntl-bar {
    width: 16px;
  }
  body .ntl::after {
    width: 10px;
    background: #fec83d;
  }
}

/* Services hub cards: price above the description, no gray text. */
.svc-body p {
  color: var(--ink);
  font-weight: 600;
}
.svc-body .svc-price {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.wyg-body .wyg-price {
  margin-bottom: 6px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Service pages on Look C: no gray text inside the white panels (dark panels keep their own white text). */
html[data-page^="services"] :is(.sec--light, .sec--paper) :is(.wd-lead, .wd-steps li span, .wyg-body, .faq-row p, .lede, .prose p, .prose li, .sa-empty, .sec-note, p, li, .wd-price-card > span:not(.wd-price-k)) {
  color: var(--ink);
  font-weight: 600;
}
/* Dark boxes inside light sections keep white text. */
html[data-page^="services"] :is(.sec--light, .sec--paper) .prose.answer p {
  color: var(--white);
}
/* Case study cards: room under the caption so the gold corners don't sit on the text. */
html[data-page^="services"] .shot {
  padding-bottom: 18px;
}
/* Service area pages on Look C: no gray text in the light panels (dark panels keep their white text). */
html[data-page^="service-areas"] :is(.sec--light, .sec--paper) :is(p, li, .sec-note, .sa-d, .sa-count, .wd-steps li span, .wd-price-card > span:not(.wd-price-k)) {
  color: var(--ink);
  font-weight: 600;
}
/* Industry pages on Look C: no gray text inside the white panels (dark panels keep their own white text). */
html[data-page="industries"] :is(.sec--light, .sec--paper) :is(.card-body p, .faq-row p, .sec-note, .lede) {
  color: var(--ink);
  font-weight: 600;
}
/* Case study cards: room under the caption so the gold corners don't sit on the text (same as service pages). */
html[data-page="industries"] .shot {
  padding-bottom: 18px;
}
/* Look C: no gray text on Reviews, the giveaway rules, legal pages and the HTML sitemap (2026-11-08).
   All of these sit in light panels; no dark boxes inside them. Stars (.rv-stars) keep their gold. */
html[data-page~="reviews"] :is(.sec--light, .sec--paper) :is(p, li, .rv-head div > span, .wd-price-card > span:not(.wd-price-k)) {
  color: var(--ink);
  font-weight: 600;
}
html:is([data-page~="giveaway"], [data-page~="privacy"], [data-page~="terms"], [data-page~="cookies"], [data-page~="legal"], [data-page~="accessibility"]) .legal :is(p, li, em, a > span) {
  color: var(--ink);
  font-weight: 600;
}
/* Industries hub: the dark call-to-action card keeps white text. */
html[data-page="industries"] :is(.sec--light, .sec--paper) .card--cta .card-body p {
  color: var(--white);
}
/* Home page: no gray text in the light panels; the green call-to-action card gets dark text. */
html[data-page="home"] :is(.sec--light, .sec--paper) :is(.lede, .lede strong, .why-feats li span, .sec-note, .faq-row p, .prose p, .prose li, .card:not(.card--cta) .card-body p) {
  color: var(--ink);
  font-weight: 600;
}
html[data-page="home"] .bt-cta-card p {
  color: var(--ink);
  font-weight: 600;
}
/* Home reviews: the score note and reviewer captions are dark, not gray. */
html[data-page="home"] :is(.score small, .score-n sub, .review figcaption div > span) {
  color: var(--ink);
  font-weight: 600;
}
/* Apps hub: the two light-panel prose lines are dark, not gray. */
html[data-page~="apps"] :is(.sec--light, .sec--paper) :is(.prose p, .prose li) {
  color: var(--ink);
  font-weight: 600;
}