.web-production-lp {
  color: #242721;
  background: #fffdf5;
  font-size: 1rem;
  line-height: 1.9;
}
.web-production-lp .lp-band {
  box-sizing: border-box;
  margin-block: 0;
  padding: clamp(44px, 7vw, 90px) clamp(20px, 5vw, 60px);
}
.web-production-lp .lp-inner { max-width: 52rem; margin-inline: auto; }
.web-production-lp p { max-width: 42em; }
.web-production-lp :is(h1,h2,h3) { color: inherit; line-height: 1.35; text-wrap: balance; }
.web-production-lp h1 { font-size: clamp(2.35rem, 6.4vw, 4.75rem); letter-spacing: -.045em; max-width: 12em; }
.web-production-lp h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); }
.web-production-lp h3 { font-size: 1.28rem; }
.web-production-lp .lp-hero {
  position: relative;
  isolation: isolate;
  background: #f6f1e7;
  overflow: hidden;
  padding-top: 24px;
}
.web-production-lp .lp-new { --service-icon: url("web-production/new.svg"); }
.web-production-lp .lp-renew { --service-icon: url("web-production/renew.svg"); }
.web-production-lp .lp-migrate { --service-icon: url("web-production/migrate.svg"); }
.web-production-lp .lp-care { --service-icon: url("web-production/care.svg"); }
.web-production-lp .lp-service h3 { display: flex; align-items: center; gap: 14px; }
.web-production-lp .lp-service h3::before {
  content: ""; flex: 0 0 52px; height: 52px;
  background: var(--service-icon) center / contain no-repeat;
}
.web-production-lp .lp-hero .lp-inner > p:first-child { font-size: .85rem; }
.web-production-lp .lp-hero h1 + p { font-size: clamp(1.1rem, 2.7vw, 1.55rem); font-weight: 700; }
.web-production-lp .wp-block-button__link {
  background: #242721; color: #fff; border-radius: 8px;
  font-weight: 700; padding: 14px 24px; min-height: 48px; box-sizing: border-box;
}
.web-production-lp .wp-block-button__link:hover { background: #165642; color: white; }
.web-production-lp .lp-approach { background: #cfedff; }
.web-production-lp .lp-contact { background: #ffd5df; }
.web-production-lp .lp-steps { background: #fff1b3; }
.web-production-lp .lp-service { border-top: 3px solid #21749a; padding-block: 18px; }
.web-production-lp .lp-service:nth-of-type(even) { border-color: #bd416c; }
.web-production-lp li { padding: 8px 0 8px 4px; }
.web-production-lp li::marker { color: #95412e; font-weight: 700; }
.web-production-lp .lp-steps strong { display: block; }
.web-production-lp details { border-bottom: 1px solid #acada4; padding-block: 6px; }
.web-production-lp summary { padding-block: 12px; cursor: pointer; font-weight: 700; }
.web-production-lp :focus-visible { outline: 3px solid #145343; outline-offset: 3px; }
@media (min-width: 760px) {
  .web-production-lp .lp-services .lp-inner { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 36px; }
  .web-production-lp .lp-services h2 { grid-column: 1 / -1; }
  .web-production-lp .lp-services .lp-service { margin: 0; }
  .web-production-lp .lp-hero .lp-inner {
    max-width: 70rem; display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); column-gap: clamp(24px, 4vw, 56px);
  }
  .web-production-lp .lp-hero .lp-inner > * { grid-column: 1; }
  .web-production-lp .lp-hero .lp-inner > .lp-proof { grid-column: 2; grid-row: 2 / 6; }
}
@media (min-width: 760px) {
  .web-production-lp .lp-hero h1 + p {
    word-break: auto-phrase;
    text-wrap: balance;
  }
}

.web-production-lp .lp-proof {
  position: relative; isolation: isolate; margin: 24px 0 0;
  border: 1px solid #28271f; background: #e7e4dc;
}
.lp-proof img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; }
.lp-proof .lp-proof-ink { position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .lp-scroll-print .lp-proof img:first-child { filter: grayscale(1); }
  .lp-scroll-print .lp-proof .lp-proof-ink { clip-path: inset(0 var(--proof-cut, 0%) 0 0); }
}
.web-production-lp .lp-hero h1 { font-weight: 800; }
.web-production-lp .lp-hero .wp-block-button__link { border-bottom: 4px solid #ff80a4; }
@media (max-width: 759px) {
  .web-production-lp .lp-hero h1 { font-size: clamp(2rem, 8vw, 3.5rem); }
}

/* Registration dots and a striped disc sit on the edges of the printed sheet. */
.web-production-lp .lp-hero {
  background-color: #fff5ca;
  background-image: radial-gradient(circle, #6c615448 1px, transparent 1.3px);
  background-size: 16px 16px;
}
.web-production-lp .lp-hero::before,
.web-production-lp .lp-worries::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.web-production-lp .lp-hero::before {
  top: -64px; right: -48px;
  width: clamp(115px, 18vw, 235px); aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, #ec477c 0 5px, transparent 5px 12px);
  z-index: -1;
}
.web-production-lp .lp-worries { position: relative; isolation: isolate; overflow: hidden; }
.web-production-lp .lp-worries::after {
  top: -48px; right: -36px; width: 110px; height: 110px;
  border: 14px solid #41bdeb; border-radius: 50%; z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-unprinted { filter: saturate(var(--ink-saturation, 0)); }
  .lp-scroll-print .lp-hero::before {
    transform: translateX(calc(-1 * var(--shape-shift, 0px))) rotate(var(--shape-turn, 0deg));
  }
  .lp-scroll-print .lp-worries::after {
    transform: translateY(var(--shape-shift, 0px));
  }
}

/* Keep the proof and headline in view for one pull of the page. */
.web-production-lp .lp-hero { overflow: clip; }
.web-production-lp .lp-proof::after {
  content: ""; position: absolute; inset: auto 0 -7px 7px; height: 7px;
  background: linear-gradient(90deg,#153ac4 0 40%,#ed4082 40% 75%,#ffd43b 75%);
}
@media (prefers-reduced-motion: no-preference) and (min-height: 680px) and (min-width: 760px) {
  .lp-scroll-print .lp-hero .lp-inner { position: sticky; top: 0; }
  .lp-scroll-print .lp-hero::after { content: ""; display: block; height: 310px; }
}
@media (max-width: 759px) {
  .web-production-lp .lp-hero { padding-top: 12px; }
  .web-production-lp .lp-hero .lp-inner > * + * { margin-block-start: 12px; }
  .web-production-lp .lp-proof img { max-height: 32svh; object-fit: cover; }
  .web-production-lp .lp-steps li { padding-block: 3px; }
  .web-production-lp .lp-service { padding-block: 12px; }
  .web-production-lp .lp-service p { margin-top: 6px; }
}

.lp-scroll-cue {
  margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 15px 6px 7px; border: 1px solid #242721; border-radius: 99px;
  background: #fffdf5; color: #242721;
  font-size: .8rem; line-height: 1.4; font-weight: 700; letter-spacing: .06em;
}
body > .lp-scroll-cue {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 9999; pointer-events: none; white-space: nowrap;
}
body > .lp-scroll-cue.is-past-worries { visibility: hidden; }
.lp-scroll-cue span {
  position: relative; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #242721; color: #fffdf5; font-size: 16px; line-height: 1;
}
.lp-scroll-cue span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid #242721; opacity: 0;
}
.lp-print-shape {
  position: absolute; top: -12px; right: 9px; width: 52px; height: 52px;
  pointer-events: none; background: #fb5384; border: 2px solid #242721;
  border-radius: 50% 50% 4% 50%; transform-origin: center;
  background-image: repeating-linear-gradient(45deg, transparent 0 7px, #242721 7px 9px);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-print-shape { transform: translateX(calc(-1 * var(--shape-travel, 0px))) rotate(var(--shape-rotation, 0deg)); }
  .lp-scroll-cue span { animation: lp-cue-float 2.8s ease-in-out infinite; }
  .lp-scroll-cue span::after { animation: lp-cue-ripple 2.8s ease-out infinite; }
  @keyframes lp-cue-float {
    0%, 76%, 100% { transform: translateY(0) scale(1); }
    32% { transform: translateY(-3px) scale(1.08); }
    55% { transform: translateY(1px) scale(.98); }
  }
  @keyframes lp-cue-ripple {
    0%, 30% { opacity: 0; transform: scale(.95); }
    38% { opacity: .4; }
    78%, 100% { opacity: 0; transform: scale(1.48); }
  }
}
@media (max-width: 759px) {
  .lp-unprinted { filter: none; }
  .lp-scroll-print .lp-proof .lp-proof-ink { clip-path: none; }
  body:has(.web-production-lp) { --lp-mono-band: 250px; }
  body > .lp-scroll-cue { top: calc(100% - var(--lp-mono-band)); }
  body:has(.web-production-lp)::after {
    content: ""; position: fixed; inset: auto 0 0; height: var(--lp-mono-band);
    z-index: 9998; pointer-events: none;
    -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1);
  }
}

.web-production-lp .lp-worries {
  background: #ffede3;
  background-image: radial-gradient(#d9b8ac 0.8px, transparent 0.9px);
  background-size: 12px 12px;
}
.web-production-lp .lp-worries h2 { color: #62214e; }
.lp-worries .wp-block-list {
  display: grid; gap: 8px; padding: 0; margin-inline: 0;
  list-style: none;
}
.lp-worries .wp-block-list li {
  --paper: #ffd6e4; --ink: #7a204b;
  width: fit-content; max-width: 100%; box-sizing: border-box;
  margin: 0; padding: 7px 20px 7px 14px;
  color: var(--ink); background: var(--paper);
  border-inline-start: 5px solid currentColor;
  border-radius: 0 16px 16px 0; font-weight: 700;
}
.lp-worries .wp-block-list li:nth-child(5n+2) { --paper: #ccecff; --ink: #174b79; }
.lp-worries .wp-block-list li:nth-child(5n+3) { --paper: #ffdf82; --ink: #70400a; }
.lp-worries .wp-block-list li:nth-child(5n+4) { --paper: #c9efdb; --ink: #195740; }
.lp-worries .wp-block-list li:nth-child(5n) { --paper: #eadcff; --ink: #59367c; }

.lp-discovery .wp-block-image { margin: 20px 0; }
.lp-discovery .wp-block-image img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 8px; }
.lp-discovery h2 + p { font-weight: 700; color: #62214e; }
@media (min-width: 760px) {
  .lp-discovery .lp-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: start; }
  .lp-discovery .lp-inner > * { grid-column: 1; }
  .lp-discovery .lp-inner > figure { grid-column: 2; grid-row: 1 / 5; margin: 0; align-self: center; }
}

.web-production-lp .lp-steps ol {
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px 8px;
  padding: 0; list-style: none; counter-reset: process;
}
.web-production-lp .lp-steps li {
  position: relative; padding: 0; margin: 0; counter-increment: process;
  display: grid; justify-items: center; align-content: start; gap: 10px;
  text-align: center; line-height: 1.5;
}
.lp-steps li:nth-child(1) { --icon: url("web-production/step-contact.svg"); --disc: #ff91b5; --delay: 0ms; }
.lp-steps li:nth-child(2) { --icon: url("web-production/step-listen.svg"); --disc: #76cefa; --delay: 100ms; }
.lp-steps li:nth-child(3) { --icon: url("web-production/step-quote.svg"); --disc: #ffbe58; --delay: 200ms; }
.lp-steps li:nth-child(4) { --icon: url("web-production/step-build.svg"); --disc: #9adbb2; --delay: 300ms; }
.lp-steps li:nth-child(5) { --icon: url("web-production/step-launch.svg"); --disc: #c8aafa; --delay: 400ms; }
.lp-steps li::before {
  content: ""; width: 76px; height: 76px; box-sizing: border-box;
  border: 2px solid #282820; border-radius: 50%; box-shadow: 3px 4px 0 #282820;
  background: var(--disc,#ffdf82) var(--icon,none) center / 59% no-repeat;
}
.lp-steps li::after {
  content: counter(process); position: absolute; top: -2px; left: calc(50% - 40px);
  background: #282820; color: white; border-radius: 50%; width: 22px; height: 22px;
  font: 700 13px/22px sans-serif;
}
@media (max-width: 759px) {
  .web-production-lp .lp-steps ol { grid-template-columns: 1fr; row-gap: 30px; }
  .web-production-lp .lp-steps li {
    grid-template-columns: 68px minmax(0, 1fr); align-items: center;
    justify-items: start; column-gap: 20px; text-align: left;
  }
  .lp-steps li::before { width: 68px; height: 68px; }
  .lp-steps li::after { left: -2px; text-align: center; }
  .lp-steps li:not(:last-child) strong::after {
    content: ""; position: absolute; top: calc(100% + 7px); left: 27px;
    width: 14px; height: 20px; background: #282820;
    clip-path: polygon(40% 0, 60% 0, 60% 65%, 100% 48%, 50% 100%, 0 48%, 40% 65%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-steps.is-in-view li::before { animation: lp-step-hop 3s ease-out var(--delay,0ms) infinite both; }
  @keyframes lp-step-hop {
    0%, 20%, 100% { transform: translateY(0) rotate(0); }
    7.6% { transform: translateY(-9px) rotate(-6deg); }
    14.8% { transform: translateY(1px) rotate(2deg); }
  }
}

@media (min-width: 760px) {
  .lp-steps li:not(:last-child) strong::after {
    content: ""; position: absolute; left: calc(100% + 4px); top: 38px;
    transform: translate(-50%, -50%); width: 24px; height: 14px; background: #282820;
    clip-path: polygon(0 40%, 65% 40%, 48% 0, 100% 50%, 48% 100%, 65% 60%, 0 60%);
  }
}

.web-production-lp .lp-price { color: #204d42; line-height: 1.65; }
@media (min-width: 760px) {
  .lp-proof > .lp-scroll-cue {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  }
}

.web-production-lp :is(h1, h2, h3) { color: #233db4; }
.web-production-lp :is(.lp-discovery, .lp-contact) h2 { color: #a51b59; }
.web-production-lp :is(.lp-steps, .lp-faq) h2 { color: #643698; }
.web-production-lp .lp-steps li strong { color: #643698; }

.web-production-lp :is(.lp-care-illustration, .lp-cta-illustration) {
  width: min(58%, 190px);
  margin: 1rem auto;
}
.web-production-lp :is(.lp-care-illustration, .lp-cta-illustration) img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7;
}
@media (min-width: 760px) {
  .web-production-lp :is(.lp-care-illustration, .lp-cta-illustration) {
    float: right;
    width: 32%;
    margin: 0 0 1rem 1.5rem;
  }
}